Bootstrap 基本内容

Bootstrap 基本内容

1_设置全局 CSS 样式：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果。
2_组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
3_JavaScript 插件：jQuery 插件为 Bootstrap 的组件赋予了“活的生命”。

1_设置全局 CSS 样式

按钮

普通按钮
可作为按钮使用的标签或元素，为 <a>、<button> 或 <input> 元素添加按钮类。
注意：class="btn btn-default"表示这个标签或元素即使用btn样式，
又使用btn-default样式，二个样式的前后顺序无关。
    
<a href="#" class="btn btn-default">超链接</a><br/>
<input type="button" value="按钮" class="btn btn-default"/><br/>
<button class="btn btn-default">按钮</button>
​
预定义样式的按钮
有不同颜色的按钮。
其中btn btn-primary，btn btn-btn-success，btn btn-info,
    btn btn-warning,btn btn-danger,btn btn-link
    
这些样式都是Bootstrap框架内置的按钮样式。
    
<input class="btn btn-default" type="button" value="注册"/><br/>
<input class="btn btn-primary" type="button" value="登录"/><br/>
<input class="btn btn-success" type="button" value="退出"/><br/>
<input class="btn btn-danger" type="button" value="提交"/><br/>
​
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。
对于 <button> 元素，是通过 :active 状态实现的。
对于 <a> 元素，是通过 .active 类实现的。
然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），
并通过编程的方式使其处于激活状态。
<button type="button" class="btn btn-default btn-lg active">Button</button>  
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
​
    
禁用状态
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    

图片

响应式图片
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。
其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，
从而让图片在其父元素中更好的缩放。
​
如果需要
让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
​
.img-responsive 图片具有响应式
.center-block   图片水平居中
.img-rounded    图片背景是圆角矩形
.img-circle 图片背景是圆形
.img-thumbnail  图片背景是矩形
​
<img src="img/banner.jpg" class="img-responsive img-thumbnail"/><br/>

表格

响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，
即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。
当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
  <table class="table">
   
  </table>
</div>
​
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
  ...
</table>
​
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
    
 状态类
即单独对某个td或tr设置不同的颜色，通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info   标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作   
    
<table class="table table-hover">
        <tr>
            <th>编号</th>
        </tr>
        <tr class="danger">
            <td>1</td>
​
        </tr>
        <tr class="warning">
            <td>2</td>
        </tr>
        <tr class="success">
            <td>3</td>
        </tr>
</table>

表单

单独的表单控件会被自动赋予一些全局样式。
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素
都将被默认设置宽度属性为 width: 100%;。 
​
​
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
    <div class="form-group">
        <label for="user">用户名：</label>
        <input type="text" class="form-control" id="user" placeholder="请输入用户名">
    </div>
</form>
不要将表单组合输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
    
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
​
**一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。
对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。
还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。
如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，
如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
    
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="goods">商品</label>
    <div class="input-group">
      <div class="input-group-addon">*</div>
      <input type="text" class="form-control" id="goods" placeholder="请输入商品名">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">查找</button>
</form>
    
水平排列的表单
通过为表单添加 .form-horizontal 类，
并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
    <div class="form-group">
        <label for="user" class="col-sm-1 control-label">用户名：</label>
         <div class="col-sm-4">
        <input type="text" class="form-control" id="user" placeholder="请输入用户名">
         </div>   
    </div>
</form>
    
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： 
text、password、datetime、datetime-local、date、
month、time、week、number、email、url、search、tel 和 color。
​
    
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="5" placeholder="请输入信息"></textarea>   
​
多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，
而单选框（radio）用于从多个选项中只选择一个。
设置了 disabled 属性的单选或多选框都能被赋予合适的样式。
对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，
请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。
    
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    可选
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    禁止点击
  </label>
</div>
​
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    只能选一个
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    只能选一个
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    禁止点击
  </label>
</div>
    
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类
应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
    
