码迷，mamicode.com
首页 > 其他好文 > 详细

2015年11月27日 BootStrap知识点汇总

时间：2015-12-18 09:05:01      阅读：236      评论：0      收藏：0      [点我收藏+]

标签：

一、BootStrap简介

BootStrap不支持IE的兼容模式，加入
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
平时使用的移动浏览器是放在虚拟视口viewport中，虚拟视口比屏幕宽，会破坏没有针对移动浏览器的布局，viewport可以让开发者控制网页的大小和缩放，width=device-width让宽度等于设备的宽度，初始缩放比例为1也就是不缩放，网页会显得更细腻，为了更好地适配移动浏览器，加上下面这一行;
  1. <meta name="viewport" content="width=device-width,initial-scale=1">
以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除
  1. <!--[if lt IE 9]>
  2.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  4.         <![endif]-->
载入BootStrap的CSS样式
  1. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
JS引入，本地没有下载的话，联网可以使用官方提供的CDN链接    ：
  1.  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  2.    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

先提供一个基本使用BootStrap的html5模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1">
  7. 	<title>Document</title>
  8. 	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  9.   
  10. </head>
  11. <body>
  12.   
  13.   
  14.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  15.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 	
  16. </body>
  17. </html>

二、排版

标题

不同级别标题字体大小 h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px  
  1. <!--Bootstrap中的标题-->
  2. <h1>Bootstrap标题一</h1>
  3. <h2>Bootstrap标题二</h2>
  4. <h3>Bootstrap标题三</h3>
  5. <h4>Bootstrap标题四</h4>
  6. <h5>Bootstrap标题五</h5>
  7. <h6>Bootstrap标题六</h6>
  9. <!--Bootstrap中让非标题元素和标题使用相同的样式-->
  10. <div class="h1">Bootstrap标题一</div>
  11. <div class="h2">Bootstrap标题二</div>
  12. <div class="h3">Bootstrap标题三</div>
  13. <div class="h4">Bootstrap标题四</div>
  14. <div class="h5">Bootstrap标题五</div>
  15. <div class="h6">Bootstrap标题六</div>
  17. <!--任务填写下方-->
  18. <h1>我的第一个bootstrap标题</h1>

 
小标题  <small> 
  1. !--Bootstrap中使用了<small>标签来制作副标题-->
  2. <h1>Bootstrap标题一<small>我是副标题</small></h1>
  3. <h2>Bootstrap标题二<small>我是副标题</small></h2>
  4. <h3>Bootstrap标题三<small>我是副标题</small></h3>
  5. <h4>Bootstrap标题四<small>我是副标题</small></h4>
  6. <h5>Bootstrap标题五<small>我是副标题</small></h5>
  7. <h6>Bootstrap标题六<small>我是副标题</small></h6>

类名 lead 增大字号，强调内容  
  1. <p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>


粗体：<strong><b>
  1. <p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知识。</p>

斜体：<em><i> 
  1. <p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

 强调相关的类：

text-muted 提示，浅灰色 
 text-primary 主要，蓝色
 text-success 成功，浅绿色 
text-info 通知信息，浅蓝色 
text-warning 警告,黄色 
text-danger 危险，褐色
  1. <div class="text-muted">.text-muted 效果</div>
  2. <div class="text-primary">.text-primary效果</div>
  3. <div class="text-success">.text-success效果</div>
  4. <div class="text-info">.text-info效果</div>
  5. <div class="text-warning">.text-warning效果</div>
  6. <div class="text-danger">.text-danger效果</div>

文本对齐的类：

 text-left 左对齐 text-center 居中对齐 text-right 右对齐 text-justify两端对齐
  1. <p class="text-left">我居左</p>
  2. <p class="text-center">我居中</p>
  3. <p class="text-right">我居右</p>
  4. <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>

列表（ul ol）去点的类：

list-unstyle(项目符号样式清除，左边内边距清0)
  1. <!--无序列表去点-->
  2. <ul>
  3.     <li>
  4.     项目列表
  5.         <ul>
  6.         <li>带有项目符号</li>
  7.         <li>带有项目符号</li>
  8.         </ul>
  9.     </li>
  10.     <li>
  11.     项目列表
  12.         <ul class="list-unstyled">
  13.         <li>不带项目符号</li>
  14.         <li>不带项目符号</li>
  15.         </ul>
  16.     </li>
  17.     <li>项目列表</li>
  18. </ul>
  19. <!--有序列表去序号-->
  20. <ol>
  21.     <li>
  22.     项目列表
  23.         <ol>
  24.         <li>带有项目编号</li>
  25.         <li>带有项目编号</li>
  26.         </ol>
  27.     </li>
  28.     <li>
  29.     项目列表
  30.         <ol class="list-unstyled">
  31.         <li>不带项目编号</li>
  32.         <li>不带项目编号</li>
  33.         </ol>
  34.     </li>
  35.     <li>项目列表</li>
  36. </ol>
  37. <!--下面是代码任务部分-->
  38. <ol>
  39.     <li>有序项目列表一</li>
  40.     <li>有序项目列表二</li>
  41.         <ol class="list-unstyled">
  42.             <li>有序二级项目列表一</li>
  43.             <li>有序二级项目列表二</li>
  44.             <ul>
  45.                 <li>无序三级项目列表一</li>
  46.                 <li>无序三级项目列表二</li>
  47.                 <li class="list-unstyled">无序三级项目列表一</li>
  48.                 <li class="list-unstyled">无序三级项目列表二</li>
  49.                 <li>无序三级项目列表三</li>
  50.                 
  51.             </ul>
  52.             <li>有序二级项目列表三</li>
  53.         </ol>
  54.         
  55.            
  56.        
  57.     
  58.     <li>有序项目列表三</li>
  59.     
  60.     
  61. </ol>

内联列表的类：

list-inline（把垂直列表换成水平列表，而且去掉项目符号，用来制作水平导航的）
列表（dl）添加类名dl-horizontal给定义列表实现水平效果（屏幕大于768px的时候）
实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

  1. <ul class="list-inline">
  2.     <li>W3cplus</li>
  3.     <li>Blog</li>
  4.     <li>CSS3</li>
  5.     <li>jQuery</li>
  6.     <li>PHP</li>
  7. </ul>
  8. <!--下面是代码任务部分-->
  10. <ul class="list-unstyled">
  11.     <li>
  12.         城市：
  13.         <ul class="list-inline">
  14.     <li>北京</li>
  15.     <li>上海</li>
  16.     <li>南京</li>
  17.     <li>厦门</li>
  18. </ul>
  19.     </li>
  20. </ul>

表格：

在<table>元素加类名
table 基础表格
  1. <table class="table">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.    </tbody>
  21.  </table>
 table-striped 斑马线表格
  1. <table class="table table-striped">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.      <tr>
  26.        <td>表格单元格</td>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.      </tr>
  30.    </tbody>
  31.  </table>

 table-bordered 带边框的表格 
  1. <table class="table table-bordered">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.      <tr>
  26.        <td>表格单元格</td>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.      </tr>
  30.    </tbody>
  31.  </table>

table-hover鼠标悬停高亮的表格 
  1. <table class="table table-striped table-bordered table-hover">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.      <tr>
  26.        <td>表格单元格</td>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.      </tr>
  30.    </tbody>
  31.  </table>

table-condensed紧凑型表格 
  1. <table class="table table-condensed">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.      <tr>
  26.        <td>表格单元格</td>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.      </tr>
  30.    </tbody>
  31.  </table>

table-responsive 响应式表格 （响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
  1. <div class="table-responsive">
  2.    <table class="table table-bordered">
  3.    <thead>
  4.      <tr>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.        <th>表格标题</th>
  8.      </tr>
  9.    </thead>
  10.    <tbody>
  11.      <tr>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.        <td>表格单元格</td>
  15.      </tr>
  16.      <tr>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.        <td>表格单元格</td>
  20.      </tr>
  21.      <tr>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.        <td>表格单元格</td>
  25.      </tr>
  26.      <tr>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.        <td>表格单元格</td>
  30.      </tr>
  31.    </tbody>
  32.  </table>
  33. </div>

三、表单

基础表单：

文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮
  1. <form role="form">
  2.   <div class="form-group">
  3.     <label for="exampleInputEmail1">邮箱：</label>
  4.     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  5.   </div>
  6.   <div class="form-group">
  7.     <label for="exampleInputPassword1">密码</label>
  8.     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  9.   </div>
  10.   <div class="checkbox">
  11.     <label>
  12.       <input type="checkbox"> 记住密码
  13.     </label>
  14.   </div>
  15.   <button type="submit" class="btn btn-default">进入邮箱</button>
  16. </form>

