基本CSS样式

在框架的基础上,对HTML基础元素进行样式定义,并利用可扩展的class增强其展示效果,从而提供形式新颖,风格一致的外观和体验。

标题

<h1><h6> 所有的HTML标题都是可用的.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Body copy

Bootstrap定义的全局 font-size14pxline-height20px。这些样式应用到了 <body> 和所有的段落上。另外,对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

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 vehicula.

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 sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

要突出一个段落只需加 .lead.

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

<p class="lead">...</p>

构建在Less

排版规模是在variables.less这2个LESS变量: @baseFontSize and @baseLineHeight的基础上. 第一个是贯穿整个font-size, 第二个是line-heightThe. 我们使用这些变量和一些简单的数值来创建margin, padding, 和 line-height 等等类型.


强调

<small>

强调内嵌和文本块, 使用小标签.

This line of text is meant to be treated as fine print.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

加粗

用font-weight强调一小段文字.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜体

用 斜体 强调一小段文字.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

注意! 在HTML5可随意使用 <b><i>, <b>是为了突出词或短语, 而不会有其他重要含义, 而 <i> 提供主要是语态, 专业术语等含义.

对齐

简单方便将文字对齐的属性.

居左文字.

居中文字.

居右文字.

<p class="text-left">居左文字.</p>
<p class="text-center">居中文字.</p>
<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.

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

缩写

参照在鼠标悬停在缩写和缩写词就显示完整内容的HTML的<abbr> 元素. abbr元素带有 title 属性之后, 缩写的部分的底部会有一条虚线, 并且鼠标悬停在上面会有一个“帮助”符号, 同时还会显示title所提供的内容.

<abbr>

如想看完整文字可把鼠标悬停在缩写词, 但需要包含 title 属性.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

如需对缩写词字体大小稍微缩小, 可添加 .initialism .

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

让联系信息最接近原始格式的形式呈现.

<address>

换行使用 <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

引用选项

在标准的引用里, 可以很简单的改变风格和内容.

标出来源

添加 <small>> 标签来注明引用的来源. 来源标题可以放在这个<cite> 标签里面.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

备用显示

使用 .pull-right 属性, 可让引用向右靠齐.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="pull-right">
  ...
</blockquote>

列表

无序列表

用于没有明确信息的列表.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

有序列表

用于明确或需按序号排序的信息的列表.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

无样式列表

用于不需要列表样式的列表里.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="unstyled">
  <li>...</li>
</ul>

行(水平)列表

使用 inline 让列表项水平排列一行, 同时每项之间都有一定的间距.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="inline">
  <li>...</li>
</ul>

描述

对一个(条款)列表进行关联描述.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平状态的描述

使用<dl>把列表和对其的描述一对一横向显示.适用于术语的定义/解释

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

注意! 水平描述通过text-overflow会对过长而无法在左栏中完全显示的列名截断掉一部分. 而在较窄的视口(宽度)中, 会改变成垂直(形式)表述, 来适应当前屏幕.

行级代码片段

使用 <code> 包装行级代码片段

例如,<section> 应该被做为行级代码包装。
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

基本块状内容

使用<pre>对多行代码进行包装。 切记一定要对代码中的每个<>进行转义,这样方能得到正常的渲染结果。

<p>示范文本...</p>
<pre>
  &lt;p&gt;示范文本...&lt;/p&gt;
</pre>

注意: 尽可能地让 <pre> 左对齐;因为会渲染所有空格和tab(就是你键盘左边的那个tab键)。

还可以使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。

默认样式

为保证可读性并维持表格结构不变。仅使用一组边线对表格进行格式化. 在任意 <table> 添加 .table 类即可。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  …
</table>

可选的类

下面所列出的类是为了补充 .table 类的基本样式的。

背景交替的表格.table-striped

<tbody> 行内, 通过:nth-child CSS选择器(不支持IE7-IE8)添加条纹状.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  …
</table>

有边线的表格.table-bordered

为整个表格添加边线,出于美观考虑,每个边角都呈现圆角。

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  …
</table>

有滑动效果的表格.table-hover

<tbody> 中的每一行赋予鼠标悬停样式

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  …
</table>

紧凑表格.table-condensed

让表格更加紧凑,所有表格单元的padding都会减半(从8px到4px)

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  …
</table>

可选的行属性

使用情景(contextual)属性在表格中添加颜色.

属性 描述
.success 表示成功或积极的行为.
.error 表示一个危险或存有潜在危险的作用.
.warning 表示警告, 可能需要注意的作用.
.info 作为一个信息的默认样式.
# 产品编号 付款时间 状态
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

支持的表格标签

受支持的表格标签列表以及使用方法。

标签 描述
<table> 用以包装表格化的数据
<thead> 容纳表格标题行 (<tr>)以标识表格列,
<tbody> 容纳表格行 (<tr>)
<tr> 容纳行内的一组单元格 (<td> or <th>)
<td> 默认的表格单元格
<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签
必须置于 <thead> 标签内。
<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

