引导程序

基础 CSS

使用可扩展类进行样式化和增强的基本 HTML 元素。

排版

标题

所有 HTML 标题都可用<h1>。<h6>

h1。标题 1

h2。标题 2

h3。标题 3

h4。标题 4

h5。标题 5
h6. 标题 6

正文副本

Bootstrap 的全局默认font-size值为14px，aline-height为20px。这适用于<body>所有段落。此外，<p>（段落）的下边距为其行高的一半（默认为 10px）。

Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Nullam id dolor id nibh ultricies 车辆。

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Donec ullamcorper nulla non metus auctor fringilla。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Donec ullamcorper nulla non metus auctor fringilla。

Maecenas sed diam eget risus varius blandit sat amet non magna。Donec id elit non mi porta gravida 在 eget metus。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。

<p> ... </p>

铅正文副本

通过添加使段落脱颖而出.lead。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

<p类= “铅” > ... </p>

用更少的东西建造

印刷比例基于variables.less :@baseFontSize和@baseLineHeight. 第一个是始终使用的基本字体大小，第二个是基本行高。我们使用这些变量和一些简单的数学来创建我们所有类型的边距、填充和行高等等。自定义它们，Bootstrap 会适应。

强调

使用带有轻量级样式的 HTML 的默认强调标记。

<small>

为了不强调行内或文本块，请使用小标签。

这行文本应被视为精美印刷品。

<p> <small>这行文本被视为精美印刷品。</小> </p>

大胆的

用于强调具有较重字体粗细的文本片段。

以下文本片段呈现为粗体文本。

<strong>呈现为粗体文本</strong>

斜体

用于强调带有斜体的文本片段。

以下文本片段呈现为斜体文本。

<em>呈现为斜体文本</em>

小心！随意使用<b>和<i>在 HTML5 中。<b>旨在突出单词或短语而不传达额外的重要性，而<i>主要用于语音、技术术语等。

对齐类

使用文本对齐类轻松将文本重新对齐到组件。

左对齐文本。

居中对齐的文本。

右对齐文本。

  1. <p class = "text-left" >左对齐文本。</p> 
  2. <p class = "text-center" >居中对齐的文本。</p> 
  3. <p class = "text-right" >右对齐文本。</p>

重点班

使用少数强调实用程序类通过颜色传达意义。

Fusce dapibus，tellus ac cursus commodo，tortor mauris nibh。

Etiam porta sem malesuada magna mollis euismod。

Donec ullamcorper nulla non metus auctor fringilla。

Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis。

Duis mollis, est non commodo luctus, nisi erat porttitor ligula。

  1. <p class = "muted" > Fusce dapibus，tellus ac cursus commodo，tortor mauris nibh。</p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod。</p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla。</p> 
  4. <p class = "text-info" > Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis。</p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula。</p>

缩写

<abbr>用于缩写和首字母缩略词的 HTML 元素的风格化实现，以在悬停时显示扩展版本。带有属性的缩写title有一个浅点的底部边框和一个悬停时的帮助光标，在悬停时提供额外的上下文。

<abbr>

对于缩写长悬停时的扩展文本，请包含该title属性。

单词属性的缩写是attr。

<abbr title = "属性" > attr </abbr>

<abbr class="initialism">

添加.initialism一个略小的字体大小的缩写。

HTML是自切片面包以来最好的东西。

<abbr title = "超文本标记语言" class = "initialism" > HTML </abbr>

地址

提供最近的祖先或整个工作的联系信息。

<address>

通过以 . 结尾的所有行来保留格式<br>。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 电话
： (123) 456-7890
全名
[email protected] 
  1. <地址>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   福尔瑟姆大街 795 号，套房 600 <br>
  4.   加利福尼亚州旧金山 94107 <br>
  5.   <abbr title = "电话" > P: </abbr> (123) 456-7890 
  6. </地址>
  7.  
  8. <地址>
  9.   <strong>全名</strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </地址>

块引用

用于引用文档中其他来源的内容块。

默认块引用

环绕<blockquote>任何HTML作为引用。对于直接报价，我们建议使用<p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

  1. <块引用>
  2.   <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer pouere 表示赌注。</p>
  3. </blockquote>

块引用选项

标准块引用的简单变化的样式和内容更改。

命名源

添加<small>标签以识别来源。将源作品的名称包装在<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人 
  1. <块引用>
  2.   <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer pouere 表示赌注。</p>
  3.   <small>名人<cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