水平表单：

（标签居左，表单控件居右）
在BootStrap框架中要实现水平表单效果，必须满足一下两个条件：
1，在<form》元素使用类名form-horizontal 2,配合BootStrap框架的网格系统
  1. <form class="form-horizontal" role="form">
  2.   <div class="form-group">
  3.     <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  4.     <div class="col-sm-10">
  5.       <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  6.     </div>
  7.   </div>
  8.   <div class="form-group">
  9.     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  10.     <div class="col-sm-10">
  11.       <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  12.     </div>
  13.   </div>
  14.   <div class="form-group">
  15.     <div class="col-sm-offset-2 col-sm-10">
  16.       <div class="checkbox">
  17.         <label>
  18.           <input type="checkbox"> 记住密码
  19.         </label>
  20.       </div>
  21.     </div>
  22.   </div>
  23.   <div class="form-group">
  24.     <div class="col-sm-offset-2 col-sm-10">
  25.       <button type="submit" class="btn btn-default">进入邮箱</button>
  26.     </div>
  27.   </div>
  28. </form>

内联表单:

只需要在<form>元素添加类型form-inline，原理是将表单控件设置成内联块元素(display:inline-block)
如果你要在input前面添加一个label标签时，会导致input换行显示，如果必须添加这个label标签，并且不想让input换行，需要将label标签也放在容器form-group中
  1. <form class="form-inline" role="form">
  2.   <div class="form-group">
  3.     <label class="sr-only" for="exampleInputEmail2">邮箱</label>
  4.     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  5.   </div>
  6.   <div class="form-group">
  7.     <label class="sr-only" for="exampleInputPassword2">密码</label>
  8.     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  9.   </div>
  10.   <div class="checkbox">
  11.     <label>
  12.       <input type="checkbox"> 记住密码
  13.     </label>
  14.   </div>
  15.   <button type="submit" class="btn btn-default">进入邮箱</button>
  16. </form>

表单控件

（输入框input）

常见的input的type值为text BootStrap使用input时也得指定type值，为了让控件在各种表单中样式不出错，需要添加类名form-control
  1. <form role="form">
  2.   <div class="form-group">
  3.     <input type="email" class="form-control" placeholder="Enter email">
  4.     <input type="text" class="form-control" placeholder="Enter username">
  5.     
  6.   </div>
  7. </form>

下拉框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性值为multiple
  1. <form role="form">
  2.   <div class="form-group">
  3.     <select class="form-control"> 
  4.       <option>1</option> 
  5.       <option>2</option> 
  6.       <option>3</option> 
  7.       <option>4</option> 
  8.       <option>5</option> 
  9.       </select>
  10.   </div>
  11.   <div class="form-group">
  12.       <select multiple class="form-control"> 
  13.         <option>1</option> 
  14.         <option>2</option> 
  15.         <option>3</option> 
  16.         <option>4</option> 
  17.         <option>5</option> 
  18.       </select>
  19.   </div>
  20.   <div class="form-group">
  21.       <select multiple class="form-control"> 
  22.         <option>踢足球</option> 
  23.         <option>游泳</option> 
  24.         <option>慢跑</option> 
  25.         <option>跳舞</option> 
  26.          
  27.       </select>
  28.   </div>
  30. </form>

文本域textarea

设置rows可定义高度，设置cols可以设置宽度，但如果textarea元素中添加了类名form-control，则无需设置cols属性
  1. <form role="form">
  2.   <div class="form-group">
  3.     <textarea class="form-control" rows="3"></textarea>
  4.   </div>
  5. </form>

复选框checkbox和单选按钮radio

checkbox和radio标签配合label标签使用的时候会出现以下小问题,使用BootStrap框架，无需考虑太多，只需按照下面的方法即可。
  1. <form role="form">
  2. <div class="checkbox">
  3. <label>
  4. <input type="checkbox" value="">
  5. 记住密码
  6. </label>
  7. </div>
  8. <div class="radio">
  9. <label>
  10. <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
  11. 喜欢
  12. </label>
  13. </div>
  14. <div class="radio">
  15. <label>
  16. <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
  17. 不喜欢
  18. </label>
  19. </div>
  20. </form>
ps:就是不管checkbox还是radio都是用label包起来了；checkbox连同label标签放置在一个名为.checkbox的容器内；radio连同label标签放置在一个名为.radio的容器内。在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

表单控件（复选框和单选按钮水平排列）

1，如果checkbox需要水平排列，只需要在label标签添加类名checkbox-inline
2，如果radio需要水平排列，只需要在label标签上添加类名radio-inline
  1. <form role="form">
  2.   <div class="form-group">
  3.     <label class="radio-inline">
  4.       <input type="radio"  value="option1" name="sex">男性
  5.     </label>
  6.     <label class="radio-inline">
  7.       <input type="radio"  value="option2" name="sex">女性
  8.     </label>
  9.     <label class="radio-inline">
  10.       <input type="radio"  value="option3" name="sex">中性
  11.     </label>
  12.   </div>
  13. </form>

表单控件（按钮）

  input[type=“submit”]
  input[type=“button”]
  input[type=“reset”]
<button>

表单控件大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置，但是还可以通过两个不同的类名来控制高度 input-sm 让控件比正常的更小 input-lg 让控件比正常的更大 这两个类适用于input textarea select;
  1. <div class="row">
  2. <div class="col-xs-4">
  3. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  4. </div>
  5. <div class="col-xs-4">
  6. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  7. </div>
  8. <div class="col-xs-4">
  9. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  10. </div>
  11. </div>

如果表单使用了类名form-horizontal 其中form-group就相当于网格系统中的row
  1. <form role="form" class="form-horizontal">
  2.   <div class="form-group">
  3.   <div class="col-xs-4">
  4.     <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  5.   </div>
  6.   <div class="col-xs-4">
  7.     <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  8.   </div>
  9.   <div class="col-xs-4">
  10.     <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  11.   </div>
  12.   </div>
  13.     …
  14. </form>
如果没有这样做，就要通过网格系统来控制表单控件宽度，就需要这样
  1. <div class="row">
  2. <div class="col-xs-4">
  3. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  4. </div>
  5. <div class="col-xs-4">
  6. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  7. </div>
  8. <div class="col-xs-4">
  9. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  10. </div>
  11. </div>

表单控件状态（焦点状态）

要让控件在焦点状态下有蓝色边框效果，需要给给控件添加类名form-control
  1. <form role="form" class="form-horizontal">
  2.   <div class="form-group">
  3.     <div class="col-xs-6">
  4.       <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
  5.     </div>
  6.     <div class="col-xs-6">
  7.       <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
  8.     </div>
  9.   </div>
  10. </form>

表单控件状态（禁用状态）

和普通的表单禁用状态实现是一样的，在相应的表单控件上添加属性disabled 在BootStrap里面只需在禁用的表单控件上加上disabled即可
  1. <input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
  1. <form role="form">
  2. <fieldset disabled>
  3.   <div class="form-group">
  4.   <label for="disabledTextInput">禁用的输入框</label>
  5.     <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
  6.   </div>
  7.   <div class="form-group">
  8.   <label for="disabledSelect">禁用的下拉框</label>
  9.     <select id="disabledSelect" class="form-control">
  10.   <option>不可选择</option>
  11.   </select>
  12.   </div>
  13.   <div class="checkbox">
  14.   <label>
  15.     <input type="checkbox">无法选择
  16.   </label>
  17.   </div>
  18.   <button type="submit" class="btnbtn-primary">提交</button>
  19. </fieldset>
  20. </form>
ps:据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的
  1. <form role="form">
  2. <fieldset disabled>
  3. <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
  4.     …
  5. </fieldset>
  6. </form>

表单控件状态（验证状态）

has-warning警告状态（黄色） has-error错误状态（红色） has-success（成功状态（绿色）） 使用的时候只需要在from-group容器上对应添加状态类名即可
  1. <form role="form">
  2. <div class="form-group has-success">
  3.   <label class="control-label" for="inputSuccess1">成功状态</label>
  4.   <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5. </div>
  6. <div class="form-group has-warning">
  7.   <label class="control-label" for="inputWarning1">警告状态</label>
  8.   <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  9. </div>
  10. <div class="form-group has-error">
  11.   <label class="control-label" for="inputError1">错误状态</label>
  12.   <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  13. </div>
  14. </form>
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
  1. <form role="form">
  2. <div class="form-group has-success has-feedback">
  3.   <label class="control-label" for="inputSuccess1">成功状态</label>
  4.   <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5.   <span class="glyphiconglyphicon-ok form-control-feedback"></span>
  6. </div>
  7. <div class="form-group has-warning has-feedback">
  8.   ......
  9. </div>
  10. <div class="form-group has-error has-feedback">
  11.   ......
  12. </div>
  13. </form>
