Bootstrap(一)

Bootstrap布局出来的是全平台响应的，即PC，平板，手机都可以有响应。

Bootstrap依赖于JQuery

1、按钮Button

可做按钮使用的标签：<a>、<button>、<input>

注意：1、导航、导航条只支持<button>。2、<a>元素用于按钮，要设置role="button"属性。建议使用<button>

样式

• .btn-default：默认样式
• .btn-primary：首选项
• .btn-success：成功
• .btn-info：信息
• .btn-warning：警告
• .btn-danger：危险
• .btn-link：连接

尺寸

• .btn-lg：大按钮
• btn：默认大小
• .btn-sm：小按钮
• .btn-xs：超小按钮
• .btn-block：块级按钮

激活与禁用

• .active：激活状态
• disabled="disabled"：禁用状态

2、图片

响应式图片

• .img-responsive：让图片支持响应式布局。

实质设置了max-width:100%、height:auto、display:block

• .center-block：图片居中

设置.img-responsive已经将图片设置成了块级元素。图片居中要使用.center-block而不能使用.text-center。因为text-center只能让内联元素居中。

图片样式

• .img-rounded：圆角
• .img-circle：圆形
• .img-thumbnail：图片添加边框

3、辅助类

文本颜色：.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger
背景颜色：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger
关闭按钮：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号：

<span class="caret"></span>

块元素居中：.center-block
显示和隐藏内容：.show、.hidden

4、排版

Bootstrap默认全局：font-size:14px、line-height:1.428

标题：  <h1>~<h6>    或      .h1~.h6
副标题：  <small>       或      .small
段落中突出显示内容(字体变大)：  .lead
高亮显示：  <mark>
删除文本：  <del>    或      <s>
下划线：   <u>     或      <ins>
小号文本：  <small>     或      .small
加粗：<strong>
斜体：<em>
对齐：   .text-left   、   .text-center   、   .text-right  、 .text-justify    、  .text-nowrap
文字大小：   .text-lowercase    、   .text-uppercase   、   .text-capitalize
缩略语：<abbr>

• 基本缩略语

<abbr title="attribute">attr</abbr>

