Bootsrap 3.0：组件

组件

Glyphicons字体图标

• 使用该字体图标时需要一个基类和对应该图标的类，一般是span，并且span内部不能有文本
• 为了优化显示，在图标和文本之间请使用一个空格(\&nbsp)

下拉菜单

向下弹出的下拉菜单

<div class="dropdown">
    <button class="dropdown-toggle" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉菜单内容
        <!--下面的是三角按钮-->
        <span class="caret"></span>     
    </button>
    <ul class="dropdown-menu" aria-labelledby="上面的id">
        <li></li>
        <!--下面的是分割线-->
        <li role="separator" class="divider"></li>
        <!--下面是标题-->
        <li role="dropdown-header">这里填写标题</li>
        <!--设置禁用状态-->
        <li class="disabled">这里是被禁止的内容</li>
    </ul>
</div>

向上弹出的下拉菜单

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

设置下拉菜单中的分割线

<!--下面的是分割线-->
<li role="separator" class="divider"></li>

设置下拉菜单中的标题

<!--下面是标题-->
<li role="dropdown-header">这里填写标题</li>

设置禁用状态

<!--设置禁用状态-->
<li class="disabled">这里是被禁止的内容</li>

按钮组

基本按钮组

• btn-group

  <div class="btn-group" role="group" aria-label="...">
      <button type="button"></button>
  </div>
  

多个按钮组

• btn-toolbar

  <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group" role="group"></div>
      <div class="btn-group" role="group"></div>
      <div class="btn-group" role="group"></div>
  </div>
  

为按钮组设置大小

• btn-group-lg
• btn-group-sm

• btn-group-xs

  …

在按钮组中使用下拉菜单

<div class="btn-group" role="group" aria-label="...">
    <!--一定要在一个btn-group中添加下拉菜单，再把这个btn-group包含在被添加的btn-group中-->
</div>

---

<div class="btn-group" role="group" aria-label="...">
  <!--这里是正常的btn-group中-->
  <button type="button" class="btn btn-default">1</button>
  <!--这里是在btn-group中添加的btn-group-->
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

修改按钮组的排列方式

• btn-group-vertical

只要把btn-group变成btn-group-vertical就行了

在按钮组中添加非按钮内容

• btn-group-justified

只需添加该内容就可以了

输入框组

表单内容

在上面的内容之后，这里再多加一点，就是输入框组，实在input的基础上进行加强：

基本格式

基本格式

大小

• input-group-lg
• input-group-sm

当按钮作为额外元素被添加时

<div class="input-group">
    <input type="text" class="form-control">
    <!--input-group-btn不是直接被添加在button中的，而是被作为span的属性-->
    <span class="input-group-btn">
        <button type="button"></button>
    </span>
</div>

当下拉菜单作为额外元素被添加时

<div class="input-group">
    <div class="input-group-btn">
        <!--在这里添加下拉菜单按钮-->
    </div>
</div>

导航

标签

<ul class="nav nav-tabs">
    <li role="presentation" class="active"></li>
    <li role="presenration"></li>
</ul>

---

这里的标签是胶囊式的

<ul class="nav nav-pills">
    <li role="presentation" class="active"></li>
</ul>

改变标签排列方式：竖向排列

增加nav-stacked属性，可以让标签竖向排列

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

使标签等宽

• nav-justified

禁用标签

<ul class="nav">
    <li class="disabled"></li>
</ul>

添加下拉菜单

<ul class="nav nav-tabs">
    <li role="presentation" class="dropdown">
        <!--这里开始添加下拉菜单部分内容-->
</ul>

导航条

默认导航条

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <!--这里放头部信息-->
        </div>
        <div class="collapse navbar-collapse">
            <!--这里放正文信息-->
        </div>
    </div>
</nav>

上面的是基本结构，下面的就是添加在其中的各个组件了。

品牌图标

<a class="navbar-brand" href="#">
    <img src="" al"Brand">
</a>

表单

<form class="navbar-form">
    <!--这里可以添加表单部分内容了-->
</form>

对于单独按钮元素

• navbar-btn

  <button type="button" class="navbar-btn"></button>
  

对于单独文本

• navbar-text

  <p class="navbar-text"></p>
  

对于超链接

• navbar-link

  <a href="" class="navbar-link"></a>
  

排列

• navbar-left
• navbar-right

固定在顶部

<nav class="navbar navbar-fixed-top">
    <!--注意，这里的container和栅格系统有关-->
    <div class="container">
    <!--这里放上面的内容-->
    </div>
</nav>

该导航条的长度默认是50px！！！

固定在底部

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

该导航条的长度默认也是50px！！！

会消失的导航条

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

---

<nav class="navbar navbar-static-bottom">
    <div class="container">
    </div>
</nav>

别的样式的导航条

• navbar-inverse

路径导航

