Bootstrap基础知识

基本的HTML模板###

Bootstrap的HTML标准模板

Hello, world!

标题###

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：

除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了标签来制作副标题。

Bootstrap标题一我是副标题

Bootstrap标题二我是副标题

Bootstrap标题三我是副标题

Bootstrap标题四我是副标题

Bootstrap标题五我是副标题

Bootstrap标题六我是副标题

段落###

段落是排版中另一个重要元素之一。在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元素）如无重置都会具有这些样式效果。

另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：

p {
margin: 0 0 10px;
}

强调内容###

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：

我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，

我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。

除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

粗体###

粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

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

斜体###

在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。

我正在学习Bootstrap。我发现Bootstrap真的好强大。

强调相关的类###

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

.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：两端对齐

列表--简介###

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

无序列表与有序列表####

在样式方面，Bootstrap只是在此基础上做了一些细微的优化

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

去点列表####

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

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

内联列表####

Bootstrap像去点列表一样，通过添加类名“.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;
}

栅格系统###

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式栅格系统。Bootstrap框架中的栅格系统就是将容器平分成12份。

工作原理####

Bootstrap框架的网格系统工作原理如下：

1.数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：

2.在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

3.具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素。

4.通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响。

基本用法####

栅格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的栅格样式，关于屏幕尺寸如下图：

列组合#####

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：

.col-md-4

.col-md-8

.col-md-4

.col-md-3

.col-md-6

.col-md-3

运行效果：

列偏移####

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

.col-md-4

列向右移动四列的间距

.col-md-3

.col-md-4

列向右移动四列的间距

运行效果：