下拉列表（select）
注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
​
    
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
    
<div class="form-group">
    <label class="sr-only">。。。</label>
    <p class="form-control-static">静态控件</p>
</div>
    
    
焦点状态
我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。
​
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
​
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
    反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
  
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
    
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

2_组件

下拉菜单

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，
或者另一个声明了 position: relative; 的元素。
然后加入组成菜单的 HTML 代码。
默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 
为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
​
可能需要额外的定位May requir
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="下拉菜单ID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    下拉菜单名称
    <span class="caret"></span>
  </button>
   <!--下拉列表-->
  <ul class="dropdown-menu" aria-labelledby="下拉菜单ID">
    <li><a href="#">列表项</a></li>
    <li><a href="#">列表项</a></li>
    <li><a href="#">列表项</a></li>
  </ul>
</div>
​
在任何下拉菜单中均可通过添加标题来标明一组动作。
 <li class="dropdown-header">标题名称</li>
​
为下拉菜单添加一条分割线，用于将多个链接分组。
<li role="separator" class="divider"></li>
​
为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。
<li class="disabled"><a href="#">Disabled link</a></li>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

按钮工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
      <button type="button" class="btn btn-default">3</button>
    </div> 
</div>
    
    
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
        <div class="btn-group" role="group" aria-label="...">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="下拉菜单ID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    下拉菜单名称
                    <span class="caret"></span>
                </button>
                <!--下拉列表-->
                <ul class="dropdown-menu" aria-labelledby="下拉菜单ID">
                    <li class="dropdown-header">标题名称</li>
                    <li><a href="#">列表项</a></li>
                    <li><a href="#">列表项</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="disabled"><a href="#">Disabled link</a></li>
                    <li><a href="#">列表项</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
<div class="btn-group">
    
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        按钮
        <span class="caret"></span>
    </button>
    
    <ul class="dropdown-menu">
        <li><a href="#">列表项</a></li>
        <li><a href="#">列表项</a></li>
        <li><a href="#">列表项</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">列表项</a></li>
    </ul>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
        <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    按钮名称
                    <span class="caret"></span>
                </button>
                <!--下拉列表-->
                <ul class="dropdown-menu">
                    <li class="dropdown-header">标题名称</li>
                    <li><a href="#">列表项</a></li>
                    <li><a href="#">列表项</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="disabled"><a href="#">Disabled link</a></li>
                    <li><a href="#">列表项</a></li>
                </ul>
        </div>
    </div>
</div>

分裂式按钮下拉菜单

分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。
<div class="btn-group">
    <button type="button" class="btn btn-danger">按钮名称</button>
    
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">分裂式按钮下拉菜单</span>
    </button>
    
    <ul class="dropdown-menu">
        <!--下拉列表-->
        <li class="dropdown-header">标题名称</li>
        <li><a href="#">列表项</a></li>
        <li><a href="#">列表项</a></li>
        <li role="separator" class="divider"></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">列表项</a></li>
    </ul>
</div>
​

向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。
​
<div class="btn-group dropup">
    
 <button type="button" class="btn btn-danger">按钮名称</button>
    
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">分裂式按钮下拉菜单</span>
    </button>
    
    <ul class="dropdown-menu">
        <!--下拉列表-->
        <li class="dropdown-header">标题名称</li>
        <li><a href="#">列表项</a></li>
        <li><a href="#">列表项</a></li>
        <li role="separator" class="divider"></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">列表项</a></li>
    </ul>
</div>

输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。
为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。
<div class="input-group">
  <span class="input-group-addon" id="user">@</span>
  <input type="text" class="form-control" placeholder="请输入用户名" aria-describedby="user">
</div>
​
​
<div class="input-group">
      <input type="text" class="form-control" placeholder="搜索">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
</div><!-- /input-group -->

导航

确保导航组件的可访问性
如果你在使用导航组件实现导航条功能，
​
务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。
    
