http://v3.bootcss.com/css/
1：响应式图片：如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
<img src="" class="img-responsive" alt="响应式图片需要增加img-responsive 的类">
2：容器：Bootstrap 的 container class 用于包裹页面上的内容。
<div class="container">容器盒子</div>
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
3：Bootstrap网格系统Grid System：
网格选项：
设备尺寸： 类名
超小设备<768px .col-xs-
小型设备平板电脑（≥768px） .col-sm-
中型设备台式电脑（≥992px） .col-md-
大型设备台式电脑（≥1200px） .col-lg-
.col-md-push-8 从左侧往右侧推8列
.col-md-pull-4 往左侧拉4列 内置网格列的顺序，其中 * 范围是从 1 到 11。
4：排版：
1）标题：
定义了所有的 HTML 标题（h1 到 h6）的样式。如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class
<h1>我是标题1 h1. <span class="small">我是副标题1 h1</span></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
2）引导主体副本：
为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。
<p class="lead">这是一个演示引导</p>
3）强调：
HTML 的默认强调标签 ：
<small>正常字体大小的85%</small>
<strong>设置文本为更粗的文本</strong>
<em>设置文本为斜体</em>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-justify">设定文本对齐,段落中超出屏幕部分文字自动换行</p>
<p class="text-nowrap">不会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-lowercase">小写文本</p>
<p class="text-uppercase">大写文本</p>
<p class="text-capitalize">首字母大写文本</p>
<p class="text-muted">内容减弱</p>
<p class="text-primary">primary</p> 蓝色字体
<p class="text-success">success</p>绿色字体
<p class="text-info">info</p>蓝色字体
<p class="text-warning">warning</p>黄色字体
<p class="text-danger">danger</p>红色字体
4）缩写
<abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本但那需要为 <abbr>的 title 属性添加文本，为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
5）地址：
<address> 默认为 display:block;，您需要使用
标签来为封闭的地址文本添加换行。
<address>
007 street
Some City, State XXXXX
</address>
6)引用
添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。
<blockquote class="pull-right">
这是一个向右对齐的引用。
<small>摘自 <cite title="奇葩说">奇葩说</cite>
</small>
</blockquote>
设定引用右对齐 设置引用右对齐：
<blockquote class="blockquote-reverse">
<footer>From WWF's website</footer>
</blockquote>
7）引用：
1、有序列表：有序列表是指以数字或其他有序字符开头的列表。
<ol>
<li>Item 1</li>
</ol>
2、无序列表：以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用.list-unstyled 来移除样式，也可以通过使用 .list-inline 把所有的列表项放在同一行中。
<ul class="list-unstyled list-inline">
<li>Item 11</li>
</ul>
3、定义列表：每个列表项可以包含 <dt> 和 <dd> 元素，.dl-horizontal 可以让 <dl> 内的<dt> 和 <dd> 排在一行。
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
</dl>
8）内容可滚动：pre-scrollable
使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
<pre class="pre-scrollable">bothspaces andline breaks.</pre>
网友评论