Glyphicons 字体图标
1.图标需要一个基类和对应图标的类，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
2.和<span>标签联合使用，不能直接放在组件上
<span class="glyphicon glyphicon-search"></span>
3.实例：
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>下拉菜单
1.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里。
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li></ul> </div>
2.添加标题
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> ... <li role="presentation" class="dropdown-header">Dropdown header</li> ... </ul>3.添加分割线
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> ... <li role="presentation" class="divider"></li> ... </ul>4.禁用菜单项
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>按钮组
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 class="btn-group">...</div> </div>3.尺寸
<div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>4.嵌套
<div class="btn-group"><button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>5.垂直排列
<div class="btn-group-vertical">... </div>6.两端对齐
<div class="btn-group btn-group-justified">... </div>按钮式下拉菜单
1.单按钮下拉菜单
<div class="btn-group"><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="#">Action</a></li> </ul> </div>2.分裂式按钮下拉菜单
<div class="btn-group"><button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> </ul> </div>3.尺寸
<div class="btn-group"><button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> 4.向上弹出式菜单：给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。
<div class="btn-group dropup"><button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <!-- Dropdown menu links --> </ul> </div>输入框组
1.基本实例
<div class="input-group"><span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div>2.尺寸
<div class="input-group input-group-lg"><span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div>3.作为额外元素的多选框和单选框
4.作为额外元素的按钮
5.作为额外元素的按钮式下拉菜单
6.作为额外元素的分裂式按钮下拉菜单
导航
1.标签页：.nav-tabs 类依赖 .nav 基类。
<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="#">Messages</a></li> </ul>2.胶囊式标签页：nav-stacked垂直式堆叠排列
<ul class="nav nav-pills nav-stacked" 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="#">Messages</a></li> </ul> 3.两端对齐的标签页：通过 .nav-justified类实现
4.禁用的连接：通过.disabled 类
5.添加下拉菜单：
<ul class="nav nav-tabs" role="tablist"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> ... </ul>导航条
1.默认样式的导航条：
<nav class="navbar navbar-default" role="navigation"></nav>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.表单
<form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>4.按钮：加上.navbar-btn上可以在导航条里垂直居中
<button type="button" class="btn btn-default navbar-btn">Sign in</button> 5.文本：把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。
<p class="navbar-text">Signed in as Mark Otto</p> 6.使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>7.组件排列
通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。
8.固定在顶部：添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内部（padding）。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> ... </div> </nav> 9.固定在底部：添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内部（padding）。
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container"> ... </div> </nav> 10.静止在顶部：通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内部（padding）。
<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>12.路径导航
<ol class="breadcrumb"><li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>分页
1.默认分页：
<nav><ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul> </nav>2.禁止激活状态
<nav><ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav>
注：还可以将 active 或 disabled 状态应用于 <span> 标签，即替换 <a> 标签，这样就可以让其保持需要的样式并移除点击功能。3.尺寸
<nav><ul class="pagination pagination-lg">...</ul></nav> <nav><ul class="pagination">...</ul></nav> <nav><ul class="pagination pagination-sm">...</ul></nav>4.翻页
<nav><ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav>5.对齐链接：两端对齐
<nav><ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </nav>6.可选的禁用状态
<nav><ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </nav>标签
1.可用的变体
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>徽章
1.给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>巨幕
<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>页头
<div class="page-header"><h1>Example page header <small>Subtext for header</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.自定义内容
<div class="row"><div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x300" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div>警告框
1.基本实例
<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> 2.可关闭的警告框：为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。务必给 <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">Close</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>3.警告框中加链接：
<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div>进度条
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> </div>2.带有提示标签的进度条
<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>3.根据情景变化
<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>4.条纹效果：ie8不支持
<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 (success)</span> </div> </div>5.动画效果
<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> 6.堆叠效果：把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。
<div class="progress"><div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</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.Media alignment
<div class="media"><a class="media-left media-middle" href="#"> <img data-src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div>3.媒体对象列表
<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>列表组
1.基本实例
<ul class="list-group"><li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>2.徽章
<ul class="list-group"><li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> </ul>3.链接
<div class="list-group"><a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> </div>4.被禁用的条目
<div class="list-group"><a href="#" class="list-group-item disabled"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> </div> 5.情景类：为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。
<ul class="list-group"><li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> </ul> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> </div>6.制定内容：列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。
<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"> Basic panel example </div> </div>2.带标题的面板
<div class="panel panel-default"><div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div>3.带脚注的面板
<div class="panel panel-default"><div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div>4.情景效果
<div class="panel panel-primary">...</div> <div class="panel panel-success">...</div>
5.带表格的面板
<div class="panel panel-default"><!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- Table --> <table class="table"> ... </table> </div>6.带列表组的面板
<div class="panel panel-default"><!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> </ul> </div>具有响应式特性的嵌入内容
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>Well
1.默认效果
<div class="well">...</div>2.可选类
<div class="well well-lg">...</div><div class="well well-sm">...</div>