7-4警示框--默认警示框：

具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名，如下：

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

7-2缩略图（二）：

可以让缩略图配合标题、描述内容，按钮等。在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等：

<div class="caption">
                <h3>Bootstrap框架系列教程</h3>

7-1缩略图：

通过“thumbnail”样式配合bootstrap的网格系统来实现：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">

6-12徽章：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

同样也使用:empty伪元素，当没有内容的时候隐藏；正如开头所说，可以将徽章与按钮或者导航之类配合使用；另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以；不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

6-11标签：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类；有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏。

和按钮元素button类似，label样式也提供了多种颜色：

     label-deafult:默认标签，深灰色

     label-primary：主要标签，深蓝色

     label-success：成功标签，绿色

     label-info：信息标签，浅蓝色

     label-warning：警告标签，橙色

     label-danger：错误标签，红色

6-10分页导航（翻页）：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">

对齐样式设置：

默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

      previous：让“上一步”按钮居左

      next：让“下一步”按钮居右

具体使用的时候，只需要在li标签上添加对应类名即可：

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>

状态样式设置：

和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。

6-9分页导航（带页码）：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>

在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小：

<ul class="pagination pagination-lg">

6-8反色导航条：

与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。

6-7响应式导航条：

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）：

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

3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。

也可以这么写，需要折叠的div代码段：

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

6-6固定导航条：

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

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

使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：

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

6-5导航条按钮、文本、和链接：

导航条中的按钮navbar-btn、导航条中的文本navbar-text、导航条中的普通链接navbar-link：

<div class="nav navbar-nav">

<a href="##" class="navbar-text">Navbar Text</a>

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

6-4带表单的导航条：

在navbar容器中放置一个带有navbar-form类名的表单：

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

6-3导航条标题、二级菜单级状态：

通过“navbar-header”和“navbar-brand”来实现：

<div class="navbar-header">

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

6-1基础导航条：

在制作一个基础导航条时，主要分以下几步：

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

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

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

     <ul class="nav navbar-nav">

5-22面包蟹式导航：

使用方式就很简单，为ol加入breadcrumb类：

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>