bootstrap(1)关于排版

关于标题

我们在html中通过h1 h2,h3...h6来定义标题，同样，在bootstrap中也是通过h1到h6来定义标题，不同的是在bootstrap中重新定义了样式

源码如下：

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

1字体颜色和样式继承于父元素，字体粗细为500，行高为1.1，是font-size的1.1倍，对于不同标题的字体大小设置为

h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

2重新设置了margin-top和margin-bottom的值,h1-h3为20px,h4-h6为10px

在上面的源码中我们也可以看到，对于非标题元素，我们可以通过定义class为h1-h6来i将非标题元素转化为标题元素

对于在主标题后面添加一个副标题的情况，我们使用small元素来包裹副标题

<h1>我是主标题<small>我是副标题</small></h1>

　　显示效果small标签内的字体显示为灰色，字体粗细显示为了常规效果

  h1-h3内的文本，small内的文本显示为当前字体的65%，h4-h6显示字体为当前字体的75%；

关于正文

bootstrap将全局样式设置为

font-size:14px;

line-height:1.428;

这些属性设置为body元素和所有的段落元素，另外段落元素被设置为10px

强调文本：

<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 -->
<i>i</i><!--无特殊意义， 斜体 -->
<small>small</small><!-- 小号字体-->
<strong>strong</strong><!-- 语气强烈的强调，粗体 -->
<em>em</em><!-- 强调，斜体 -->　　

关于强调相关的类：

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

文本对齐：

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

关于列表：

对于列表有以下几种类：

（1）添加  class="unstyled"将列表的项目上的点号去掉

代码如下

<ul class="unstyled">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
</ul>

显示：

项目1

项目2

项目3

通过unstyled我们去掉了选项前面的点号

（2）通过添加class=".list-inline"来使垂直列表转化为水平列表

<ul class="list-inline">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
</ul>　　

显示：

项目1  项目2 项目3

关于表格

在bootstrap中添加了几种表格的样式；包括一种基础样式，四种附加样式和一个响应式表格，表格如下：

.table	基础表格
.table-striped	斑马线表格
.table-bordered	带边框的表格
.table-hovered	鼠标悬停高亮的表格
.table-condensed	紧凑型表格
.table-responsive	响应式表格

（1） 注意：要添加附加样式：要将附加的样式添加在基础样式之后，

类似：<table  class=".table  .table-striped"></table>

对于基础样式.table的样式设置：

1. 表格设置了 margin-bottom:20px’
2. thead底部设置一个2px的浅灰色线段
3. 单元格顶部设置一个1px的浅灰色线段

（2）对于响应式表格，使用.table-responsive来实现响应式表格，使用方法，在table外面添加一个容器

例如：

<div  class=‘table-responsive>

　　<table class="table  table-border">

　　　　　　<thead>

　　　　　　</thead>

　　　　　　<tbody>

                 </tbody>

　　</table>

</div>

(3)通过状态类可以实现为行或者单元格设置颜色，提示相关的信息

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作