bootstrap 学习笔记(部分)

这个课程中的boostrap是3.0+版本的。（2.0与3.0有区别）

bootstrap中的JS是依赖于jquery的，所以需要事先引用jquery（1.9.0版本以上）。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

bootstrap基本的HTML模板

使用h1类~h6类

<div class="h1">Bootstrap标题一</div>

在boostrap中使用标题（h1）

使用b或者strong来加粗字体

<p>我是一个段落，这个段落中“<strong>强调</strong>”一词将会加粗显示。</p>

使用strong来加粗字体

效果：我是一个段落，这个段落中“强调”一词将会加粗显示。

使用i或者em来使文字斜体

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

使用i和em使文字斜体

效果：我在慕课网上跟大漠一起学习Bootstrap的使用。我一定要学会Bootstrap。

使用强调类名，通过改变文本的颜色，来起到强调的作用

<div class="text-muted">.text-muted 效果</div>

<div class="text-primary">.text-primary效果</div>

<div class="text-success">.text-success效果</div>

<div class="text-info">.text-info效果</div>

<div class="text-warning">.text-warning效果</div>

<div class="text-danger">.text-danger效果</div>

强调类名

效果：　.text-muted 效果

　　　　.text-primary效果

　　　　.text-success效果

　　　　.text-info效果

　　　　.text-warning效果

　　　　.text-danger效果

文本对齐

<p class="text-left">我居左</p>

<p class="text-center">我居中</p>

<p class="text-right">我居右</p>

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

文本对齐

效果：

　　 bootstrap 学习笔记(部分)

网格系统：

<div class="container">

  <div class="row">

    <div class="col-xs-3">.col-xs-3</div>

    <div class="col-xs-6">.col-xs-6</div>

    <div class="col-xs-3">.col-xs-3</div>

  </div>

    <div class="row">

    <div class="col-sm-3">.col-sm-3</div>

    <div class="col-sm-6">.col-sm-6</div>

    <div class="col-sm-3">.col-sm-3</div>

  </div>

</div>

xs和sm、md、lg的区别

bootstrap 学习笔记(部分)

列偏移（效果等同于margin-left或者margin-right）

<div class="container">

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>

<div class="col-md-2">.col-md-3</div>

</div>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>

</div>

</div>

列偏移

效果：

bootstrap 学习笔记(部分)

不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

<div class="row">

  <div class="col-md-3">.col-md-3</div>

  <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>

  <div class="col-md-4">col-md-4</div>

</div>

列断行

效果：

列排序：

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

<div class="container">

  <div class="row">

    <div class="col-sm-4 ">.col-sm-4</div>

    <div class="col-sm-8 ">.col-sm-8</div>

  </div>

  <div class="row">

    <div class="col-sm-4 col-sm-push-8">.col-sm-4</div>

    <div class="col-sm-8 col-sm-pull-4">.col-sm-8</div>

  </div>

</div>

列排序

效果图：（将左右两列调换了一下位置）

bootstrap 学习笔记(部分)

列嵌套：（在一列中，嵌套多行，实现整个页面的布局）

  <div class="row">

    <div class="col-xs-8">

      我的里面嵌套了一个网格

      <div class="row">

        <div class="col-xs-6">col-md-6</div>

        <div class="col-xs-6">col-md-6</div>

      </div>

    </div>

    <div class="col-xs-4">col-md-4</div>

  </div>

列嵌套

bootstrap 学习笔记(部分)

表单：

　　水平表单（表单元素纵向排列）

水平表单的要求

1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">

    </div>

  </div>

  /*label的for属性对应的值是input的id*/

  /*label的for属性对应的值是input的id*/

  /*label的for属性对应的值是input的id*/

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> 记住密码

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">进入邮箱</button>

    </div>

  </div>

</form>

水平表单

效果：

　　 bootstrap 学习笔记(部分)

内联表单：（横向排列）

<form class="form-inline" role="form">

  <div class="form-group">

    <label class="sr-only" for="exampleInputEmail2">邮箱</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">

  </div>

  <div class="form-group">

    <label class="sr-only" for="exampleInputPassword2">密码</label>

    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> 记住密码

    </label>

  </div>

  <button type="submit" class="btn btn-default">进入邮箱</button>

</form>

内联表单

效果：

表单元素的使用：

input(输入框)

　1、在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式

2、为了让控件在各种表单风格中样式不出错，需要添加类名“form-control

