使用Bootstrap组件【下篇】

学习要点

面包屑与分页

缩略图

警告框

进度条

媒体

版式

1) 面包屑与分页

面包屑

<!-- breadcrumb 面包屑 -->
<div class="breadcrumb">
<!-- divider 分割符 -->
<li><a href="#">首页</a><span class="divider">-></span></li>
<li><a href="#">体育</a><span class="divider">-></span></li>
<li><a href="#">NBA</a><span class="divider">-></span></li>
<li class="active">勇士vs雷霆</li>
</div>

分页

<!-- pagination 分页 -->
<!-- pagination-large 大分页 -->
<!-- pagination-small 小分页 -->
<!-- pagination-mini  迷你分页 -->
<!-- pagination-centered 居中 -->
<div class="pagination pagination-large pagination-centered">
<!-- pager 翻页 -->
<ul class="pager">
<!-- pager默认上一页和下一页居中显示，当把ul的父标签div去掉，可以设置两端对齐 -->
<!-- previous  左对齐-->
<li class="previous"><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<!-- disabled 禁用 -->
<li class="disabled"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- next 右对齐 -->
<li class="next"><a href="#">下一页</a></li>
</ul>
</div>

2) 缩略图

先看一个简单的案例

<ul class="thumbnails">
<!-- span2 栅格布局，这里的图片大小最好一致 -->
<li class="span2">
<a href="#" class="thumbnail"><img src="img/5.jpg"></a>
</li>
<li class="span2">
<a href="#" class="thumbnail"><img src="img/6.jpg"></a>
</li>
<li class="span2">
<a href="#" class="thumbnail"><img src="img/7.jpg"></a>
</li>
<li class="span2">
<a href="#" class="thumbnail"><img src="img/8.jpg"></a>
</li>
</ul>

商品导购缩略图

<ul class="thumbnails">
<!-- span2 栅格布局，这里的图片大小最好一致 -->
<li class="span5">
<a href="#" class="thumbnail"><img src="img/11.jpg"></a>
<h3>卡帕Kappa女鞋专场</h3>
<p><span class="label label-info">剩余</span>4天12时30分19秒</p>
<span class="btn btn-success">品牌介绍</span>
</li>
<li class="span5">
<a href="#" class="thumbnail"><img src="img/12.jpg"></a>
<h3>韩都衣舍HSTYLE女上装专场</h3>
<p><span class="label label-info">剩余</span>4天12时28分48秒</p>
<span class="btn btn-success">品牌介绍</span>
</li>
<li class="span5">
<a href="#" class="thumbnail"><img src="img/13.jpg"></a>
<h3>HAZZYS男装专场</h3>
<p><span class="label label-info">剩余</span>4天12时30分19秒</p>
<span class="btn btn-success">品牌介绍</span>
</li>
</ul>

3) 警告框

<div class="alert alert-danger">
<!-- data-dismiss 触发关闭 -->
<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-error">
<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>

PS ： 在safafi和opera移动版上，但使用标签关闭警告框时，除了添加data-dismiss属性，还要有href=”#”属性
PS : 且在带有data属性的也必须添加type=”button”之后，才能提交数据
4) 进度条—不太兼容IE789

<!-- progress 进度条 -->
<!-- progress-striped 纹理进度条 -->
<!-- active 动态滚动条 -->
<!-- bar-info    信息进度条 -->
<!-- bar-error   错误进度条 -->
<!-- bar-success 成功进度条 -->
<!-- bar-warning 警告进度条 -->
<div class="progress progress-striped active">
<!-- bar 显示进度的部分 -->
<div class="bar bar-info" style="width:20%;"></div>
<div class="bar bar-warning" style="width:30%;"></div>
<div class="bar bar-error" style="width:10%;"></div>
<div class="bar bar-success" style="width:40%;"></div>
</div>

9) 媒体
科技报道

<!-- media 创建媒体组件包含框 -->
<div class="media">
<!-- media-object 定义媒体对象 -->
<a href="#" class="media-object pull-left"><img src="img/nayun.png"></a>
<!-- media-body 定义媒体组件的正文区域 -->
<div class="media-body">
<h2 class="media-heading">马云：金融业要服务80%以前没有被服务好的客户，需要新的思想与技术</h2>
<div class="media">
<p>在今天举行的“外滩国际金融峰会”上，复星老板郭广昌在致辞里说，他希望问同来开会的马云：互联网金融和金融互联网，到底给我们带来哪些机会、带来哪些挑战。</p>
<p>这个问题太大，马主席肯定也不会现场具体做答。在事情没做之前就大声嚷嚷、指点大家应该怎么去做的，是老师，不是商人。马云当过老师，但归根结底是商人。所以他的公开讲话经常是这样的：给世界提出问题，但并不会给出答案——哪怕他其实已在暗中埋头答题。</p>
<p>他做过的电商是这样，眼下正在做的物流骨干网是这样（你能清晰知道菜鸟具体在做哪些工作吗？不知道），阿里参与的金融领域诸多事宜也是这样。</p>
<p>郭广昌们得不到具体的答案不要紧，这并不妨碍我们去听下马云对金融世界提出的问题：“如何能服务好剩下的那80%的客户？”马云认为，凭着互联网思想与技术，这个在传统金融业里难以求解的问题是可以求解出来的。</p>
</div>
</div>
</div>

媒体列表

<!-- 仅仅多添加了个media-list 媒体列表 -->
<ul class="media-list">
<li class="media">
<a href="#" class="media-object pull-left"><img src="img/31.jpg"></a>
<div class="media-body">
<h4 class="media-heading">信息图表：IT领域的发展和工作的变迁</h4>
<div class="media">
<p>过去几十年在科技领域发生了翻天覆地的变化，虎嗅编译了这张微软服务器和云计算博客制作的信息图表，让我们来看一下自IT业诞生以来，这个行业都发生了些什么。</p>
<p>交通银行董事长牛锡明这样回应马云与郭广昌</p>
</div>
</div>
</li>
<li class="media"> <a class="pull-left" href="#"> <img class="media-object"  src="img/32.jpg"> </a>
<div class="media-body">
<h4 class="media-heading">交通银行董事长牛锡明这样回应马云与郭广昌</h4>
<div class="media">
<p>他指出：第一，互联网金融的发展，怎样符合监管，这个问题需要解决。第二个，就是互联网金融的自我约束和自我风险控制机制，应该如何建立。</p>
<p>虎嗅 2013-06-02 16:34</p>
</div>
</div>
</li>
</ul>

5) 版式
Hero区块

<div class="hero-unit">
<div class="page-header">
<span>网站标题<small>附加信息</small></span>
</div>
<p>文章</p>
<p><a href="#" class="btn btn-primary btn-large">更多</a></p>
</div>

well–用来包裹指定对象或者页面内容

<div class="well">
<img src="img/3.png" style="width: 200px;">
<span class="btn btn-large btn-success pull-right">标准模式</span>
</div>
<div class="well well-small">
<img src="img/3.png" style="width: 200px;">
<span class="btn btn-large btn-success pull-right">well-small模式</span>
</div>
<div class="well well-large">
<img src="img/3.png" style="width: 200px;">
<span class="btn btn-large btn-success pull-right">well-large模式</span>
</div>

关闭图标

<button type="button" class="close">×</button>

PS : 当提交按钮时，必须加type=”button”属性

当选择标签时，要加href=”#”属性

<a href="#" class="close">×</a>

辅助类

pull-left 页面元素向左移动
pull-right 页面元素向右移动
muted 页面元素颜色为#999
clearfix 清除浮动