Bootstarp
介绍
bootstarp是Twitter公司开发基于html,css,js的前端框架 为实现web应用程序快速实现开发提供了一套前端工具包 UI（userInterface用户界面）框架
Bootstrap的特性
响应式设计 (css媒体查询 一套样式 实现各个终端尺寸适配) pc 平板 手机端 栅格布局 完整的类库 jQuery插件 不同的使用场景 移动设备优先
Bootstrap3
IE9以及以上
某些功能性的组件依赖于jQuery
Bootstarp下载地址
// 官方地址 getbootstrap.com // 中文地址 www.bootcss.com
前端开发过程中遇到的问题
重复 复杂 无意义的命令 结构冗余 胡乱嵌套 页面错乱
Bootstrap全局样式的特点
代码整洁 风格统一 美观易用
通过class设置样式
排版
标题
h1~h6 / .h1 ~ .h6 副标题 （small）
文本
段落 对齐方式 文本标记
// 对齐 .text-left .text-center .text-right .text-lowercase .text-uppercase .text-captitalize
表格
.table-bordered 带边框 .table-striped 条纹状 .table-hover 悬停变色 .table-condensed 紧凑风格
.info .success .warning .danger 在表格中起作用
.bg-info .bg-warning …
表单
.form-control 表单控件 .form-group 表单组件 .form-inline 表单水平排列
按钮
// btn //样式： btn-default btn-primary btn-success // btn-info btn-warning btn-danger btn-link //更改大小 btn-lg btn-sm md xs // 激活 active 块级化 btn-block 可以给其他标签套用这些类 比如a标签
Bootstrap的图片 --形状
圆角 .img-rounded 圆形 .img-circle 带有边框的圆角图形 .img-thumbnail
文本颜色 .text-primary .text-success .text-info .text-warning .text-danger 背景颜色 .bg-primary .bg-success .bg-info .bg-warning .bg-danger 状态设置 .close 关闭按钮 三角符号 .caret 三角符号
viewport 与bootstrap的响应式开发
@media screen and (min-width:*px) and (max-width:*px) { } bootstrap内部实现了 css媒体查询（Media Query） 来实现响应式布局（随着屏幕的尺寸变化而变化 rem 响应式布局的方式） 一套 栅格布局（ 12份划分 ）
bootstrap的字体图标
基本使用
下拉菜单
控件组
.input-group 表示控件组 .input-group-addon 添加控件组的图标
分页
.pagination ,pagination-lg/sm .active .pager .previous/.next
弹出框
.alert .alert-success .alert-info .alert-warning .alert-danger .alert-dismissible 可以关闭 .alert-link 弹出框中的链接
面板
.panel .panel-default .panel-heading .panel-title .panel-body .panel-footer // .panel自带的success/warning/info/danger
列表
.list-group .list-group-item
导航
// .nav // .nav-tabs 选项卡式 // .nav-pills 按钮式 // .nav-stacked 垂直方向按钮式 // .nav-justified 两端对齐
