Bootsrap之组件

一、Glyphicons字体图标

1、使用

（1）图标和文本之间要加空格

（2）不要和其他组件混合使用，要创建一个嵌套的<span>标签，将图标类用到它上面

（3）只对内容为空的元素起作用

（3）改变图标字体文件的位置： . . /fonts/  

         如果修改位置，应在Less源码文件中修改@icon-font-path和/或@icon-font-name变量

         利用Less编译器提供的相对URL地址选项

         修改预编译CSS文件中的url()地址

2、例子

<button type="button" class="btn btn-default btn-lg">

    <span class="glyphicon glyphicon-star"></span> Star

</button>

二、下拉菜单

1、例子：将下拉菜单触发器和下拉菜单都包在.dropdown里

2、对齐

右对齐：为.dropdown-menu添加.dropdown-menu-right。不建议用.pull-right类。

              导航条中需要，用.pull-right的mixin版本。

3、标题：<li class="dropdown-header"></li>标明一组动作

4、分割线：<li role="presentation" class="divider"></li>

5、禁用的菜单项：<li role="presentation" class="disabled"></li>

三、按钮组

为.btn-group中的元素应用工具提示或弹出框时，须指定container:'body'选项

1、基本实例

<div class="btn-group">

    <button type="button" class="btn btn-default">Left</button>

    <button type="button" class="btn btn-default">Middle</button>

    <button type="button" class="btn btn-default">Right</button>

</div>

2、按钮工具栏

<div class="btn-toolbar" role="toolbar">

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

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

</div>

3、尺寸：<div class="btn-group btn-group-lg/md/sm/xs">…</div>

4、嵌套：把.btn-group放入另一个.btn-group中

5、垂直排列：包在<div class="btn-group-vertical"></div>中

6、两端对齐排列的按钮组

（1）<a>元素：将.btn元素包在<div class="btn-group btn-group-justified"></div>中

（2）<button>元素：将每个按钮包进一个按钮组中

四、按钮式下拉菜单

将任意一个按钮放在.btn-group中，然后加入适当的菜单标签

1、单按钮下拉菜单

<div class=" btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle"></button>

</div>

2、分裂式按钮下拉菜单

<div class="btn-group">

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

    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"></button>

</div>

3、尺寸

<div class="btn-group">

    <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown"></button>

</div>

4、向上弹出式菜单：给父元素加 .dropup类

<div class="btn-group dropup">

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

</div>

五、输入框组

  在<input>前/后加文字或按钮实现扩展，为.input-group赋予 .input-group-addon类即可添加额外元素

  工具提示和弹出卡U那个需要特别设置：container:'body' 参数

  不要和其他组件混用

1、基本实例

<div class="input-group">

    <span class="input-group-addon">@</span>

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

    <span class="input-group-addon">.00</span>

</div>

2、尺寸：为 .input-group添加相应尺寸类，内部元素自动调整尺寸

<div class="input-group input-group-lg"></div>

3、作为额外元素的多选框和单选框

<div class="input-group">

    <span class="input-group-addon">

        <input type="checkbox/radio" />

    </span>

    <input type="text" class="form-control" />

</div>

4、作为额外元素的按钮

     为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn， 包裹按钮元素

<div class="input-group">

    <span class="input-group-btn">

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

    </span>

    <input type="text" class="form-control" />

</div>

5、作为额外元素的按钮式下拉菜单

<div class="input-group">

    <div class="input-group-btn">

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

            "Action"

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

        </button>

        <ul class="dropdown-menu" role="menu">

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

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

       </ul>

    </div>

</div>

6、作为额外元素的分裂式按钮下拉菜单

<div class="input-group">

    <div class="input-group-btn">

        <button type="button" class="btn btn-default" tabindex='-1'></button>

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex='-1'>

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

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

        </button>

        <ul class="dropdown-menu" role="menu">

            <li>…</li>

        </ul>

    </div>

</div>

六、导航   .nav

1、标签页

（1）.nav-tabs依赖 .nav类

（2）<ul class="nav nav-tabs" role="tablist">

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

            <li role="presentation"><a href="#">profile</a></li>

            <li role="presentation"><a href="#">profile</a></li>

        </ul>

（3）需要用标签页的javaScript插件

2、胶囊式标签页

（1）其他同上，但是使用.nav-pills类

（2）也可以垂直方向：添加 .nav-stacked类-------<div class="nav nav-pills nav-stacked"></div>

