1、什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，这个概念是为解决移动互联网浏览而诞生的。

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

响应式网络设计 （ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。

 

2、bootstrap简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

是基于LESS的一套前端工具库，意图非常明显，想以一个项目，整合Compass，Blueprint，h5bp的目标功能，成为web前端的一站式解决方案。

* 一套完整的基础css模块，但不如compass丰富和强大
* 一套预定义样式表，包括一个格子布局系统，和blueprint提供的差不多，只是设计风格不一样
* 一组基于Jquery的js交互插件，这是Bootstrap真正强大的地方，也是她严格意义上可以取代Blueprint的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多jquery项目的默认设计标准。

 

 

bootStrap之全局CSS样式

一、概述

1、移动设备优先

基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统；

Bootstrap 是移动设备优先的

通过为视口（viewport）设置 meta 属性为  user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 

2、布局容器

bootStrap为页面内容和栅格系统提供了一个布局容器:container,提供了两种，但是不能相互嵌套:

.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

 

3、栅格类

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

 

类的前缀: col-xs-(手机) col-sm(平板) col-md(桌面显示器) col-lg(大桌面显示器)

 

3.1 水平排列

 1 <div class="container" style="color: #ff0000;">
 2     <div class="row">
 3         <div class="col-lg-4">hello 大 </div>
 4         <div class="col-md-4">hello 中 </div>
 5         <div class="col-sm-4">hello 小 </div>
 6         <div class="col-xs-4">hello 超小 </div>
 7     </div>
 8 
 9 
10 <div class="row">
11     <div class="col-md-8">.col-md-8</div>
12     <div class="col-md-4">.col-md-4</div>
13 </div>
14 <div class="row">
15     <div class="col-md-4">.col-md-4</div>
16     <div class="col-md-4">.col-md-4</div>
17     <div class="col-md-4">.col-md-4</div>
18 </div>
19 </div>
20 
21 <div class="container-fluid">
22     <div class="row">
23         <div class="col-lg-4">4</div>
24         <div class="col-lg-8"> 8 </div>
25     </div>

 

 

3.2 是否不希望在小屏幕设备上所有列都堆叠在一起？

1 <h1>你好，世界！</h1>
2 <div class="container">
3     <div class="row">
4         <div class="col-xs-12 col-sm-6 col-md-8" style="">手机全屏 平板一半 桌面8/12</div>
5         <div class="col-xs-6 col-md-4 " style="">手机一半 桌面4/12</div>
6     </div>
7 </div>

 

下图为最小状态:

下图为桌面状态:

 

 

4、排版

 <div >
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>

        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
        <h6>h6. B