• 首字母缩略语    initialism[ɪ'nɪʃ(ə)lɪz(ə)m]首字母缩略

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

引用：<blockquote>     quote[kwəʊt]引用

• 默认样式的引用

<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>

• 指定引用的来源          footer['fʊtə]页脚

<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>

• 另一种方式：

<blockquote class="blockquote-reverse">  ...</blockquote>

列表

• 无序列表

<ul>  <li>...</li></ul>

• 有序列表

<ol>  <li>...</li></ol>

• 无样式列表

<ul class="list-unstyled">  <li>...</li></ul>

• 内联列表：所有元素放在同一行

<ul class="list-inline">  <li>...</li></ul>

描述

• 默认描述

<dl>  <dt>...</dt>  <dd>...</dd></dl>

• 水平排列的描述

<dl class="dl-horizontal">  <dt>...</dt>  <dd>...</dd></dl>

5、表格

默认样式：.table(必须加此类)
隔行变色：.table-striped
边框：.table-bordered
鼠标悬浮：.table-hover
紧缩表格：.table-condensed
状态类：可以用在行，也可用在列上.active、.success、.info、.warning、.danger
响应式表格：.table-responsive。将.table元素包裹在.table-responsive元素内。

<div class="table-responsive">  <table class="table">    ...  </table></div>

6、表单

基本样式：.form-control  控件默认宽度100%(所有控件加.form-control)

<form>     <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">     </div></form>

<label>与控件都包裹在.form-group中，可以得到最好的排列。.form-control控件默认width:100%

内联表单：.form-inline

<form class="form-inline">     <div class="form-group">   <label for="exampleInputEmail1">Email address</label>           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">     </div>     <div class="form-group">   <label for="exampleInputPassword" class="sr-only">Password</label>           <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" />     </div></form>

说明：
         placeholder：占位符。

         sr-only：将label标签中文字隐藏。

label标签和控件水平排列：.form-horizontal  

 <form class="form-horizontal">    <div class="form-group">  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>          <div class="col-sm-10">        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">           </div>    </div>    <div class="form-group">         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>         <div class="col-sm-10">        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">   </div>    </div></form>

使用.form-horizontal联合预置的栅栏类，将label标签和控件水平并排布局。

说明：.form-horizontal的使用已经改变了.form-group的行为，让.form-group表现为 栅栏系统中的行，所以这里面使用栅栏系统不用使用.row。

也就是说.form-group可以看做row(一行)

注意：栅栏类不能写在控件内。

输入框控件：要正确的输入type属性的值，才可以被赋予正确的样式
输入框控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color

多行文本表单控件：<textarea>

<textarea class="form-control" rows="3"></textarea>

多选框、单选框：.checkbox、.radio

<div class="checkbox"><label>      <input type="checkbox" value=""/>多选框 </label></div><div class="checkbox"><label>       <input type="checkbox" value="" disabled="disabled" />多选框-不可选</label></div><div class="radio"><label><input type="radio" value="" name="radio1" id="radio1" />单选一</label></div><div class="radio"><label><input type="radio" value="" name="radio1" id="radio2" disabled="disabled"/>单选二 ——不可选</label></div><div class="radio"><label><input type="radio" value="" name="radio1" id="radio13" />单选三</label></div>

内联  单选，多选框

<label class="checkbox-inline">  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline">  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline">  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><br/><label class="radio-inline">  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline">  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline">  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label>

下拉列表：<select>    可以使用  multiple  变成多选<select multiple class=""></select>

<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 类即可。

<form class="form-horizontal">  <div class="form-group">    <label class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">      <p class="form-control-static">[e-mail]</p>    </div>  </div></form>

禁用状态：disabled   或     <fieldset disabled></fieldset>

<form>  <fieldset disabled>    <div class="form-group">      <label for="disabledTextInput">Disabled input</label>      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">    </div>    <div class="form-group">      <label for="disabledSelect">Disabled select menu</label>      <select id="disabledSelect" class="form-control">        <option>Disabled select</option>      </select>    </div>    <div class="checkbox">      <label>        <input type="checkbox"> Can't check this      </label>    </div>    <button type="submit" class="btn btn-primary">Submit</button>  </fieldset></form>

说明：为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件

只读状态：readonly，和disabled一样，唯一不同的是，当鼠标停留在只读的控件上仍然保留了鼠标的状态。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

控件的尺寸：input-lg 、 input-sm    水平排列的大小设置： form-group-lg  、 form-group-sm

7、栅格系统

一、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container或.container-fluid容器，这两个容器不可以相互嵌套。

• .container 类用于固定宽度并支持响应式布局的容器。页面左右两端会留一小部分空白区域。

<div class="container">  ...</div>

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

<div class="container-fluid">  ...</div>

二、媒体查询

/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }

例子：

<style type="text/css">@media (min-width: 768px) { body { background: lightpink;} }@media (min-width: 992px) { body {background: lightyellow;} }@media (min-width: 1200px) { body{background: palegreen;} }</style>

当屏幕宽度在1200px以上，页面为淡绿色；屏幕宽度在992px到1200px之间，页面为浅黄色；当屏幕宽度在768px到992px之间，页面为浅粉红；但屏幕宽度小于768px，页面为默认的颜色。
分别对应着大桌面、普通桌面、平板和手机设备。因为Bootstrap是移动设备先行，所以超小屏幕不用设置，因为默认就是超小屏幕的情况。

三、栅格参数

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container 最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是

栅格系统把屏幕平均分成了12列。

最大列宽：在对应大小的屏幕下，每一列对应的最大的宽度。比如在小屏幕(平板电脑)的宽度上，每一列最大62px.

槽宽：每一列都有个内边距，左右分别为15px

例子：

<style type="text/css">@media (min-width: 768px) { }@media (min-width: 992px) { <!--大于992px的设备上不显示-->.con4 {display: none;}}@media (min-width: 1200px) { <!--但是又想在大于1200px的设备上显示-->.con4 {display: block;}}.con {border: 1px solid black;}</style><div class="container">     <div class="row">  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 con"><!--嵌套的栅格系统中不需要再指定row-->       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1-1</div>       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1-2</div>       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1-3</div>       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1-4</div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 con">2</div>      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 con">3</div>      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 con con4">4</div>      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 con">5</div></div><!--第五块进行偏移3个单元列--></div>

1、栅格系统要包含在container容器内

2、每一行包含12列，多余的元素作为一个整体另起一行排列

3、栅格参数(col-lg-*等)只会在其对应的宽度下才会起效果。将所有的参数都加上去可以让它在所有的宽度下都有效
4、媒体查询、栅格系统一起使用

要求：第四块想让他中等屏幕的时候隐藏掉，但是又想在大屏幕中显示。

5、可嵌套：一个栅格系统里面还可以嵌套另一个栅格系统

注意：嵌套的栅格系统无需指定row。

6、可偏移：offset

7、列排序：push(向右) 、 pull(向左)

<div class="row">  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div>

组件

1、字体图标

字体图标完全可以用图片代替，但是图片的局限性大，字体库简单。字体库就相当于一个文字。所以对字体库的设置和对文字的设置一样。

使用：将字体库的类放在<span>标签中

2、下拉菜单

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"   aria-haspopup="true" aria-expanded="true">    Dropdown<span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">      <li class="dropdown-header">菜单标题</li>    <li><a href="#">下拉菜单</a></li>    <li class="disabled"><a href="#">禁用</a></li>    <li role="separator" class="divider"></li><!--分隔线-->    <li><a href="#">退出</a></li>  </ul></div>

1、下拉菜单都要包裹在.dropdown里，上拉菜单要包裹在.dropup里
2、data-toggle="dropdown"：下拉菜单触发器的开关

注意：不论是上拉菜单还是下拉菜单，这儿都是dropdown
3、.dropdown-men：下拉菜单项  的样式

下拉菜单项都要写在 ul-li 中

4、.dropdown-header：标题

5、.disabled：禁用

6、.divider：分隔线

说明：.dropdown-header要使用<a>、其他的下来菜单项要有<a>标签才有样式

3、按钮组

按钮组：.btn-group     将多个按钮包裹在.btn-group中

 <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>

按钮工具栏：.btn-toolbar   将按钮组包裹在.btn-toolbar中

<div class="btn-toolbar" role="toolbar" aria-label="...">  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div>  <div class="btn-group" role="group" aria-label="...">...</div></div>

尺寸：.btn-group-*   给按钮组添加.btn-group-*就可以省去为每个按钮都添加.btn-*
按钮组中嵌套下拉菜单：默认是下拉菜单，如果想要变成上拉菜单要添加.dropup

<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>  <div class="btn-group dropup" role="group"><!--在div中-->    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      Dropdown      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li><a href="#">Dropdown link</a></li>      <li><a href="#">Dropdown link</a></li>    </ul>  </div></div>

按钮组垂直排列：.btn-group-vertical

<div class="btn-group-vertical" role="group" aria-label="...">  ...</div>

填满父元素的宽度：.btn-group-justfied 让按钮组中的按钮拉长为相同的尺寸，填满父元素的宽度。

对于<a>元素按钮

<div class="btn-group btn-group-justified" role="group" aria-label="...">  ...</div>

对于<button>元素按钮：为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中

<div class="btn-group btn-group-justified" role="group" aria-label="...">  <div class="btn-group" role="group">    <button type="button" class="btn btn-default">Left</button>  </div>  <div class="btn-group" role="group">    <button type="button" class="btn btn-default">Middle</button>  </div>  <div class="btn-group" role="group">    <button type="button" class="btn btn-default">Right</button>  </div></div>

4、按钮式下拉菜单

普通样式：.btn-group默认是下拉菜单

<div class="btn-group">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Action <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

说明：

1. 按钮式下拉菜单和下拉菜单的区别：.dropdown换成了.btn-goup。.dropdown最主要的工作是设置了position: relative。也就是说任何设置这个属性的都可以替换.dropdown
2. .dropup将默认的下拉菜单变成上拉菜单

分列式下拉菜单

<div class="btn-group">  <button type="button" class="btn btn-danger">Action</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">Toggle Dropdown</span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

5、输入框组

介绍：在输入框<input>前后添加文字或按钮。

实现：为.input-goup赋予.input-group-addon或.input-group-btn类，可以给.form-control的前后添加额外的元素。

说明：只支持输入框<input>，不支持<select>、<textarea>等

基本实例：.input-group输入框组     .input-group-*：输入框组的大小

<label for="basic-url">用户名</label><div class="input-group">   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Email">   <span class="input-group-addon" id="basic-addon3">@qq.com/span></div>

单选和多选

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">        <input type="checkbox" aria-label="...">      </span>      <input type="text" class="form-control" aria-label="...">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">        <input type="radio" aria-label="...">      </span>      <input type="text" class="form-control" aria-label="...">    </div>  </div></div>

下拉菜单

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <div class="input-group-btn">        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>        <ul class="dropdown-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li role="separator" class="divider"></li>          <li><a href="#">Separated link</a></li>        </ul>      </div><!-- /btn-group -->      <input type="text" class="form-control" aria-label="...">    </div><!-- /input-group -->  </div><!-- /.col-lg-6 -->  <div class="col-lg-6">    <div class="input-group">      <input type="text" class="form-control" aria-label="...">      <div class="input-group-btn">        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>        <ul class="dropdown-menu dropdown-menu-right">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li role="separator" class="divider"></li>          <li><a href="#">Separated link</a></li>        </ul>      </div><!-- /btn-group -->    </div><!-- /input-group -->  </div><!-- /.col-lg-6 --></div><!-- /.row -->

分列式下拉菜单

<div class="input-group">  <div class="input-group-btn">    <!-- Button and dropdown menu -->  </div>  <input type="text" class="form-control" aria-label="..."></div><div class="input-group">  <input type="text" class="form-control" aria-label="...">  <div class="input-group-btn">    <!-- Button and dropdown menu -->  </div></div>

6、导航：.nav

标签页：.nav .nav-tabs

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="">说说</a></li><li role="presentation"><a href="">日志</a></li></ul>

胶囊式标签页：.nav-pills
胶囊标签垂直方向排列：.nav-stacked  垂直排列每个<li>变成了块级元素

<ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><a href="">说说</a></li><li role="presentation"><a href="">日志</a></li></ul>

两端对齐标签页：.nav-justified    在小屏幕上显示为堆叠
下拉菜单的标签页：在<li>中添加下拉菜单

<ul class="nav nav-pills nav-justified"><li role="presentation" class="active"><a href="">说说</a></li><li role="presentation"><a href="">日志</a></li><li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" ref="#" role="button" aria-haspopup="true" aria-expanded="false"> 应用<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">农场</a></li><li class="disabled"><a href="#">吃鸡</a></li></ul></li></ul>

7、导航条：.navbar

导航条在移动设备上可以折叠（并且可开可关）

导航条内所包含元素溢出

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：

1. 减少导航条内所有元素所占据的宽度。
2. 在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

<nav class="navbar navbar-default navbar-fixed-top"><!--使用nav标签-->  <div class="container-fluid"><!-- container容器 (指定导航条占满这个父容器宽度) -->  <!--  包裹品牌图标及切换按钮  -->    <div class="navbar-header">    <!--切换按钮-->      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"       data-target="#bs-example-navbar-collapse-1" aria-expanded="false">      <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <!--品牌信息-->      <a class="navbar-brand" href="#">      <img src="img/01.gif" class="img-circle" style="width: 38px;height: 38px;" />      </a>    </div><!-- 导航条中的各个组件  -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          <ul class="nav navbar-nav navbar-left">        <li class="active"><a href="#">日志 <span class="sr-only">(current)</span></a></li>        <li><a href="#">说说</a></li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"           aria-haspopup="true" aria-expanded="false">          应用 <span class="caret"></span>          </a>          <ul class="dropdown-menu">            <li><a href="#">农场</a></li>            <li><a href="#">飞车</a></li>            <li><a href="#">CSDN</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">其他</a></li>          </ul>        </li>      </ul>      <!-- 表单 -->      <form class="navbar-form navbar-left">        <div class="form-group">          <input type="text" class="form-control" placeholder="关键字">        </div>        <button type="submit" class="btn btn-default">搜索</button>      </form>      <!--表单外按钮-->      <button class="btn btn-default navbar-btn navbar-left">退出</button>      <!--文本-->       <p class="navbar-text navbar-left">欢迎：<a href="#" class="navbar-link">我的主页</a></p>      <!--元素向右看齐-->      <ul class="nav navbar-nav navbar-right">        <li><a href="#">注销</a></li>        <li><a href="#">退出</a></li>       </ul>    </div>  </div></nav>

1、务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

2、.container-fluid：设置导航条宽度充满父元素，即为100%；

3、.navbar-header：主要指定此div元素为导航条组件包裹品牌图标及切换按钮

1）.navbar-toggle：设置此button元素为导航条组件的切换钮

2）.collasped：设置此button元素为在视口小于768px时才显示

3）.collase：设置div元素为视口大于768px时显示

4）data-toggle="collaspe"：在大于768px才会显示的这个部分内容，是否显示的开关

会根据设置了collase这些部分内容是显示还是隐藏来判断是.removeClass('collapsed')还是addClass('collapsed')

5）data-target="#bs-example-navbar-collapse-1"：指定操作的区域

6）.icon-bar：字体库中的横线

7）.navbar-brand：设置导航条组件内的品牌名称或图标

4）.navbar-collapse：设置div元素为导航条组件各列表项的父元素

5）.collapse：设置此div元素为视口大于768px时显示

6）.navbar-nav：设置ul为导航条组件内的列表元素

7）.navbar-left、.navbar-right:设置导航条内元素向左对齐、向右看齐

8）.navbar-form：导航条组件内部的表单组件，使用.navbar-form可以呈现更好的垂直对象和折叠状态

.navbar-form和.form-inline(内联表单)代码基本相同。

9）.navbar-btn：对于不再.navbar-form(<form>)中的<button>加上.navbar-btn可以有最好的对齐方式和折叠方式。

不要用在<a>元素上

10）.navbar-text：为普通文本提供了更好的对齐方式和行距颜色。

11）.navbar-link：为链接提供了更好的对齐方式和颜色

.navbar-fixed-top：让导航条固定在顶部

说明：这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。

body { padding-top: 70px; }

.navbar-fixed-bottom：让导航条固定在底部。同样需要设置底部的边距。

body { padding-bottom: 70px; }

.navbar-static-top：类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。
与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

.navbar：设置nav元素为导航条组件；
.navbar-default：指定导航条组件为默认主题；

.navbar-inverse：改变导航条外观的默认主题

END.