> For the complete documentation index, see [llms.txt](https://note.niefee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://note.niefee.com/summary-1/12/2015-nian-12-yue-28-ri.md).

# 2015年12月28日

## bootstrap

### 标题

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

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

*效果如下*

![](/files/-LjTbBqO3CA21P6d6R_9)

### 文本

* 强调内容

`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）

*效果如下*

![](/files/-LjTbBqSzIkws-o0qNm1)

* 文本对齐风格
  * .text-left：左对齐
  * .text-center：居中对齐
  * .text-right：右对齐
  * .text-justify：两端对齐
* 列表

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

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

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

```markup
/*源码查看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`给定义列表实现水平显示效果。

```markup
/*源码请查看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）：

![](/files/-LjTbBqWxfUBY_W9pU6s)

\
&#x20;当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态: ![](/files/-LjTbBqYAZgWnsfgnhxg)

* 代码风格
* `<code>`：一般是针对于单个单词或单个句子的代码
* `<pre>`：一般是针对于多行代码（也就是成块的代码）
* `<kbd>`:一般是表示用户要通过键盘输入的内容

![](/files/-LjTbBq_x2vei8xTbdJe)

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

```markup
/*源码请查看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>`提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

![](/files/-LjTbBqb3qajTC0rVqbN)

* 表单

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

![](/files/-LjTbBqdF-rfxPQ_voRz)

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

![](/files/-LjTbBqikQVeOOXTH968)

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

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

![](/files/-LjTbBqkUQyQbFYMVZVY)

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

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

![](/files/-LjTbBqmTzvJlm69lujO)

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

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

![](/files/-LjTbBqoLCrj92c7kHg0)

**复选框与单选框**

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

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

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

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

* 按钮

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

* input\[type=“submit”]
* input\[type=“button”]
* input\[type=“reset”]
* < button>

![](/files/-LjTbBqqsXZCcNJeEMF0)