bootstrap 基础

bootstrap 栅格系统
流体布局：container-fluid //头部 宽度为1366px 全屏布局
container:固定、1170、970、750、auto //固定 兄弟关系 宽度为1170px 中间布局

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

两个都分为12列
div[class*="col-"]{
        background: gray;
        border:1px solid;
    }
分12列：row、col
行里面包列
<div class="col-lg-1">col-lg-1</div> 1占12分之1
<div class="col-lg-4">col-lg-4</div> 4占12分之4
<div class="col-lg-6">col-lg-6</div> 6占12分之6
4+6=10 占12分之10 如果加起来>12 那么最后一个col浮动到下一行

分辨率:>=1200、>=992、>=768、<768
可选择的列 col-  作用
col-lg-数值 大屏 大于1200
col-md-数值 中屏 992-1200 之间
col-sm-数值 ipad 768-992 之间
col-xs-数值 移动端 小于768

组合模式：自适应布局
<div class="col-lg-4 col-md-6">123</div> 先屏幕大的、在屏幕小的 先lg 再 md

思路：先确定最大屏分几列。假如4,每次减少到一定分辨率 少一个 拿12除
<div class="col-lg-3 col-md-4 col-sm-6"> 4 3 2 自适应布局

列偏移:留空
col-[*]-offset-  <div class="col-lg-4 col-lg-offset-4">123</div> 偏移4个 范围1-12；
<div class="col-lg-4 col-lg-offset-4 col-md-offset-4">123</div> 先屏幕大的、在屏幕小的 先lg 再 md

列排序:
col-[*]-push-
col-[*]-pull-
<div class="col-lg-2 col-lg-push-10">123</div> 位置颠倒 后
<div class="col-lg-10 col-lg-pull-2">1234</div> 前

嵌套：
<div class="row">
    <div class="col-lg-6">
       <div class="row">
           <div class="col-lg-4">123</div>
           <div class="col-lg-4">123</div>
           <div class="col-lg-4">123</div> 高度不一致 会填充 会浮动到高度最小的那里
       </div>
   </div>
</div>
<div class="clearfix"></div> 清除浮动

清单 6. 在电脑和手机上显示不同数量的列
<div class="row">
<div class="col-xs-6 col-md-3">.col-md-3</div>
<div class="col-xs-6 col-md-6">.col-md-6</div>
<div class="col-xs-6 col-md-3">.col-md-3</div>
</div>


如果希望在所有设备上显示相同的列，只需要定义最小尺寸的.col-xs- 即可，布局会自动扩展到更大尺寸，反之则不成立：
清单 7. 所有设备上显示同数量的列
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

响应式工具 概念
针对不同的设备展示或者隐藏页面内容
可见类：
visible-
lg md sm xs
block inline inline-block

hidden-lg md sm xs

隐藏div
<div class="col-lg-4 visible-md-block">123</div>
<div class="hidden-md hidden-xs">2222</div>
 <div class="visible-print-block">aaaaa</div> 打印

<div class="glyphicon glyphicon-search" style="font-size:40px;color:red;"></div>
控制字体图标的方法和控制文字的方法一致,并且div内不写文字内容尽量使它成为一个单独的div

预定义样式风格:按钮
     <input type="button" value="默认样式" class="btn" />
     <input type="button" value="首选项" class="btn btn-primary" />
     <input type="button" value="成功" class="btn btn-success" />
     <input type="button" value="警告" class="btn btn-warning" />
     <input type="button" value="信息" class="btn btn-info" />
     <input type="button" value="危险" class="btn btn-danger" />

按钮 基础类:class="btn btn-primary" "

class="btn btn-default" btn-link
<input type="button" value="按钮" class="btn btn-primary active" />
<input type="button" value="按钮" class="btn btn-primary disabled " />

按钮 类型:a input button 块级:btn-block
 <a href="#" class="btn btn-primary active">按钮</a>
<button class="btn btn-primary active">按钮</button>

按钮组:
 btn-group
btn-group-justified  -a标签
btn-group-vertical

<div class="btn-group">
     <a href="" class="btn btn-primary">按钮</a>
     <a href="" class="btn btn-primary"><span class="caret"></span></a>
</div>
组合下拉箭头

下拉菜单:
属性:data-  aria-  role-
open:
dropdown-menu-right
dropdown-header
divider

bootstrap 标签页 头部
切换头部 nav
nav nav-tabs 选项卡头部class  
nav nav-justified 与父级等宽
nav nav-tabs-justified 宽度自适应 
nav nav-pills 
nav nav-stacked

切换内容 
tab tab-content
tab tab-pane
data-toggle="tab"
href对应id

导航条 头部
navbar
navbar-default
navbar-navbar-nav
navbar-inverse
navbar-static-top
navbar-fixed-top
navbar-fixed-bottom 给body加margin-top:50px;解决绝对定位遮住问题。

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">logo</a>
      </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">one</a></li>
          <li><a href="#">two</a></li>
          <li><a href="#">three</a></li>
        </ul>
        </div>
</nav>

navbar-header
navbar-brand   <a href="#" class="navbar-brand">logo</a>
navbar-left
navbar-right
navbar-btn <button class="btn btn-default navbar-btn">搜索</button>
navbar-link <a href="" class="navbar-link">链接</a>
navbar-text <p class="navbar-text">12344</p>
navbar-form <form class="navbar-form">

下拉菜单 响应式导航条
navbar-toggle
collapse navbar-collapse 可点击按钮进行折叠

<div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">logo</a>
</div> 移动端按钮
<div class="collapse navbar-collapse"></div>包裹菜单的父级在移动端会隐藏

滚动条监听 父级需要加相对定位
data-spy
data-target
data-offset  data-offset="200" 监听位置