bootstrap教程整理-组件2/3

一、字体图标

注意：想要使用字体图标，我们之前引用js和css所在文件夹一定要有fonts组件

    <span class="glyphicon glyphicon-search"></span>

想要使用字体图标，要单独创建一个span标签作为作用域，写类名的时候，要先写glyphicon再写图标名

二、下拉菜单

1.基本用法

写一个.dropdown容器，里面放入触发器和下拉菜单

    <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown" >  
             触发器
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
        </ul>
    </div>

2.弹出方向

通过为下拉菜单的父元素设置 <b>.dropup</b> 类，可以让菜单向上弹出（默认是向下弹出的）。

     <div class="dropup">
      ......
     </div>

3.标题

在下拉菜单中，可以为某一个<b>li</b>标签添加<b>.dropdown-header</b>设置成标题形式

    <ul class="dropdown-menu" >
             ...
        <li class="dropdown-header">标题</li>
             ...
    </ul>

4.分割线

在下拉菜单中，可以为某一个<b>li</b>标签添加<b>divider</b>设置成分割线样式

    <ul class="dropdown-menu" >
             ...
        <li  class="divider"></li>
             ...
    </ul>
     

5.不可用菜单（禁用）

为下拉菜单中的 <b>li</b> 元素添加 <b>.disabled</b> 类，从而禁用相应的菜单项。

    <ul class="dropdown-menu" >
       ...
        <li class="disabled"><a href="#">此菜单不可用</a></li>
      ....
    </ul>

三、按钮组

通过按钮组容器把一组按钮放在同一行里。与之前所学的<b>按钮</b>插件配合使用

1.基本用法

将类名为<b>.btn</b>的按钮放到按钮组<b>.btn-group</b>中

    <div class="btn-group">
      <button type="button" class="btn btn-default">左边</button>
      <button type="button" class="btn btn-default">中间</button>
      <button type="button" class="btn btn-default">右边</button>
    </div>

2.按钮工具栏

把一组<b>.btn-group</b>组合进一个<b>.btn-toolbar</b>中就可以做成更复杂的组件。

    <div class="btn-toolbar" >
      <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
      </div>
      <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
      </div>
    </div>

3.垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。

    <div class="btn-group-vertical" >
      ...
    </div>

4.嵌套

想要把下拉菜单混合到一系列按钮中，只须分两步：

• 把下拉菜单直接复制粘贴到按钮组<b>.btn-group</b>中
• 将下拉菜单的<b>.dropdown</b>改为<b>.btn-group</b>

    <div class="btn-group" >
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
                下拉菜单
                 <span class="caret"></span>
            </button>
      
            <ul class="dropdown-menu">
              <li><a href="#">下拉菜单1</a></li>
              <li><a href="#">下拉菜单2</a></li>
            </ul>
        </div>
    </div>

如果在下拉菜单外面没有包裹<b>.btn-group</b>,下拉菜单将会错位

5.分裂按钮下拉菜单

我们把下拉菜单放到按钮组中，一个重要的原因就是可以做出分裂式的下拉菜单，只要将上面的稍作修改即可

四、导航

bootstrap 中的导航组件都依赖同一个<b>.nav</b> 类

    <ul class="nav">
          <li><a href="#">主页</a></li>
          <li><a href="#">新闻</a></li>
          <li><a href="#">关于</a></li>
    </ul>

1.标签页(选项卡标题)

注意 <b>.nav-tabs</b> 类依赖 <b>.nav</b> 基类。

    <ul class="nav nav-tabs">
      <li class="active"><a href="#">主页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">关于</a></li>
    </ul>

2.胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类：

    <ul class="nav nav-pills">
      ...
    </ul>

3.禁止

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

    <ul class="nav nav-pills">
      ...
      <li class="disabled"><a href="#">新闻</a></li>
      ...
    </ul>

4.导航下拉菜单

    <ul class="nav nav-tabs">
      ...
        <li class="dropdown">
            <a data-toggle="dropdown" href="#">
              触发器 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
      ...
    </ul>

五、导航条

导航外面加一个<b>.navbar</b>

    <nav class="navbar navbar-default">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </div>
    </nav>

1.品牌标志（标题-logo）

在导航条里面的有头部信息，头部信息里面有专门的<b>brand</b>品牌标志

    <div class="navbar-header">
        <a class="navbar-brand" href="#">标题</a>
    </div>

2.品牌图标

将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height）

       ...
      <a class="navbar-brand" href="#">
        ![](...)
      </a>
       ...

3.固定在头部

添加 .navbar-fixed-top 类可以让导航条固定在顶部

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        ...
      </div>
    </nav>

4.固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部

    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        ...
      </div>
    </nav>

5.静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        ...
      </div>
    </nav>

5.反色的导航条

过添加 .navbar-inverse 类可以改变导航条的外观

    <nav class="navbar navbar-inverse">
      ...
    </nav>

6.响应式导航条

要实现一个响应式导航条，需要把导航条包含在.navbar-collapse和.collapse中，并添加一个触发按钮.navbar-toggle .collasped,并加上data-toggle属性绑定响应式功能和data-target属性绑定下面的菜单

