bootstrap day1 day2 栅格系统 水平表单 下拉列表 按钮的应用 导航等---

<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效果变成

下拉菜单

 

 效果

 

效果