备用显示器

用于.pull-right浮动的右对齐块引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

列表

无序

顺序无关紧要的项目列表。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

已订购

顺序确实很重要的项目列表。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 马萨的整数 molestie lorem
  4. pretium nisl aliquet 的促进作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

无样式

删除list-style列表项的默认值和左侧填充（仅限直接子项）。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
  1. <ul类= “无样式” > 
  2.   <li> ... </li>
  3. </ul>

排队

将所有列表项放在一行上，inline-block并带有一些浅色填充。

  • Lorem ipsum
  • 菜豆
  • Nulla volutpat
  1. <ul类= “内联” > 
  2.   <li> ... </li>
  3. </ul>

描述

术语列表及其相关描述。

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
马勒苏达门
Etiam porta sem malesuada magna mollis euismod。 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

横向描述

使术语和描述<dl>并排排列。

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
马勒苏达门
Etiam porta sem malesuada magna mollis euismod。
Felis euismod semper eget lacinia
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。 
  1. <dl类= "dl-水平" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

小心！水平描述列表将截断太长而无法放入左列修复的术语text-overflow。在较窄的视口中，它们将更改为默认的堆叠布局。

代码

排队

用 .包裹内联代码片段<code>。

例如， <section>应包装为内联。 
  1. 例如< code > & lt ; section & gt ;</ code >应该被包装成内联。

基本块

用于<pre>多行代码。请务必转义代码中的任何尖括号以进行正确渲染。

<p>此处为示例文本...</p>
  1. <上一页>
  2.   <p>此处为示例文本...</p>
  3. </pre>

小心！确保标签内的<pre>代码尽可能靠近左边；它将呈现所有选项卡。

您可以选择添加.pre-scrollable将最大高度设置为 350px 并提供 y 轴滚动条的类。

表

默认样式

对于基本样式（浅色填充和仅水平分隔线），将基类添加.table到任何<table>.

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
  1. <表类= “表” > 
  2.   …
  3. </table>

选修课

将以下任何类添加到.table基类。

.table-striped

<tbody>通过CSS 选择器将斑马条纹添加到任何表格行:nth-child（在 IE7-8 中不可用）。

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

为表格添加边框和圆角。

# 名 姓 用户名
1 标记 奥托 @mdo
标记 奥托 @getbootstrap
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

在<tbody>.

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

通过将单元格填充减半，使表格更紧凑。

# 名 姓 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

可选行类

使用上下文类为表格行着色。

班级 描述
.success 表示成功或积极的行动。
.error 表示危险或潜在的负面行为。
.warning 表示可能需要注意的警告。
.info 用作默认样式的替代品。
# 产品 已付款 地位
1 结核病 - 每月 2012 年 1 月 4 日 得到正式认可的
2 结核病 - 每月 2012 年 2 月 4 日 拒绝
3 结核病 - 每月 2012 年 3 月 4 日 待办的
4 结核病 - 每月 2012 年 4 月 4 日 打电话确认 
  1. ...
  2.   < tr类= “成功” >
  3.     <td> 1 < /td>
  4.     <td>TB - 每月</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>批准</ td >
  7.   </ tr >
  8. ...

支持的表格标记

支持的表格 HTML 元素列表以及应如何使用它们。

标签 描述
<table> 用于以表格格式显示数据的包装元素
<thead> <tr>表格标题行 ( ) 用于标记表格列的容器元素
<tbody> <tr>表格主体中表格行 ( ) 的容器元素
<tr> 出现在单行上的一组表格单元格 (<td>或)的容器元素<th>
<td> 默认表格单元格
<th> 列（或行，取决于范围和位置）标签的特殊表格单元格
<caption> 表格内容的描述或摘要，对屏幕阅读器特别有用 
  1. <表格>
  2.   <标题> ... </标题>
  3.   <头>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

形式

默认样式

单个表单控件接收样式，但没有任何必需的基类<form>或标记的较大更改。在表单控件顶部产生堆叠的左对齐标签。

传奇 此处的示例块级帮助文本。 
  1. <表格>
  2.   <字段集>
  3.     <legend>图例</legend>
  4.     <label>标签名称</label>
  5.     <input type = "text" placeholder = "Type something..." >  
  6.     <span class = "help-block" >此处的示例块级帮助文本。</span> 
  7.     <标签类= “复选框” > 
  8.       <输入类型= “复选框” >检查我 
  9.     </标签>
  10.     <button type = "submit" class = "btn" >提交</button>  
  11.   </fieldset>
  12. </form>

