# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://note.niefee.com/summary-1/12/2015-nian-12-yue-28-ri.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.