栅格

栅格参数

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
类前缀 .col-xs-* .col-s-* .col-m-* .col-b-*
列(column)数 12

实例:从堆叠到水平排列

.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-1
.col-m-8
.col-m-4
.col-m-4
.col-m-4
.col-m-4
.col-m-6
.col-m-6
<div class="row">
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
  <div class="col-m-1">.col-m-1</div>
</div>

<div class="row">
  <div class="col-m-8">.col-m-8</div>
  <div class="col-m-4">.col-m-4</div>
</div>

<div class="row">
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4">.col-m-4</div>
</div>

<div class="row">
  <div class="col-m-6">.col-m-6</div>
  <div class="col-m-6">.col-m-6</div>
</div>

实例:流式布局容器

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div> 

实例:移动设备和桌面屏幕

.col-xs-12 .col-m-8
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6 .col-m-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-m-8">.col-xs-12 .col-m-8</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

实例:手机、平板、桌面

.col-xs-12 .col-s-6 .col-m-8
.col-xs-6 .col-m-4
.col-xs-6 .col-s-4
.col-xs-6 .col-s-4
.col-xs-6 .col-s-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-s-6 .col-m-8</div>
  <div class="col-xs-6 col-m-4">.col-xs-6 .col-m-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-s-4">.col-xs-6 .col-s-4</div>
  <div class="col-xs-6 col-s-4">.col-xs-6 .col-s-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->   
  <div class="clearfix visible"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-s-4</div>
</div>  

实例:多余的列(column)将另起一行排列

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
  </div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.
  </div>
</div> 

实例:响应式列重置

.col-xs-6 .col-s-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-s-3
.col-xs-6 .col-s-3
.col-xs-6 .col-s-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div> 

实例:列偏移

.col-m-4
.col-m-4 .col-m-offset-4
.col-m-3 .col-m-offset-3
.col-m-3 .col-m-offset-3
.col-m-6 .col-m-offset-3
<div class="row">
  <div class="col-m-4">.col-m-4</div>
  <div class="col-m-4 col-m-offset-4">.col-m-4 .col-m-offset-4</div>
</div>

<div class="row">
  <div class="col-m-3 col-m-offset-3">.col-m-3 .col-m-offset-3</div>
  <div class="col-m-3 col-m-offset-3">.col-m-3 .col-m-offset-3</div>
</div>

<div class="row">
  <div class="col-m-6 col-m-offset-3">.col-m-6 .col-m-offset-3</div>
</div> 

实例:嵌套列

Level 1: .col-s-9
Level 2: .col-xs-8 .col-s-6
Level 2: .col-xs-4 .col-s-6
<div class="row">
  <div class="col-sm-9">
  Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
      Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
      Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div> 

排版

标题

h1. ShiinaUI heading

Semibold 36px

h2. ShiinaUI heading

Semibold 30px

h3. ShiinaUI heading

Semibold 24px

h4. ShiinaUI heading

Semibold 18px
h5. ShiinaUI heading
Semibold 14px
h6. ShiinaUI heading
Semibold 12px
<h1>h1. ShiinaUI heading</h1>
<h2>h2. ShiinaUI heading</h2>
<h3>h3. ShiinaUI heading</h3>
<h4>h4. ShiinaUI heading</h4>
<h5>h5. ShiinaUI heading</h5>
<h6>h6. ShiinaUI heading</h6> 

带有副标题的标题

h1. ShiinaUI heading Secondary text

h2. ShiinaUI heading Secondary text

h3. ShiinaUI heading Secondary text

h4. ShiinaUI heading Secondary text

h5. ShiinaUI heading Secondary text
h6. ShiinaUI heading Secondary text
<h1>h1. ShiinaUI heading <small>Secondary text</small></h1>
<h2>h2. ShiinaUI heading <small>Secondary text</small></h2>
<h3>h3. ShiinaUI heading <small>Secondary text</small></h3>
<h4>h4. ShiinaUI heading <small>Secondary text</small></h4>
<h5>h5. ShiinaUI heading <small>Secondary text</small></h5>
<h6>h6. ShiinaUI heading <small>Secondary text</small></h6> 

页面主体

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> 

内联文本元素

高亮文本

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text. 

小号文本

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

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

着重

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> 

对齐

Left aligned text.

Center aligned text.

Right aligned text.

No wrap text.

<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-nowrap">No wrap text.</p> 

改变大小写

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p> 
<p class="text-uppercase">Uppercased text.</p> 
<p class="text-capitalize">Capitalized text.</p> 

缩略语

基本缩略语

An abbreviation of the word attribute is attr.

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

地址

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com
<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> 

引用

默认样式的引用

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> 

多种引用样式 (一)

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>   
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> 
</blockquote> 

多种引用样式 (二)

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

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

内联代码

For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline. 

用户输入

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
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> 

代码块

<p>Sample text here...</p>
<pre>&lt ;p&gt ;Sample text here...&lt ;/p&gt ;</pre> /* 使用时删除空格 */

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

程序输出

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp> 

上标文本

这段文本包含上标

<p>这段文本包含 <sup>上标</sup></p> 

下标文本

