2015年12月28日

bootstrap

标题

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<!-- 也可以写成下面的效果  -->
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>

<h1>Bootstrap标题一<small>我是副标题</small></h1>

效果如下

文本

• 强调内容

b和<strong>标签加粗; <em>和<i>斜体显示;

<b>和<i> 仅用来使文本呈现粗体和斜体，区别其它文本，不会产生任何语义的变化。 <em>是句意强调，加与不加会引起语义变化。<strong>是重要性强调，和局部还是全局无关，局部强调用<strong>也可以，<strong>强调的是重要性，不会改变句意。

• 强调内容的类

Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

• .text-muted：提示，使用浅灰色（#999）

• .text-primary：主要，使用蓝色（#428bca）

• .text-success：成功，使用浅绿色(#3c763d)

• .text-info：通知信息，使用浅蓝色（#31708f）

• .text-warning：警告，使用黄色（#8a6d3b）

• .text-danger：危险，使用褐色（#a94442）

效果如下

• 文本对齐风格

  • .text-left：左对齐

  • .text-center：居中对齐

  • .text-right：右对齐

  • .text-justify：两端对齐

• 列表

通过给无序列表添加一个类名.list-unstyled,这样就可以去除默认的列表样式的风格。

 /*源码请查看bootstrap.css文件*/
.list-unstyled {
padding-left: 0;
list-style: none;
}

通过添加类名.list-inline来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

/*源码查看bootstrap.css*/
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名.dl-horizontal给定义列表实现水平显示效果。

/*源码请查看bootstrap.css*/

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

宽屏下的效果（屏幕大于768px）：

当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态:

• 代码风格

• <code>：一般是针对于单个单词或单个句子的代码

• <pre>：一般是针对于多行代码（也就是成块的代码）

• <kbd>:一般是表示用户要通过键盘输入的内容

类名.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

/*源码请查看bootstrap.css*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

• 表格 Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

  • .table：基础表格

  • .table-striped：斑马线表格

  • .table-bordered：带边框的表格

  • .table-hover：鼠标悬停高亮的表格

  • .table-condensed：紧凑型表格

  • .table-responsive：响应式表格,当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

• 表单

在<form>元素是使用类名“form-horizontal”。

在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名form-inline。

为了让控件在各种表单风格中样式不出错，需要添加类名form-control。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

多行选择设置multiple属性的值为multiple。

<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名form-control类名，则无需设置cols属性。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

复选框与单选框

1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为.checkbox的容器内 3、radio连同label标签放置在一个名为.radio的容器内

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
</div>

1、如果checkbox需要水平排列，只需要在label标签上添加类名checkbox-inline

2、如果radio需要水平排列，只需要在label标签上添加类名radio-inline

• 按钮

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

• input[type=“submit”]

• input[type=“button”]

• input[type=“reset”]

• < button>