Bootstrap源码解读排版（1）

源码解读Bootstrap排版

粗体

可以使用<b>和<strong>标签让文本直接加粗。
例如：

<p>我在学习<strong>Bootstrap</strong></p>

源码

b,strong { font-weight: bold;}

斜体

使用标签<em>或<i>来实现。
例如：

<p>我在学<i>Bootstrap</i>。</p>

强调相关的类

强调类都是通过颜色来表示强调
.text-muted：提示，使用浅灰色（#777）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
例如：

<div class="text-primary">.text-primary效果</div>

源码

.text-muted { color: #777;}.text-primary { color: #428bca;}a.text-primary:hover { color: #3071a9;}.text-success { color: #3c763d;}a.text-success:hover { color: #2b542c;}.text-info { color: #31708f;}a.text-info:hover { color: #245269;}.text-warning { color: #8a6d3b;}a.text-warning:hover { color: #66512c;}.text-danger { color: #a94442;}a.text-danger:hover { color: #843534;}

文本对齐风格

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
例如：

<p class="text-left">我居左</p>

源码：

.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}

目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表

Bootstrap对于列表，只是在margin上做了一些调整
源码：

ul,ol { margin-top: 0; margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}

去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
例如：

<ol class="list-unstyled"> <li>不带项目编号</li> <li>不带项目编号</li></ol>

源码：

.list-unstyled {padding-left: 0;list-style: none;}

内联列表

通过添加类名“.list-inline”来实现内联列表，其实就是把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。可以用来做水平导航。
源码：

.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}

定义列表