<form role="form">

  <div class="form-group">

    <input type="email" class="form-control" placeholder="Enter email">

    <input type="text" class="form-control" placeholder="Enter Username">

  </div>

</form>

input(输入框)

下拉菜单（与原始的html元素用法一致）

<form role="form">

  <div class="form-group">

    <select class="form-control">

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      </select>

  </div>

  <div class="form-group">

      <select multiple class="form-control">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

      </select>

  </div>

下拉菜单

文本域（textarea）(与原始html元素用法一致，只是cols属性不需要设置值了。（bootstrap宽度自适应~~~）)

<form role="form">

  <div class="form-group">

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

  </div>

</form>

文本域（textarea）

单、复选框

　　1、不管是checkbox还是radio都使用label包起来了
　　2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
　　3、radio连同label标签放置在一个名为“.radio”的容器内
　　　在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式

<form role="form">

  <div class="checkbox">

    <label>

      <input type="checkbox" value="">

      记住密码

    </label>

  </div>

  <div class="radio">

    <label>

      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>

      喜欢

    </label>

  </div>

    <div class="radio">

    <label>

      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">

      不喜欢

    </label>

  </div>

</form>

单、复选框

设置表单元素的大小：

　　1、input-sm:让控件比正常大小更小
　　2、input-lg:让控件比正常大小更大

设置表单元素的大小

效果：

　　 bootstrap 学习笔记(部分)

禁用状态（在属性中添加一个disabled就可以了）　　

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

禁用状态

验证状态

　　1、.has-warning:警告状态（黄色）
　　2、.has-error：错误状态（红色）
　　3、.has-success：成功状态（绿色）

<form role="form">

  <div class="form-group has-success has-feedback">

    <label class="control-label" for="inputSuccess1">成功状态</label>

    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

    <span class="glyphicon glyphicon-ok form-control-feedback"></span>

  </div>

  <div class="form-group has-warning has-feedback">

    <label class="control-label" for="inputWarning1">警告状态</label>

    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">

    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

  </div>

  <div class="form-group has-error has-feedback">

    <label class="control-label" for="inputError1">错误状态</label>

    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

  </div>

</form>

验证状态

　效果：

　 bootstrap 学习笔记(部分)

按钮

　1、为了保持不同浏览器之间的兼容性，尽量使用A标签或者button标签来生成按钮

2、在制作等分按钮的时候，尽量使用A标签来制作按钮，因为在使用button标签元素时，使用display:table在部分浏览器下并不友好。

so:尽量使用A标签来做按钮　　　

   <button class="btn" type="button">基础按钮.btn</button>

   <button class="btn btn-default" type="button">默认按钮.btn-default</button>

   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

   <button class="btn btn-success" type="button">成功按钮.btn-success</button>

   <button class="btn btn-info" type="button">信息按钮.btn-info</button>

   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

按钮的样式类

bootstrap 学习笔记(部分)

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>

    <button class="btn btn-primary" type="button">正常按钮</button>

    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

     <button type="button" class="btn btn-info btn-xs">超小按钮</button>

按钮大小

bootstrap 学习笔记(部分)

    <button class="btn btn-primary btn-block btn-lg" type="button">大型按钮.btn-lg</button>

    <button class="btn btn-primary btn-block" type="button">正常按钮</button>

    <button class="btn btn-primary btn-block btn-sm" type="button">小型按钮.btn-sm</button>

    <button class="btn btn-primary btn-block btn-xs" type="button">超小型按钮.btn-xs</button>

块状按钮

Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

bootstrap 学习笔记(部分)

 <a class="btn btn-info glyphicon glyphicon-step-backward"></a>

在按钮中使用图标

效果： bootstrap 学习笔记(部分)

更多图标：http://getbootstrap.com/components/#glyphicons

表格：4种附加样式+1个支持响应式的表格

.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格

.table-condensed：紧凑型表格

.table-responsive：响应式表格（当浏览器的可视区域小于768的时候，表格底部就会出现滚动条，反之则消失）

<table class="table table-striped table-bordered table-hover">

   <thead>

     <tr>

       <th>表格标题</th>

      <th>表格标题</th>

      <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

      <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

      <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

鼠标悬停高亮的表格

效果：

