bootstrap使用经验

超小屏幕<768px，小屏幕 平板>=768px，中等屏幕 桌面显示器>=992px以及大屏幕 大桌面显示器>=1200px。每一列又被平均分成了12格，每一个8.33333333%，12格就无限接近于100%。

1：常见的下拉按钮：

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">A</a></li>
<li class="divider"></li>
<li><a href="">c</a></li>
<li class="divider"></li>
<li><a href="">d</a></li>

</ul>

1、表格
   1）基本表格
      <table class="table">
   2）条纹表格
      <table class="table table-striped">
   3）边框表格
      <table class="table table-bordered">
   4）悬停表格
      <table class="table table-hover">
   5）精简表格
      <table class="table table-condensed">
   6）状态表格
      active、success、info、warning、danger
   7）隐藏某一行
      <tr class="sr-only">
   8）响应式表格
      //表格父元素设置响应式，小于 768px 出现边框
      <div class="table-responsive">


2、按钮
    1）按钮标签
       //转化成普通按钮
       <a href="###" class="btn btn-default">Link</a>
       <button class="btn btn-default">Button</button>
       <input type="button" class="btn btn-default" value="input">
       注意：为了跨浏览器展现，尽量使用button
    2）按钮大小
       .btn-lg 这会让按钮看起来比较大。
       .btn-sm 这会让按钮看起来比较小。
       .btn-xs 这会让按钮看起来特别小。
    3）预定义样式
       .btn-default 默认/标准按钮
       .btn-primary 首选项样式
       .btn-success 成功样式
       .btn-info 一般信息样式
       .btn-warning 警告样式
       .btn-danger 危险样式
       .btn-link 链接样式
    4）块级按钮
       .btn-block 块级按钮(拉伸至父元素100%的宽度)
    5）激活状态
       <button class="btn active">Button</button>
    6）禁用状态
       <button class="btn active disabled">Button</button>


3、图片
    .img-rounded    圆角 (IE8 不支持)
    .img-circle 圆形 (IE8 不支持)
    .img-thumbnail  缩略图功能
    .img-responsive 图片响应式 (将很好地扩展到父元素)

1、栅格系统
   1）响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
   2）工作原理
      行必须放置在.container(固定宽度)或者.container-fluid(100%宽度) class内，获得适当的对齐(alignment)和内边距(padding)
      内容放置在列中，唯有列可以是行的直接子元素
      预定义的网格类，比如 .row 和 .col-lg-4，可用于快速创建网格布局
      列通过内边距（padding）来创建列内容之间的间隙
   3)媒体查询
      /* 超小设备（手机，小于 768px） */
      /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */


      /* 小型设备（平板电脑，大于等于768px） */
      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }


      /* 中型设备（台式电脑，大于等于992px） */
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }


      /* 大型设备（大台式电脑，大于等于1200px） */
      @media (min-width: @screen-lg-min) { ... }
   4）栅格参数
               超小屏幕 手机 (<768px)小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
   栅格系统行为      总是水平排列                   开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
   .container 最大宽度 None （自动）   750px                    970px                       1170px
   类前缀           .col-xs-           .col-sm-                .col-md-                   .col-lg-
   列（column）数    12
   最大列（column）宽 自动           ~62px                    ~81px                       ~97px
   间隙宽度            30px （每列左右均有 15px）
   可嵌套            是
   偏移（Offsets）    是
   列排序            是
   5）//四种屏幕分类全部激活
   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            ....
        </div>
   </div>
     //可以设置列偏移，让中间保持空隙
   <div class="container">
        <div class="row">
            <div class="col-md-8">1-8</div>
            <div class="col-md-3 col-md-offset-1">10-12</div>
        </div>
   </div>
     //可以嵌套，嵌满也是 12 列
   <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="col-md-8">1-8</div>
                <div class="col-md-4">9-12</div>
            </div>
            <div class="col-md-3"> 10-12 </div>
        </div>
   </div>
     //可以把两个列交换位置，push 向右移动（推），pull 向左移动（拉）
   <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-push-4">8</div>
            <div class="col-md-4 col-md-pull-8">4</div>
        </div>
   </div>