不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
​
标签页
注意 .nav-tabs 类依赖 .nav 基类。
​
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">列表项</a></li>
  <li role="presentation"><a href="#">列表项</a></li>
  <li role="presentation"><a href="#">列表项</a></li>
</ul>
​
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
<ul class="nav nav-pills">
    <!--标记为激活状态-->
    <li role="presentation" class="active"><a href="#">列表项</a></li>
    <li role="presentation"><a href="#">列表项</a></li>
    <!--标记为禁用状态-->
    <li role="presentation" class="disabled"><a href="#">列表项</a></li>
</ul>
    
添加下拉菜单
用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。
<ul class="nav nav-pills">
    <!--标记为激活状态-->
    <li role="presentation" class="active"><a href="#">列表项</a></li>
    <li role="presentation"><a href="#">列表项</a></li>
    <!--标记为禁用状态-->
    <li role="presentation" class="disabled"><a href="#">列表项</a></li>
    
    <li role="presentation" class="dropdown">
        <a  class=" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            列表项
            <span class="caret"></span>
            <span class="sr-only">下拉菜单</span>
        </a>
​
        <ul class="dropdown-menu">
            <!--下拉列表-->
            <li class="dropdown-header">标题名称</li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li role="separator" class="divider"></li>
            <li class="disabled"><a href="#">Disabled link</a></li>
            <li><a href="#">列表项</a></li>
        </ul>
    </li>
    
</ul>

导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。
它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
​
导航条的可访问性
务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

整个导航条就是一个nav标签。
.navbar 
.navbar-default 默认的颜色为白色
.navbar-inverse 颜色为黑色
.navbar-header  指定商标和开关的样式，让它在手机上更好的显示
.collapse navbar-collapse   可以折叠的所有项
​
.dropdown   下拉菜单
.navbar-left    左对齐
.navbar-right   右对齐
​
开头相关的属性 作用
data-   表示这有一个事件激活，会产生相应的功能
aria-   给残障人士使用
sr-only 屏幕阅读的功能，给残障人士使用

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- 商标和提示在移动设备中显示的效果 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#显示条目ID" aria-expanded="false">
                <span class="sr-only">隐藏内容</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
             <!--品牌图标--将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。-->
             <!--即把首页换为<img alt="Brand" src="img/icon_6.jpg">-->
        </div>
        
        <!--弹出菜单的体部内容-->
        <div class="collapse navbar-collapse" id="显示条目ID">
​
            <!--导航条导航 .navbar-nav-->
            <ul class="nav navbar-nav">
                <!--标记为激活状态-->
                <li role="presentation" class="active"><a href="#">列表项</a></li>
                <li role="presentation"><a href="#">列表项</a></li>
                <!--标记为禁用状态-->
                <li role="presentation" class="disabled"><a href="#">列表项</a></li>
​
                <li role="presentation" class="dropdown">
                    <a  class=" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        列表项
                        <span class="caret"></span>
                        <span class="sr-only">下拉菜单</span>
                    </a>
​
                    <ul class="dropdown-menu">
                        <!--下拉列表-->
                        <li class="dropdown-header">标题名称</li>
                        <li><a href="#">列表项</a></li>
                        <li><a href="#">列表项</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="disabled"><a href="#">Disabled link</a></li>
                        <li><a href="#">列表项</a></li>
                    </ul>
                </li>
            </ul>
​
            <!--导航条表单 .navbar-form-->
            <form class="navbar-form navbar-right" role="search" method="get">
                <div class="form-group">
                    <input type="text" class="form-control" name="band" placeholder="请输入商品">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div><!-- /.navbar-collapse -->
​
    </div><!-- /.container-fluid -->
</nav>

按钮.navbar-btn   可以被用在 <a> 和 <input> 元素,<button> 元素上
文本.navbar-text  为了有正确的行距和颜色，通常使用 <p> 标签。