<table class="table table-bordered table-hover">

  <thead>

    <tr>

      <th>类名</th>

      <th>描述</th>

    </tr>

  </thead>

  <tbody>

    <tr class="active">

      <td>.active</td>

      <td>表示当前活动的信息</td>

    </tr>

    <tr class="success">

      <td>.success</td>

      <td>表示成功或者正确的行为</td>

    </tr>

    <tr class="info">

      <td>.info</td>

      <td>表示中立的信息或行为</td>

    </tr>

    <tr class="warning">

      <td>.warning</td>

      <td>表示警告，需要特别注意</td>

    </tr>

    <tr class="danger">

      <td>.danger</td>

      <td>表示危险或者可能是错误的行为</td>

    </tr>

  </tbody>

</table>

在表格中，为每一行添加背景色

效果：

　　 bootstrap 学习笔记(部分)

斑马线

bootstrap.css文件第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,

.table-striped > tbody > tr:nth-child(odd) > th {

background-color: #f9f9f9;

}

对于IE8以及其以下浏览器，没有背景条纹效果。

在3.3.5中，使用的选择器名字

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td （这段选择器，可以用来快速定位boostrap的样式表中样式规则，这样可以更改样式，以满足实际需求）

鼠标悬浮

鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。
其源码请查看bootstrap.css文件中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,

.table-hover > tbody > tr:hover > th {

background-color: #f5f5f5;

}

在3.3.5中，使用的选择器名字

.table-hover > tbody > tr:hover （这段选择器，可以用来快速定位boostrap的样式表中样式规则，这样可以更改样式，以满足实际需求）

 列表：

<ul>

    <li>无序列表信息1</li>

    <li>无序列表信息2</li>

    <li>无序列表信息3</li>

</ul>

<ol>

    <li>有序列表信息1</li>

    <li>有序列表信息2</li>

    <li>有序列表信息3</li>

</ol>

<dl>

    <dt>定义列表标题</dt>

    <dd>定义列表信息1</dd>

    <dd>定义列表信息2</dd>

</dl>

列表

效果：

内联列表：把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。——可用于水平导航的制作

<ul class="list-unstyled">

    <li>

        城市：

        <ul class="list-inline">

            <li>北京</li>

            <li>上海</li>

            <li>南京</li>

            <li>厦门</li>

        </ul>

    </li>

</ul>

内联列表

效果：

城市：

北京
上海
南京
厦门

定义列表：

<dl>

    <dt>北京</dt>

    <dd>北京是中国的首都，是政治文化集中地</dd>

</dl>

<dl>

    <dt>上海</dt>

    <dd>上海号称东方的巴黎</dd>

</dl>

定义列表

效果：

　　　　北京: 　北京是中国的首都，是政治文化集中地

　　　　上海: 　上海号称东方的巴黎

水平定义列表：大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。

<dl class="dl-horizontal">

    <dt>W3cplus</dt>

    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>

    <dt>慕课网</dt>

    <dd>一个专业的，真心实意在做培训的网站</dd>

    <dt>我来测试一个标题，我来测试一个标题</dt>

    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>

</dl>

水平定义列表

效果：

将代码显示在页面上（用的可能少）

code风格：

<div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>

pre风格：

<div>

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</pre>

</div>

kbd风格：

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

<p>请使用<kbd>ctrl+x</kbd>复制代码，然后使用<kbd>ctrl+shift+v</kbd>将复制的代码粘贴到需要的地方。</p>

代码

在代码中，要是碰到＜要使用编码< 来替代，＞使用>来替代

若给pre 加上class=‘pre-scrollable’的话，当pre高于340PX的时候，就会出现滚动条

bootstrap独立组件的使用

使用独立组件，需要引用boostrap.js，在引用bootstrap.js之前，一定要引用jquery

下拉菜单：　

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

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

</button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

   …

   <li role="presentation" class="divider"></li>

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

</ul>

</div>

下拉菜单

导航：

<ul class="nav nav-pills">

    <li class="active"><a href="##">Home</a></li>

     <li><a href="##">CSS3</a></li>

     <li><a href="##">Sass</a></li>

     <li><a href="##">jQuery</a></li>

     <li class="disabled"><a href="##">Responsive</a></li>

</ul>

胶囊导航

效果：

bootstrap 学习笔记(部分)

还可以使用class='disabled' 来禁用导航按钮中的某一项

<li class="disabled"><a href="##">Responsive</a></li>

禁用其中一项

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：

<ul class="nav nav-pills nav-stacked">

     <li class="active"><a href="##">Home</a></li>

     <li><a href="##">CSS3</a></li>

     <li><a href="##">Sass</a></li>

     <li><a href="##">jQuery</a></li>

     <li class="disabled"><a href="##">Responsive</a></li>