2、表单
   1）垂直或基本表单
   2）内联表单
      //让表单左对齐浮动，并表现为 inline-block 内联块结构
      <form class="form-inline">
      注：当小于 768px，会恢复独占样式
   3）水平表单
      //让表单内的元素保持水平排列
   4）表单组合
      //前后增加片段
      <div class="input-group">
         <div class="input-group-addon">￥</div>
         <input type="text" class="form-control">
         <div class="input-group-addon">.00</div>
      </div>
   5）输入框、文本域
      原生的 HTML5 的 input 类型的支持，包括：
      text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
      <input type="text" class="form-control" placeholder="文本输入">
      <textarea class="form-control" rows="3"></textarea>
   6）复选框（（Checkbox）和单选框（Radio）
      <div class="checkbox">
         <label><input type="checkbox" value="">选项 1</label>
      </div>
      <div class="radio">
         <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1"
               value="option1" checked> 选项 1
         </label>
      </div>
      内联的复选框和单选框
      <label class="checkbox-inline">
         <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
      </label>
      <label class="radio-inline">
         <input type="radio" id="optionsRadiosinline" value="option1"> 选项 1
      </label>
   7）选择框    multiple 多行显示
      <select class="form-control" multiple>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   8）静态控件   .form-control-static
   9）表单控件状态
      输入框焦点
      当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
      禁用的输入框 input
      如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
      禁用的字段集 fieldset
      对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
      校验状态
      .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
      任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
   10）表单帮助文本
      <form role="form">
         <input class="form-control" type="text" placeholder="">
         <span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
      </form>
   11）控件尺寸
      .input-lg和col-lg-*来设置表单的高度和宽度
      <div class="form-group">
          <input class="form-control input-lg" type="text" placeholder="input-lg">
      </div>
      <div class="row">
          <div class="col-lg-2">
             <input type="text" class="form-control" placeholder="col-lg-2">
          </div>
          <div class="col-lg-3">
             <input type="text" class="form-control" placeholder="col-lg-3">
          </div>
          <div class="col-lg-4">
             <input type="text" class="form-control" placeholder="col-lg-4">
          </div>
      </div>

1、辅助类
   1）文本
      <p class="text-muted">本行内容是减弱的</p>
      <p class="text-primary">本行内容带有一个 primary class</p>
      <p class="text-success">本行内容带有一个 success class</p>
      <p class="text-info">本行内容带有一个 info class</p>
      <p class="text-warning">本行内容带有一个 warning class</p>
      <p class="text-danger">本行内容带有一个 danger class</p>
   2）背景
      <p class="bg-primary">bootstrap课程</p>
      <p class="bg-success">bootstrap课程</p>
      <p class="bg-info">bootstrap课程</p>
      <p class="bg-warning">bootstrap课程</p>
      <p class="bg-danger">bootstrap课程</p>
   3）关闭按钮   close
      <button class="close">&times;</button>
   4）下拉式菜单  caret
      <span class="caret"></span>
   5）浮动 pull-left   pull-right
      <div class="pull-left">向左快速浮动</div>
      <div class="pull-right">向右快速浮动</div>
   6）清除浮动   clearfix
      <div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
         <div class="pull-left" style="background:#58D3F7;">向左快速浮动</div>
         <div class="pull-right" style="background: #DA81F5;">向右快速浮动</div>
      </div>
   7）块级内容居中 center-block
      <div class="row">
         <div class="center-block" style="width:200px;background-color:#ccc;">
            这是 center-block
         </div>
      </div>
   8）显示、隐藏  show hide
      <div class="row" style="padding: 91px 100px 19px 50px;">
         <div class="show" style="width:300px;background-color:#ccc;">
            这是 show class
         </div>
         <div class="hidden" style="width:200px;background-color:#ccc;">
            这是 hide class
         </div>
      </div>
   9）屏幕阅读器和键盘导航  .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器    .sr-only-focusable
      <div class="row" style="padding: 91px 100px 19px 50px;">
         <form class="form-inline" role="form">
             <div class="form-group">
                <label class="sr-only" for="email">Email 地址</label>
                <input type="email" class="form-control" placeholder="Enter email">
             </div>
             <div class="form-group">
                <label class="sr-only" for="pass">密码</label>
                <input type="password" class="form-control" placeholder="Password">
             </div>
         </form>
      </div>
      <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


