这里总结了 Bootstrap 3.3.2 中的所有样式(Class),用于快速查找及索引官方文档。

  • 容器

    .container
    .container-fluid


    .row


    指定宽度及响应断点

    .col-xs-*
    .col-sm-*
    .col-md-*
    .col-lg-*

    指定缩进

    .col-xs-offset-*
    .col-sm-offset-*
    .col-md-offset-*
    .col-lg-offset-*

    快速重排序(左右对调)

    # 推到右边
    .col-xs-push-*
    .col-sm-push-*
    .col-md-push-*
    .col-lg-push-*
    # 拉到左边
    .col-xs-pull-*
    .col-sm-pull-*
    .col-md-pull-*
    .col-lg-pull-*

    重置

    .clearfix


    显示

    .visible-xs-*
    .visible-sm-*
    .visible-md-*
    .visible-lg-*

    * 可以为:

    Group of classesCSS display
    .visible-*-blockdisplay: block;
    .visible-*-inlinedisplay: inline;
    .visible-*-inline-blockdisplay: inline-block;


    隐藏

    .hidden-xs
    .hidden-sm
    .hidden-md
    .hidden-lg


    打印

    .visible-print-block
    .visible-print-inline
    .visible-print-inline-block
    .hidden-print
  • 标题

    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>

    副标题

    <small></small>
    # 或者
    .small


    正文

    突出段落

    .lead
    # 可以这样用
    <p class="lead">...</p>

    标记文本

    <mark>
    # 可以这样用:
    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>

    弱化文本

    <small></small>
    # 或者
    .small

    强化文本

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


    引用

    <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>
    # 反转
    .blockquote-reverse


    代码

    内联

    For example, <code>&lt;section&gt;</code> should be wrapped as inline.

    键盘

    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>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

    滚动条

    .pre-scrollable

    变量

    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>


    样板

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


    属性颜色

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


    纹理背景

    <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>
  • 有序、无序、无样式

    <ul>
      <li>...</li>
    </ul>
    <ol>
      <li>...</li>
    </ol>
    <ul class="list-unstyled">
      <li>...</li>
    </ul>


    inline 显示(显示在一行上)

    <ul class="list-inline">
      <li>...</li>
    </ul>


    介绍,垂直显示

    <dl>
      <dt>...</dt>
      <dd>...</dd>
    </dl>


    介绍,水平显示

    <dl class="dl-horizontal">
      <dt>...</dt>
      <dd>...</dd>
    </dl>
  • 普通

    <table class="table">
      ...
    </table>


    纹理

    <table class="table table-striped">
      ...
    </table>


    边框

    <table class="table table-bordered">
      ...
    </table>


    鼠标划过

    <table class="table table-hover">
      ...
    </table>


    密集

    <table class="table table-condensed">
      ...
    </table>


    纹理类

    .activeApplies the hover color to a particular row or cell
    .successIndicates a successful or positive action
    .infoIndicates a neutral informative change or action
    .warningIndicates a warning that might need attention
    .dangerIndicates a dangerous or potentially negative action


    响应式

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>
  • 普通表格

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


    内联表格

    .form-inline
    <form class="form-inline" role="form">
      <div class="form-group">
        <div class="input-group">
          <label class="sr-only" for="exampleInputEmail2">Email address</label>
          <div class="input-group-addon">@</div>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>


    水平表格

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


    输入框类型支持

    text
    password
    datetime
    datetime-local
    date
    month
    time
    week
    number
    email
    url
    search
    tel
    color


    文本框

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


    单选、多选

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


    内联单选、多选

    .checkbox-inline
    .radio-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>
    
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    </label>


    选择下拉框

    单选

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

    多选

    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>


    静态控件

    .form-control-static
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <p class="form-control-static">email@example.com</p>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
    </form>


    聚集状态

    :focus # js 设置获得焦点


    失效状态

    失效单个控件

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

    失效控件集

    <form role="form">
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Disabled input</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group">
          <label for="disabledSelect">Disabled select menu</label>
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Can't check this
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>


    只读状态

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


    有效性状态

    .has-warning
    .has-error
    .has-success


    有效性图标

    .has-feedback


    控制高度

    .input-sm
    
    .input-lg


    控制宽度

    .form-group-lg
    .form-group-sm

    用列属性控制宽度

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


    帮助文档

    <label class="sr-only" for="inputHelpBlock">Input with help text</label>
    <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    ...
    <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
  • 选项(影响颜色)

    .btn-default
    .btn-primary
    .btn-success
    .btn-info
    .btn-warning
    .btn-danger
    .btn-link


    高度

    .btn-lg
    .btn-sm
    .btn-xs


    宽度

    .btn-block


    活跃状态

    .active # 样式
    disabled # 属性
  • 响应式

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


    形状

    <img src="..." alt="..." class="img-rounded">
    <img src="..." alt="..." class="img-circle">
    <img src="..." alt="..." class="img-thumbnail">
  • 关闭按钮

    <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>


    下拉按钮

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


    快速浮动

    <div class="pull-left">...</div>
    <div class="pull-right">...</div>


    居中内容块

    <div class="center-block">...</div>


    清除浮动属性

    <!-- Usage as a class -->
    <div class="clearfix">...</div>


    隐藏及显示内容

    <div class="show">...</div>
    <div class="hidden">...</div>


    屏幕阅读器及键盘导航内容

    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


    图片占用符

    <h1 class="text-hide">Custom heading</h1>
  • <span class="glyphicon glyphicon-search" aria-hidden="true"></span>