1 引入

如果想要用到BootStrap提供的js插件，那么还需要引入jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的

2 容器

- 固定宽度：.container

- 流式布局：.container-fluid

3 响应式布局

- 超小屏幕：小于 768px

- 小屏幕：大于等于 768px

- 中等屏幕：大于等于 992px

- 大屏幕：大于等于 1200px

为什么要进行响应式开发？

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

什么是响应式？

利用媒体查询，让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。

用到的技术：

CSS3@media查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性：

device-width, device-height 屏幕宽、高

width,height 渲染窗口宽、高

orientation 设备方向

resolution 设备分辨率

语法：

@media mediatype and|not|only (media feature) {

CSS-Code;

}

不同的媒体使用不同的stylesheet

viewport

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

Bootstrap的栅格系统

container

row

column

注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

4 栅格系统

1、概念

将父级可用宽度(content)均分为12等份

0. 包含在container里面

1. 每一行(row)均分成12列(col-xx-**)必须放在row中)，

2. 每一个标签可以自定义占的列数(col-xx-**)

列偏移

列排序

2、列比

- 超小屏幕：.col-xs-*

- 小屏幕：.col-sm-*

- 中等屏幕：.col-md-*

- 大屏幕：.col-lg-*

v-hint：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕

3、行

...

4、列偏移

- 超小屏幕：.col-xs-offset-*

- 小屏幕：.col-sm-offset-*

- 中等屏幕：.col-md-offset-*

- 大屏幕：.col-lg-offset-*

5 常用组件

字体图标

优点：

size小

放大不失真

可以随字体颜色变化而变化

1. Bootstrap自带的

2. font Awesome

http://www.fontawesome.com.cn/

下拉菜单

按钮组

输入框俎

导航

分页

标签和徽章

页头

缩率图

进度条

补充：滚动的进度条

var $d1 = $("#d1");

var width = 0;

var theID = setInterval(setValue, 200);

function setValue() {

if (width === 100) {

clearInterval(theID);

} else {

width++;

$d1.css("width", width+"%").text(width+"%");

}

}

6. Bootstrap常用组件

7. Bootstrap常用插件

1. 模态框

模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内(也就是说，尽量作为 body 标签的直接子元素)，以避免其他组件影响模态框的展现和/或功能。

Launch demo modal

注意：

通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。

通过 .fade类来控制模态框弹出时的动画效果(淡入淡出效果)。

通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

2. 轮播图

可以在为图片添加介绍信息：

方法：

设置切换间隔为2秒，默认是5秒。

$('.carousel').carousel({

interval: 2000

})

8. 其他插件

1. SweetAlert for bootstrap

https://lipis.github.io/bootstrap-sweetalert/

REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/8214637.html