2、响应式工具
   1）visible-xs visible-sm  visible-md  visible-lg
      hidden-xs   hidden-sm   hidden-md   hidden-lg
      以超小屏幕（xs）为例，可用的 .visible-*-* 类是：visible-xs-block、visible-xs-inline 和 visible-xs-inline-block。
   2）visible-print-block    visible-print-inline    visible-print-inline-block  浏览器隐藏   打印机可见
      hidden-print  浏览器可见   打印机隐藏
      visible-print


   <div class="container" style="padding: 40px;">
      <div class="row">
         <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
            <span class="hidden-xs">特别小型</span>
            <span class="visible-xs"> 在特别小型设备上可见</span>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm"> 在小型设备上可见</span>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
            <span class="hidden-md">中型</span>
            <span class="visible-md"> 在中型设备上可见</span>
         </div>
         <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg"> 在大型设备上可见</span>
         </div>
      </div>
   </div>


3、字体图标
   用法：<span class="glyphicon glyphicon-search"></span>


4、下拉菜单
   1）基本的下拉菜单
      <div class="dropdown">
         <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
         <ul class="dropdown-menu">
            <li><a href="">Html</a></li>
            <li><a href="">Javascript</a></li>
            <li><a href="">jQuery</a></li>
            <li><a href="">html5+css3</a></li>
         </ul>
      </div>
   2）对齐
      dropdown-menu-right
   3）标题 不要加超链接
      <ul class="dropdown-menu">
         ...
         <li class="dropdown-header">Dropdown header</li>
         ...
      </ul>
   4）分隔线
      <ul class="dropdown-menu">
         ...
         <li class="divider"></li>
         ...
      </ul>
   5）禁用的菜单项
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
         <li><a href="#">Regular link</a></li>
         <li class="disabled"><a href="#">Disabled link</a></li>
         <li><a href="#">Another link</a></li>
      </ul>
   6）让菜单默认显示
      <div class="dropdown open">

1、按钮组件
   1）基本的按钮组
      <div class="btn-group">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
   2）按钮工具栏
      <div class="btn-toolbar">
          <div class="btn-group">
              <button class="btn btn-default">left</button>
              <button class="btn btn-default">middle</button>
              <button class="btn btn-default">right</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">left</button>
              <button class="btn btn-default">middle</button>
              <button class="btn btn-default">right</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">更多</button>
          </div>
      </div>
   3）按钮的大小
      <div class="btn-group btn-group-lg">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-sm">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-xs">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
   4）嵌套
      <div class="btn-group">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <div class="btn-group">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
              </ul>
          </div>
      </div>
   5）垂直的按钮组
      <div class="btn-group-vertical">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <div class="btn-group">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
              </ul>
          </div>
      </div>
   6）两端对齐排列的按钮组
      <div class="btn-group btn-group-justified">
          <div class="btn-group">
              <button class="btn btn-default">left</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">middle</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">right</button>
          </div>
      </div>
      <div class="btn-group btn-group-justified">
          <!--<div class="btn-group">-->    为了浏览器兼容问题使用btn-group包裹
              <a href="" class="btn btn-default">left</a>
          <!--</div>-->
          <!--<div class="btn-group">-->
              <a href="" class="btn btn-default">middle</a>
          <!--</div>-->
          <!--<div class="btn-group">-->
              <a href="" class="btn btn-default">right</a>
          <!--</div>-->
      </div>
   7）按钮式下拉菜单
      a）单按钮下拉菜单   btn-default  btn-success  btn-primary   btn-info   btn-danger   btn-warning
         <div class="btn-group">
             <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
         </div>
      b）分裂式按钮下拉菜单
         <div class="btn-group">
             <button class="btn btn-default">Default</button>
             <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
         </div>
      c）按钮下拉菜单的大小   btn-lg   btn-sm   btn-xs
         <div class="btn-group">
             <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
         </div>
      d）向上弹出式菜单    dropup
         <div class="btn-group dropup">
             <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
         </div>