默认样式

默认的非必须的堆叠式形式的布局,所有控件的标签文字都左对齐

legend 块状说明文本的例子
<form>
  <fieldset>
    <legend>标签名称</legend>
    <label>Label name</label>
    <input type="text" placeholder=请输入文字…">
    <span class="help-block">块状说明文本的例子</span>
    <label class="checkbox">
      <input type="checkbox"> 点击我
    </label>
    <button type="submit" class="btn">提交</button>
  </fieldset>
</form>            
            

可选布局

Bootstrap包含3个常用的表单布局.

搜索式

在表单添加 .form-search 和 在 <input> 添加 .search-query 可为输入框提供一个额外的圆角.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">搜索</button>
</form>                
                

内联(行式)

添加 .form-inline 使标签左对齐, 以及通过inline-block控制一个紧凑的布局.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> 记住我
  </label>
  <button type="submit" class="btn">注册</button>
</form>
                

水平式

右对齐的标签和左浮动, 使它们在同一行一一对照. 需要从默认的表格中改动一些的标记:

  • 在表格添加 .form-horizontal
  • 把标签和控件包含在 .control-group
  • 在标签添加 .control-label
  • 为任何关联的控件添加 .controls 来确保位置正确
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> 记住我
      </label>
      <button type="submit" class="btn">注册</button>
    </div>
  </div>
</form>
                

支持的表单控件

所支持的表单布局的例子.

输入框

最常见的表单控件, 基于文本输入字段. 支持包含HTML5在内的所有类型: 文本, 密码, 日期时间, 本地日期时间, 日期, 月, 时间, 星期, 数字, E-mail, url, 搜索, 电话, 和颜色.

在任何时候都需要指定使用类型.

<input type="text" placeholder="Text input">
                

文本域

表单控件支持多行的文本. 根据需要可改变 rows 属性.

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

复选框和单选框

复选框是用于在一个列表中选择一个或多个选项, 而单选框是在众多选择中选择一个选项.

默认(上下摆放)


<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

水平复选框

在复选框或单选框添加 .inline 属性, 使它们在同一行显示.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

选择框

使用默认的选项或者指定 multiple="multiple" 一次显示多个选项.



<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

扩展表单控件

除了基本的浏览器控件外, Bootstrap还提供包含其他有用的表单组件

前缀和附加输入框

可以在以文本或按钮为基础的输入框的任何前后位置上进行添加,但注意不支持select元素

默认选项

.add-on 放在一个 input 前面或后面都可以.

@

.00
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>
                    

结合使用

使用2个.add-on, 让输入框拥有前缀和后面附加内容.

$ .00
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>
                    

按钮替代文本

使用 .btn 附加一个(或两个)按钮, 代替 <span> 的文本.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">搜索</button>
  <button class="btn" type="button">选项</button>
</div>
                        

按钮式下拉菜单

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>
                    
<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>
                    
<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>
                    

分段下拉组

<form>
  <div class="input-prepend form-inline">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>
                    

搜索表单

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">搜索</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">搜索</button>
    <input type="text" class="span2 search-query">
  </div>
</form>
                    

控件大小

如果你想控制输入框和表格控件大小,可以使用.input-large 或者使用.span*属性

块级输入框

<input> or <textarea> 元素像一个块级元素.

<input class="input-block-level" type="text" placeholder=".input-block-level">

相对大小

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

注意! 在未来的版本中, 我们将会修改这些属性, 让按钮大小也使用类似属性. 例如, .input-large 将提高按钮的padding和字体大小.

网格列大小

使用 .span1.span12 让输入框的大小和网格列一致.

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

对于每行有多个输入框, 使用 .controls-row 为输入框直接加入适当的间距. 通过浮动让输入框之间缩减一些空白, 设置适当的边距, 并清除浮动.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

不可编辑的输入框

在表单呈现不可编辑的数据, 无需使用实际的表单标记.

这里不可输入
<span class="input-xlarge uneditable-input">这里不可输入</span>

表单行为

当使用了.form-actions类后,表单里的按钮组件会自动缩进

<div class="form-actions">
  <button type="submit" class="btn btn-primary">保存更改</button>
  <button type="button" class="btn">取消</button>
</div>                
                

说明文字

说明文字在表单内支持内联和块级方式显示.

内联(水平方式)

说明文字
<input type="text"><span class="help-inline">说明文字</span>                    
                    

块状(列方式)

说明文字, 如文字过长, 可采用块级显示.
<input type="text"><span class="help-block">说明文字, 如文字过长, 可采用块级显示.</span>                    
                    

表单控件状态

通过表单控件和标签的基本状态,将信息反馈给我们.

输入焦点框

我们在一些表单控件和在:focus地方应用了box-shadow, 移除了默认的 outline 样式.

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

必填输入框

通过默认的浏览器样式输入:invalid。指定type,并添加required属性。如果字段不可用(或可用), 可以指定一个pattern.

