api地址：https://v3.bootcss.com/css/#forms
栅格参数：
bootstrap 其实 是把 网页等 分为 了 12分，bootstrap把 根据屏 幕 大小 把屏 幕分 为了 4个层 级，小于 768 像 素的 为超小屏 幕，大于 等于 768 像素的 为小屏 幕，大于 等于992像素的为中等屏幕，大于等于1200像素的则为大屏幕，相应的类前缀见图或查看官方文档。
栅格：
超小屏幕 手机 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-
大屏幕 大桌面显示器 (≥1200px) .col-lg-
排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<p>...</p>
中心内容
通过添加 .lead 类可以让段落突出显示。
<p class="lead">...</p>
内联文本元素
Marked text
You can use the mark tag to <mark>highlight</mark> text.
被删除的文本
对于被删除的文本使用 <del> 标签。
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
对于没用的文本使用 <s> 标签。
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
额外插入的文本使用 <ins> 标签。
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
为文本添加下划线，使用 <u> 标签。
<u>This line of text will render as underlined</u>
小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
<small>This line of text is meant to be treated as fine print.</small>着重
通过增加 font-weight 值强调一段文本。
<strong>rendered as bold text</strong>
斜体
用斜体强调一段文本。
<em>rendered as italicized text</em>
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
基本缩略语
<abbr title="attribute">attr</abbr>
首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
列表
无序列表
排列顺序无关紧要的一列元素。
<ul> <li>...</li> </ul>
有序列表
顺序至关重要的一组元素。
<ol> <li>...</li> </ol>
内联列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline"> <li>...</li> </ul>
描述
带有描述的短语列表。
<dl> <dt>...</dt> <dd>...</dd> </dl>
水平排列的描述
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
overflow:
text-overflow: ellipsis;
代码
内联代码
通过 <code> 标签包裹内联样式的代码片段。
For example, <code><section></code> should be wrapped as inline.
用户输入
通过 <kbd> 标签标记用户通过键盘输入的内容。
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
变量
通过 <var> 标签标记变量。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
表格
基本实例
<table class="table"> ... </table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped"> ... </table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> ... </table>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
<table class="table table-hover"> ... </table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed"> ... </table>
状态类
通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>api地址：https://v3.bootcss.com/css/#forms
几个单个的例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- <div class=""> --><!-- col-md-4是左浮动，清除浮动加overflow:hidden就可以了 --> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <!-- <th scope="row">1</th> --> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <!-- </div> --> <!-- 表格，面板，栅格 --> <!-- <div> --> <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6> <!-- </div> --> <div>测试一下浮动结束</div> <div> <a class="btn btn-default" style="outline: none;" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> <!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button> <p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p> </div> <div> <div class="center-block" style="background-color: #eee; 1200px;"> 左右居中 </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
水平风格表单：标签在左，控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
内联表单：控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select：<select multiple class="form-control"> 选择多个
textarea： <textarea class="form-control" rows="3"></textarea>
radio，checkbox：div包着label包着input
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
radio，checkbox：水平排列
div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input
禁用控件：在控件上添加disabled属性
<input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon
表单提示信息：
在form-group容器后加一个span，添加类名.help-block
button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button样式
.btn
.btn-default
大小：
.btn-lg
.btn-sm
.btn-xs
块状按钮：按钮充满整个容器，没有padding和margin .btn-block
禁用按钮：添加类.disabled 或者添加属性disabled=“disabled”