BootStrap 栅格+排版（一）

一. BootStrap的栅格系统包裹在两个容器中，分别是 .container和 .container-fluid：

　　（1）.container类 ：用于固定宽度和支持响应式布局；

　　（2）.container-fluid类： 100%宽度，占据全部视口 。

 

二. 栅格系统：系统分为最多12列 

<div class = "row">

　　　<div class = "col-xs-6"></div>
2018-07-04
　　　<div class = "col-xs-6"></div>
</div>

　　(row表示行，col表示列，6表示占的列数，最大为12或者合起来为12）

 

　　 列偏移： 通过设置 col-xs-offset-* 可以使div偏移 * 个列（* 星号表示0~12） ；

 　　列嵌套： 在列col里面可以再设置行row ；

　　 列排列： push往右，pull往左，col-xs-push-* ；

 

三. 排版问题：

　　1. <h1> 标题 <small>副标题</small> </h1> ；

　　2. 通过添加 .lead 类可以让段落突出显示。

　　　　例：<p class="lead">...</p>

　　3. <strong>强调</strong>  <em>斜体</em>

　　4. 通过设置文本类，可以方便文本对齐：

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

　　5. 通过设置类，使得文本英语的大小写：

<p class="text-lowercase"> 全小写 </p>
<p class="text-uppercase"> 全大写 </p>
<p class="text-capitalize"> 首字母大写 </p>

　　6. 基本缩略语：缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含 title 属性。

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

　　7. 地址：<address> </address>　　

　　8. 引用 ：blockquote，文档中引用其他来源的内容（里面直接引用的话用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>

　　9.