Bootstrap常用

1、栅格系统（Grid Systems）
即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版，后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏

2、栅格系统的行和列
Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局
栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果
2、Bootstrap栅格系统的基本使用方式
①Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。
②行必须包含在布局容器中，以便为其赋予合适的排列和内补。
③通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。
④行使用样式.row，列使用样式.col--，内容应当放置于列内，列大于12时，将会另起一行排列
二、Bootstrap常用的组件

1、概念：Bootstrap 是由 Twitter 的 Mark Otto(马克·奥托) 和 Jacob Thornton（雅各布·桑顿） 两位设计师开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品
2、特点

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
Bootstrap简洁灵活，使得 Web 开发更加快捷
Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小
3、使用原因
移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持。所有的主流浏览器都支持。
容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。
响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
4、环境安装
下载的中文地址：http://v3.bootcss.com/
环境配置
（1）使用本地文件：
①bootstrap.css(bootstrap.min.css)：必须的样式文件
②bootstrap.js(bootstrap.min.js):必须的js文件
③jquery.js(jquery.min.js):根据实际情况，若要使用，必须在bootstrap.js文件之前引入
（2）使用CDN加速器：项目在运行时必须联网
三、排版

1table：表格的基本样式
.table-striped：斑马线效果(隔行变色)
.table-bordered：边框
.table-hover：鼠标悬停效果(对鼠标悬停做出响应)
.table-condensed：表格紧缩样式
状态类样式：设置行或单元格的样式
通过这些状态类可以为行或单元格设置颜色
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
2、表单(form)
.form-group：可以让表单控件之间有更好的位置排列
.form-control：可以让使用该样式的input、textarea、select的宽度为100%

3.按钮

• .btn-lg：大按钮
• .btn-sm：小按钮
• .btn-xs：超小按钮
• .btn-block：按钮的宽度为父容器的100%

4.图片

• .img-rounded：圆角图片
• .img-circle：圆形图片
• .img-thumbnail：边框圆角
• .img-responsive：响应式图片
• .center-block：图片水平居中

5.背景颜色

• bg-success
• .bg-primary
• .bg-warning
• .bg-info
• .bg-danger