3、两端对齐的标签页

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

    <li role="presentation" class="active">

        <a href="#">Home</a>

    </li>

</ul>

4、禁用的链接----链接功能不受影响----

<ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

</ul>

5、添加下拉菜单

用一点额外html代码并加入下拉菜单插件的JavaScript插件

带下拉菜单的胶囊式标签页：

<ul class="nav navpills" role="tablist">

    <li role=presentation" class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

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

        </a>

        <ul class="dropdown-menu" role="menu">

        </ul>

    </li>

七、导航条

1、默认样式的导航条

内容折行怎么办？

（1）减少元素宽度、在某些尺寸的屏幕上隐藏一些元素

（2）JavaScript

（3）修改视口的阈值：@grid-float-breakpoint   比它大时水平排列，比它小时折叠排列

2、Brand image

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

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">

                <img alt="Brand" src="...">

          </a>

        </div>

     </div>

</nav>

3、表单

将表单放置在.nav-form中

<form class="nav-form nav-left" role="search">

    <div class="form-group">

        <input type="text" class="form-control" placeholder="search" />

    </div>

    <button type="submit" class="btn btn-default">提交</button>

</form>

4、按钮

在<form>外的<button>加上.navbar-btn，可让它在导航条垂直居中

<button type="button" class="btn btn-default navbar-btn">按钮</button>

5、文本

把文本包裹在.navbar-text中时，常用<p>标签

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

6、非导航的链接

使用.navbar-link类：<p class="navbar-left navbar-right">段落内容<a href="#" class="navbar-link">链接</a></p>

7、组件排列

通过添加.navbar-left和.navbar-right类让导航链接、表单、按钮或文本对齐。

导航条不支持多个.navbar-right类

8、固定在顶部------- .navbar-fixed-top

还可包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加padding

<nav class="navbar navbar-default navabar-fixed-top" role="navigator">

    <div class="container">

    </div>

</nav>

需要为body元素设置padding

9、固定在底部------ .navbar-fixed-bottom

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

    <div class="container">

    </div>

</nav>

10、静止在顶部----- .navbar-static-top

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

<nav class="navbar navbar-default navbar-static-top" role="navigation">

    <div class="container">

    </div>

</nav>

11、反色的导航条----- .navbar-inverse

<nav class="navbar navbar-inverse" role="navigation"></nav>

八、路径导航

在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过css的:before和content属性添加了。

九、分页

1、默认分页

<nav>

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

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

    <li class="disabled"><a href="#">1</a></li>  //此处的a也可换成<span>标签，可以保持需要的样式并移除点击功能

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

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

    <li><a href="#">&raquo;</a></li>

  </ul>

</nav>

2、翻页

<nav>

    <ul c;ass="pager">

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

        <li class="next"><a href="#">next</a></li>

    </ul>

</nav>

十、标签

<span class="label label-default/primary/success/info/warning/danger" /></span>

如果标签数量多，就要为每个标签设置为display:inline-block;

十一、徽章

给链接、导航等元素嵌套<span class="badge">元素。如果没有未读信息，徽章组件自动隐藏（IE8除外）

<ul class="nav nav-pills" role="tablist">

    <li role="presentation" class="active">

        <a href="#">Home<span class="badge">12</span></a>

    </li>

    <li role="presentation">

        <a href="#">Home</a>

    </li>

    <li role="presentation">

        <a href="#">Home<span class="badge">3</span></a>

    </li>

</ul>

十二、巨幕

<div class="jumbotron">

    <h1>Hello, world!</h1>

    <p>...</p>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

如果要让巨幕组件和浏览器同宽且无圆角，请把此组件放在所有.container外，且在组件里添加一个.container元素。

<div class="jumbottron">

    <div class="container"></div>

</div>

十三、页头----page-header

为h1标签增加适当空间，并支持h1标签内嵌small元素的默认效果和大部分其他组件

<div class="page-header">

    <h1>标题<small>小标题</small></h1>

</div>

十四、缩略图

1、默认样式

<div class="row">

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

        <a href="#" class="thumbnail">

            <img data-src="holder.js/100%x180" alt="…" />

        </a>

    </div>

    …

</div>

2、自定义内容------添加额外标签，可加入任何类型的html内容

