Bootstrap 3 全局CSS

栅格系统 t

排版

<small>
<lead> 放大，突出显示
<mark> 高亮 约等于 code
<del> 删除线
<u> 下划线
<b> 加粗
<i> 斜体
<text-left>,<text-right>,<text-center>
<text-lowercase>,<text-uppercase>,<text-capitalize>
<blockquote> 引用

内联列表

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

描述， 水平排列描述

 <dl class="dl-horizontal">
          <dt>T1</dt>
          <dd>Content1</dd>
          <dt>T2</dt>
          <dd>Content2</dd>
  </dl>

代码

<code>, <pre>(尖括号要转义&lt;）

表格

基本实例 .table
条纹状 .table-striped
边框 .table-bordered
鼠标悬停 .table-hover
状态类

.active, .success .info .warning .danger

响应式表格 .table-responsive

表单 t

帮助文本 p .help-block

checkbox
.checkbox 可以让文字不是粗体

<div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>

内联表单 form .form-inline

可以让多个input组在一行

水平排列的表单 form .form-horizontal

按钮

尽量用button

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

块级元素 .btn-block

图片

响应式图片 .img-responsive
图片居中 .center-block

图片形状

.img-rounded 圆角
.img-circle  圆形
.img-thumbnail 外框

辅助类

文本颜色

.text-muted 灰色 
.text-primary 蓝色 
.text-success 绿色 
.text-info 
.text-warning 黄色 
.text-danger 红色

背景色

.bg-primary
.bg-success
.bg-info 淡蓝色
.bg-waring
.bg-danger

关闭按钮 × ×

三角符号 <span class="caret"></span>

快速浮动 .pull-left .pull-right
导航条中可以用 .navbar-left .navbar-right

内容块居中 .center-block
文字居中是 .text-center

h1是块级元素，顶满宽度，所以应该用.text-center, 而不是.center-block来居中. 只有那些有宽度的元素(img)居中才应该在用.center-block

清除浮动 .clearfix

显示或隐藏内容 .hide .hidden

只对块级元素起总用

响应式工具

移动端隐藏：.hidden-xs
移动端显示：.visible-xs-block