小图标是用一个span来实现的
  1. <span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

表单提示信息

在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。
  1. <form role="form">
  2. <div class="form-group has-success has-feedback">
  3.   <label class="control-label" for="inputSuccess1">成功状态</label>
  4.   <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5.   <span class="help-block">你输入的信息是正确的</span>
  6.   <span class="glyphiconglyphicon-ok form-control-feedback"></span>
  7. </div>
  8.   …
  9. </form>
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：
  1. .help-inline{
  2.   display:inline-block;
  3.   padding-left:5px;
  4.   color: #737373;
  5. }
如果你不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。
  1. <form role="form">
  2. <div class="form-group">
  3. <label class="control-label" for="inputSuccess1">成功状态</label>
  4. <div class="row">
  5. <div class="col-xs-6">
  6. <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  7. </div>
  8. <span class="col-xs-6 help-block">你输入的信息是正确的</span>
  9. </div>
  10. </div>
  11. </form>

按钮

BootStrap框架先通过一个基础类名".btn"定义了一个基础按钮风格，然后通过 btn-default定义了一个默认的按钮风格，使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可。
  1. <button class="btn btn-default" type="button">默认按钮.btn-default</button>

多标签支持：

一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”
  1. <input type="submit" class="btn btn-default" value="input标签按钮"/>
  3. <span class="btn btn-default">span标签按钮</span>  
  4. <div class="btn btn-default">div标签按钮</div>  
  5. <a  href="#" class="btn btn-default">qqqqqqqq</a>

块状按钮：

类名 btn-block可以让按钮充满容器；
  1. <button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 
  2.     <button class="btn btn-primary btn-block" type="button">正常按钮</button>
  3.     <button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
  4.     <button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

按钮状态-活动状态

主要包括按钮的悬浮状态 :hover 点击状态 :active 焦点状态 focus  当按钮处理正在点击状态，对于<button>元素是通过:active伪类实现，而对于这样的标签元素则是通过类名:active来实现
  1. <button class="btn" type="button">基础按钮.btn</button>  
  2.    <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
  3.    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
  4.    <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
  5.    <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
  6.    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
  7.    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
  8.    <button class="btn btn-link" type="button">链接按钮.btn-link</button>

按钮状态-禁用状态

两个方式：1，在标签中添加disabled属性  2，在元素添加类名disabled
区别：.disabled样式不会禁止按钮的默认行为，。而在元素标签中添加disabled属性的方法是可以禁止元素的默认行为的
  1. <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
  2. 	<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
  3. 	<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

图像

img-responsive响应式图片，主要针对响应式
img-rounded圆角图片
img-circle圆形图片
img-thumbnail缩略图片
只需在<img>标签上添加对应的类名
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-sm-6">
  4.       <img   alt="140x140" src="http://placehold.it/140x140">
  5.         <div>默认图片</div>
  6.     </div>
  7.     <div class="col-sm-4">
  8.       <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
  9.         <div>圆角图片</div>
  10.     </div>
  11.     <div class="col-sm-4">
  12.       <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
  13.         <div>圆形图片</div>
  14.     </div>
  15.       <div class="row">
  16.         <div class="col-sm-6">
  17.           <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
  18.             <div>缩略图</div>
  19.         </div>
  20.         <div class="col-sm-6">
  21.           <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
  22.           <div>响应式图片</div>
  23.         </div>
  24.       </div>
  25.   </div>
  26. </div>

 图标1

glyphicons.com网站提供的，在网页上使用图标也非常的简单，在任何内联元素上应用的所对应的样式即可
  1. <span class="glyphicon glyphicon-search"></span>
  2. <span class="glyphicon glyphicon-asterisk"></span>
  3. <span class="glyphicon glyphicon-plus"></span>
  4. <span class="glyphicon glyphicon-cloud"></span>

四 、网格系统

实现原理：仅仅是通过容器大小，平分十二份（也有平分24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。BootStrap框架中的网格系统就是将容器平分成12份。
在使用的时候可以根据实际情况重新编译less或sass源码来修改12这个值
工作原理：数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）
  1. <div class="container">
  2. <div class="row"></div>
  3. </div>
在行（.row）中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12.
  1. <div class="container">
  2. <div class="row">
  3.   <div class="col-md-4"></div>
  4.   <div class="col-md-8"></div>
  5. </div>
  6. </div>
具体内容应当放置在列容器（column）之内，而且只有列(column)才可以作为行容器（row）的直接子元素。
通过设置内距（padding）从而创建列与列之间的间距，然后通过为第一列和最后一列设置负值的外距来抵消内距（padding）的影响。
网格系统用来布局，其实就是列的组合。

BootStrap框架中的网格系统基本有四种用法

1，列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-md-4">.col-md-4</div>
  4.     <div class="col-md-8">.col-md-8</div>
  5.   </div>
  6.   <div class="row">
  7.     <div class="col-md-4">.col-md-4</div>
  8.     <div class="col-md-4">.col-md-4</div>
  9.     <div class="col-md-4">.col-md-4</div>
  10.   </div>
  11.   <div class="row">
  12.     <div class="col-md-3">.col-md-3</div>
  13.     <div class="col-md-6">.col-md-6</div>
  14.     <div class="col-md-3">.col-md-3</div>
  15.  </div>
  16. </div>

列偏移

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来，这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名col-md-offset-*其中星号代表要偏移的列组合数，  那么具有这个类名的列就会向右偏移。例如，你在元素上添加col-md-offset-4就表示列向右移动4个列的宽度。
  1. <div class="container">
  2. <div class="row">
  3. <div class="col-md-4">.col-md-4</div>
  4. <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  5. <div class="col-md-2">.col-md-3</div>
  6. </div>
  7. <div class="row">
  8. <div class="col-md-4">.col-md-4</div>
  9. <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  10. </div>
  11. </div>
PS:如果使用col-md-offset-*对列进行 向右偏移时，要保证列与偏移量的在总数不超过12,不然会致列断行显示。

列排列：

列排列其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离，在BootStrap框架的网格系统中通过添加类名col-md-push-*和col-md-pull-*（其中星号代表移动的列组合数）
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-md-4">.col-md-4</div>
  4.     <div class="col-md-8">.col-md-8</div>
  5.   </div>
  6. </div>
默认情况下，是col-md-4居左，col-md-8居右。如果要互换位置，需要将col-md-4向右移动8个列的位置，也就是八个offset，也就是在<div class="col-md-4">添加类名col-md-push-8,调其样式。
也要将col-md-8向左移动4个列的距离，也就是4个offset，在<div class="col-md-8">上添加类名"col-md-pull-4"
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-md-4 col-md-push-8">.col-md-4</div>
  4.     <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  5.   </div>
  6. </div>

列的嵌套

BootStrap框架的网格系统还支持列的嵌套，你可以在一个列添加一个或者多行row容器，然后在这个行容器中插入列。
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-md-8">
  4.       我的里面嵌套了一个网格
  5.       <div class="row">
  6.         <div class="col-md-6">col-md-6</div>
  7.         <div class="col-md-6">col-md-6</div>
  8.       </div>
  9.     </div>
  10.     <div class="col-md-4">col-md-4</div>
  11.   </div>
  12.   <div class="row">
  13.     <div class="col-md-4">.col-md-4</div>
  14.     <div class="col-md-8">
  15.       我的里面嵌套了一个网格
  16.       <div class="row">
  17.         <div class="col-md-4">col-md-4</div>
  18.         <div class="col-md-4">col-md-4</div>
  19.         <div class="col-md-4">col-md-4</div>
  20.       </div>
  21.     </div>
  22.   </div>
  23. </div>

五、菜单、按钮及导航

下拉菜单

调用bootstrap.js文件。如果使用未编译版本，也可以用dropdown.js。使用方法：先使用一个名为dropdown的容器包裹了整个下拉菜单
  1. <div class="dropdown"></div>
使用了一个<button>按钮做父菜单，并且定义类名dropdown-toggle和自定义data-toggle属性，且值必须和最外围容器类名一样
  1. data-toggle="dropdown"
下拉菜单项使用了一个ul列表，并且定义了一个类名为dropdown-menu
  1. <ul class="dropdown-menu">
完整的代码如下：
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     下拉菜单
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  10.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  11.   </ul>
  12. </div>
或
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     选择你喜欢的水果
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
  10.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  11.   </ul>
  12. </div>

下拉分割线

