使用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">&times;</button>   
    <strong>危险</strong>你确定要删除这些信息？
</div>
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">&times;</button>   
    <strong>警告</strong>你确定要删除这些信息？
</div>
<div class="alert alert-error">
    <button type="button" class="close" data-dismiss="alert">&times;</button>   
    <strong>错误</strong>你确定要删除这些信息？
</div>
<div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>   
    <strong>成功</strong>你确定要删除这些信息？
</div>
<div class="alert alert-info">
    <button type="button" class="close" data-dismiss="alert">&times;</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">&times;</button>

PS : 当提交按钮时，必须加type=”button”属性
当选择标签时，要加href=”#”属性

<a href="#" class="close">&times;</a>

辅助类

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