<div class="row">

    <div class="col-sm-6 col-md-4">

        <img data-src="holder.js/300x300" alt="…" />

        <div class="caption">

            <h3>Thumbnail label</h3>

            <p>

                <a href="#" class="btn btn-primary" role="button">按钮</a>

                <a href="#" class="btn btn-default" role="button">按钮2</a>

            </p>

        </div>

    </div>

</div>

十五、警告框

1、例子

.alert类是必须设置的，另外还有.alert-success/info/warnimg/danger四个类，没有默认类

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

2、可关闭的警告框------- .alert-dismissible

如果提供该功能，要用jQuery警告框插件

务必给<button>添加data-dismiss="alert"属性

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

    <button type="button" class="close" data-dismiss="alert">

        <span aria-hidden="true">内容</span>

        <span class="sr-only">关闭</span>

    </button>

    <strong>Warning!</strong>

    Better check yourself, you're not looking too good.

</div>

3、警告框中的链接------.alert-link

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

    <a href="#" class="alert-link">. . . </a>

</div>

十六、进度条

IE9及以下不支持

1、基本实例

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}

    <span class="sr-only">60% complete</span>

</div>

2、带提示标签的

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}

</div>

3、进度值较低的情况----min-width:20px;

<div class="progress">

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

    2%

    </div>

</div>

4、根据情景变化效果-----progress-bar-success/info/warning/danger

<div class="progress">

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

        <span class="sr-only">20% complete</span>

    </div>

</div>

5、条纹效果（IE8不支持）-----progress-bar-striped

<div class="progress">

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

        <span class="sr-only">40% complete</span>

    </div>

</div>

6、动画效果---- .active

<div class="progress">

    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">

        <span class="sr-only">40%</span>

    </div>

</div>

7、堆叠效果

<div class="progress">

    <div class="progress-bar progress-bar-success" style="35%">

        <span class="sr-only">35 complete</span>

    </div>

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

        <span class="sr-only">20 complete</span>

    </div>

    <div class="progress-bar progress-bar-success" style="10%">

        <span class="sr-only">10 complete</span>

    </div>

</div>

十七、媒体对象

1、默认

允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）

<div class="media">

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

         <img src="..." alt="...">

      </a>

      <div class="media-body">

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

           ...

       </div>

</div>

2、媒体对象列表

<ul class="media-list">

  <li class="media">

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

      <img src="..." alt="...">

    </a>

    <div class="media-body">

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

      ...

    </div>

  </li>

</ul>

.media-right应在.media-body后面

用一点额外标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

十八、列表组

1、基本实例

<ul class="list-group">

    <li class="list-group-item">内容</li>

</ul>

2、徽章

<ul class="list-group">

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

        <span class="badge">14</span>

        Cras justo odio

    </li>

</ul>

3、链接

分别用div代替ul，用a代替li

<div class="list-group">

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

    <a href="#" class="list-group-item">内容</a>

    <a href="#" class="list-group-item">内容</a>

</div>

4、被禁用的条目

<div class="list-group">

    <a href="#" class="list-group-item disabled">内容</a>

</div>

5、情境类

<ul class="list-group">

    <li class="list-group-item list-group-item-success/info/warning/danger">内容</li>

</ul>

6、定制内容

<div class="list-group">

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

    <h4 class="list-group-item-heading">List group item heading</h4>

    <p class="list-group-item-text">...</p>

  </a>

</div>

十九、面板

1、基本实例

默认的.panel组件只是设置border和padding

<div class="panel panel-default">

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

</div>

2、带标题的面板---panel-heading

<div class="panel panel-default">

    <div class="panel-heading">标题</div>

</div>

如果为链接设置颜色，一定要把链接放在带.panel-title类的标题标签里

3、带脚注的面板----按钮或次要文本放入.panel-footer容器内

3、情境效果

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

4、带表格的面板

不需要边框的表格添加.table类，如果有.panel-body的面板，为上方添加边框会有分隔效果

5、带列表组的面板

<div class="panel panel-default">

    <div class="panel-heading"></div>

    <div class="panel-body"></div>

    <ul class="list-group">

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

    </ul>

</div>

二十、具有响应式特性的嵌入内容

<div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item" src="..."></iframe>

</div>

embed-responsive-item类：让最终样式与其他属性相匹配。

二一、Well

<div class="well">...</div>-----能有嵌入的简单效果

如果添加well-sm/lg等，可以控制其padding和圆角设置

<div class="well well-sm/lg">...</div>