BootStrap中的下拉菜单还提供了下拉分割线，假设下拉菜单有两个组，那么组与组之间可以通过添加这个空的<li>，并且给这个<li>添加类名divider来实现添加下拉分隔线的功能。
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     食物
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
  10.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  11.     <li role="presentation" class="divider"></li>
  12.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
  13.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
  14.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
  15.     <li role="presentation" class="divider"></li>
  16.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
  17.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
  18.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
  19.   </ul>
  20. </div>
为了让分组更加明显，还可以给每个组添加一个头部（标题）。就是添加类名 dropdown-header  
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     食物
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation" class="dropdown-header">水果</li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
  10.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
  11.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  12.     <li role="presentation" class="divider"></li>
  13.     <li role="presentation" class="dropdown-header">蔬菜</li>
  14.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
  15.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
  16.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
  17.     <li role="presentation" class="divider"></li>
  18.     <li role="presentation" class="dropdown-header">主食</li>
  19.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
  20.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
  21.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
  22.   </ul>
  23. </div>

对其方式

实现右对齐方法：默认是左对齐，如果想让下拉菜单相对于父容器右对齐，可以在dropdown-menu上添加一个pull-right或者dropdown-menu-right类名：
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     下拉菜单
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  10.     <li role="presentation" class="divider"></li>
  11.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  12.   </ul>
  13. </div>
或者
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     下拉菜单
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  10.     <li role="presentation" class="divider"></li>
  11.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  12.   </ul>
  13. </div>

菜单项状态

有悬浮状态:hover和焦点状态:focus  除了这两种状态还有当前状态.active和禁用状态(disabled)后面这两宗状态只需要在对应的菜单项上添加对应的类名：
  1. <div class="dropdown">
  2.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.     选择你喜欢的水果
  4.     <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.     <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
  8.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
  9.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
  10.     <li role="presentation" class="divider"></li>
  11.     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  12.   </ul>
  13. </div>

按钮组

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。
  1. <div class="btn-group">
  2.     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
  3.     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
  4.     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
  5.     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
  6.     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
  7. </div>

按钮工具栏

在富文本编辑框中，将按钮分组在排列在一起，比如说复制，剪切和粘贴一组，左对齐，右对齐和两端对齐一组，在BootStrap中也提供了这样的方法，只需要将按钮组btn-group按组放在一个大的容器btn-toolbar中
  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.     …
  4.   </div>
  5.   <div class="btn-group">
  6.     …
  7.   </div>
  8.   <div class="btn-group">
  9.     …
  10.   </div>
  11.   <div class="btn-group">
  12.     …
  13.   </div>
  14. </div>

按钮组大小设置

按钮是通过btn-lg，btn-sm，btn-xs，就是只需在btn-group类名 上追加对应的类名就可以得到不同大小的按钮组。
  1. <div class="btn-toolbar">
  2.   <div class="btn-group btn-group-lg">
  3.     …
  4.   </div>
  5.   <div class="btn-group">
  6.     …
  7.   </div>
  8.   <div class="btn-group btn-group-sm">
  9.     …
  10.   </div>
  11.   <div class="btn-group btn-group-xs">
  12.    …
  13.   </div>
  14. </div>

嵌套分组

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。
使用的时候，只需要把当初制作下拉菜单的dropdown的容器换成btn-group，并且和普通的按钮放在同一级。
  1. <div class="btn-group">
  2.   <button class="btn btn-default" type="button">首页</button>
  3.   <div class="btn-group">
  4.       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button>
  5.     <ul class="dropdown-menu">
  6.         <li><a href="##">收割机</a></li>
  7.     	<li><a href="##">电动机</a></li>
  8.     	<li><a href="##">拖拉机</a></li>
  9.     	<li><a href="##">电动车</a></li>
  10.     </ul>
  11.   </div>
  12.   <button class="btn btn-default" type="button">案例分析</button>
  13.   <button class="btn btn-default" type="button">联系我们</button>
  14.   <div class="btn-group">
  15.       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
  16.     <ul class="dropdown-menu">
  17.     	<li><a href="##">公司简介</a></li>
  18.     	<li><a href="##">企业文化</a></li>
  19.     	<li><a href="##">组织结构</a></li>
  20.     	<li><a href="##">客服服务</a></li>
  21.     </ul>
  22.   </div>
  23. </div>

垂直分组

前面看到的示例，按钮组都是水平显示的，但在实际运用中，总会碰到垂直显示的效果。BootStrap也提供了这样的风格。我们只需要把btn-group类名换成btn-group-vertical即可
  1. <div class="btn-group-vertical">
  2.   <button class="btn btn-default" type="button">首页</button>
  3.   <button class="btn btn-default" type="button">产品展示</button>
  4.   <button class="btn btn-default" type="button">案例分析</button>
  5.   <button class="btn btn-default" type="button">联系我们</button>
  6.   <div class="btn-group">
  7.       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
  8.     <ul class="dropdown-menu">
  9.     	<li><a href="##">公司简介</a></li>
  10.     	<li><a href="##">企业文化</a></li>
  11.     	<li><a href="##">组织结构</a></li>
  12.     	<li><a href="##">客服服务</a></li>
  13.     </ul>
  14.   </div>
  15. </div>

等分按钮

等分按钮的效果在移动端上特别实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器的宽度，例如，如果按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。
等分按钮也成为自适应分组按钮，其实现方法特别简单，只需要在按钮组btn-group上追加一个btn-group-justified类名
  1. <div class="btn-wrap">
  2.     <div class="btn-group btn-group-justified">
  3.     <a class="btn btn-default" href="#">首页</a>
  4.     <a class="btn btn-default" href="#">产品展示</a>
  5.     <a class="btn btn-default" href="#">案例分析</a>
  6.     <a class="btn btn-default" href="#">联系我们</a>
  7.   </div>
  8. </div>

按钮下拉菜单

按钮下拉菜单其实就是普通的下拉菜单，只不过把外部容器div.dropdown换成了div.btn-group
  1. <div class="btn-group">
  2.       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
  3.     <ul class="dropdown-menu">
  4.     	<li><a href="##">按钮下拉菜单项</a></li>
  5.     	<li><a href="##">按钮下拉菜单项</a></li>
  6.     	<li><a href="##">按钮下拉菜单项</a></li>
  7.     	<li><a href="##">按钮下拉菜单项</a></li>
  8.     </ul>
  9.   </div>

按钮向上向下三角形

按钮的向下三角形，是通过在<button>标签中添加了一个<span>便签，并且class为caret;
有的时候我们的菜单也会向上弹起，需要在btn-group类上追加dropup
  1. <div class="btn-group dropup">
  2.     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
  3.     <ul class="dropdown-menu">
  4.         <li><a href="##">按钮下拉菜单项</a></li>
  5.     	<li><a href="##">按钮下拉菜单项</a></li>
  6.     	<li><a href="##">按钮下拉菜单项</a></li>
  7.     	<li><a href="##">按钮下拉菜单项</a></li>
  8.     </ul>
  9. </div>

导航

BootStrap主要通过.nav样式，默认的.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类    

标签形导航

也叫选项卡导航，特别适合在很多内容分块显示的时，使用这种选项卡来分组十分合适。
标签形导航是通过.nav-tabs样式来实现的，在制作标签形导航时需要在原导航nav上追加类名
  1. <ul class="nav nav-tabs">
  2.      <li><a href="##">Home</a></li>
  3.      <li><a href="##">CSS3</a></li>
  4.      <li><a href="##">Sass</a></li>
  5.      <li><a href="##">jQuery</a></li>
  6.      <li><a href="##">Responsive</a></li>
  7. </ul>
一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可
  1. <ul class="nav nav-tabs">
  2.     <li class="active"><a href="##">Home</a></li>
  3.     …
  4. </ul>

胶囊pills导航

类名：nav-pills
  1. <ul class="nav nav-pills">
  2.     <li class="active"><a href="##">商品介绍</a></li>
  3.  	<li><a href="##">规格参数</a></li>
  4.  	<li><a href="##">商品评价</a></li>
  5.  	<li><a href="##">售后保证</a></li>
  6. </ul>

垂直堆叠的导航

只需要在nav-pills的基础上添加一个nav-stacked类名即可
  1. <ul class="nav nav-pills nav-stacked">
  2.      <li class="active"><a href="##">Home</a></li>
  3.      <li><a href="##">CSS3</a></li>
  4.      <li><a href="##">Sass</a></li>
  5.      <li><a href="##">jQuery</a></li>
  6.      <li class="disabled"><a href="##">Responsive</a></li>
  7. </ul>
