<meta http-equiv="X-UA-Compatible" content='IE=edge'/>
为了兼容IE所设置的属性
栅格系统
包括行与列
如何创建一行div.row
如何创建div.col 对应的分辨率-N[0-12]
lg >=1200px 大显示屏
md [992px ,-1200px] 中显示屏
sm [768px-992px] 平板
xs [0-768px] 手机端
col-xs-1
col-xs代表 列中用xs栅格系统
1代表 1个列表框占1个列,所以一行中可以显示12个列表框(因为一行中只能显示12个列)
col-xs-2 :一个列表框占两个列,所以一行中只能显示6个列
列排序(col-md-push)只会改变当前这个格子的顺序不会影响别的格子
列偏移(col-md-offset)整个一行往右偏移 (影响后面的格子的位置)
表格
实现各行换色的效果(table-striped)
:nth-child(even) 也可以实现 ,但存在兼容性
响应式表格 <table class="table table-responsive">
表单
按钮大小为:btn-md btn-lg btn-xs btn-sm
按钮组添加类btn-group
水平排列的表单
按钮
激活状态
表单组框
下面的百度一下想要跟前面的输入框为一体 如果百度一下是直接写在span标签中时就要在span标签处添加一个input-group-addon类
如果像下面的例子中百度一下是用button标签写的然后嵌套在span标签中的这时就要在span标签处添加一个input-group-btn类
效果
小图标(font和cssde 位置不要改变)
下拉菜单
效果
解析 此时的箭头是向上的 菜单点击也出现在上面
如果想要箭头往下 菜单点击的时候也出现在下面只需把最外面的容器dropup类改为dropdo类就可以了 小三角形会随着 父容器类的改变而自动变为往下的
其中span里的类caret是控制三角形的类
与按钮配合使用 把dropdown改为btn-group
下拉菜单的例子
组合式下拉菜单例子
效果(此时的点击我与三角形事分开的)
选项卡式的导航
其中加上active类表示选中状态
效果
胶囊式的导航
墩叠式的导航
自适应导航
屏幕分辨率小于768效果变成
下拉菜单
效果
效果