可选布局

Bootstrap 包含三个用于常见用例的可选表单布局。

搜索表格

添加.form-search到表单和添加.search-query到<input>一个额外的圆形文本输入。

  1. <表单类= “表单搜索” > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" >搜索</button>  
  4. </form>

内联表格

添加.form-inline左对齐标签和内联块控件以实现紧凑布局。

  1. <form class = "form-inline" > 
  2.   <输入类型= “文本”类= “输入小”占位符= “电子邮件” >   
  3.   <输入类型= “密码”类= “输入小”占位符= “密码” >   
  4.   <标签类= “复选框” > 
  5.     <input type = "checkbox" >记住我 
  6.   </标签>
  7.   <button type = "submit" class = "btn" >登录</button>  
  8. </form>

水平形式

右对齐标签并将它们浮动到左侧，使它们与控件显示在同一行。需要对默认表单进行最多的标记更改：

  • 添加.form-horizontal到表单
  • 包装标签和控件.control-group
  • 添加.control-label到标签
  • 包装任何相关的控件.controls以正确对齐
  1. <form class = "form-horizo​​ntal" > 
  2.   <div类= “控制组” > 
  3.     <label class = "control-label" for = "inputEmail" >电子邮件</label>  
  4.     <div类= "控件" > 
  5.       <输入类型= “文本” ID = “输入电子邮件”占位符= “电子邮件” >   
  6.     </div>
  7.   </div>
  8.   <div类= “控制组” > 
  9.     <label class = "control-label" for = "inputPassword" >密码</label>  
  10.     <div类= "控件" > 
  11.       <输入类型= “密码” id = “输入密码”占位符= “密码” >   
  12.     </div>
  13.   </div>
  14.   <div类= “控制组” > 
  15.     <div类= "控件" > 
  16.       <标签类= “复选框” > 
  17.         <input type = "checkbox" >记住我 
  18.       </标签>
  19.       <button type = "submit" class = "btn" >登录</button>  
  20.     </div>
  21.   </div>
  22. </form>

支持的表单控件

示例表单布局中支持的标准表单控件示例。

输入

最常见的表单控件，基于文本的输入字段。包括对所有 HTML5 类型的支持：文本、密码、日期时间、本地日期时间、日期、月份、时间、星期、数字、电子邮件、网址、搜索、电话和颜色。

type需要始终使用指定的。

  1. <输入类型= “文本”占位符= “文本输入” >

文本区域

支持多行文本的表单控件。根据需要更改rows属性。

  1. <textarea rows = "3" ></textarea>

复选框和收音机

复选框用于在列表中选择一个或多个选项，而单选框用于从多个选项中选择一个。

默认（堆叠）


  1. <标签类= “复选框” > 
  2.   <输入类型= “复选框”值= “” >  
  3.   选项一是这样那样——一定要包括为什么它很棒
  4. </标签>
  5.  
  6. <标签类= “收音机” > 
  7.   <输入类型= “收音机”名称= “optionsRadios” id = “optionsRadios1”值= “option1”检查>     
  8.   选项一是这样那样——一定要包括为什么它很棒
  9. </标签>
  10. <标签类= “收音机” > 
  11.   <输入类型= “收音机”名称= “optionsRadios” id = “optionsRadios2”值= “option2” >    
  12.   选项二可以是别的东西，选择它会取消选择选项一
  13. </标签>

内联复选框

将.inline类添加到一系列复选框或单选中，以使控件出现在同一行。

  1. <label class = "复选框内联" > 
  2.   <输入类型= “复选框” id = “inlineCheckbox1”值= “选项1” > 1   
  3. </标签>
  4. <label class = "复选框内联" > 
  5.   <输入类型= “复选框” id = “inlineCheckbox2”值= “选项 2” > 2   
  6. </标签>
  7. <label class = "复选框内联" > 
  8.   <输入类型= “复选框” id = “inlineCheckbox3”值= “选项3 ” > 3   
  9. </标签>

选择