下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,在导航项之间添加一个<li calss="nav-divider">
  1.  <ul class="nav nav-pills nav-stacked">
  2.      <li class="active"><a href="##">Home</a></li>
  3.  	<li><a href="##">CSS3</a></li>
  4.  	<li><a href="##">Sass</a></li>
  5.  	<li><a href="##">jQuery</a></li>
  6.      <li class="nav-divider"></li>
  7.  	<li class="disabled"><a href="##">Responsive</a></li>
  8.  </ul>
  9.  <br />
  10. <ul class="nav nav-pills nav-stacked">
  11.     <li class="active"><a href="##">Home</a></li>
  12.  	<li><a href="##">CSS3</a></li>
  13.  	<li><a href="##">Sass</a></li>
  14.  	<li><a href="##">jQuery</a></li>
  15.     <li class="nav-divider"></li>
  16.  	<li class="disabled"><a href="##">Responsive</a></li>
  17. </ul>

自适应导航

指的是占据容器全部宽度，更换了另一个类名nav-justified，当然需要和nav-tabs nav-pills配合一起使用。
  1. <ul class="nav nav-tabs nav-justified">
  2.   <li class="active"><a href="##">Home</a></li>
  3.   <li><a href="##">CSS3</a></li>
  4.   <li><a href="##">Sass</a></li>
  5.   <li><a href="##">jQuery</a></li>
  6.   <li><a href="##">Responsive</a></li>
  7. </ul>

导航加下拉菜单（二级 导航）

只需要将li当做父容器，使用类名dropdown，同时在li中嵌套另一个列表ul
  1. <ul class="nav nav-pills">
  2.   <li class="active"><a href="##">首页</a></li>
  3.   <li class="dropdown">
  4.       <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
  5.       <ul class="dropdown-menu">
  6.           <li><a href="##">CSS3</a></li>
  7.         <li><a href="##">Sass</a></li>
  8.         <li><a href="##">jQuery</a></li>
  9.         <li><a href="##">Responsive</a></li>
  10.       </ul>
  11.   </li>
  12.  <li><a href="##">关于我们</a></li>
  13. </ul>
  14. <br />
PS：点击有二级导航的菜单栏，会自动添加类名open，还有分隔线添加：<li class="nav-divider"></li>

面包屑式导航

在ol加入breadcrumb类
  1. <ol class="breadcrumb">
  2.   <li><a href="#">首页</a></li>
  3.   <li><a href="#">我的书</a></li>
  4.   <li class="active">《图解CSS3》</li>
  5. </ol>

六、导航条、分页及导航

导航条navbar

和导航nav形成对比
导航条navbar中有一个背景色，而且导航条可以是纯链接，也可以是表单
制作第一步：
首先在制作导航的列表<ulclass="nav">基础上添加类名navbar-nav
第二步：在外部添加一个容器div ，并且使用类名navbar和navbar-default
  1. <div class="navbar navbar-default" role="navigation">
  2.      <ul class="nav navbar-nav">
  3.      	<li class="active"><a href="##">网站首页</a></li>
  4.         <li><a href="##">系列教程</a></li>
  5.         <li><a href="##">名师介绍</a></li>
  6.         <li><a href="##">成功案例</a></li>
  7.         <li><a href="##">关于我们</a></li>
  8. 	 </ul>
  9. </div>
加入导航条标题
通过navbar-header和navbar-brand类来实现
  1. <div class="navbar-header">
  2.   　    <a href="##" class="navbar-brand">慕课网</a>
  3.   　</div>
<!--导航条状态及二级菜单-->
  1. <div class="navbar navbar-default" role="navigation">
  2.   　<div class="navbar-header">
  3.   　    <a href="##" class="navbar-brand">慕课网</a>
  4.   　</div>
  5. 	<ul class="nav navbar-nav">
  6. 	 	<li class="active"><a href="##">网站首页</a></li>
  7.         <li class="dropdown">
  8.           <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  9.           <ul class="dropdown-menu">
  10.         	<li><a href="##">CSS3</a></li>
  11.         	<li><a href="##">JavaScript</a></li>
  12.         	<li class="disabled"><a href="##">PHP</a></li>
  13.           </ul>
  14.        </li>
  15.        <li><a href="##">名师介绍</a></li>
  16.        <li><a href="##">成功案例</a></li>
  17.        <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们<span class="caret"></span></a>
  18.            <ul class="dropdown-menu">
  19.             <li><a href="##">CSS3</a></li>
  20.         	<li><a href="##">JavaScript</a></li>
  21.         	<li class="disabled"><a href="##">PHP</a></li>
  22.           </ul>
  23.        </li>
  24. 	</ul>
  25. </div>

带表单的导航条

navbar-form  在navbar容器中放置一个navbar-form类名的表单
  1. <div class="navbar navbar-default" role="navigation">
  2.   　<div class="navbar-header">
  3.   　    <a href="##" class="navbar-brand">慕课网</a>
  4.   　</div>
  5.     <ul class="nav navbar-nav">
  6.        <li class="active"><a href="##">网站首页</a></li>
  7.        <li class="dropdown">
  8.           <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  9.           <ul class="dropdown-menu">
  10.         	<li><a href="##">CSS3</a></li>
  11.         	<li><a href="##">JavaScript</a></li>
  12.         	<li class="disabled"><a href="##">PHP</a></li>
  13.           </ul>
  14.       </li>
  15.       <li><a href="##">名师介绍</a></li>
  16.       <li><a href="##">成功案例</a></li>
  17.       <li><a href="##">关于我们</a></li>
  18. 	 </ul>
  19.      <form action="##" class="navbar-form navbar-left" rol="search">
  20.    	    <div class="form-group">
  21.    		   <input type="text" class="form-control" placeholder="请输入关键词" />
  22.    	    </div>
  23.         <button type="submit" class="btn btn-default">搜索</button>
  24.      </form>
  25. </div>
PS：上面代码里还用navbar-left让表单左浮动，更好地实现了对齐，还提供了navbar-right样式让元素在导航条靠右对齐

导航条中的按钮、文本、和链接

导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素
按钮：navbar-btn
文本：navbar-text
普通链接:navbar-link
这三种样式在框架中使用时受到限制，需要和navbar-brand navbar-nav配合起来使用
  1. <div class="navbar navbar-default" role="navigation">
  2.   　<div class="navbar-header">
  3.   　    <a href="##" class="navbar-brand">慕课网</a>
  4.   　</div>
  5. 	 <ul class="nav navbar-nav">
  6. 	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
  7. 	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
  8. 	 	<li><a href="##" class="navbar-text">Navbar Text</a></li>
  9. 	 </ul>
  10. </div>
  11. <div class="navbar navbar-default" role="navigation">
  12.   　<div class="navbar-header">
  13.   　    <a href="##" class="navbar-brand">慕课网</a>
  14.   　</div>
  15. 	 <div class="nav navbar-nav">
  16. 	 	<a href="##" class="navbar-text">Navbar Text</a>
  17. 	 	<a href="##" class="navbar-text">Navbar Text</a>
  18. 	 	<a href="##" class="navbar-text">Navbar Text</a>
  19. 	 </div>
  20. </div>

固定导航条

navbar-fixed-top   导航条固定在浏览器窗口顶部
navbar-fixed-bottom 导航条固定在浏览器窗口底部
  1. <div class="navbar navbar-default navbar-fixed-top" role="navigation">
  2. 　…
  3. </div>
  4. <div class="content">我是内容</div>
  5. <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  6. 　…
  7. </div>
整体代码：
  1. <div class="navbar navbar-default navbar-fixed-top" role="navigation">
  2.   　<div class="navbar-header">
  3.   　    <a href="##" class="navbar-brand">慕课网</a>
  4.   　</div>
  5. 	 <ul class="nav navbar-nav">
  6. 	 	<li class="active"><a href="##">网站首页</a></li>
  7.         <li><a href="##">系列教程</a></li>
  8.         <li><a href="##">名师介绍</a></li>
  9.         <li><a href="##">成功案例</a></li>
  10.         <li><a href="##">关于我们</a></li>
  11. 	 </ul>
  12. </div>
  13. <div class="content">我是内容</div>
  14. <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  15.   　<div class="navbar-header">
  16.   　	<a href="##" class="navbar-brand">慕课网</a>
  17.   　</div>
  18. 	 <ul class="nav navbar-nav">
  19. 	 	<li class="active"><a href="##">网站首页</a></li>
  20.         <li><a href="##">系列教程</a></li>
  21.         <li><a href="##">名师介绍</a></li>
  22.         <li><a href="##">成功案例</a></li>
  23.         <li><a href="##">关于我们</a></li>
  24. 	 </ul>
  25. </div> 
  26. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  27. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  28. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  29. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  30. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  31. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  32. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  33. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  34. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  35. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  36. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  37. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  38. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  39. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  40. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  41. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  42. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  43. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  44. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  45. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  46. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  47. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  48. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  49. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  50. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  51. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  52. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  53. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  54. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  55. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  56. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  57. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  58. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  59. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  60. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  61. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  62. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  63. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  64. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  65. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  66. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
  67. <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p><p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

