一：bootstrap排版

标题：

段落正文

　　

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）

 

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

强调内容(.lead)

<small>标签

　　1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
　　2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

<strong><b>标签

<em><i>标签

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

强调相关的类   

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

文本对齐风格

Bootstrap通过定义四个类名来控制文本的对齐风格：

  ☑   .text-left：左对齐

  ☑   .text-center：居中对齐

  ☑   .text-right：右对齐

  ☑   .text-justify：两端对齐

列表

　　去点（.list-unstyled）　　除了项目编号之外，还讲列表左边距清0

　　内联 (.list-inline)　　　　把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

　　水平(.dl-horizontal)

　　　　　　　　　　　　　　1、将dt设置了一个左浮动，并且设置了一个宽度为160px
　　　　　　　　　　　　　　2、将dd设置一个margin-left的值为180px，达到水平的效果
　　　　　　　　　　　　　　3、当标题宽度超过160px时，将会显示三个省略号

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

 

　　定义

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

表格

Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

  ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

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

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

　　特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

　　斑马线表格

<table class="table table-striped">

　　带边框的表格

<table  class="table table-bordered">

　　鼠标悬停高亮表格

<table class="table table-hover">

　　紧凑型表格

<table class="table table-condensed">

　　响应式表格

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>