固定导航条

从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

body {  padding-top: 70px;/*有顶部固定导航条时设置*/
  padding-bottom: 70px;/*有底部固定导航条时设置*/
}

因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。

<code></code>：显示淡黄背景色

<pre></pre>：用一个框显示，完全还原空格。class="pre-scrollable"，高度差弄过340px，出现Y轴。

<kbd></kbd>：显示黑色背景色

<用&lt;表示，>用&lg;表示

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1、导航条中的按钮navbar-btn

2、导航条中的文本navbar-text

3、导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

glyphicon-remove:×图标,glyphicon-ok:√图标，glyphicon-warning-sign:警告图标

form-control-feedback: 颜色 ，在has-error/has-success/has-warning下就能根据需要变色

has-feedback:右置入框

听课笔记：

        bootstrap的js依赖于jQuery，所以要在引用bootstrap的js之前，先引用jQuery。

面板--面板中嵌套列表组

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">         <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性         </p>         <ul class="list-group">             <li class="list-group-item">我是列表项</li>             <li class="list-group-item">我是列表项</li>             <li class="list-group-item">我是列表项</li>         </ul>     </div>     <div class="panel-footer">作者：大漠</div> </div>

运行效果如下：

面板--面板中嵌套表格

一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。首先来看嵌套表格的效果：

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">     <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性     </p>     <table class="table table-bordered">         <thead>             <tr>                 <th>＃</th>                 <th>我的书</th>                 <th>发布时间</th>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>《图解CSS3》</td>                 <td>2014-07-10</td>             </tr>         </tbody>     </table>     </div>     <div class="panel-footer">作者：大漠</div> </div>

运行效果如下：

面板--彩色面板

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

    panel-primary：重点蓝

    panel-success：成功绿

   panel-info:信息蓝

   panel-warning：警告黄

   panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">…</div>     <div class="panel-footer">作者：大漠</div> </div> <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>

运行效果如下：

面板--带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

     panel-heading：用来设置面板头部样式

    panel-footer：用来设置面板尾部样式

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">…</div>     <div class="panel-footer">作者：大漠</div> </div>

运行效果如下：

面板--基础面板

基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：

<div class="panel panel-default">     <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div> </div>

运行效果如下：

列表组--带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：

<ul class="list-group">     <li class="list-group-item">         <span class="badge">13</span>揭开CSS3的面     </li>     <li class="list-group-item">         <span class="badge">456</span>CSS3选择器     </li>     <li class="list-group-item">         <span class="badge">892</span>CSS3边框     </li>     <li class="list-group-item">         <span class="badge">90</span>CSS3背景     </li>     <li class="list-group-item">         <span class="badge">1290</span>CSS3文本     </li> </ul>

运行效果如下：

1.<button class="btn btn-default" type="button">button标签按钮</button> 

2.<a href="##" class="btn btn-default">a标签按钮</a>

3.<input type="submit" class="btn btn-default" value="input标签按钮"/>

4.<span class="btn btn-default">span标签按钮</span>  

5.<div class="btn btn-default">div标签按钮</div>  

考虑到浏览器兼容问题，一般使用button和a标签制作按钮

列表组--基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

    list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

    list-group-item：列表项，常用的是li元素，当然也可以是div元素

来看一个简单的示例：

<ul class="list-group">     <li class="list-group-item">揭开CSS3的面纱</li>     <li class="list-group-item">CSS3选择器</li>     <li class="list-group-item">CSS3边框</li>     <li class="list-group-item">CSS3背景</li>     <li class="list-group-item">CSS3文本</li> </ul>

运行效果如下：