使用默认选项或指定 amultiple="multiple"一次显示多个选项。


  1. <选择>
  2.   <选项> 1 </选项>
  3.   <选项> 2 </选项>
  4.   <选项> 3 </选项>
  5.   <选项> 4 </选项>
  6.   <选项> 5 </选项>
  7. </选择>
  8.  
  9. <选择多个= “多个” > 
  10.   <选项> 1 </选项>
  11.   <选项> 2 </选项>
  12.   <选项> 3 </选项>
  13.   <选项> 4 </选项>
  14.   <选项> 5 </选项>
  15. </选择>

扩展表单控件

除了现有的浏览器控件之外，Bootstrap 还包括其他有用的表单组件。

前置和附加输入

在任何基于文本的输入之前或之后添加文本或按钮。请注意，select此处不支持元素。

默认选项

使用两个类之一包装 an.add-on和 aninput以将文本添加到输入中。

@

.00 
  1. <div类= “输入前置” > 
  2.   <span class = "附加组件" > @ </span> 
  3.   <输入类= “span2” id = “prependedInput ”类型= “文本”占位符= “用户名” >    
  4. </div>
  5. <div类= “输入附加” > 
  6.   <输入类= “span2” id = “附加输入”类型= “文本” >   
  7.   <span class = "附加" > .00 </span> 
  8. </div>

结合

使用两个类和两个实例.add-on来前置和附加输入。

$ .00 
  1. <div class = "输入-前置输入-追加" > 
  2.   <span class = "附加组件" > $ </span> 
  3.   <输入类= “span2” id = “appendedPrependedInput ”类型= “文本” >   
  4.   <span class = "附加" > .00 </span> 
  5. </div>

按钮而不是文本

代替<span>带有文本的 a ，使用 a.btn将一个（或两个）按钮附加到输入。

  1. <div类= “输入附加” > 
  2.   <输入类= “span2” id = “附加输入按钮”类型= “文本” >   
  3.   <button class = "btn" type = "button" >开始！</按钮>  
  4. </div>
  1. <div类= “输入附加” > 
  2.   <输入类= “span2” id = “附加输入按钮”类型= “文本” >   
  3.   <button class = "btn" type = "button" >搜索</button>  
  4.   <button class = "btn" type = "button" >选项</button>  
  5. </div>

按钮下拉菜单

  1. <div类= “输入附加” > 
  2.   <输入类= “span2” id = “appendedDropdownButton ”类型= “文本” >   
  3.   <div class = "btn-group" > 
  4.     <按钮类= “btn下拉切换”数据切换= “下拉” >  
  5.       行动
  6.       <span class = "caret" ></span> 
  7.     </按钮>
  8.     <ul class = "下拉菜单" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div类= “输入前置” > 
  2.   <div class = "btn-group" > 
  3.     <按钮类= “btn下拉切换”数据切换= “下拉” >  
  4.       行动
  5.       <span class = "caret" ></span> 
  6.     </按钮>
  7.     <ul class = "下拉菜单" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <输入类= “span2” id = “prependedDropdownButton ”类型= “文本” >   
  12. </div>
  1. <div class = "输入-前置输入-追加" > 
  2.   <div class = "btn-group" > 
  3.     <按钮类= “btn下拉切换”数据切换= “下拉” >  
  4.       行动
  5.       <span class = "caret" ></span> 
  6.     </按钮>
  7.     <ul class = "下拉菜单" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <输入类= “span2” id = “appendedPrependedDropdownButton ”类型= “文本” >   
  12.   <div class = "btn-group" > 
  13.     <按钮类= “btn下拉切换”数据切换= “下拉” >  
  14.       行动
  15.       <span class = "caret" ></span> 
  16.     </按钮>
  17.     <ul class = "下拉菜单" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

分段下拉组

  1. <表格>
  2.   <div类= “输入前置” > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <输入类型= “文本” > 
  5.   </div>
  6.   <div类= “输入附加” > 
  7.     <输入类型= “文本” > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

搜索表格

  1. <表单类= “表单搜索” > 
  2.   <div类= “输入附加” > 
  3.     <输入类型= “文本”类= “span2搜索查询” >  
  4.     <button type = "submit" class = "btn" >搜索</button>  
  5.   </div>
  6.   <div类= “输入前置” > 
  7.     <button type = "submit" class = "btn" >搜索</button>  
  8.     <输入类型= “文本”类= “span2搜索查询” >  
  9.   </div>
  10. </form>

控制大小

使用相对大小类，如使用类.input-large或将您的输入与网格列大小相匹配.span*。

块级输入

使任何<input>或<textarea>元素的行为类似于块级元素。

  1. <输入类= “输入块级”类型= “文本”占位符= “.输入块级” >

