Bootstrap简介

Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS 和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。 直接进入中文官网，选择中文文档，点击下载按钮就可以下载Bootstrap。

• 中文官网：http://www.bootCSS.com/
• 官网：http://getbootstrap.com/

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而目控制权在框架本身， 有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

Bootstrap优点

• 标准化的htm|+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

Bootstrap版本

• 2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善。
• 3.x：目前使用最多，稳定，但是放弃了IE6、IE7。对|E8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目。
• 4.x.x：最新版，目前还不是很流行

Bootstrap使用

在现阶段我们只考虑使用它的样式库。 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲：
1．创建文件夹结构
2．创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!--[if lt IE 9]>
	<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   	<!--解决ie9以下浏览器对CSS3 Media Query的不识别-->
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

3．引入相关样式文件

<!--Bootstrap核心样式-->
<link rel="stylesheet" href="bootstrap/css/boqtstrap.min.css">

4．书写内容

• 直接拿Bootstrap预先定义好的样式来使用
• 修改Bootstrap原来的样式，注意权重问题
• 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果,如果平时用的多就需要多看官方网站上的样式，以后就能直接拿来用了

Bootstrap 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，它提供了两个作此用处的类。

1. container类

• 响应式布局的容器固定宽度
• 大屏（>=1200p×）宽度定为1170px
• 中屏（>=992p对宽度定为970p×
• 小屏（>=768p对宽度定为750px
• 超小屏（100％）

2. container-fluid类

• 流式布局容器百分百宽度
• 占据全部视口(viewport)的容器。
• 适合于制作移动端页面开发

Bootstrap 栅格系统

• 栅格系统英文为"gridsystems"，也有人翻译为"网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
• Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。

通过改变栅格占用的个数来实现响应式布局。

栅格选项参数

栅格系统用于通过一系列的行（row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的 布局中。

• 按照不同屏幕划分为1一12等份
• 行（row)可以去除父容器作用15px的边距
• xs(extra small):超小；sm(small)：小；md(medium):中等；lg(large)：大，
• 列(column)大于12，多余的列(column)所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数例如class="col-md-4 col-sm-6"，实现响应式布局

<div class="container">
    <div class="row">
      <!--四个div各占有三列-->
      <div class="col-lg-3">1</div>
      <div class="col-lg-3">2</div>
      <div class="col-lg-3">3</div>
      <div class="col-lg-3">4</div>
    </div>
    <div class="row">
      <!--当列子元素占有列份数总和小于12列，会留有一些空白-->
      <div class="col-lg-6">1</div>
      <div class="col-lg-1">2</div>
      <div class="col-lg-1">3</div>
      <div class="col-lg-1">4</div>
    </div>
    <div class="row">
      <!--当列子元素占有列份数总和大于12列，多出的部分会换行显示，类似float浮动的效果-->
      <div class="col-lg-6">1</div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-2">3</div>
      <div class="col-lg-2">4</div>
    </div>
    <div class="row">
      <!--设置响应式布局的例子，大屏时一行显示4个元素，中屏时一行只显示两个-->
      <div class="col-lg-3 col-md-6">1</div>
      <div class="col-lg-3 col-md-6">2</div>
      <div class="col-lg-3 col-md-6">3</div>
      <div class="col-lg-3 col-md-6">4</div>
    </div>
</div>

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份列。我 们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

<div class="container">
    <div class="row">
      <!--嵌套一个新的栅格系统-->
      <div class="col-lg-4 row">
      	<p class="col-lg-6">1</p>
        <p class="col-lg-6">2</p>
      </div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-4">3</div>
    </div>
</div>

列偏移

使用.col-md-offset-（数字）类可以将列向右侧偏移（数字）列。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。

<div class="container">
    <div class="row">
      <!--嵌套一个新的栅格系统-->
      <div class="col-lg-4">左侧</div>
      <div class="col-lg-4 col-lg-offset-4">右侧</div>
      <!--将元素向右偏移x份位置,使其居中显示-->
      <div class="col-lg-8 col-lg-offset-2">这个盒子在屏幕中间
    </div>
    </div>
</div>

列排序

通过使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类就可以很容剔的改变列(column)的顺序。

<div class="container">
    <div class="row">
      <!--将左侧的元素向后推8份位置-->
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <!--将右侧的元素向前拉4份位置-->
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
      <!--将元素向后推x份位置,使其居中显示-->
      <div class="col-lg-8 col-lg-push-2">这个盒子在屏幕中间
    </div>
</div>

Bootstrap响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

与之相反的，visible-xs、visible-sm、visible-md、visibe-lg是针对不同设备显示某个内容, 其他时候隐藏。
Bootstrap其他（按钮、表单、表格）请参考Bootstrap文档。