这段文本包含下标

<p>这段文本包含 <sub>下标</sub></p>  

列表

无序列表

  • 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="list-unstyled">
  <li>...</li>
</ul> 

内联列表

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-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> 

水平排列的描述

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> 

表格

基本实例

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

条纹状表格

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

带边框的表格

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

鼠标悬停

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

状态类

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- 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> 

按钮

可作为按钮使用的标签或元素

Link
<a href="#" class="btn btn-default">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-b">(大按钮)Large button</button>
  <button type="button" class="btn btn-default btn-b">(大按钮)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-s">(小按钮)Small button</button>
  <button type="button" class="btn btn-default btn-s">(小按钮)Small button</button>
</p> 

块级元素

<button type="button" class="btn btn-primary btn-b btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-b btn-block">(块级元素)Block level button</button> 

激活状态

button 元素

<button type="button" class="btn btn-primary btn-b btn-click">Primary button</button>
<button type="button" class="btn btn-default btn-b btn-click">Button</button> 

链接(<a>)元素

Primary link Link

<a class="btn btn-primary btn-b btn-click">Primary link</a> 
<a class="btn btn-default btn-b btn-click">Link</a> 

禁用状态

button 元素

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

链接(<a>)元素

Primary link Link

<a class="btn btn-primary btn-b" disable="disabled">Primary link</a> 
<a class="btn btn-default btn-b" disable="disabled">Link</a> 

表单

基本实例

Example block-level help text here.

<form>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Email">
</div>
  <div class="form-group">
  <label>Password</label>
  <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label>File input</label>
    <input type="file">
    <p class="form-text">Example block-level help text here.</p>
  </div>
  <div class="form-box">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form> 

内联表单

<form class="form-inline">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" placeholder="jane.doe@example.com">
  </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form> 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email address</label>
    <input type="email" class="form-control" placeholder="Email">
   </div>
  <div class="form-group">
    <label class="sr-only">Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-box">
    <label>
      <input type="form-box"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form> 
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Amount (in dollars)
    </label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button> </form> 

水平排列的表单

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-s-2 control-label">Email</label>
    <div class="col-s-10">
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-s-2 control-label">Password</label>
    <div class="col-s-10">
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </div>
  <div class="form-group">  
    <div class="col-s-offset-2 col-s-10">
      <div class="checkbox">
        <label>
          <input type="form-box"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-s-offset-2 col-s-10">
       <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form> 

被支持的控件

输入框



<input type="text" class="form-control" placeholder="Text input">
<input type="password" class="form-control" placeholder="Text input"> 
<input type="datetime-local" class="form-control"  value="2020-01-01T11:11:11"> 

文本域

<textarea class="form-control" rows="3"></textarea> 

多选和单选框

默认外观(堆叠在一起)

<div class="form-box">
  <label>
    <input type="checkbox" value="">
    Option one is this and that—be sure to include why it's great
  </label>
</div>
<div class="form-box">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
<div class="form-box">
  <label>
    <input type="radio" value="option1" checked>
    Option one is this and that—be sure to include why it's great
  </label>
</div>
<div class="form-box">
  <label>
    <input type="radio" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="form-box">
  <label>
    <input type="radio" value="option3" disabled>
    Option three is disabled
  </label>
</div> 
内联单选和多选框

<label class="checkbox-inline">
  <input type="checkbox" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" value="option3"> 3
</label> 

<label class="radio-inline">
  <input type="radio" value="option1"> 1
</label> 
<label class="radio-inline">
  <input type="radio" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" value="option3"> 3
</label> 
不带label文本的Checkbox 和 radio
<div class="checkbox">
  <label>
    <input type="form-box" value="option1">
  </label>
</div>
<div class="radio">
  <label>
    <input type="form-box" value="option1">
  </label> 
</div> 
下拉列表(select)
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select> 
多项显示的下拉列表(select)
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select> 

静态控件

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-s-2">Email</label>
    <div class="col-s-10">
      <p class="form-control-text">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-s-2">Password</label>
    <div class="col-s-10">
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </div>
</form> 

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-text">email@example.com</p>
  </div>
  <div class="form-group">
    <label class="sr-only">Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form> 

焦点状态

禁用状态

<input class="form-control" type="text" placeholder="Disabled input here..." disabled> 

只读状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly> 

提示文本

A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only">Input with help text</label>
<input type="text" class="form-control">
...
<span id="form-text" class="form-text">A block of help text that breaks onto a new line and may extend beyond one line.</span> 

校验状态

A block of help text that breaks onto a new line and may extend beyond one line.
<div class="form-group form-success">
  <label class="control-label">Input with success</label>
  <input type="text" class="form-control">
  <span class="form-text">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group form-warning">
  <label class="control-label">Input with warning</label>
  <input type="text" class="form-control">
</div>
<div class="form-group form-error">
  <label class="control-label">Input with error</label>
  <input type="text" class="form-control">
</div>
<div class="form-success">
  <div class="form-box">
    <label>
      <input type="checkbox" value="option1">Checkbox with success
    </label>
  </div>
</div>
<div class="form-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="option1">Checkbox with warning
    </label>
  </div>
