1、简单组件
1、路径导航
<ul class="breadcrumb">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li class="active">
<a></a>
</li>
</ul>
2、分页
1、默认分页
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
2、翻页效果
<ul class="page">
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul>
3、标签
所有的标签都依赖于 .label
不同颜色的标签：
.label-default
.label-primary
.label-success
.label-dange
.label-info
.label-warning
4、徽章
.badge
5、巨幕
.jumbotron
6、页头
.page-heade
7、水井
.well
8、进度条
外层：.progress
内层：
.progress-ba
配合不同颜色的 类一起使用
.progress-bar-info
.progress-bar-success
.progress-bar-dange
.progress-bar-warning
附加带条纹的类
.progress-bar-striped
附加被激活的效果的类
.active
2、组件 - 按钮组
1、作用
将多个按钮放在一个组中(btn-group)
2、语法
1、基本按钮组
<div class="btn-group">
<button>
<button>
<button>
</div>
2、可以将多个按钮组合并进一个按钮工具栏
将多个 .btn-group 放在一个 .btn-toolbar的元素中
3、按钮组的尺寸
为.btn-group 增加 .btn-group-* 设置尺寸
.btn-group-lg : 超大号按钮组
.btn-group-sm : 小号按钮组
.btn-group-xs : 超小号按钮组
4、两端对齐的按钮组 ???
5、垂直显示的按钮组 ???
3、组件 - 警告框
所有的警告框都依赖于 .alert
不同颜色的警告框，增加以下类即可：
.alert-success
.alert-info
.alert-warning
.alert-dange
1、允许被关闭的警告框
1、警告框元素必须依赖 .alert-dismissible
2、触发器元素增加一个属性
data-dismiss="alert"
4、组件 - 缩略图(thumbnail)
1、注意
1、要配合着栅格布局系统一起使用
2、最好将图片设置为 img-responsive
2、语法
1、基本的缩略图
<a href="#" class="thumbnail">
<img src="">
</a>
2、复杂的缩略图(图片，文字，按钮)
<div class="thumbnail">
<img>
/*文字区域*/
<div class="caption">
<h3>缩略图标题</h3>
<p>文本段落1..</p>
<p>文本段落2..</p>
<p>
<button>
<a>
</p>
</div>
</div>
5、组件 - 媒体对象(media)
1、媒体对象列表
<ul class="media-list">
<!-- 媒体对象1 -->
<li class="media">
<div class="media-left"></div>
<div class="media-body"></div>
</li>
<!-- 媒体对象2 -->
<!-- 媒体对象n -->
</ul>
6、组件 - 列表组(list-group)
ul : class="list-group"
li : class="list-group-item"
7、组件 - 面板
允许呈现出头部、主体、尾部的结构的组件
8、组件 - 导航条
1、基本导航条的实现
1、最外层 由nav并且引用 navbar navbar-default 两个类选择器来组成的
2、nav中必须添加一个 容器(container/container-fluid)
3、允许在 容器中 增加网站的品牌或标识内容
将 .navbar-header 的元素放在 容器中即可
4、.navbar-header 中的 链接/文字/图片 要引用 .navbar-brand 的类选择器
2、导航条中的导航(链接列表)
导航条中的导航依赖于 .nav .navbar-nav 即可
3、导航条中的表单
导航条中的表不适用于bootstrap提供的表单类
需要为 navbar 中的 <form>增加 class :.navbar-form
注意：
navbar-form 默认是没有浮动的，需要自己手动指定浮动效果
通过 navbar-left / navbar-right 处理左或右浮动
4、导航条中的按钮
按钮需要增加 .navbar-btn 来处理按钮在导航条中的位置
5、导航条中的文本
文本需要增加 .navbar-text 来处理文本在导航条中的位置
6、导航条中的浮动方式
通过 navbar-left 实现元素左浮动
通过 navbar-right实现元素右浮动
7、实现导航条的固定
为导航条元素增加以下类，来实现固定效果
固定顶端：.navbar-fixed-top
固定底端：.navbar-fixed-bottom
注意：
9、JS 插件 - Plugins
插件 - 提供了一组操作的行为
每种行为基本上都有两种的调用方式：
1、data-*
ex:
data-toggle="dropdown"
data-toggle="tab"
data-dismiss="alert"
2、JS编程方式
通过代码来调用行为
<script>
$("选择器"):用于获取指定选择器所对应的元素
$("#nav") : 获取页面中ID为nav的元素
$(".container") : 获取页面中class为container的元素
</script>
10、JS插件 - 工具提示(tooltip)
为元素添加以下内容：
data-toggle="tooltip"/*定义鼠标移入的行为*/
title="提示的文本"
data-placement="top/left/right/bottom"
必须配合 JS 代码一起完成
$("选择器").tooltip();
11、JS插件 - 弹出框(popover)
为元素添加以下内容：
1、data-toggle="popover"
2、data-placement="top/right/bottom/left"
3、title="弹出框标题(可选)"
4、data-content="弹出框中的内容"
必须配合的JS代码
$("选择器").popover();