响应式导航

如今浏览web页面的终端不再是一成不变了，前面示例实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不合适了，因此响应式设计就随之而来，那么在响应式的web页面中，对于响应式的导航条也就非常的重要，例如BOOTStrap框架官网的导航条，实现如下：
1，保证在窄屏是需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse navbar-collapse两个类名，最后为这个div添加一个class类名或者id名
2，保证在窄屏是要显示的图标样式（固定写法）
  1. <button class="navbar-toggle" type="button" data-toggle="collapse">
  2.   <span class="sr-only">Toggle Navigation</span>
  3.   <span class="icon-bar"></span>
  4.   <span class="icon-bar"></span>
  5.   <span class="icon-bar"></span>
  6. </button>
ps: 3，并为button添加data-target=".类名/#id名"
需要折叠的div代码段：
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏是显示的图标代码段：
  1. <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  2.   ...
  3. </button>
也可以这么写：
  1. <div class="collapse navbar-collapse example" >
  2.       <ul class="nav navbar-nav">
  3.       …
  4.       </ul>
  5. </div>
窄屏时要显示的图标：
  1. <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  2.   ...
  3. </button>
整体代码如下
  1. <div class="navbar navbar-default" role="navigation">
  2.   <div class="navbar-header">
  3.      　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
  4.        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  5.          <span class="sr-only">Toggle Navigation</span>
  6.          <span class="icon-bar"></span>
  7.          <span class="icon-bar"></span>
  8.          <span class="icon-bar"></span>
  9.        </button>
  10.        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
  11.        <a href="##" class="navbar-brand">慕课网</a>
  12.   </div>
  13.   <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  14.   <div class="collapse navbar-collapse navbar-responsive-collapse">
  15.     	<ul class="nav navbar-nav">
  16.       		<li class="active"><a href="##">网站首页</a></li>
  17.       		<li><a href="##">系列教程</a></li>
  18.       		<li><a href="##">名师介绍</a></li>
  19.       		<li><a href="##">成功案例</a></li>
  20.       		<li><a href="##">关于我们</a></li>
  21. 	 	</ul>
  22.   </div>
  23. </div>

反色导航条

与默认导航条相比，只是将navbar-default类名换成了navbar-inverse
  1. <div class="navbar  navbar-inverse" role="navigation">
  2. <div class="nav bar-header">
  3.       <a href="##" class="navbar-brand">慕课网</a>
  4. </div>
  5. <ul class="nav navbar-nav">
  6.       <li class="active"><a href="">首页</a></li>
  7.       <li><a href="">教程</a></li>
  8.       <li><a href="">关于我们</a></li>
  9. </ul>
  10. </div>

分页导航（带页码的额分页导航）

1，带页码的分页导航
2，带翻页的分页导航
平时我们用div>a和div>span结构制作带页码的分页导航，现在使用的是ul>li>a这样的结构，就是在ul标签上加入pagination方法：
  1. <ul class="pagination">
  2.    <li><a href="#">&laquo;</a></li>
  3.    <li><a href="#">1</a></li>
  4.    <li><a href="#">2</a></li>
  5.    <li><a href="#">3</a></li>
  6.    <li><a href="#">4</a></li>
  7.    <li><a href="#">5</a></li>
  8.    <li><a href="#">&raquo;</a></li>
  9. </ul>
大小设置：通过pagination-lg让分页导航变大 2，通过pagination-sm让分页导航变小
  1. <ul class="pagination pagination-lg">
  2.  …
  3. </ul>
  4. <ul class="pagination">
  5.  …
  6. </ul>
  7. <ul class="pagination pagination-sm">
  8.  …
  9. </ul>
整体代码如下：
  1. <ul class="pagination pagination-lg">
  2.   <li><a href="#">&laquo;第一页</a></li>
  3.   <li><a href="#">11</a></li>
  4.   <li><a href="#">12</a></li>
  5.   <li class="active"><a href="#">13</a></li>
  6.   <li><a href="#">14</a></li>
  7.   <li><a href="#">15</a></li>
  8.   <li class="disabled"><a href="#">最后一页&raquo;</a></li>
  9. </ul> 
  10.   
  11. <ul class="pagination pagination">
  12.   <li><a href="#">&laquo;第一页</a></li>
  13.   <li><a href="#">11</a></li>
  14.   <li><a href="#">12</a></li>
  15.   <li class="active"><a href="#">13</a></li>
  16.   <li><a href="#">14</a></li>
  17.   <li><a href="#">15</a></li>
  18.   <li class="disabled"><a href="#">最后一页&raquo;</a></li>
  19. </ul>   
  20. <ul class="pagination pagination-sm">
  21.   <li><a href="#">&laquo;第一页</a></li>
  22.   <li><a href="#">11</a></li>
  23.   <li><a href="#">12</a></li>
  24.   <li class="active"><a href="#">13</a></li>
  25.   <li><a href="#">14</a></li>
  26.   <li><a href="#">15</a></li>
  27.   <li class="disabled"><a href="#">最后一页&raquo;</a></li>
  28. </ul>

 分页导航（翻页分页导航）

这种分页导航看不到具体的页码，只会提供一个上一页和下一页的按钮
为ul标签加入pager类
  1. <ul class="pager">
  2.    <li><a href="#">&laquo;上一页</a></li>
  3.    <li><a href="#">下一页&raquo;</a></li>
  4. </ul>
默认情况下，翻页分页导航是居中显示，但有时候需要一个居左一个居右的时候，需要在li标签里添加类名previous上一步 next 下一步
  1. <ul class="pager">
  2.    <li class="previous"><a href="#">&laquo;上一页</a></li>
  3.    <li class="next"><a href="#">下一页&raquo;</a></li>
  4. </ul>
如果在li标签添加了类名disabled类名时，分页按钮处于禁用状态，但不能禁止其点击功能，可以通过js来处理，或将a标签换成span标签
  1. <ul class="pager">
  2.   <li class="disabled"><span>&laquo;上一页</span></li>
  3.   <li><a href="#">下一页&raquo;</a></li>
  4. </ul>

标签

可以使用.label样式来实现高亮显示
  1. <h3>Example heading <span class="label label-default">New</span></h3>
PS:和button类似 label样式也提供了多种颜色
label-default 深灰色  label-primary ……

徽章

使用badge样式实现
  1. <a href="#">Inbox <span class="badge">42</span></a>
ps:同样也是用伪元素，当没有内容的时候隐藏
可以将徽章与按钮或者导航之类配合使用：
  1. <div class="navbar navbar-default" role="navigation">
  2. 　<div class="navbar-header">
  3. 　       <a href="##" class="navbar-brand">慕课网</a>
  4. 　</div>
  5.   <ul class="nav navbar-nav">
  6.          <li class="active"><a href="##">网站首页</a></li>
  7.          <li><a href="##">系列教程</a></li>
  8.          <li><a href="##">名师介绍</a></li>
  9.          <li><a href="##">成功案例<span class="badge">23</span></a></li>
  10.          <li><a href="##">关于我们</a></li>
  11.   </ul>
  12. </div>

七、其它内置组件

缩略图

在网站中最常用的地方就是产品列表页，一行显示几张图片，有的在图片地下带有标题，描述等信息。BootStrap框架将这一部分独立成一个模块组件，并通过thumbnail样式配合bootstrap的网格系统来实现，可以将产品列表页变得更好看
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-xs-6 col-md-3">
  4.             <a href="#" class="thumbnail">
  5.                 <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
  6.             </a>
  7.         </div>
  8.     …
  9.     </div>
  10. </div>
除了这种方式之外，还可以让缩略图配合标题，描述内容，按钮等,在仅有缩略图的基础上，添加了一个div名为caption的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等；
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-xs-6 col-md-3">
  4.             <a href="#" class="thumbnail">
  5.                 <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
  6.             </a>
  7.             <div class="caption">
  8.                 <h3>Bootstrap框架系列教程</h3>
  9.                 <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  10.                 <p>
  11.                     <a href="##" class="btn btn-primary">开始学习</a>
  12.                     <a href="##" class="btn btn-info">正在学习</a>
  13.                 </p>
  14.             </div>
  15.         </div>
  16.     …
  17.     </div>
  18. </div>

警示框

1，成功警示框 alert-success 
2，信息警示框 alert-info 
3,警告警示框 alert-warning 
4,错误警示框 alert-danger
只要在类名为alert的div容器里放置提示信息。实现不同类型警示框，只需要在alert基础上追加对应的类名即可
  1. <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
  2. <div class="alert alert-info" role="alert">请输入正确的密码</div>
  3. <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
  4. <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

