前置知识 （默认 CSS）
{
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1{
font-size:36px;
margin-top:20px;
margin-bottom:20px;
}
h2{
font-size:30px;
margin-top:20px;
margin-bottom:20px;
}
h3{
font-size:24px;
margin-top:20px;
margin-bottom:20px;
}
h4{
font-size:18px;
margin-top:10px;
margin-bottom:10px;
}
h5{
font-size:14px;
margin-top:10px;
margin-bottom:10px;
}
h6{
font-size:12px;
margin-top:10px;
margin-bottom:10px;
}
一. 使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--让IE使用最新的渲染风格-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置浏览的宽度 初始化比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<!-- 加载 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 加载自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
二. 布局容器
顾名思义，就是放Bootstrap代码的容器，只有放在container里面的html代码才会被Bootstrap识别。
注：我们要把Bootstrap的HTML的代码都放在 带
container 或者 container-fluid类的 <div>标签中.
三. container 和 container-fluid
- 数据行（.row）必须包含在容器.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内填充（padding）。如：
<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
<div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
<div class="row"></div>
</div>
- 在数据行（.row)中可以添加列（column），但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），默认12。
<div class="container">
<div class="row">
<!-- 如：2+6+4=12 -->
<div class="col-md-2"></div>
<div class="col-md-6"></div>
<div class="col-md-4"></div>
</div>
</div>
-
详细查询
四. 媒体查询
下面是媒体查询（media query）的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别应用不同的样式甚至替换整个样式表。
@media (media-feature-name: value) {
/* 符合条件时应用的样式 */
}
如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。
注意：浏览器始终会采用位于 @media 代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。 为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。
五. 列偏移（offset）
在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。
只需要给需要偏移的列元素上添加类名 col-md-offset-* (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加.col-md-offset-6 类将 .col-md-6元素向右侧偏移了6个列（column）的宽度。
<div class="container">
<div class="row">
<div class="col-md-2 ">col-md-8 </div>
<div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div>
<div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
</div>
</div>
使用col-md-offset-*对列进行 向右偏移 时，要 保证列与偏移列的总数不超过12，不然会致列断行显示。 其实原因也很简单：因为该类是对于列设置margin-left，并且我们在上面的源码展示中，也可以看有每一列都有着float:left的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了。
六. 列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（.row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（.row），宽度为100%时，就是当前外部列的宽度。
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。
七. 列排序
列排序其实就是改变列的方向，就是 改变左右浮动，并且 设置浮动的距离。在 Bootstrap 框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。
col-md-push-* ：向右浮动
col-md-pull-*：向左浮动
八. 响应式 与 实例
8.1 移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-和 .col-md-。
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
<div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
<div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
宽屏显示效果如下：
窄屏显示效果如下：
其实从上面代码和实际的显示效果，我们就可以看出一些问题来：
- 在宽屏时，使用 col-md-* 的布局方式，在窄屏时使用 col-xs-* 布局
- 响应式的列重置与列中设置的类的排列顺序无关。
- 响应式列重置，在一个 .row 仍然存在列超过12时，col-xs-6 * 3=18。多余列的元素将作为一个整体单元被另起一行排列。
8.2 手机、平板、桌面
在上面案例的基础上，通过增加使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-sm-12 col-md-4">.col-xs-6 .col-sm-12 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
宽屏：桌面
中屏：平板
窄屏：手机
然后我们从这一部分代码与实际效果，再加上上面做的一点小总结，对比之后又能发现一些问题：
- Bootstrap中对于栅格系统的展示总是优先展示对应屏幕大小范围的类（.col-xs-6和.col-sm-4等等）。
- 在为不同大小屏幕，添加多个类一定要记住在基本用法处的表格中的内容，它决定了在不同大小屏幕下的显示与排列。
- 若还要继续添加在超大屏幕下的特定显示效果，只需要对列再添加一个.col-lg-*的类，就能达到你所想要的。
8.3 响应式列重置
除了在上面讲到的内容，在官方文档中还提到了响应式列重置，在我看来其实就是以下几点（或者说在这样的条件下可以使用）：
- 需要对于不同屏幕大小进行处理，添加多个对于列宽进行处理的类。
- 在缩小屏幕时，同一数据行（.row）针对小屏幕设置的类的宽度（.col-sm-*等等）加起来超过12，余下部分进行换行显示。
- 在不同列的高度，有比较大的差异。可以在未超过12与超过12的部分，两者之间添加下面这样的代码：<div class="clearfix visible-xs-block"></div>。（.visible-xs-block这一系列的类，会在后面进行讲解） 它最主要的作用是：它是响应式的，会占据未超过12的部分的宽高，且只有在发生列换行显示（堆叠）才进行设置。
- 为了便于大家理解，我加一句：把上面那段代码复制到数据行.row容器内的最末端，它所占据的宽高和.row是一样的。（内容中有多段这样的代码的时候不成立，原因大家应该都能看出来了）
网友评论