相对尺寸

  1. <输入类= “输入迷你”类型= “文本”占位符= “.输入迷你” >   
  2. <输入类= “输入小”类型= “文本”占位符= “.输入小” >   
  3. <输入类= “输入媒体”类型= “文本”占位符= “.输入媒体” >   
  4. <输入类= “输入-大”类型= “文本”占位符= “.输入-大” >   
  5. <输入类= “输入-xlarge”类型= “文本”占位符= “.input-xlarge” >   
  6. <输入类= “input-xxlarge”类型= “文本”占位符= “.input-xxlarge” >

小心！在未来的版本中，我们将更改这些相对输入类的使用以匹配我们的按钮大小。例如，.input-large将增加输入的填充和字体大小。

网格大小

用于匹配相同大小的网格列的输入.span1。.span12

  1. <输入类= “span1”类型= “文本”占位符= “.span1” >   
  2. <输入类= “span2”类型= “文本”占位符= “.span2” >   
  3. <输入类= “span3”类型= “文本”占位符= “.span3” >   
  4. <选择类= “span1” > 
  5.   ...
  6. </选择>
  7. <选择类= “span2” > 
  8.   ...
  9. </选择>
  10. <选择类= “span3” > 
  11.   ...
  12. </选择>

对于每行多个网格输入，请使用.controls-row修饰符类以获得适当的间距。它浮动输入以折叠空白，设置适当的边距并清除浮动。

  1. <div类 = "控件" >
  2.   <输入类= “span5”类型= “文本”   占位符= “.span5” >
  3. </div>
  4. <div类=  "控件控件行" >
  5.   <输入类= “span4”类型= “文本”占位符=    “.span4” >
  6.   <输入类= “span1”类型= “文本”占位符   = “.span1” >
  7. </div>
  8. ...

不可编辑的输入

在不使用实际表单标记的情况下以不可编辑的表单呈现数据。

这里有些价值 
  1. <span class = "input-xlarge uneditable-input" >这里有一些值</span>

表单操作

用一组动作（按钮）结束一个表单。当放置在 a.form-actions中时，按钮将自动缩进以与表单控件对齐。

  1. <div类= “表单动作” > 
  2.   <button type = "submit" class = "btn btn-primary" >保存更改</button>  
  3.   <button type = "button" class = "btn" >取消</button>  
  4. </div>

帮助文本

对出现在表单控件周围的帮助文本的内联和块级支持。

内联帮助

内联帮助文本 
  1. <input type = "text" ><span class = "help-inline" >内联帮助文本</span>

阻止帮助

一个较长的帮助文本块，它换行并可能超出一行。 
  1. <input type = "text" ><span class = "help-block" >一个较长的帮助文本块，它换行并可能超出一行。</span>

表单控件状态

通过表单控件和标签的基本反馈状态向用户或访问者提供反馈。

输入焦点

我们删除了某些表单控件上的默认outline样式，并box-shadow在其位置应用了:focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "This is focus..." >

输入无效

通过默认浏览器功能使用:invalid. 指定 a ，如果该字段不是可选的，则type添加属性，并且（如果适用）指定 a 。requiredpattern

由于缺乏对 CSS 伪选择器的支持，这在 Internet Explorer 7-9 版本中不可用。

  1. <输入类= “span3”类型= “电子邮件”需要>

禁用输入

在输入上添加disabled属性以防止用户输入并触发略有不同的外观。

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled >

验证状态

Bootstrap 包括错误、警告、信息和成功消息的验证样式。要使用，请将适当的类添加到周围的.control-group.

可能出了点问题
请更正错误
用户名已存在
呜呼！ 
  1. <div class = "控制组警告" > 
  2.   <label class = "control-label" for = "inputWarning" >输入警告</label>  
  3.   <div类= "控件" > 
  4.     <输入类型= “文本” id = “输入警告” >  
  5.     <span class = "help-inline" >可能出了点问题</span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "控制组错误" > 
  10.   <label class = "control-label" for = "inputError" >输入错误</label>  
  11.   <div类= "控件" > 
  12.     <输入类型= “文本” id = “输入错误” >  
  13.     <span class = "help-inline" >请更正错误</span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "控制组信息​​" > 
  18.   <label class = "control-label" for = "inputInfo" >输入信息</label>  
  19.   <div类= "控件" > 
  20.     <输入类型= “文本” id = “输入信息” >  
  21.     <span class = "help-inline" >用户名已被占用</span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "控制组成功" > 
  26.   <label class = "control-label" for = "inputSuccess" >输入成功</label>  
  27.   <div类= "控件" > 
  28.     <输入类型= “文本” id = “输入成功” >  
  29.     <span class = "help-inline" >哇哦！</span> 
  30.   </div>
  31. </div>