可关闭的警示框

使用方法：
1，需要在基本警示框alert的基础上添加alert-dismissable样式
2，在button标签中加入class="close"类，实现警示框关闭按钮的样式
3，要确保关闭按钮元素上设置了自定义属性：data-dismiss="alert"（因为可关闭警示框需要借助JavaScript来检测该属性，从而控制警示框的关闭）
  1. <div class="alert alert-success alert-dismissable" role="alert">
  2.     <button class="close" type="button" data-dismiss="alert">&times;</button>
  3.     恭喜您操作成功！
  4. </div>

警示框的链接

有时候在警示框里面加链接地址，告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。
实现方法：通过给警示框加的链接添加一个名为alert-link的类名，通过alert-link样式给链接提供高亮显示。
  1. <div class="alert alert-success" role="alert">
  2.     <strong>Well done!</strong> 
  3.     You successfully read 
  4.     <a href="#" class="alert-link">this important alert message</a>
  5.     .
  6. </div>
  7. <div class="alert alert-info" role="alert">
  8.     <strong>Heads up!</strong>
  9.      This 
  10.      <a href="#" class="alert-link">alert needs your attention</a>
  11.      , but it‘s not super important.
  12. </div>
  13. <div class="alert alert-warning" role="alert">
  14.     <strong>Warning!</strong>
  15.      Better check yourself, you‘re 
  16.      <a href="#" class="alert-link">not looking too good</a>
  17.      .
  18. </div>
  19. <div class="alert alert-danger" role="alert">
  20.     <strong>Oh snap!</strong>
  21.     <a href="#" class="alert-link">Change a few things up</a>
  22.      and try submitting again.
  23. </div>

进度条

基本样式：一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，它的子元素设置一个宽度，比如说完成度是30%，（也就是父容器的宽度比例值），同时给其设置一个高亮 的背景色
使用方法：
BootStrap提供了两个容器，外容器使用progress样式，子容器使用progress-bar样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。 
  1. <div class="progress">
  2.        <div class="progress-bar" style="width:40%"></div>
  3. </div>
结构优化：虽然这样实现了基本的进度条效果，但可以做的更好一些：
  1. <div class="progress">
  2.     <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  3.         <span class="sr-only">40% Complete</span>
  4.     </div>
  5. </div>
PS：role属性作用：告诉搜索引擎这个div的作用是进度条
aria-valuenow="40"属性的作用：当前进度条的进度是40%
aria-valuemin="0"属性的作用：进度条的最小值为0%
aria-valuemax="100"属性的作用：进度条的最大值为100%

彩色进度条

progress-bar-info 表示信息进度条 颜色为蓝色
progress-bar-success表示成功进度条，颜色为绿色
progress-bar-warning表示警告进度条，颜色为黄色
progress-bar-danger表示错误进度条，颜色为红色
  1. <div class="progress">
  2.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>
  4. <div class="progress">
  5.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  6. </div>
  7. <div class="progress">
  8.     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  9. </div>
  10. <div class="progress">
  11.     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  12. </div>

条纹进度条

只需要在进度条的容器progress基础增加类名progress-striped
  1. <div class="progress progress-striped">
  2.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>
  4. <div class="progress progress-striped">
  5.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  6. </div>
  7. <div class="progress progress-striped">
  8.     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  9. </div>
  10. <div class="progress progress-striped">
  11.     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  12. </div>

动态条纹进度条

在进度条progress progress-striped两个类的基础上再加入active类名
  1. <div class="progress progress-striped active">
  2.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>

层叠进度条

除了上述几种进度条外，还提供了一种层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列
  1. <div class="progress">
  2.     <div class="progress-bar progress-bar-success" style="width:20%"></div>
  3.     <div class="progress-bar progress-bar-info" style="width:10%"></div>
  4.     <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  5.     <div class="progress-bar progress-bar-danger" style="width:15%"></div>
  6. </div>
ps:层叠进度条宽度之和不能大于100%

  1. <div class="progress">
  2.     <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
  3. </div>

媒体对象

 1,媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

  2.媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

 3, 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

   4,媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

除此之外，在BootStrap框架中还常常使用pull-left或者pull-right来控制媒体对象的对象浮动方式。

  1. <div class="media">
  2.     <a class="pull-left" href="#">
  3.         <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
  4.     </a>
  5.     <div class="media-body">
  6.         <h4 class="media-heading">系列：十天精通CSS3</h4>
  7.         <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
  8.     </div>
  9. </div>

媒体对象的嵌套：

  1. <div class="media">
  2.     <a class="pull-left" href="#">
  3. 		<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
  4. 	</a>
  5. 	<div class="media-body">
  6. 		<h4 class="media-heading">我是大漠</h4>
  7. 		<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
  8. 		<div class="media">
  9. 			<a class="pull-left" href="#">
  10. 				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
  11. 			</a>
  12. 			<div class="media-body">
  13. 				<h4 class="media-heading">慕课网</h4>
  14. 				<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
  15. 				<div class="media">
  16. 					<a class="pull-left" href="#">
  17. 						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
  18. 					</a>
  19. 					<div class="media-body">
  20. 						<h4 class="media-heading">W3cplus</h4>
  21. 						<div>W3cplus站上还有很多教程....</div>
  22. 					</div>
  23. 				</div>
  24. 			</div>
  25. 		</div>
  26. 	</div>
  27. </div>

媒体对象列表

在写结构的时候可以使用ul，并且在ul添加类名media-list，而在li使用media
  1. <ul class="media-list">
  2.     <li class="media">
  3.         <a class="pull-left" href="#">
  4.             <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
  5.         </a>
  6.         <div class="media-body">
  7.             <h4 class="media-heading">我是大漠</h4>
  8.             <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
  9.         </div>
  10.     </li>
  11.     <li class="media">
  12.         <a class="pull-left" href="#">
  13.             <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
  14.         </a>
  15.         <div class="media-body">
  16.             <h4 class="media-heading">慕课网</h4>
  17.             <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
  18.         </div>
  19.     </li>
  20.     <li class="media">
  21.         <a class="pull-left" href="#">
  22.             <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
  23.         </a>
  24.         <div class="media-body">
  25.             <h4 class="media-heading">W3cplus</h4>
  26.             <div>W3cplus站上还有很多教程....</div>
  27.         </div>
  28.     </li>
  29. </ul>

列表组：

基础列表组

看上去就是去掉了列表符号的列表项，并配上了一些特定的样式，在BootStrap里面包含两部分:list-group列表组容器   list-group-item列表项，常用的是li元素，当然也可以是div元素
  1. <ul class="list-group">
  2.     <li class="list-group-item">揭开CSS3的面纱</li>
  3.     <li class="list-group-item">CSS3选择器</li>
  4. 	<li class="list-group-item">CSS3边框</li>
  5. 	<li class="list-group-item">CSS3背景</li>
  6. 	<li class="list-group-item">CSS3文本</li>
  7. </ul>

带徽章的列表组

其实就是将BootStrap框架中的徽章组件和基础基础列表结合在一起，只需要在list-group-item中添加徽章组件badge
  1. <ul class="list-group">
  2.     <li class="list-group-item">
  3.     	<span class="badge">13</span>揭开CSS3的面
  4. 	</li>
  5. 	<li class="list-group-item">
  6. 		<span class="badge">456</span>CSS3选择器
  7. 	</li>
  8. 	<li class="list-group-item">
  9. 		<span class="badge">892</span>CSS3边框
  10. 	</li>
  11. 	<li class="list-group-item">
  12. 		<span class="badge">90</span>CSS3背景
  13. 	</li>
  14. 	<li class="list-group-item">
  15. 		<span class="badge">1290</span>CSS3文本
  16. 	</li>
  17. </ul>

带链接的列表组   ： 

  1. <ul class="list-group">
  2.     <li class="list-group-item">
  3.     	<a href="##">揭开CSS3的面</a>
  4. 	</li>
  5. 	<li class="list-group-item">
  6. 		<a href="##">CSS3选择器</a>
  7. 	</li>
  8. 	<li class="list-group-item">
  9. 		<a href="##">CSS3边框</a>
  10. 	</li>
  11. 	<li class="list-group-item">
  12. 		<a href="##">CSS3背景</a>
  13. 	</li>
  14. 	<li class="list-group-item">
  15. 		<a href="##">CSS3文本</a>
  16. 	</li>
  17. </ul>