2、输入框
   1）基本的输入框组
      <form action="">
          <div class="input-group">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control"/>
          </div>
          <div class="input-group">
              <input type="text" class="form-control"/>
              <span class="input-group-addon">.00</span>
          </div>
          <div class="input-group">
              <span class="input-group-addon">$</span>
              <input type="text" class="form-control"/>
              <span class="input-group-addon">.00</span>
          </div>
      </form>
   2）输入框组的大小    input-group-lg  input-group-xs  input-group-sm
      <form action="">
          <div class="input-group input-group-lg">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control"/>
          </div>
      </form>
   3）复选框和单选框插件
      <form action="">
          <div class="row">
               <div class="col-md-6">
                   <div class="input-group">
                       <span class="input-group-addon">
                           <input type="checkbox"/>
                       </span>
                       <input type="text" class="form-control"/>
                   </div>
               </div>
          </div>
      </form>
   4）按钮插件   input-group-btn
      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <span class="input-group-btn">
                          <button class="btn btn-default">Go</button>
                      </span>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>
   5）按钮式下拉菜单
      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <div class="input-group-btn">
                          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
                          <ul class="dropdown-menu">
                              <li><a href="">资讯</a></li>
                              <li><a href="">新闻</a></li>
                              <li><a href="">关于</a></li>
                          </ul>
                      </div>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>
   6）分裂式按钮下拉菜单
      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <div class="input-group-btn">
                          <button class="btn btn-default">dropdown</button>
                          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu">
                              <li><a href="">资讯</a></li>
                              <li><a href="">新闻</a></li>
                              <li><a href="">关于</a></li>
                          </ul>
                      </div>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>
1、导航（标签）    nav
   1）标签页   nav-tabs
      <ul class="nav nav-tabs">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li><a href="">Message</a></li>
      </ul>
   2）胶囊式标签页    nav-pills
      <ul class="nav nav-pills">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li><a href="">Message</a></li>
      </ul>
   3）垂直的胶囊式标签页      nav-stacked
      <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li><a href="">Message</a></li>
      </ul>
   4）两端对齐的标签页     nav-justified
      <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li><a href="">Message</a></li>
      </ul>
   5）禁用链接   disabled
      <ul class="nav nav-tabs">
          <li class="active"><a href="">Home</a></li>
          <li class="disabled"><a href="">Project</a></li>
          <li><a href="">Message</a></li>
      </ul>
   6）带有下拉菜单的标签
      <ul class="nav nav-tabs">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="">关于</a></li>
                  <li><a href="">资讯</a></li>
                  <li><a href="">通讯</a></li>
              </ul>
          </li>
      </ul>
   7）带下拉菜单的胶囊式标签
      <ul class="nav nav-pills">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="">关于</a></li>
                  <li><a href="">资讯</a></li>
                  <li><a href="">通讯</a></li>
              </ul>
          </li>
      </ul>
2、导航条     navbar    <nav>标签中添加 class .navbar、.navbar-default
   1）默认的导航栏
      <nav class="navbar navbar-default">
          <div class="navbar-header">
              <a class="navbar-brand" href="">潭州教育</a>
          </div>
          <ul class="nav navbar-nav">
              <li class="active"><a href="">Home</a></li>
              <li><a href="">Project</a></li>
              <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li><a href="">关于</a></li>
                      <li><a href="">资讯</a></li>
                      <li><a href="">通讯</a></li>
                  </ul>
              </li>
          </ul>
      </nav>
   2）响应式的导航栏
      <nav class="navbar navbar-default">
          <div class="navbar-header">
              <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="">潭州教育</a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="">Home</a></li>
                  <li><a href="">Project</a></li>
                  <li class="dropdown">
                      <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="">关于</a></li>
                          <li><a href="">资讯</a></li>
                          <li><a href="">通讯</a></li>
                      </ul>
                  </li>
              </ul>
          </div>
      </nav>
   3）导航栏中的表单
      <form action="" class="navbar-form navbar-right">
          <div class="form-group">
              <input class="form-control" type="text" placeholder="Search"/>
          </div>
          <button class="btn btn-default">Search</button>
      </form>
   4）导航栏中的按钮    navbar-btn
      <button class="btn btn-default navbar-btn">Submit</button>
   5）导航栏中的文本    navbar-text
      <p class="navbar-text">Signed in as Thomas</p>
   6）固定到顶部、底部   navbar-fixed-top    navbar-fixed-bottom
      <nav class="navbar navbar-default navbar-fixed-top">
          <div class="navbar-header">
              <a class="navbar-brand" href="">潭州教育</a>
          </div>
          <ul class="nav navbar-nav">
              <li class="active"><a href="">Home</a></li>
              <li><a href="">Project</a></li>
              <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li><a href="">关于</a></li>
                      <li><a href="">资讯</a></li>
                      <li><a href="">通讯</a></li>
                  </ul>
              </li>
          </ul>
      </nav>
   7）静态的顶部     navbar-static-top
   8）倒置的导航栏    带有黑色背景白色文本的倒置的导航栏    navbar-inverse


