目录
引入BootStrap
版本
下载
引入Bootstrap
支持性
BootStrap容器
HTML5 文档类型
移动设备优先
布局容器
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
栅格系统基础
简介
栅格参数
栅格系统（可以等比列，也可以不等比列）
栅格系统实例练习
实例1：手机、平板、小屏幕、大屏幕
栅格系统属性
1.删除网格间距（.row-no-gutters）
2.列偏移（.col-md-offset-*）
列偏移可以等比列也可以不等比例
3.嵌套列
4.列排序（ .col-md-push-* 和 .col-md-pull-*）
排版
标题
对齐
改变大小写
缩略语
代码
内联代码
用户输入
代码块
变量 效果数学公式
程序输出
表格
1.基本表格 class="table"
2.条纹状表格 class="table table-striped"
3.带边框的表格 class="table table-bordered"
4.鼠标悬停 class="table table-hover"
5.紧缩表格 table-condensed
6.状态类
给每一行添加颜色
1.active：悬停，灰色
2.success：选中，淡绿色
3.info：信息，淡蓝色
4.warning：警告，淡黄色
5.danger：危险，淡粉色
7.响应式表格 .table-responsive 需要在table外面包裹一层
表单_基础表单
基础表单
基础表单
1.给form增加class="form-group"
2.label的for跟input的id同名
3.给input增加class="form-control"
内联表单
内联表单
1.给外层的form添加：class="form-inline"
2.用div包裹label和input，div增加class="form-group"
3.label的for跟input的id同名
4.给input增加class="form-control"
5..input-group-addon 的外层需要包裹一层容器，class="input-group"
水平排列的表单
水平排列表单
1.给外层的form增加class="form-horizontal"
2.用div包裹label和input
3.控制位置的时候使用了栅格系统，需要将input包裹在容器中，class为所占的位置
4.lable里面增加class="control-label col-lg-4" col-lg-4代表占的位置
5.class="col-lg-offset-4" 代表不是等比列排放，也是为了调位置
表单_被支持的控件
输入框
文本域
多选和单选框
下拉列表（select）
静态控件（.form-control-static ）
静态控件：
1.如果不加.form-control-static 这个属性，文本不在一个水平上
2.需要包裹在一个form中，增加属性class="form-horizontal"让其水平排列
3.label和p放到一个容器中，给容器添加class="form-group"
4.使用栅格系统调节位置的时候，需要给label增加class="control-lable"
5.使用栅格系统调节位置的时候，需要将p放到一个容器中调节位置
表单_表单状态
焦点状态
禁用状态（input里面添加disabled）
只读状态(input 里面添加readonly）
校验状态(.has-warning、.has-error 或 .has-success)
---> 就是给输入框添加阴影颜色 需要添加到input的父级里面
控件尺寸( .input-lg)
按钮
可作为按钮使用的标签或元素
预定义样式
预定义样式
意思就是让按钮显示不同的颜色效果
1.默认效果 ：.btn-default
2.首选项 ：.btn-primary
3.成功 ：.btn-success
4.一般信息 ：.btn-info
5.警告 ：.btn-warning
6.危险 ：.btn-danger
7.链接 ：.btn-link
尺寸
按钮尺寸
就是在button的class中增加btn-lg btn-md btn-sm btn-xs
按钮尺寸
1.就是在button的class中增加btn-lg btn-md btn-sm btn-xs
2.也可以给button增加class="btn-block" 把宽度撑开到父级一样宽（移动端比较多见）
禁用状态 （给button增加 disabled)
图片
响应式图片
响应式图片，给img增加class="img-responsive"
图片形状
图片的形状
就是给图片设置形状，给img增加class="img-circle"
1.圆角 ：class="img-rounded"
2.圆形 ：class="img-circle"
3.边框（放到一个容器中） ：class="img-thumbnail"
辅助类
情境文本颜色
文本呈现不同颜色 增加 class="text-success"
情境背景色
背景颜色呈现不同,并且撑开到父容器宽度,增加class="bg-success"
关闭按钮
关闭按钮 ：给button增加class="close" 用span包裹实体字符
三角符号
三角形 span标签承载 增加class="caret"
Glyphicons 字体图标
字形字体图标，
一般建议使用span标签包裹
1.可以在button标签中嵌套span，给span增加class，class后面为字体
下拉菜单
实例
下拉菜单：
1.需要包含在一个容器为class="dropdown"中
3.点击按钮实现下拉，需要引入jQuery，
然后在button中增加class="dropdown-toggle" 和 data-toggle="dropdown"
4.如果包含在class="dropup"的容器中，箭头和内容是在上面显示的
温馨提示
下拉菜单的动态效果以来BootStrap的JS文件，同时BootStrap的JS文件依赖于jQuery文件
意思就是也需要引入jQuery
对齐
标题
标题：
标题不可被选中
分割线
分割线：
给需要添加分割线的地方增加li标签，并且增加class="divider"，如下
禁用的菜单项
禁用菜单项：
在需要禁用的地方，给li标签增加class="disabled"，如下
按钮组
基本按钮组
按钮工具栏
尺寸
嵌套
垂直排列
两端对齐排列的按钮组
按钮式下拉菜单
单按钮下拉菜单
分裂式按钮下拉菜单
尺寸
向上弹出式菜单
输入框组
基本输入框组
尺寸
作为额外元素的多选框和单选框
作为额外元素的按钮
作为额外元素的按钮式下拉菜单
作为额外元素的分裂式按钮下拉菜单
导航
标签页
胶囊式标签页
两端对齐的标签页
禁用的链接
添加下拉菜单
导航条一
默认样式的导航条
品牌图标
表单
按钮
文本
非导航的链接
默认导航条：在class="navbar navbar-default"的容器中
品牌图标：
1.放置中间的话，增加一个容器class="container"
3.a标签里面嵌套img，给a标签增加class="navbar-brand"
导航栏：
1.导航栏、表单、按钮、文本、非导航链接都需要放在容器class="collapse navbar-collapse"
2.增加ul li标签，给ul标签增加class="nav navbar-nav"
3.在需要增加下拉列表的地方前面增加一个li标签，并且命名为class="dropdown"
4.在里面放a标签，给a标签增加 class="dropdown-toggle" data-toggle="dropdown",然后再a 标签文本后面添加三角形
下拉表单
表单：
1.也是需要放在容器class="collapse navbar-collapse"的容器中
2.在容器中增加form表单，class="navbar-form"
3.在class="navbar-form"的表单中，增加容器class="form-group",如果出现换行的情况，需要在form表单的class中增加class="navbar-left"
4.接着增加input输入框，class="form-control"
按钮：
1.也是需要放在容器class="collapse navbar-collapse"的容器中
2.增加button标签，class="btn btn-primary navbar-btn navbar-left",如果出现换行的情况，需要在button中的class中增加class="navbar-left"
文本：
1.也是需要放在容器class="collapse navbar-collapse"的容器中
2.给文本标签，增加class="navbar-text"
非导航的链接
1.也是需要放在容器class="collapse navbar-collapse"的容器中
2.在文本标签中增加a标签，a标签增加class="navbar-link",如下：
点击跳转到淘宝
导航条二
导航条的位置：navbar-left navbar-right
导航条静止在顶部：navbar-static-top
导航条固定在顶部：navbar-fixed-top
导航条固定在尾部：navbar-fixed-bottom
导航条反色：navbar-inverse
以上的属性增加在导航条class="navbar navbar-default"的容器中
组件排列
静止在顶部
固定在顶部
固定在底部
反色的导航条
路径导航（面包屑）
路径导航（面包屑）
1.在容器class="container"中
2.使用ol li标签
3。ol增加class="breadcrumb" breadcrumb面包屑的意思
分页
默认分页
默认分页：
1.放到class="container"容器中
2.增加到nav标签中
4.在li标签中增加a标签，实体用span标签承载
5.« 《 » 》 &larr <- &rarr ->
尺寸
分页的大小:
翻页
居中的翻页:
1.增加class="container"
2.增加nav标签
4.给li标签增加a标签,实体使用span标签承载
对齐链接
两端的翻页:
1.增加class="container"
2.增加nav标签
4.给li标签增加a标签,实体使用span标签承载
5.两端的翻页实在居中翻页的基础上给li标签增加class="previous" 和 class="next"
可选的禁用状态
可选禁用状态:
在需要禁用的地方给li标签增加class="disabled"
标签
可用的变体
标签:
1.标签使用span承载
2.给span标签增加class="label label-default"
3.label-default/primary/success/info/warning/danger
徽章
给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目
徽章:
1.使用span标签包裹
2.span标签增加class="badge"
3.可以在链接中,也可以在文本中,还可以在导航中
适配导航元素的激活状态
巨幕
巨幕:
如果巨幕在中间?
1.外面增加容器class="container"
2.在容器class="container",里面再增加一层容器class="jumbotron"
3.然后在class="jumbotron"中增加banner
如下:
巨幕:
如果要实现巨幕跟浏览器的宽度一致,但是里面内容居中呢?
1.将容器class="jumbotron"放到外面
2.在里面增加class="container"
3.在class="container"容器中放banner
如下:
页头与缩略图
页头
页头:
1.外层使用class="container"容器
缩略图
缩略图:
1.外层使用class="container"容器
2.使用栅格系统调整位置
3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"
默认样式的实例
自定义内容
自定义内容:
1.外层使用class="container"容器
2.使用栅格系统调整位置
3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"
4.在a标签里面再增加一个class="caption"容器
5.在class="caption"容器中再增加标题h1`h6,p标签等
警告框
基本的警告框
基本警告框:
1.外面增加class="container"容器
2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器
可关闭的警告框
可关闭的警告框:
1.外面增加class="container"容器
2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器
3.在class="alert alert-success"的容器中增加,
span文本标签 button标签,给button标签增加class="close",实体使用span包裹
同时在class="alert alert-success"的class上增加class="alert-dismissible"
警告框中的链接
警告框中的链接:
1.外面增加class="container"容器
2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器
3.在容器中增加span标签包裹文本,在文本中增加a标签,
再给a标签增加class="alert-link"
进度条
基本实例
没有提示标签的进度条:
1.外层增加class="container"的容器
3.再class="progress"的容器中增加class="progress-bar"的容器
4.在class="progress-bar"的容器中增加属性
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
style="width:30%"
5.在class="progress-bar"的容器中增加span标签,class="sr-only"
带有提示标签的进度条