但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：
  1. <div class="list-group">
  2.     <a href="##" class="list-group-item">图解CSS3</a>
  3.     <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
  4.     <a href="##" class="list-group-item">玩转Bootstrap</a>
  5. </div>

自定义列表组

在链接列表的基础上新增了两个样式：1，list-group-item-heading用来定义列表头部样式  2，list-group-item-text用来定义列表项的主要内容
  1. <div class="list-group">
  2.     <a href="##" class="list-group-item">
  3.     	<h4 class="list-group-item-heading">图解CSS3</h4>
  4. 		<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
  5. 	</a>
  6. 	<a href="##" class="list-group-item">
  7. 		<h4 class="list-group-item-heading">Sass中国</h4>
  8. 		<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
  9. 	</a>
  10. </div>
PS:组合列表项的状态
active表示当前状态  disabled表示禁用状态
  1. <div class="list-group">
  2.     <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  3.     <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
  4. 	<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
  5. 	<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
  6. </div>

多彩列表组

和警告组件一样，BootStrap为不同的状态提供了不同的颜色背景和文本色，可以使用下面几个类名定义的不同背景色的列表项
list-group-item-success成功，绿色
list-group-item-info 信息 蓝色
list-group-item-warning警告 黄色
list-group-item-danger 错误 红色
  1. <div class="list-group">
  2.     <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  3.     <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
  4. 	<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
  5. 	<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
  6. 	<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
  7. </div>

面板

基础面板

非常简单  就是一个div容器运用了panel样式  又在panel的基础上添加了一个panel-default 另外在里面添加了panel-body来放置面板主体内容
  1. <div class="panel panel-default">
  2.     <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
  3. </div>

带有头和尾的面板：

panel-heading用来设置面板头部的样式  ；  panel-footer用来设置面板尾部的样式
  1. <div class="panel panel-default">
  2.     <div class="panel-heading">图解CSS3</div>
  3.     <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  4. 	</div>
  5. 	<div class="panel-footer">作者：大漠</div>
  6. </div>

彩色面板

panel-primary重点蓝 
panel-success成功绿
 panel-info信息蓝
 panel-warning 警告黄 
panel-danger危险红
  1. <div class="panel panel-default">
  2.     <div class="panel-heading">图解CSS3</div>
  3.     <div class="panel-body">			详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  4. 	</div>
  5. 	<div class="panel-footer">作者：大漠</div>
  6. </div>
  7. <div class="panel panel-primary">
  8. 	<div class="panel-heading">图解CSS3</div>
  9. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  10. 	<div class="panel-footer">作者：大漠</div>
  11. </div>
  12. <div class="panel panel-success">
  13. 	<div class="panel-heading">图解CSS3</div>
  14. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  15. 	<div class="panel-footer">作者：大漠</div>
  16. </div>
  17. <div class="panel panel-info">
  18. 	<div class="panel-heading">图解CSS3</div>
  19. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  20. 	<div class="panel-footer">作者：大漠</div>
  21. </div>
  22. <div class="panel panel-warning">
  23. 	<div class="panel-heading">图解CSS3</div>
  24. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  25. 	<div class="panel-footer">作者：大漠</div>
  26. </div>
  27. <div class="panel panel-danger">
  28. 	<div class="panel-heading">图解CSS3</div>
  29. 	<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
  30. 	<div class="panel-footer">作者：大漠</div>
  31. </div>

面板中嵌套表格

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

面板中嵌套列表组

  1. <div class="panel panel-default">
  2.     <div class="panel-heading">图解CSS3</div>
  3.     <div class="panel-body">
  4.         <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  5.         </p>
  6.         <ul class="list-group">
  7.             <li class="list-group-item">我是列表项</li>
  8.             <li class="list-group-item">我是列表项</li>
  9.             <li class="list-group-item">我是列表项</li>
  10.         </ul>
  11.     </div>
  12.     <div class="panel-footer">作者：大漠</div>
  13. </div>
PS:优化代码： 和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：
  1. <div class="panel panel-default">
  2.     <div class="panel-heading">图解CSS3</div>
  3.     <div class="panel-body">…</div>
  4.     <ul class="list-group">
  5.         <li class="list-group-item">我是列表项</li>
  6.         <li class="list-group-item">我是列表项</li>
  7.         <li class="list-group-item">我是列表项</li>
  8.     </ul>
  9.     <div class="panel-footer">作者：大漠</div>
  10. </div>

八、BootStrap支持的JavaScript插件

导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。
一次性导入：
  1. <!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
  2. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  3. <!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
  4. <script src="js/bootstrap.min.js"></script>
PS:特别声明：jQuery版本库也可以加载你本地的jQuery版本。

单独导入

为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：

 动画过渡（Transitions）:对应的插件文件“transition.js”

   模态弹窗（Modal）:对应的插件文件“modal.js”

  下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

  选项卡（Tab）：对应的插件文件“tab.js”

  提示框（Tooltips）：对应的插件文件“tooltop.js”

  弹出框（Popover）：对应的插件文件“popover.js”

  警告框（Alert）：对应的插件文件“alert.js”

  按钮（Buttons）：对应的插件文件“button.js”

    折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

 图片轮播Carousel：对应的插件文件“carousel.js”

 自动定位浮标Affix：对应的插件文件“affix.js”

PS:上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。

 动画过度（Transitoins）

导入transition.js
ps:IE6-8不支持css3,所以它们不具备这些过渡动画效果

BootStrap框架中以下组件使用了过渡动画效果：

模拟弹出框（modal）的滑动和渐变效果；
选项卡tab的渐变效果；
警告框alert的渐变效果；
图片轮播carousel的滑动效果
在BootStrap框架中把模拟弹出框统一称为modal，在模拟弹出框中，分别运用了modal,modal-dialog,modal-content样式，而弹出框真正的内容都放置在modal-content中，其
主要又包括三个部分：弹出框头部：modal-header  弹出框主体modal-body  弹出框脚部 modal-footer

触发方法：

方法一：模拟弹出框声明，只需要自定义两个必要的属性data-toggle和data-target（BootStrap中声明式触发方法一般依赖于这些自定义的data-xxx属性。比如data-toggle=""或者data-dismiss=""
  1. <!-- 触发模态弹出窗的元素 -->
  2. <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
  3. <!-- 模态弹出窗 -->
  4. <div class="modal fade" id="mymodal">
  5.     <div class="modal-dialog">
  6.         <div class="modal-content">
  7.         <!-- 模态弹出窗内容 -->
  8.         </div>
  9.     </div>
  10. </div>
ps:1，data-toggle必须设置为modal（toggle的意思就是触发器的意思）
2，data-target可以设置为css的选择符，也可以设置为模拟为弹出框的id值，一般情况下设置为模拟弹出框的ID值，因为ID值是唯一的
方法二：触发模拟弹出框也可以是一个<a>元素，那么可以使用链接元素自带的href属性来替代data-target属性。
  1. <!-- 触发模态弹出窗的元素 -->
  2. <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
  3. <!-- 模态弹出窗 -->
  4. <div class="modal fade"  id="mymodal" >
  5.     <div class="modal-dialog" >
  6.         <div class="modal-content" >
  7.         <!-- 模态弹出窗内容 -->
  8.         </div>
  9.     </div>
  10. </div>
PS:不过还是建议使用统一使用data-target方式来触发。

JavaScript触发方法：

除了使用自定义属性触发模拟弹出框之外，还可以通过JavaScript方法来触发模拟弹出框，通过给一个元素一个事件，开触发
  1. $(function(){
  2.   $(".btn").click(function(){
  3.     $("#mymodal").modal();
  4.   });
  5. });
整体代码如下：
  1. <button class="btn btn-primary" type="button">点击我</button>
  2. <div class="modal fade" id="mymodal">
  3.     <div class="modal-dialog  modal-lg或者modal-sm">
  4.         <div class="modal-content">
  5.         	<div class="modal-header">
  6. 				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  7. 				<h4 class="modal-title">模态弹出窗标题</h4>
  8. 			</div>
  9. 			<div class="modal-body">
  10. 				<p>模态弹出窗主体内容</p>
  11. 			</div>
  12. 			<div class="modal-footer">
  13. 				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  14. 				<button type="button" class="btn btn-primary">保存</button>
  15. 			</div>
  16. 		</div><!-- /.modal-content -->
  17. 	</div><!-- /.modal-dialog -->
  18. </div><!-- /.modal -->
  19. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  20. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
  21. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
  22. <script>
  23.   $(function(){
  24.     $(".btn").click(function(){
  25.       $("#mymodal").modal("toggle");
  26.     });
  27.   });
  28. </script>





2015年11月27日 BootStrap知识点汇总

标签：

原文地址：http://www.cnblogs.com/gengyong/p/5056016.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！