CSS框架之BootStrap
一、CSS框架：
1、定义：CSS框架是一系列CSS文件的集合体，包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。
2、CSS框架的优点：提高CSS代码重用效率，基础的代码不需要重复编写；
提供统一而规范的CSS编码规则，有利于团队协作；
浏览器对其兼容性较好。
二、BootStrap：
1、定义：BootStrap是当前较为流行的CSS框架之一，是Twitter退出的一个用于前端开发的开源工具包。
2、优点：企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多；
有利于学习和理解其他框架。
eg：第一个BootStrap界面(首先引入bootstrap.min.css）：
bootstrap_01
你好,欢迎学习BootStrap!
3、BootStrap基本样式—栅格
（1）栅格基本使用方式：
a. 使用.container(1170px)或container—fluid包裹；
b.列应当包含在行“row”中；
c.列的基本格式：（col-屏幕大小-数字）。
eg:栅格使用
bootstrap_01
col-3
col-9
（2）栅格基本使用方式二：
一行多余12列时自动换行；列偏移（.col-md-offset-n:向右偏移n列）；嵌套列（在一个col下再使用row产生一个或多个行）
eg：
Hello Bootstrap
.col-md-6
4
8
4、排版：
（1）基于html标签样式：h1-h6、p、mark、del、strong；
（2）文本对齐：Text-left text-right text-center text-nowrap；
（3）列表：list-unstyled(去掉标记)、list-inline(将li显示在一行)。
5、表格样式：
（1）基本样式：table-striped:条纹表格；table-bordered:带边框表格；
table-hover:鼠标悬停；table-condensed:紧缩表格；
（2）状态类：给单元格设置颜色：.active,.success,.info,.warning,.danger
（3）响应式表格：table-responsive
6、表单样式：
（1）基本样式：form-control:表单元素的宽度属性为100%；input-group:表单分组；
checkbox-inline:在一行显示checkbox;Radio-inline:在一行显示radio；
disabled：禁用；readonly:只读；
.has-warning、.has-error或.has-success：表单校验；
添加图标：has-feedback;控件尺寸：input-lg,input-sm
（2）表单其他样式：form-inline:内联表单；form-horizontal:水平标签。
（3）按钮：btn:显示为一个按钮，用于button元素或其他元素；
颜色：btn-default,btn-primary,btn-success,btn-info,btn-warning,btn-danger,btn-link;
尺寸：btn-lg,btn-sm,btn-block;
disabled:禁用。
（4）图片：响应式图片：img-responsive;
图片形状：img-rounded,img-cride,img-thumbnail.
7、辅助工具：
（1）文字颜色：text-muted，text-primary，text-success
text-info，text-warning，text-danger
（2）背景颜色：bg-muted，bg-primary，bg-success
bg-info，bg-warning，bg-danger
（3）浮动：Pull-xx: right:xxx%，Push-xx：left: xxx%，clearfix
（4）内容居中：center-block
（5）显示或隐藏：show,hidden
（6）响应式工具：visible-xs-*:可见，hidden-xs:隐藏
8、BootStrap组件
（1）下拉菜单：dropdown,dropdown-menu,
dropdown-header：不可点击的菜单
（2）按钮组：button-group;btn-group-vertical:垂直排列
（3）导航：a.基本导航：nav;nav-tabs:标签式导航；nav-pills:胶囊式导航；
b.导航条:Navbar, navbar-brand：品牌图标 ,navbar-btn：导航按钮
（4）标签：Label ， label-default ，label-primary
（8）徽章：badge;
（9）巨幕：jumbotron;
（10）缩略图：thumbnail
eg：下拉菜单，按钮：
bootstrap_01
eg:导航：
Hello Bootstrap
三、JavaScript插件：
1、模态框：data方式调用：
data-target="#myModal">Launch modal
Hello Bootstrap
eg:标签页：
Hello Bootstrap
首页内容
个人信息
消息内容
设置
eg：轮播图：
Hello Bootstrap