</div>
<div class="form-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">Checkbox with error
    </label>
  </div> 
</div> 

添加额外的图标

<div class="form-group form-success form-feedback">
  <label class="control-label">Input with success</label>
  <input type="text" class="form-control">
  <span class="material-icons mdicons-done form-control-feedback"></span>
  <span class="sr-only">(success)</span>
</div>
<div class="form-group form-warning form-feedback">
  <label class="control-label">Input with warning</label>
  <input type="text" class="form-control">
  <span class="material-icons mdicons-warning form-control-feedback"></span>
  <span class="sr-only">(warning)</span>
</div>
<div class="form-group form-error form-feedback">
  <label class="control-label">Input with error</label>
  <input type="text" class="form-control">
  <span class="material-icons mdicons-error form-control-feedback"></span>
  <span class="sr-only">(error)</span>
</div>
<div class="form-group form-success form-feedback">
  <label class="control-label">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
  </div>
  <span class="material-icons mdicons-done form-control-feedback"></span>
  <span class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
  <div class="form-group form-success form-feedback">
  <label class="control-label col-s-2">Input with success</label>
    <div class="col-s-10">
    <input type="text" class="form-control">
    <span class="material-icons mdicons-done form-control-feedback"></span>
    <span class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group form-success form-feedback">
    <label class="control-label col-s-2">Input group with success</label>
    <div class="col-s-10">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control">
      </div>
      <span class="material-icons mdicons-done form-control-feedback"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form> 

<form class="form-inline">
  <div class="form-group form-success form-feedback">
    <label class="control-label">Input with success</label>
    <input type="text" class="form-control">
    <span class="material-icons mdicons-done form-control-feedback"></span>
    <span class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group form-success form-feedback">
  <label class="control-label">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
  </div>
  <span class="material-icons mdicons-done form-control-feedback"></span>
  <span class="sr-only">(success)</span>
</form> 

可选的图标与设置 .sr-only 类的 label

<div class="form-group form-success form-feedback">
  <label class="control-label sr-only">Hidden label</label>
  <input type="text" class="form-control">
  <span class="material-icons mdicons-done form-control-feedback"></span>
  <span class="sr-only">(success)</span>
</div>
<div class="form-group form-success has-feedback">
  <label class="control-label">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
  </div>
  <span class="material-icons mdicons-done form-control-feedback"></span>
  <span class="sr-only">(success)</span>
</div> 

控件尺寸

高度尺寸






<input class="form-control input-b" type="text" placeholder=".input-b">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-s" type="text" placeholder=".input-s">
<select class="form-control input-b">...</select>
<select class="form-control">...</select>
<select class="form-control input-s">...</select> 

水平排列的表单组的尺寸

<form class="form-horizontal">
  <div class="form-group form-group-b">
    <label class="col-s-2">Large label</label>
    <div class="col-s-10">
<input class="form-control" type="text" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-s">
  <label class="col-s-2">Small label</label>
    <div class="col-s-10">
      <input class="form-control" type="text" placeholder="Small input">
    </div>
  </div>
</form> 

调整列(column)尺寸

<div class="row"> 
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div> 

图片

响应式图片

<img src="..." class="img-responsive" alt="Responsive image"> 

图片形状

140x140 140x140 140x140
<img src="..." alt="..." class="img-round">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail"> 

辅助类

情境文本颜色

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p> 

情境背景色

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p> 

关闭按钮

<button type="button" class="close">
  <span>×</span>
</button> 

三角符号

<span class="caret"></span>  

让内容块居中

<div class="center-block">...</div> 
.center-block { display: block; margin-left: auto; margin-right: auto; }

清除浮动

<div class="clearfix">...</div> 
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
} 

显示或隐藏内容

<div class="show">...</div>
<div class="hidden">...</div> 
.show {
display: block !important;
}
.hidden {
display: none !important;
} 

颜色

基本颜色

PRIMARY COLOR:  #212121 
SECONDARY COLOR:   #757575 
THIRD COLOR: #bdbdbd 
FOURTH COLOR: #eeeeee 

主题颜色

DARK PRIMARY COLOR:    #ffa000 
PRIMARY COLOR:         #ffc107 
LIGHT PRIMARY COLOR:   #ffecb3 

情景颜色




SUCCEESS-DARK PRIMARY COLOR:         #689f38    
SUCCEESS-PRIMARY COLOR:         #8bc38a //成功
SUCCEESS-LIGHT PRIMARY COLOR:         #dcedc8  
INFO-DARK PRIMARY COLOR:         #0288b1   
INFO-PRIMARY COLOR:         #03a9f4 //信息
INFO-LIGHT PRIMARY COLOR:         #b3e5fc 
WARNING-DARK PRIMARY COLOR:         #f57c00   
WARNING-PRIMARY COLOR:         #ff9800 //告警
WARNING-LIGHT PRIMARY COLOR:         #ffe0b2  
DANGER-DARK PRIMARY COLOR:         #e64a19    
DANGER-PRIMARY COLOR:         #ff5722 //危险
DANGER-LIGHT PRIMARY COLOR:         #ffccbc