纽扣

默认按钮

按钮样式可以应用于任何应用了.btn类的东西。但是，通常您只想将这些应用于<a>和<button>元素以获得最佳渲染效果。

按钮 类="" 描述
btn 带渐变的标准灰色按钮
btn btn-primary 提供额外的视觉权重并识别一组按钮中的主要操作
btn btn-info 用作默认样式的替代品
btn btn-success 表示成功或积极的行动
btn btn-warning 表示应谨慎执行此操作
btn btn-danger 表示危险或潜在的负面行为
btn btn-inverse 备用深灰色按钮，与语义操作或使用无关
btn btn-link 通过在保持按钮行为的同时使其看起来像一个链接来淡化按钮

跨浏览器兼容性

IE9 不会在圆角上裁剪背景渐变，因此我们将其移除。与此相关的是，IE9 使禁用button的元素卡顿，将文本呈现为灰色，并带有我们无法修复的令人讨厌的文本阴影。

按钮尺寸

喜欢更大或更小的按钮？添加.btn-large、.btn-small或.btn-mini用于其他尺寸。

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" >大按钮</button>  
  3.   <button class = "btn btn-large" type = "button" >大按钮</button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" >默认按钮</button>  
  7.   <button class = "btn" type = "button" >默认按钮</button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" >小按钮</button>  
  11.   <button class = "btn btn-small" type = "button" >小按钮</button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" >迷你按钮</button>  
  15.   <button class = "btn btn-mini" type = "button" >迷你按钮</button>  
  16. </p>

通过添加.btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" >块级按钮</button>  
  2. <button class = "btn btn-large btn-block" type = "button" >块级按钮</button>

禁用状态

让按钮看起来无法点击，让它们向后退 50%。

锚元素

将.disabled类添加到<a>按钮。

主链接 关联 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" >主链接</a>  
  2. <a href = "#" class = "btn btn-large disabled" >链接</a>

小心！我们.disabled这里作为实用类使用，类似于普通.active类，所以不需要前缀。此外，该课程仅用于美学；您必须使用自定义 JavaScript 来禁用此处的链接。

按钮元素

将disabled属性添加到<button>按钮。

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" >主按钮</button>   
  2. <按钮类型= “按钮”类= “btn btn-large”禁用>按钮</button>

一类，多标签

在、或元素上使用.btn类。<a><button><input>

关联 
  1. <a class = "btn" href = "" >链接</a>  
  2. <button class = "btn" type = "submit" >按钮</button>  
  3. <输入类= “btn”类型= “按钮”值= “输入” >   
  4. <输入类= “btn”类型= “提交”值= “提交” >

作为最佳实践，请尝试为您的上下文匹配元素，以确保匹配跨浏览器呈现。如果您有input，<input type="submit">请为您的按钮使用 。

图片

将类添加到<img>元素中，以便在任何项目中轻松设置图像样式。

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

小心！ .img-rounded由于缺乏支持，.img-circle不能在 IE7-8 中工作。border-radius

由Glyphicons 设计的图标

图标字形