3、面包屑导航
   <ul class="breadcrumb">
       <li><a href="">首页</a></li>
       <li><a href="">列表</a></li>
       <li class="active">详情</li>
   </ul>
1、分页
   1）默认的分页
      <ul class="pagination">
          <li><a href="">&laquo;</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">&raquo;</a></li>
      </ul>
   2）禁用和激活状态
      <ul class="pagination">
          <li class="disabled"><a href="">&laquo;</a></li>
          <li class="active"><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">&raquo;</a></li>
      </ul>
   3）分页的尺寸  pagination-lg    pagination-sm
   4）翻页（Pager）
      <ul class="pager">
          <li><a href="">previous</a></li>
          <li><a href="">next</a></li>
      </ul>
   5）对齐的链接
      <ul class="pager">
          <li class="previous"><a href="">&larr; previous</a></li>
          <li class="next"><a href="">next &rarr;</a></li>
      </ul>
   6）可选的禁用状态
      <ul class="pager">
          <li class="previous disabled"><a href="">&larr; previous</a></li>
          <li class="next"><a href="">next &rarr;</a></li>
      </ul>


2、标签
   <span class="label label-default">Default</span>
   <span class="label label-primary">Primary</span>
   <span class="label label-success">Success</span>
   <span class="label label-info">Info</span>
   <span class="label label-warning">Warning</span>
   <span class="label label-danger">Danger</span>


3、徽章    badge
   <a href="">Messages <span class="badge">20</span></a>
   <button class="btn btn-default">Messages <span class="badge">20</span></button>


4、巨幕    jumbotron
   <div class="jumbotron">
       <div class="container">
           <h1>hello world!!!</h1>
           <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
               content or information.</p>
           <p><a class="btn btn-primary" href="">Learn more</a></p>
       </div>
   </div>


5、页头    page-header
   <div class="page-header">
       <h1>Example page header
           <small>Subtext for header</small>
       </h1>
   </div>


6、缩略图
   1）默认样式
   <div class="col-md-3 col-sm-6">
       <a class="thumbnail" href="">
           <img src="images/kittens.jpg" alt=""/>
       </a>
   </div>
   2）自定义内容
   <div class="col-md-3 col-sm-6">
       <div class="thumbnail">
           <img src="images/kittens.jpg" alt=""/>
           <div class="caption">  <!--text-center-->
               <h3>缩略图标签</h3>
               <p>一些示例文本。一些示例文本。</p>
               <p>
                   <a href="#" class="btn btn-primary" role="button">按钮</a>
                   <a href="#" class="btn btn-default" role="button">按钮 </a>
               </p>
           </div>
       </div>
   </div>


7、警告框
   1）基本默认样式
      <div class="alert alert-success">成功！很好地完成了提交。</div>
      <div class="alert alert-info">信息！请注意这个信息。</div>
      <div class="alert alert-warning">警告！请不要提交。</div>
      <div class="alert alert-danger">错误！请进行一些更改。</div>
   2）可关闭的警告框
      <button type="button" class="close" data-dismiss="alert">&times;</button>
   3）警告中的链接
      <div class="alert alert-success">
          <a href="#" class="alert-link">成功！很好地完成了提交。</a>
      </div>

