Bootstrap使用

较为流行的前端框架，位class属性设置多个值来实现页面布局和一些样式和js的实现

浏览器兼容性好（IE8及以下除外）

不同屏幕分辨率的终端适应性好

代码整洁

配置： 引用cdn或者本地bootstrap.css bootstrap.js(在这之前要引用jquery.js)

核心

1. 响应式设计：页面的设计与开发应当根据用户的行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。
2. 栅格系统
3. 媒体查询

媒体查询： 媒体查询是进行响应式设计的核心要素，其功能非常强大 Bootstrap主要用到min-width,max-width以及and语法，用于在不同的分辨率下设置不同的css样式

    @media (max-width: 767px) {
        /*小于 767px 这里的样式生效*/
    }
    @media (min-width: 768px) and (max-width: 991px) {
        /*在768px ~ 991px之间  这里的样式生效*/
    }
    @media (min-width: 1200px) {
        /*大于 1200px 这里的样式生效*/
    }

** 栅格系统：** 首先申明一个class = container的容器,再添加class = row 的行，再在行里面定义列，默认将屏幕分为等分的12列

bootstrap栅格系统把屏幕分为四种（均指横向分辨率）：

• extra small —— 超小屏幕（手机）： xs < 768px

此分隔方案下容器最大宽度：自动

• small —— 小屏幕（平板）： sm ≥ 768px

此分隔方案下容器最大宽度：750px

• middle —— 中等屏幕（桌面显示器）： md ≥ 992px

此分隔方案下容器最大宽度：970px

• large —— 大屏幕（大桌面显示器） ： lg ≥ 1200px

此分隔方案下容器最大宽度：1170px

<div class="row">
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
　　<div class="col-md-8">.col-md-8</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-4">.col-md-4</div>
　　<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
　　<div class="col-md-6">.col-md-6</div>
　　<div class="col-md-6">.col-md-6</div>
</div>

解释：每一个“row”代表一行，而内部的“col-md-数字”代表一个单元格；Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份，合理的选择单元格的数字配置，再往单元格中添加我们想要的内容，这样一个栅格系统就完成了

列偏移： col-md-offset-数字 基于左边最近的div列向右偏移，没有div就基于最左边

列嵌套： 一个div里嵌套，可以再分为12份

列排序： .col-md-push-*字面意思是"推"，可理解为向左推，自然就往右移动了。 .col-md-pull-*与push相反，字面意思"拉"，在原来的位置基础上，向左"拉"，容器向左移动。

清除浮动： 出现列对不齐的情况，检查是否由定位的float的原因，有,则需要清除浮动

<div class="clearfix visible-xs"></div>，此代码含义为：只在超小分辨率的情况下（前提），清除左右的浮动元素

转载于:https://my.oschina.net/huayangchen/blog/1627425