bootstrap(排版)

标题：

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>

段落（正文文本）

在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

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

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

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

4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

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

强调内容

可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
}
}

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

粗体

在Bootstrap中，可以使用和[b]标签让文本直接加粗。[/b]

b,strong {
font-weight: bold; /*文本加粗*/
}

斜体

斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。

<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

强调相关的类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

文本对齐风格

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is </p>

列表–简介

无序列表

<ul>
<li>…</li>
</ul>

有序列表

<ol>
<li>…</li>
</ol>

定义列表

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

Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

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

☑ 内联列表

是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>

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

☑ 描述列表（列表–定义列表）

只是调整了行间距，外边距和字体加粗效果。垂直显示的效果

<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl>

☑ 水平描述列表

Bootstrap可以给
添加类名“.dl-horizontal”给定义列表实现水平显示效果。

css源码：
@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;
}
}

只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：

1、将dt设置了一个左浮动，并且设置了一个宽度为160px

2、将dd设置一个margin-left的值为180px，达到水平的效果

3、当标题宽度超过160px时，将会显示三个省略号

代码（一）

本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：

1、使用

来显示单行内联代码

2、使用

来显示多行块代码

3、使用来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来：

1、LESS版本，请查阅code.less文件

只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

☑ LESS版本，对应的文件是 tables.less

☑ .table：基础表格

☑ .table-striped：斑马线表格

只需要在<table class="table">的基础上增加类名“.table-striped”即可：
<table class="table table-striped">
…
</table>

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

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

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

<table class="table table-hover">
…
</table>

鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。

☑ .table-condensed：紧凑型表格

<table class="table table-condensed">
…
</table>

Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

表格–响应式表格

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