（网址v3.bootcss.com/css/#tables）

理解：相当于是一个精装房，里面已经设定好一定的样式，然后摘抄过来后，根据自己的项目情况，进行适当的装修（修改），改成自己想要的最终效果。

框架概念：将常见效果进行统一的封装后形成的一套代码。例如：Bootrap

兼容性：针对ie浏览器的兼容性比较差。

优点：可以快速，高效率地进行页面的开发，而且稳定性也比较高。

注意：Bootstrap 是移动设备优先的

全局css样式

1.1布局容器

需要给页面的内容和栅格系统包裹着一个.container 容器，但是不同之处是是否有padding的区别

(a).container：类用于固定宽度并支持响应式布局的容器。默认是有指定的宽度以及居中效果（相当于我们常用的版心布局）

本布局会自动设定有左右内边距各15px，想要清除左右15的边距，可以在.container 里面添加 .row ，内容在row里书写

通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

如下：

​ <div class="row">

​ <div class="col-md-3 col-sm-6">图片</div>

​ </div>

​ </div>

(b).container-fliud：类用于 100% 宽度，占据全部视口（viewport）的容器。（相当于是通栏布局）

1.2 栅格系统

概念：用于通过一系列的行（row）与列（column）的组合来创建页面布局，

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

使用方式：可以通过媒体查询（@media screen (){}）的方式，设置在不同色视口宽度下，页面显示不同的栅格数量。

栅格系统

注意点：

1、col-xs-12可以不用书写的情况

如果栅格系统里面的是div盒子需要在极小屏幕下设置一行显示一个的情况下，应该是设置col-xs-12，但是由于div本来就有独占一行的特性，所以可以不用书写。

2.当有两个屏幕显示下是一样的效果时，可以只设置最小值即可

例如当在大屏幕和中屏幕下的宽度都是显示一样的效果时，那么只设置col-md-3就可以完成在两个屏幕下都显示一行4个的效果。

1.3样式中的其他常见样式

排版：标题标签的<h1> 到 <h6> 均可使用，但是去掉了加粗的效果

文本对齐方式：text-left左对齐，text-center居中对齐，text-right右对齐

表格：为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。1、通过 .table-striped 类给每一行增加斑马条纹样式。2、添加 .table-bordered 类增加边框。

按钮：为 <a>、<button> 或 <input> 元素添加按钮类（button class）.可以设置按钮的样式，大小，添加相关的类名即可

图片：设置图片的形状（class="img-rounded"正方形，class="img-circle"圆形，class="img-thumbnail正方形外加边框边距）

组件

导航条：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

1.当遇到导航条中的内容折行的情况（也就是导航条占据两行）的时候，可以通过bootstrap定制进行调整 @grid-float-breakpoint这个变量实现。

JavaScript 插件

常用的carousel轮播图效果，通过copy代码到自己的less文件中，进行想对对应的修改，以及添加上图片。

定制并下载 Bootstrap

过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本。这个功能支持 IE9+ 或最新版本的 Safari、Chrome 或 Firefox 浏览器。