bootstrap 全局css样式

布局容器

在bootstrap中一共有两种布局容器，一种是两边留白的紧凑型container类，一种是平铺整个屏幕的container-fluid类，需要注意的是这两种类不能互相嵌套

格栅系统

bootstrap中的格栅系统相当于把页面分为最多12列，可以放到row类的div中，相当于指定每一行放置几块内容，每一块内容放置几列。该系统可以非常方便的将页面划分为几个部分，就像是csdn的布局一样，有侧边栏，有主要内容，它使得页面的内容可以非常高效的划分开。关于格栅系统，官方网址有如下说明：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*

我们可以通过一个表格来了解关于格栅系统常用的类

格栅系统常用类

row	一行最多可以被分成12列，我们在具有row类的div块中将列作为直接子元素
col-xs-x	针对超小屏幕x为1~12
col-sm-x	针对小屏幕
col-md-x	针对中型屏幕
col-lg-x	针对大屏幕
col-xx-offset-x	列偏移
col-xx-push-x	列排序，向列前面pushx个列
col-xx-pull-x	列排序，想列后方pullx个列

排版

<h1>~<h6>	标题
<small>	用于在标题中添加副标题或者小号字体（单独使用时）
<p class='lead'>	突出段落
<mark>	高亮
<del>	删除
<s>	无用内容，和删除的显示方式相同都是一条删除线
<ins>	插入文本（与下划线一样）
<u>	下划线
<strong>	着重显示
<em>	斜体
text-left;text-right;text-center;text-justify;text-nowrap	文字对齐方式
text-lowercase;text-uppercase;text-capitalize;	改变大小写
<abbr title='缩略语内容' class='initialism'>	缩略语,title用于显示缩略语的内容，initialism让内容字体大小稍小一些
<blockquote>	引用，例子见下文
<ul>           <ol>	ul是无序列表，ol是有序列表
class='list-unstyled'	无样式列表
class='list-inline'	内联列表
<dl><dt><dd>	带有描述的列表dt是title,dd是内容
class='dl-horizontal'	为<dl>添加dl-horizontal即可水平展示列表内容
<code>	代码块
<kbd>	键盘输入标识
<pre>	代码块
<var>	变量（表示为斜体）
<samp>	程序输出

                <div class='blockquote-example'>
                    <blockquote>
                        <p>我家门前有两棵树，一棵是枣树，另一棵还是枣树</p>
                        <footer>文学斗士 <cite title='原名周树人'>鲁迅</cite></footer>
                    </blockquote>
                </div>

效果如下：

对于blockquote而言，还有一种样式，添加class='blockquote-reverse'就可以实现，效果如下：