8、导航条

navigation：导航

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

 9、轮播图

一张图片对应一个小圆点

class="sr-only"  盲人专用阅读器，方便 在按下按钮时，就可以读出页面的文字

JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网

轮播图div定时换图属性

data-interval="毫秒值"

注意：多个轮播图必须修改轮播图的id

id一致：轮播图-小圆点-图片-左右按钮 

data-target="#carousel-example-generic"    表示轮播图控制这当前

10、排版方式

bootstrap--全局css样式---排版---对齐

会将元素内所有的内容都进行排版设置

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

11、表单元素

bootstrap--全局css样式---表单

lable   写一些说明性信息

placeholder  替代文字属性

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row了。

例如：placeholder="Password"

表单的文本框也是可以修改的

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

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

12、分页条（了解）

把数据分开展示，

bootstrap：组件---分页

<nav aria-label="Page navigation">
  <!--分页条整体列表-->
  <ul class="pagination">
   <!--上一页-->
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <!--索引页-->
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <!--下一页-->
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled （被禁用的）类、给当前页添加 .active （被激活的）类。

一般给上一页加入.disabled    而且要把上一页或者下一页的href属性应该删除，这样用户就不会再次点击

13、综合案例

• 13.1、案例需求

• 13.1、案例分析

• 13.1、案例实现