这个在Internet Explorer 7-9下不可用, 因为它们不支持CSS伪类选择器.

<input class="span3" type="email" required>

不可输入框

在输入框添加 disabled 属性, 会有一个稍微不同的外观, 并且防止用户输入.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="这不能输入..." disabled>

验证状态

Bootstrap包含了错误, 警告, 资料, 和成功信息的验证样式. 在 .control-group 添加适当的属性便可以使用.

有可能已经错了
请修改错误
用户名已被使用
不错!
<div class="control-group warning">
  <label class="control-label" for="inputWarning">警告</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">有可能已经错了</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">错误</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">请修改错误</span>
  </div>
</div>
<div class="control-group info">
  <label class="control-label" for="inputinfo">资料</label>
  <div class="controls">
    <input type="text" id="inputinfo">
    <span class="help-inline">用户名已被使用</span>
  </div>
</div> 
<div class="control-group success">
  <label class="control-label" for="inputSuccess">成功</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">不错!</span>
  </div>
</div>                
                

默认按钮

按钮样式可应用于任何有 .btn 属性的按钮. 但是, 通常应用在 <a><button> 元素会有更好的渲染效果.

按钮 class="" 描述
btn 带渐变的标准灰色按钮
btn btn-primary 视觉吸引力强,用于标识一组按钮中最主要的那个动作
btn btn-info 可用于替换默认样式
btn btn-success 表示操作成功或动作正确
btn btn-warning 表示该动作应谨慎
btn btn-danger 表示危险或有潜在威胁的动作。
btn btn-inverse 做为补充的深灰色按钮,与具体行为或动作无关。
btn btn-link 简化一个按钮, 使它看起来像一个链接, 同时保持按钮的行为

浏览器兼容性

IE9不支持渐变背景, 所以我们将其删除. IE9 jankifies 禁用button元素, 绘制灰色文本会带有一个令人讨厌的文字阴影, 此情况我们无法修复.

按钮大小

想使用更大或更小的按钮吗? 添加 .btn-large, .btn-small, 或 .btn-mini 即可改变.

<p>
  <button class="btn btn-large btn-primary" type="button">大号按钮</button>
  <button class="btn btn-large" type="button">大号按钮</button>
</p>
<p>
  <button class="btn btn-primary" type="button">默认按钮</button>
  <button class="btn" type="button">默认按钮</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">小号按钮</button>
  <button class="btn btn-small" type="button">小号按钮</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
  <button class="btn btn-mini" type="button">迷你按钮</button>
</p>            
            

通过添加.btn-block创建块级按钮, 同时会填充整个父级的宽度.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>            
            

禁用状态

颜色淡出50%, 让按钮看起来无法点击.

链接元素

<a>添加.disabled

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>                
                

注意! 我们这里把 .disabled 看做是一个实用属性, 与常见的 .active 属性类似, 所以无需添加前缀. 此外, 这个属性只是为了美观, 你必须使用JavaScript来禁用链接.

按钮元素

<button>添加disabled

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>                
                

按钮类可用于多种标签

<a>, <button>, 或 <input>元素使用 .btn

Link
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">            
            

做为最佳实践,出于跨浏览器兼容的考虑,建议您根据内容为按钮选择最合适的元素。比如你正在使用 input ,就可以将按钮设计为 <input type="submit">

在任何项目可以很轻松的改变图像样式, 只需在 <img> 元素添加属性

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">        
        

注意! .img-rounded.img-circle 不支持IE7-8, 因为缺少对 border-radius 的支持.

图标的含义

140个图标在精灵(sprite)表里, 由Glyphicons提供, 有暗灰色(默认)和白色可用.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons的来源

Glyphicons一般不会提供免费, 但Bootstrap和Glyphicons的创作者之间的协调, 让作为开发人员的你免费使用. 与此同时, 我们也希望你在实际使用的时候, 可以添加一个去到Glyphicons的链接.


如何使用

所有图标都需要一个独特、前缀需要带 icon-的属性的<i> 标签. 如需使用时, 可直接将一下代码使用在任何地方:

也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.

注意! 当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在<i>后面留一个空格位置.

图标例子

使用在按钮, 工具栏的按钮组合, 导航, 或表单的前缀输入框.

按钮

按钮工具栏
<div class="btn-toolbar">
  <div class="btn-group">

    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>            
            
下拉菜单
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> 用户</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
    <li><a href="#"><i class="icon-trash"></i> 删除</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> 禁止</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> 管理员编辑</a></li>
  </ul>
</div>           
            
多种尺寸
<a class="btn btn-large" href="#"><i class="icon-star"></i> 开始</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> 开始</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> 开始</a>            
            

导航

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
  <li><a href="#"><i class="icon-book"></i> 库</a></li>
  <li><a href="#"><i class="icon-pencil"></i> 应用程序</a></li>
  <li><a href="#"><i class="i"></i> 其它</a></li>
</ul>        
        

表单域

<div class="control-group">
  <label class="control-label" for="inputIcon">邮箱地址</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>