排版

一.强调文本

<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>

<b>和<strong>标签让文本直接加粗

<em>或<i>标签 斜体

<div class="text-muted">提示，使用浅灰色（#999）</div>
<div class="text-primary">主要，使用蓝色（#428bca）</div>
<div class="text-success">成功，使用浅绿色(#3c763d)</div>
<div class="text-info">通知信息，使用浅蓝色（#31708f）</div>
<div class="text-warning">警告，使用黄色（#8a6d3b）</div>
<div class="text-danger">危险，使用褐色（#a94442）</div>

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">两端对齐</p>

<ul class="list-unstyled">   去除默认的列表样式
<li>不带项目符号</li>
<li>不带项目符号</li> 
</ul>

class="list-inline"     把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示

<dl class="dl-horizontal">   定义列表实现水平显示效果
<dt>北京</dt>
<dd>北京是中国的首都，是政治文化集中地</dd>
</dl>

 

使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行块代码
使用<kbd></kbd>用户要通过键盘输入的内容

 

高度超出340px，就会在Y轴出现滚动条
<!--下面是代码任务部分-->
<pre class="pre-scrollable"> 就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>

 

 

<div class="table-responsive">

<table class="table table-striped table-bordered table-hover">
　　<thead>
　　　　<tr>
　　　　　　<th>表格标题</th>
　　　　　　<th>表格标题</th>
　　　　　　<th>表格标题</th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td>表格单元格</td>
　　　　　　<td>表格单元格</td>
　　　　　　<td>表格单元格</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>表格单元格</td>
　　　　　　<td>表格单元格</td>
　　　　　　<td>表格单元格</td>
　　　　</tr>
　　</tbody>
</table>

</div>

   table：基础表格

   table-striped：斑马线表格

   table-bordered：带边框的表格

   table-hover：鼠标悬停高亮的表格

   table-condensed：紧凑型表格

   table-responsive：响应式表格