六、面包屑
定义:面包屑组件类似于树杈分支导航,从网站首页逐级导航到详细页,使用breadcrumb类样式,可以把列表结构设计成面包屑导航样式。
基本结构:
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">新闻频道</a></li>
<li><a href="#">国内新闻</a></li>
<li class="active">新闻详细页</li>
</ul>
七、分页组件
定义:Bootstrap 3.0提供了两种风格的分页组件:一种是多页面导航,用于多个页面的跳转,它具有极简风格的分页提示,能够很好的应用在结果搜索页面;另外一种则是翻页,可以快速翻动上下页,适用于个人博客或者杂志。使用pagination类可以设计标准的分页组件样式。
基本结构:
<ul class="pagination">
<li><a href="#">Prev</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="#">Next</a></li>
</ul>
注意:pagination类只能应用于列表包含框上
1、设置大小
分页组件按钮是可以调整大小的,Bootstrap提供了两套尺寸供用户选择:
- pagination-lg:大号分页按钮样式
- pagination-sm:小号分页按钮样式
2、设置激活和禁用
在分页组件中,可以根据不同情况定制链接:
- disabled:设置链接不可点击(在li上添加)
- active:标明当前页面
3、定义翻页组件
定义:翻页组件是另一类分页组件样式,它用更少的标签和样式来创建简单的“前一页”和“后一页”。使用pager类样式可以设计翻页组件,该组件仅有两个列表项。
基本结构:
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
注意:使用previous和next类,可以把链接向两端对齐
八、标签和徽章
定义:标签是一个很好用的页面小元素,Bootstrap具有多种颜色标签,表达不同的页面信息,只需要使用label类定义即可;
徽章是细小而简单的组件,用于指示或者计算某种类别的元素,只需要使用badge类定义即可。
基本结构:
标签:
<span class="label label-default">默认标签样式</span><!-- label-default,默认样式,灰色显示 -->
<span class="label label-primary">重要标签样式</span><!-- label-primary,重要样式,深蓝色显示 -->
<span class="label label-info">信息标签样式</span><!-- label-info,信息样式,浅蓝色显示 -->
<span class="label label-success">成功标签样式</span><!-- label-success,成功样式,亮绿色显示 -->
<span class="label label-warning">警告标签样式</span><!-- label-warning,警告样式,黄色显示 -->
<span class="label label-danger">危险标签样式</span><!-- label-danger,危险样式,红色显示 -->
徽章:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#"><span class="badge pull-right">12</span>链接</a>
</li>
</ul>
九、缩略图
定义:缩略图多应用于图片、视频的搜索结果等页面,还可以链接到其他页面。它还具有很好的可定制性,可以将文章片段、按钮等标签融入缩略图,可同时混合与匹配不同大小的缩略图。组成缩略图的标签:使用<ul>标签包裹任意数量的<li>。
基本结构:
<ul class="thumbnails">
<li class="col-xs-1">
<a href="#" class="thumbnail"><img src="images/1.jpg"></a>
</li>
<li class="col-xs-2">
<a href="#" class="thumbnail"><img src="images/2.jpg"></a>
</li>
<li class="col-xs-3">
<a href="#" class="thumbnail"><img src="images/3.jpg"></a>
</li>
<li class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/4.jpg"></a>
</li>
</ul>
注意:
- 在<ul>标签中引入thumbnails类,指定当前列表框为缩略图集;
- 在<a>标签中引入thumbnail类,设置当前超链接包含图像为缩略图效果;
- 在设计缩略图大小时,建议使用栅格中的尺寸;
- 如果在缩略图中自定义HTML内容,标签的变化不大,为了放进块级内容,可以把<a>替换成<div>;
十、警告框
定义:警告框为用户提供少数可用且灵活的反馈信息,使用alert类可以设计警告框组件。
基本结构:
<!--危险,提示危险性信息-->
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>危险</strong>
</div>
<!--警告,提示错误性信息-->
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告</strong>
</div>
<!--成功,提示正确性信息-->
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功</strong>
</div>
<!--信息,提示一般信息-->
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>信息</strong>
</div>
注意:
- class="close":定义关闭按钮;
- data-dismiss="alert":激活关闭按钮;
- 使用带有data属性的<button>标签时,必须包含type="button"属性,否则将无法执行提交动作;
- 如果在警告框中添加链接,则应该在<a>中附加alert-link类,可以快速提供在任何警告框中相符的颜色;
十一、进度条
定义:进度条一般由嵌套的两层结构标签构成,外层标签引入progress类,用来设计进度槽;内层标签引入progress-bar类,用来设计进度条。
基本结构:
<div class="progress">
<div class="progress-bar" style="width:50%"></div>
</div>
<!-- progress-striped设计条纹样式 -->
<div class="progress progress-striped">
<div class="progress-bar" style="width:50%"></div>
</div>
<!-- active设计从右到左变化的样式 -->
<div class="progress progress-striped active">
<div class="progress-bar" style="width:50%"></div>
</div>
1、设置个性进度条
定义:与警告框一样,进度条也允许通过添加其他类改变进度条的背景效果。
基本结构:
<!-- progress-bar-info,浅蓝色背景 -->
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:40%;"></div>
</div>
<!-- progress-bar-success,浅绿色背景 -->
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%;"></div>
</div>
<!-- progress-bar-warning,浅黄色背景 -->
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:40%;"></div>
</div>
<!-- progress-bar-danger,浅黄色背景 -->
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40%;"></div>
</div>
十二、版式
1、大屏幕区块
定义:大屏幕区块是一个轻量、灵活的用于展示网站重点内容的组件,适合应用于营销类或内容类网站,使用jumbotron类设计大屏幕区块。
基本结构:
<div class="jumbotron">
<h1>大屏幕标题</h1>
<p>说明性文字</p>
<p><a class="btn btn-primary btn-lg">更多</a></p>
</div>
2、页面标题
定义:page-header类可以设计网页标题,它相当于一个标题框,可以给<h1>标签套上一个包含框,这样就可以为其增加间隔并从页面中分离出来。
基本结构:
<div class="jumbotron">
<div class="page-header">
<h1>网页标题<small>附加信息</small></h1>
</div>
</div>
3、列表组
定义:不仅用于显示简单的列表元素,还用于复杂的定制内容。
基本结构:
<ul class="list-group">
<li class="list-group-item">项目1</li>
<li class="list-group-item">项目2</li>
<li class="list-group-item">项目3</li>
<li class="list-group-item">项目4</li>
</ul>
在列表组内可以添加任何内容:
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">列表项标题1</h4>
<p class="list-group-item-text">列表项正文1</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">列表项标题2</h4>
<p class="list-group-item-text">列表项正文2</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">列表项标题3</h4>
<p class="list-group-item-text">列表项正文3</p>
</a>
</div>
注意:
- class="list-group":定义列表组;
- class="list-group-item":定义列表组项目;
- 列表组还支持非列表结构,因此用户可以使用<a>标签代替<li>标签,使用<div>标签代替<ul>标签;
- class="list-group-item-heading":为每个列表项添加项目标题;
- class="list-group-item-text":为每个列表项添加正文;
4、面板
定义:面板是一种特殊样式的版式容器,常用来设计折叠项目以及其他标准栏目。默认使用panel类设计面板。
基本结构:
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板预定义标题</h3>
</div>
<div class="panel-body">面板正文</div>
<div class="panel-footer">面板脚注</div>
</div>
面板也支持样式类,给特定的面板设计特定的样式:
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
注意:
- class="panel panel-default":在外包含框指定面板框;
- class="panel-heading":在内层框定义标题容器,也可以用<h1>~<h6>和panel-title类定义预定义样式的标题;
- class="panel-body":内层指定面板正文框;
- class="panel-footer":定义面板脚注;
- 面板可以与表格、列表无缝衔接,可以把表格放入panel-body中;
5、Well
定义:Well可以设计一个内嵌容器,能够很好的包含指定对象或者页面内容。
基本结构:
<div class="well">
<img src="images/6.jpg" style="width:200px;">
</div>
注意:在well中添加well-lg或well-sm类可以调整Well容器的补白空间大小和圆角大小。