</ul>

垂直导航

效果：

bootstrap 学习笔记(部分)

如果需要导航自适应，只需要加类名 nav-justified就可以了（大于768px会横向排列导航，小雨这个数会纵向排列）

<ul class="nav nav-tabs nav-justified">

     <li class="active"><a href="##">Home</a></li>

     <li><a href="##">CSS3</a></li>

     <li><a href="##">Sass</a></li>

     <li><a href="##">jQuery</a></li>

     <li><a href="##">Responsive</a></li>

</ul>

自适应

导航加二级菜单（二级导航）：

<ul class="nav nav-pills">

  <li class="active"><a href="##">首页</a></li>

  <li class="dropdown">

      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>

      <ul class="dropdown-menu">

          <li><a href="##">CSS3</a></li>

        <li><a href="##">Sass</a></li>

        <li><a href="##">jQuery</a></li>

        <li><a href="##">Responsive</a></li>

      </ul>

  </li>

 <li><a href="##">关于我们</a></li>

</ul>

二级菜单

效果：

导航条：　　

　　第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

　　第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

<div class="navbar navbar-default" role="navigation">

     <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

     </ul>

</div>

最基本的导航

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕课网</a>

  　</div>

    <ul class="nav navbar-nav">

       <li class="active"><a href="##">网站首页</a></li>

       <li class="dropdown">

          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="##">CSS3</a></li>

            <li><a href="##">JavaScript</a></li>

            <li class="disabled"><a href="##">PHP</a></li>

          </ul>

      </li>

      <li><a href="##">名师介绍</a></li>

      <li><a href="##">成功案例</a></li>

      <li><a href="##">关于我们</a></li>

     </ul>

     <form action="##" class="navbar-form navbar-left" rol="search">

           <div class="form-group">

              <input type="text" class="form-control" placeholder="请输入关键词" />

           </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

</div>

带表单的导航条

效果：

bootstrap 学习笔记(部分)

固定导航条只要在导航条最外部容器navbar上追加对应的类名即可：

　　 .navbar-fixed-top：导航条固定在浏览器窗口顶部

　　.navbar-fixed-bottom：导航条固定在浏览器窗口底部

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

　…

</div>

<div class="content">我是内容</div>

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

　…

</div>

固定导航条

<div class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->

       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

         <span class="sr-only">Toggle Navigation</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

       </button>

       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->

       <a href="##" class="navbar-brand">慕课网</a>

  </div>

  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->

  <div class="collapse navbar-collapse navbar-responsive-collapse">

        <ul class="nav navbar-nav">

              <li class="active"><a href="##">网站首页</a></li>

              <li><a href="##">系列教程</a></li>

              <li><a href="##">名师介绍</a></li>

              <li><a href="##">成功案例</a></li>

              <li><a href="##">关于我们</a></li>

         </ul>

  </div>

</div>

响应式导航条

boostrap的分页并不带有功能，所有就不写了。要用到分页，直接用jPaginate来分页，其风格与boostrap差不多。

标签：（使用 label类就可以实现）

<span class="label label-default">默认标签</span>

<span class="label label-primary">主要标签</span>

<span class="label label-success">成功标签</span>

<span class="label label-info">信息标签</span>

<span class="label label-warning">警告标签</span>

<span class="label label-danger">错误标签</span>

标签种类

徽章：（使用badge来实现）

<!--按钮勋章-->

<button class="btn btn-primary" type="button">

      Messages <span class="badge">4</span>

</button>

<!--navbar-default导航条勋章-->

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕课网</a>

  　</div>

    <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例<span class="badge">23</span></a></li>

        <li><a href="##">关于我们</a></li>

    </ul>

</div>

徽章

警示框：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

<div class="alert alert-info" role="alert">请输入正确的密码</div>

<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>

<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

默认警示框

<div class="alert alert-success alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    恭喜您操作成功！

</div>

<div class="alert alert-info alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    请输入正确的密码

</div>

<div class="alert alert-warning alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    您已操作失败两次，还有最后一次机会

</div>

<div class="alert alert-danger alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    对不起，您输入的密码有误

</div>

可关闭的警示框

<div class="alert alert-success" role="alert">

    <strong>Well done!</strong>

    You successfully read

    <a href="#" class="alert-link">this important alert message</a>

    .

</div>