<ol class="breadcrump">
    <li></li>
    <li class="active"></li>
</ol>

分页

基本样式格式

<nav>
    <ul class="pagination">
        <li>
            <a href="#">
                <span>上一页(\&laquo)</span>
            </a>
        </li>
        <li></li>
        <li class="active"></li>
        <li class="disabled"></li>
        <li>
            <a href="#">
                <span>下一页(\&raquo)</span>
            </a>
        </li>
    </ul>
</nav>

分页大小

• pagination-lg
• pagination-sm

看下面的例子，看这两个属性是被添加在哪里的！！！

<nav>
    <ul class="pagination pagination-lg">
    </ul>
</nav>

翻页

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

在最左侧和最右侧的翻页功能

<nav>
    <ul class="pager">
        <li class="previous">上一页</li>
        <li class="next">下一页</li>
    </ul>
</nav>

标签

基本格式

<h1>正文<span class="label label-default">这里是标签的内容</span></h1>

其余类型的标签

• label-default
• label-primary
• label-success
• label-info
• label-warning
• label-danger

徽章

<span class="badge">这里是徽章主体</span>

巨幕

<div class="jumbortron">
    <!--这里是巨幕的正文部分，推荐与栅格系统的container配合使用-->
    <div class="container"></div>
</div>

页头

<div class="page-header">
    <h1>这里是大标题<small>这里是副标题</small></h1>
</div>

缩略图

默认版

<div class="container">
    <div class="row">
        <!--使用栅格系统确定一个宽度-->
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="" alt="">
            </a>
        </div>
    </div>
</div>

自定义内容版

<div class="container">
    <div class="row">
        <div class="col-md-offset-3">
            <div class="thumbnail">
                <img src="" alt="">
                <div class="caption">
                    <!--这里存放文章主体内容-->                   
                </div>
            </div>
        </div>
    </div>
</div>

警告框

警告框实例

<div class="alert alert-success" role="alert">
    警告框正文内容
</div>

其余警告框类型

• alert-success
• alert-info
• alert-warning
• alert-danger

带有关闭按钮的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span>\&times;</span></button>
    <!--这里就是警告框正文内容-->
</div>

注意，这个关闭按钮是没有效果的，只是一个摆设。

在警告框内部设置跟警告框颜色一致的超链接

• alert-link

  <div class="alert alter-success" role="alert">
      <a href="alert-link"></a>
  </div>
  

进度条

基础样式进度条

<div class="progress">
    <div class="progress-bar" style="width:百分比">{可以在这里书写确切的数字}</div>
</div>

不同样式的进度条

• progress-bar-success
• progress-bar-info
• progress-bar-warning
• progress-bar-danger

为进度条增加条纹效果

• progress-bar-striped

增加动画效果

将其设置为active即可

重叠效果

当把多个progress-bar-*放入同一个progress中时就会显示重叠效果

媒体对象

基本格式

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="" alt="">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">媒体对象的标题</h4>
        <!--这里放媒体对象的正文部分-->
    </div>
</div>

左侧的媒体对象对齐方式

• media-top
• media-middle

• media-bottom

  媒体对象的标题

媒体对象的嵌套

<div class="media">
    <div class="media-left media-top">
        <a href="#">
            <img class="media-object" src="" alt="">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">媒体对象的标题</h4>
        在这里可以设置新的媒体对象，就是上面的格式那样
    </div>
</div>

列表组

ul和li格式

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

超链接格式

<div class="list-group">
    <a href="#" class="list-group-item active"></a>
    <a href="#" class="list-group-item"></a>
</div>

按钮组格式

<div class="list-group">
    <button type="button" class="list-group-item"></button>
</div>

注意！不能为button设置btn以及别的样式！！！

禁用样式

• disabled

情景类

• list-group-item-success
• list-group-item-info
• list-group-item-warning
• list-group-item-danger

设置列表组内部内容

以超链接格式为例：

<div class="list-group">
    <a href="" class="list-group-item">
        <h4 class="list-group-item-heading">标题</h4>
        <p class="list-group-item-text">正文部分</p>
    </a>
</div>

面板组件

基本面板格式

<div class="pannel pannel-default">
    <div class="pannel-heading">
        <h3 class="pannel-title">面板标题</h3>
    </div>
    <div class="pannel-body">面板正文</div>
    <div class="pannel-footer">面板注脚</div>
</div>

其余格式面板

• pannel-primary
• pannel-success
• pannel-info
• pannel-warning
• pannel-danger

在面板中添加别的内容

可以在pannel-body**后面**添加表格和或者列表组，而且不会和pannel-body起冲突。

具有响应式特性的iframe

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src=""></inframe>
</div>

除了上面的embed-responsive-16by9之外，还有embed-responsive-4by3。

内嵌效果

• well

  <div class="well"></div>
  

设置大小

• well-lg
• well-sm