1、进度条
   1）默认的进度条
      <div class="progress">
          <div class="progress-bar" style="width:45%;">45%</div>
      </div>
   2）情景变化的进度条
      <div class="progress">
          <div class="progress-bar progress-bar-info" style="width:60%;">60%</div>
      </div>
      <div class="progress">
          <div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
      </div>
      <div class="progress">
          <div class="progress-bar progress-bar-danger" style="width:45%;">45%</div>
      </div>
      <div class="progress">
          <div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
      </div>
   3）条纹的进度条     progress-striped
      <div class="progress progress-striped">
          <div class="progress-bar" style="width:45%;">45%</div>
      </div>
   4）动画的进度条     active
      <div class="progress progress-striped active">
          <div class="progress-bar" style="width:45%;">45%</div>
      </div>
   5）堆叠的进度条
      <div class="progress">
          <div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
          <div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
      </div>


2、媒体对象
   <div class="media">
       <a href="" class="pull-left"><img class="media-object" src="images/kittens.jpg" alt="" width="95"/></a>
       <div class="media-body">
           <h4 class="media-heading">媒体标题</h4>
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
       </div>
   </div>
3、列表组
   1）向列表组添加国徽
      <ul class="list-group">
          <li class="list-group-item"><a href="">免费域名注册 <span class="badge pull-right">20</span></a></li>
          <li class="list-group-item"><a href="">免费 Window 空间托管</a></li>
          <li class="list-group-item"><a href="">每年更新成本</a></li>
      </ul>
   2）向列表组添加链接
      <div class="list-group">
          <a href="" class="list-group-item active">免费域名注册</a>
          <a href="" class="list-group-item">免费 Window 空间托管</a>
          <a href="" class="list-group-item">每年更新成本</a>
      </div>
   3）向列表组添加自定义内容
      <ul class="list-group">
         <li class="list-group-item">Cras justo odio</li>
         <li class="list-group-item">Dapibus ac facilisis in</li>
         <li class="list-group-item">Morbi leo risus</li>
         <li class="list-group-item">Porta ac consectetur ac</li>
         <li class="list-group-item">Vestibulum at eros</li>
      </ul>


4、面板
   1）面板标题
      <div class="panel-heading">标题</div>
   2）面板脚注
      <div class="panel-footer text-right">by zichen</div>
   3）面板主题
      <div class="panel panel-primary">...</div>
      <div class="panel panel-success">...</div>
      <div class="panel panel-info">...</div>
      <div class="panel panel-warning">...</div>
      <div class="panel panel-danger">...</div>
   4）带表格的面板
      <div class="panel panel-default">
          <div class="panel-heading">Panel heading</div>
          <table class="table">
              <tr>
                  <td>学号</td>
                  <td>姓名</td>
                  <td>年龄</td>
              </tr>
          </table>
      </div>
   5）带列表组的面板
      <div class="panel panel-danger">
          <div class="panel-heading">标题</div>
          <div class="panel-body">面板内容显示区域</div>
          <ul class="list-group">
              <li class="list-group-item">免费域名注册</li>
              <li class="list-group-item">免费 Window 空间托管</li>
              <li class="list-group-item">图像的数量</li>
              <li class="list-group-item">24*7 支持</li>
              <li class="list-group-item">每年更新成本</li>
          </ul>
          <div class="panel-footer text-right">by zichen</div>
      </div>


5、响应式嵌入组件
   根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定 内容的尺寸，能够在各种设备上缩放。
   这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。
   //16:9 响应式
   <div class="embed-responsive embed-responsive-16by9">
        <embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
   </div>
   //4:3 响应式
   <div class="embed-responsive embed-responsive-4by3">
        <embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
   </div>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
    </div>
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
    </div>


6、well
   1）基本的well
      <div class="well">您好，我在大的 Well 中！</div>
   2）尺寸大小    well-lg   well-sm
      <div class="well well-lg">您好，我在大的 Well 中！</div>
      <div class="well well-sm">您好，我在大的 Well 中！</div>