140 个精灵形式的图标，有深灰色（默认）和白色，由Glyphicons提供。

  • 图标玻璃
  • 图标音乐
  • 图标搜索
  • 图标信封
  • 图标心
  • 图标星
  • 图标星空
  • 图标用户
  • 偶像电影
  • 大图标
  • 图标号
  • 图标列表
  • 图标-确定
  • 图标删除
  • 图标放大
  • 图标缩小
  • 图标关闭
  • 图标信号
  • 图标齿轮
  • 图标垃圾
  • 图标主页
  • 图标文件
  • 图标时间
  • 图标路
  • 图标下载-alt
  • 图标下载
  • 图标上传
  • 图标收件箱
  • 图标播放圈
  • 图标重复
  • 图标刷新
  • 图标列表替代
  • 图标锁
  • 图标标志
  • 图标耳机
  • 图标音量关闭
  • 图标音量降低
  • 图标音量
  • 图标-二维码
  • 图标条码
  • 图标标签
  • 图标标签
  • 图标书
  • 图标书签
  • 图标打印
  • 图标相机
  • 图标字体
  • 图标粗体
  • 图标斜体
  • 图标文本高度
  • 图标文本宽度
  • 图标左对齐
  • 图标对齐中心
  • 图标右对齐
  • 图标对齐对齐
  • 图标列表
  • 图标缩进左
  • 图标缩进右
  • 图标-facetime-视频
  • 图标图片
  • 图标铅笔
  • 图标地图标记
  • 图标调整
  • 图标色调
  • 图标编辑
  • 图标分享
  • 图标检查
  • 图标移动
  • 图标-后退
  • 图标-快退
  • 图标向后
  • 图标播放
  • 图标暂停
  • 图标停止
  • 图标转发
  • 图标快进
  • 图标前进
  • 图标弹出
  • 图标-雪佛龙-左
  • 图标-雪佛龙-右
  • 图标加号
  • 图标减号
  • 图标删除标志
  • 图标确定标志
  • 图标问号
  • 图标信息标志
  • 图标截图
  • 图标删除圈
  • 图标-ok-圈
  • 图标禁止圈
  • 图标箭头左
  • 图标箭头右
  • 图标向上箭头
  • 图标-向下箭头
  • 图标共享替代
  • 图标调整大小
  • 图标大小调整小
  • 加号图标
  • 图标减号
  • 图标星号
  • 图标感叹号
  • 图标礼物
  • 图标叶
  • 图标-火
  • 图标-睁眼
  • 图标-闭眼
  • 图标警告标志
  • 图标平面
  • 图标日历
  • 图标-随机
  • 图标评论
  • 图标磁铁
  • 图标-人字形向上
  • 图标-chevron-down
  • 图标转推
  • 图标购物车
  • 图标文件夹关闭
  • 图标文件夹打开
  • 图标调整大小垂直
  • 图标调整大小水平
  • 图标硬盘
  • 图标扩音器
  • 图标铃
  • 图标证书
  • 图标竖起大拇指
  • 图标大拇指向下
  • 图标-右手
  • 左手图标
  • 图标举手
  • 图标向下
  • 图标-圆圈-箭头-右
  • 图标圆圈箭头左
  • 图标-圆圈-向上箭头
  • 图标-圆圈-向下箭头
  • 图标地球仪
  • 图标扳手
  • 图标任务
  • 图标过滤器
  • 图标公文包
  • 图标全屏

字形图标归属地

Glyphicons半身人通常不是免费提供的，但是 Bootstrap 和 Glyphicons 创作者之间的安排使这成为可能，而您作为开发人员无需支付任何费用。为了感谢您，我们要求您在可行的情况下包含一个返回Glyphicons的可选链接。

如何使用

所有图标都需要一个<i>具有唯一类的标签，前缀为icon-. 要使用，请将以下代码放在几乎任何地方：

  1. <i class = "图标搜索" ></i>

还有一些样式可用于倒置（白色）图标，并准备好一个额外的类。我们将专门针对导航和下拉链接的悬停和活动状态强制执行此类。

  1. <i class = "icon-search icon-white" ></i>

小心！在文本字符串旁边使用时，例如在按钮或导航链接中，请务必在<i>标签后留一个空格以保持适当的间距。

图标示例

在按钮、工具栏按钮组、导航或前置表单输入中使用它们。

纽扣

按钮工具栏中的按钮组
  1. <div类= "btn 工具栏" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
按钮组中的下拉菜单
用户 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i>用户</a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "下拉菜单" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i>编辑</a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i>删除</a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i>禁止</a></li>  
  8.     <li class = "分隔符" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i>成为管理员</a></li>  
  10.   </ul>
  11. </div>
按钮尺寸
星星 星星 星星 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

导航

  1. <ul类= “导航导航列表” > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i>主页</a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i>库</a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i>应用程序</a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i>其他</a></li>  
  6. </ul>

表单域

  1. <div类= “控制组” > 
  2.   <label class = "control-label" for = "inputIcon" >电子邮件地址</label>  
  3.   <div类= "控件" > 
  4.     <div类= “输入前置” > 
  5.       <span class = "附加组件" ><i class = "icon-envelope" ></i></span>  
  6.       <输入类= “span2” id = “inputIcon”类型= “文本” >   
  7.     </div>
  8.   </div>
  9. </div>