常用组件
下拉菜单
基本结构
1 <div class="dropdown"> 2 3 <ul class="dropdown- menu" role="menu" aria-labelledby="dLabel"> 4 <li><a tabindex="-1" href="#">Actiona>li> 5 <li><a tabindex="-1" href="#">Another actiona>li> 6 <li><a tabindex="-1" href="#">Something else herea>li> 7 <li class="divider">li> 8 <li><a tabindex="-1" href="#">Separated linka>li> 9 ul> 10 div>
功能类说明
- .dropdown、.dropup 下/上拉菜单组件，点击展开菜单
- .dropdown-menu 下拉菜单体，包含在.dropdown中
- .dropdown-submenu 二级菜单组件，鼠标悬停自动展开
- .pull-left、.pull-right 菜单相对于开启按钮左对齐/右对齐
- .disabled 禁用该项
按钮组
基本结构
1 <div class="btn-group"> 2 <button class="btn">Leftbutton> 3 <button class="btn">Middlebutton> 4 <button class="btn">Rightbutton> 5 div>
功能类说明
- .btn-toolbar 多维按钮组，嵌套.btn-group使用
- .btn-group-vertical 垂直按钮组
其他
复选框和单选框形式
按钮组还可以从能上表现得像单元框（一次只能有一个按钮被选中）或复选框（可同时选中多个按钮）。详见JavaScript插件文档。
按钮组中使用下拉菜单
带有下拉菜单的按钮必须单独包裹在.btn- group中，然后才能放入.btn-toolbar中，只有这样才能正确渲染整个组件。
按钮下拉菜单
基本结构
1 <div class="btn-group"> 2 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 3 Action 4 <span class="caret">span> 5 a> 6 <ul class="dropdown-menu"> 7 8 ul> 9 div>
功能类说明
.btn-mini、.btn-small、.btn- large 按钮尺寸
其他
分裂式按钮下拉菜单
1 <div class="btn-group"> 2 <button class="btn">Actionbutton> 3 <button class="btn dropdown-toggle" data-toggle="dropdown"> 4 <span class="caret">span> 5 button> 6 <ul class="dropdown-menu"> 7 8 ul> 9 div>
导航
基本结构
1 <ul class="nav"> 2 <li class="active"> 3 <a href="#">首页a> 4 li> 5 <li><a href="#">...a>li> 6 <li><a href="#">...a>li> 7 ul>
功能类说明
- .nav-pills 胶囊式导航
- .nav-stacked 堆叠式导航，垂直排布
- .nav-list 导航列表
- .nav-tabs 标签页式导航
- .tab-content 标签内容
- .tab-pane 与标签对应的标签体。必须为tab-pane设置唯一id。
- .tabs-left、.tabs-right、.tabs-below 改变标签显示在组件中的位置
- .disabled 禁用
- .divider 水平分割线
- .pull-left、.pull-right 左对齐/右对齐链接项
导航条
基本结构
1 <div class="navbar"> 2 <div class="navbar-inner"> 3 <a class="brand" href="#">Titlea> 4 <ul class="nav"> 5 <li class="active"><a href="#">首页a>li> 6 <li><a href="#">Linka>li> 7 <li><a href="#">Linka>li> 8 ul> 9 div> 10 div>
功能类说明
- .navbar 导航条
- .navbar-fixed-top、.navbar-fixed-bottom 将导航条固定在顶部或底部
- .navbar-static-top 导航条位于页面顶部，但会随着页面 向下滚动而消失
- .nav-collapse.collapse （这里有两个类）响应式导航条
-
- .btn-navbar 导航条宽度减少时显示的按钮，用于显示导航 条因空间不够而被隐藏的项目
- .divider-vertical 垂直分割线
- .navbar-form 导航栏表单
- .navbar-search 搜索表单
-
- .search-query 搜索框
- .navbar-text 突出文本，一般使用p标签
面包屑
基本结构
1 <ul class="breadcrumb"> 2 <li><a href="#">首页a> <span class="divider">/span>li> 3 <li><a href="#">Librarya> <span class="divider">/span>li> 4 <li class="active">Datali> 5 ul>
类似与导航，用于页面跳转
分页
基本结构
1 <div class="pagination"> 2 <ul> 3 <li><a href="#">Preva>li> 4 <li><a href="#">1a>li> 5 <li><a href="#">2a>li> 6 <li><a href="#">3a>li> 7 <li><a href="#">4a>li> 8 <li><a href="#">5a>li> 9 <li><a href="#">Nexta>li> 10 ul> 11 div>
功能类说明
- .pagination-centered、.pagination-left、.pagination-right 分 页组件在容器中的位置
- .pager 翻页，仅包含“前一页”和“后一 页”按钮
-
- .previous 前一页，位于容器的左侧
- .next 后一页，位于容器右侧
其他类型组件
标签与徽章
.label、.badge 标签、徽章
排版组件
Hero块
1 <div class="hero-unit"> 2 <h1>Headingh1> 3 <p>Taglinep> 4 <p> 5 <a class="btn btn-primary btn-large"> 6 Learn more 7 a> 8 p> 9 div>
用于展示网页的重点内容，适合营销类或内容类网站
页面标题
1 <div class="page-header"> 2 <h1>Example page header <small>Subtext for headersmall>h1> 3 div>
将页面标题与页面内容分离
缩略图
基本结构
1 <ul class="thumbnails"> 2 <li class="span4"> 3 <a href="#" class="thumbnail"> 4 <img data-src="holder.js/300x200" alt=""> 5 a> 6 li> 7 ... 8 ul>
以上单纯以图片显示
包含更多内容
1 <ul class="thumbnails"> 2 <li class="span4"> 3 <div class="thumbnail"> 4 <img data-src="holder.js/300x200" alt=""> 5 <h3>Thumbnail labelh3> 6 <p>Thumbnail caption...p> 7 div> 8 li> 9 ... 10 ul>
警告框
基本结构
1 <div class="alert"> 2 <button type="button" class="close" data-dismiss="alert">×button> 3 <strong>Warning!strong> Best check yourself, you're not looking too good. 4 <a href="#" class="close" data-dismiss="alert">×a> 5 div>
功能类说明
- .close 关闭按钮。使用时还需要添加data-dismiss="alert"属性
进度条
基本结构
1 <div class="progress"> 2 <div class="bar" style="width: 60%;">div> 3 div>
功能类说明
- .progress-striped 带条纹的进度条
- .active 带有动画效果
其他
堆叠样式
1 <div class="progress"> 2 <div class="bar bar-success" style="width: 35%;">div> 3 <div class="bar bar-warning" style="width: 20%;">div> 4 <div class="bar bar-danger" style="width: 10%;">div> 5 div>
媒体对象
基本结构
1 <div class="media"> 2 <a class="pull-left" href="#"> 3 <img class="media-object" data-src="holder.js/64x64"> 4 a> 5 <div class="media-body"> 6 <h4 class="media-heading">Media headingh4> 7 ... 8 9 10 <div class="media"> 11 ... 12 div> 13 div> 14 div>
可嵌套使用，可以方便地模拟评论或文章列表
其他轻量级的工具组件
Wells
基本结构
1 <div class="well"> 2 ... 3 div>
为页面元素添加简单的嵌入效果
功能类说明
- .well-large、.well-small 更大/小的padding（未另外设置样式时文字大写不变）
关闭图标
1 <button class="close">×button> 2 3 <a class="close" href="#">×a>
辅助类
- .pull-left、.pull-right 使页面元素向左/右浮动
- .muted 改变页面元素颜色为#999
- .clearfix 清除浮动
一些通用类
- .*-large、.*-small、.*mini 改变页面元素尺寸
- .*-info、.*- success、.*-warning、.*-error 改变页面元素颜色或其含义