<div class="navbar navbar-default">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">按钮</button>
        <a href="" class="navbar-brand">标题</a>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="">菜单</a></li>
          <li><a href="">菜单</a></li>
          <li><a href="">菜单</a></li>
        </ul>
      </div>
</div>
</div>

六、路径导航(面包屑)

在一个带有层次的导航结构中标明当前页面的位置。

    <ol class="breadcrumb">
      <li><a href="#">主页</a></li>
      <li><a href="#">产品</a></li>
      <li class="active">新闻</li>
    </ol>

七、分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

1.默认分页

    <nav>
      <ul class="pagination">
        <li>
            <a href="#">
                <span >«</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="#">
                <span>»</span>
            </a>
        </li>
      </ul>
    </nav>

2.禁用和激活状态

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

    <nav>
      <ul class="pagination">
        ...
          <li class="disabled"><a href="#" >1</a></li>
          <li class="active"><a href="#">2 </a></li>
        ...
      </ul>
  </nav>

3.翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。

    <nav>
      <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
      </ul>
    </nav>

4.翻页按钮对齐

把链接向两端对齐

    <nav>
      <ul class="pager">
        <li class="previous"><a href="#"><span>←</span>上一页</a></li>
        <li class="next"><a href="#">下一页 <span>→</span></a></li>
      </ul>
    </nav>

八、徽章

给链接、导航等元素嵌套<b>.badge></b> 元素，可以很醒目的展示新的或未读的信息条目。

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

    <button class="btn btn-primary">
          菜单
          <span class="badge">4</span>
    </button>

九、缩略图

通过Bootstrap的<b>栅格系统</b>，可以很容易地展示栅格样式的图像、视频、文本等内容。

1.基础写法

给包括的内容加一个包裹标签，类名为：<b>.thumbnail</b>,周边增加间距。

  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        ![](...)
      </a>
    </div>
    ...
  </div>

2.自定义写法

可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。

    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          ![](...)
          <div class="caption">
              <h3>标题</h3>
            <p>
              文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
            </p>
            <p>
              <a href="#" class="btn btn-primary" >按钮1</a>
              <a href="#" class="btn btn-default" >按钮2</a>
            </p>
          </div>164312322
        </div>
      </div>
    </div>

十、警告框

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，<b>.alert </b>类是必须要设置的，另外bootstrap还提供了有特殊意义的4个类

1.警告框的四种样式

    <div class="alert alert-success" >...</div>
    <div class="alert alert-info" >...</div>
    <div class="alert alert-warning" >...</div>
    <div class="alert alert-danger" >...</div>

2.可关闭的警告框

为警告框添加一个可选的 <b>.alert-dismissible </b>类和一个关闭按钮。

    <div class="alert alert-warning alert-dismissible" >
        <button class="close" data-dismiss="alert">
            <span>×</span>
        </button>

        <strong>Warning!</strong>
        Better check yourself, you're not looking too good.
    </div>

3.警告框中的连接

用 <b>.alert-link</b> 工具类，可以为链接设置与当前警告框相符的颜色。

    <div class="alert alert-success" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-info" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-warning" >
        <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-danger" >
        <a href="#" class="alert-link">...</a>
    </div>

十一、进度条

1.基本实例

由父元素和子元素两部分组成

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

2.带有提示标签的进度条

在子元素中写上内容即可

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

当进度条非常小的情况下，很容易将文本挤走，所以，可以给进度条设置<b>min-width</b>属性

    <div class="progress">
      <div class="progress-bar"  style="min-width: 2em;">
        0%
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar"  style="min-width: 2em; width: 2%;">
        2%
      </div>
    </div>

3.设置颜色

滚动条也可相应的添加四种颜色

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

4.条纹效果

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持

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

5.动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped active"  style="width: 45%">
      </div>
    </div>

6.堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

  <div class="progress">
      <div class="progress-bar progress-bar-success" style="width: 35%">
        
      </div>
      <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
  </div>

十二、列表

1.基本

    <ul class="list-group">
        <li class="list-group-item">苹果</li>
        <li class="list-group-item">西瓜</li>
        <li class="list-group-item">草莓</li>
        <li class="list-group-item">桃子</li>
        <li class="list-group-item">柚子</li>
    </ul>

2.徽章

如果是在列表里面放入徽章，则会自动放到右边

  <ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        水果
    </li>
  </ul>

十三、面板

1.基本

默认的 <b>.panel</b> 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

里面内容需要包括在<b>.panel-body</b>里面。

    <div class="panel panel-default">
        <div class="panel-body">
         面板内容
        </div>
    </div>

2. 标题

标题需要包换在<b>.panel-heading</b>类的标签内。

    <div class="panel panel-default">
        <div class="panel-heading">
          标题内容
        </div>
        <div class="panel-body">
          面板内容
        </div>
    </div>

3.脚注

次要的文本放入 <b>.panel-footer</b> 容器内。无法从情景颜色中继承颜色

    <div class="panel panel-default">
        ...
        <div class="panel-footer">脚注（底部）</div>
    </div>

4.情景颜色

    <div class="panel panel-primary">...</div>
    <div class="panel panel-success">...</div>
    <div class="panel panel-info">...</div>
    <div class="panel panel-warning">...</div>
    <div class="panel panel-danger">...</div>