<div class="alert alert-info" role="alert">

    <strong>Heads up!</strong>

     This

     <a href="#" class="alert-link">alert needs your attention</a>

     , but it's not super important.

</div>

<div class="alert alert-warning" role="alert">

    <strong>Warning!</strong>

     Better check yourself, you're

     <a href="#" class="alert-link">not looking too good</a>

     .

</div>

<div class="alert alert-danger" role="alert">

    <strong>Oh snap!</strong>

    <a href="#" class="alert-link">Change a few things up</a>

     and try submitting again.

</div>

有链接的警示框

进度条：

<div class="progress">

     <div class="progress-bar" style="width:40%">

    </div>

</div>

基本进度条

bootstrap 学习笔记(部分)

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:40%"></div>

</div>

<div class="progress">

     <div class="progress-bar progress-bar-info" style="width:60%"></div>

</div>

<div class="progress">

     <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress">

     <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

彩色进度条

bootstrap 学习笔记(部分)

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-success" style="width:40%"></div>

</div>

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-info" style="width:60%"></div>

</div>

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

动态条纹进度条

bootstrap 学习笔记(部分)

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:20%"></div>

    <div class="progress-bar progress-bar-info" style="width:20%"></div>

    <div class="progress-bar progress-bar-warning" style="width:30%"></div>

    <div class="progress-bar progress-bar-danger" style="width:15%"></div>

</div>

层叠进度条

bootstrap 学习笔记(部分)

<div class="progress">

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

</div>

<div class="progress">

    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>

</div>

/*进度为0*/

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>

</div>

带lable的进度条

bootstrap 学习笔记(部分)

列表组：

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

最基本列表组

<ul class="list-group">

    <li class="list-group-item">

        <span class="badge"></span>揭开CSS3的面

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3选择器

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3边框

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3背景

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3文本

    </li>

</ul>

带徽章的列表组

<ul class="list-group">

    <li class="list-group-item">

        <a href="##">揭开CSS3的面</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3选择器</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3边框</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3背景</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3文本</a>

    </li>

</ul>

带链接的列表组

<div class="list-group">

    <a href="##" class="list-group-item active"><span class="badge"></span>图解CSS3</a>

    <a href="##" class="list-group-item"><span class="badge"></span>W3cplus</a>

    <a href="##" class="list-group-item"><span class="badge"></span>慕课网</a>

    <a href="##" class="list-group-item disabled"><span class="badge"></span>Sass中国</a>

</div>

组合列表状态

<div class="list-group">

    <a href="##" class="list-group-item active"><span class="badge"></span>图解CSS3</a>

    <a href="##" class="list-group-item list-group-item-success"><span class="badge"></span>W3cplus</a>

    <a href="##" class="list-group-item list-group-item-info"><span class="badge"></span>慕课网</a>

    <a href="##" class="list-group-item list-group-item-warning"><span class="badge"></span>Sass中国</a>

    <a href="##" class="list-group-item list-group-item-danger"><span class="badge"></span>Mobile教程</a>

</div>

多彩列表组

bootstrap 学习笔记(部分)

面板：

/* panel-default 、 panel-success \ panel-info、panel-warning、panel-danger*/

<div class="panel panel-primary">

    <div class="panel-heading">图解CSS3</div>

    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>

    <div class="panel-footer">作者：大漠</div>

</div>

/* panel-heading 和 panel-footer 这两个div是可以拿掉的*/

带有头和尾的面板

带有头和尾的面板

bootstrap 学习笔记(部分)

媒体对象：

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

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

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

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

在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

<div class="media">

    <a class="pull-right" href="#">

        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">

      </a>

      <div class="media-body">

        <h4 class="media-heading">系列：十天精通CSS3</h4>

        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

      </div>

</div>

默认媒体对象

bootstrap 学习笔记(部分)

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">

    </a>

    <div class="media-body">

        <h4 class="media-heading">我是大漠</h4>

        <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>

        <div class="media">

            <a class="pull-left" href="#">

                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">

            </a>

            <div class="media-body">

                <h4 class="media-heading">慕课网</h4>

                <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>

                <div class="media">

                    <a class="pull-left" href="#">

                        <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">W3cplus</h4>

                        <div>W3cplus站上还有很多教程....</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

媒体对象（嵌套）

bootstrap 学习笔记(部分)

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”

使用bootstrap绘制一个响应式的页面：

秒客网

bootstrap 学习笔记(部分)

相关文章