上一篇已经讲了一些使用BootStrap的步骤和一些基本使用，点击查看
这篇博客继续给大家介绍一些常用效果的使用，主要有以下几个组件
1. 下拉菜单
2. 导航栏
3. 进度条
4. 媒体对象
5. 分页
6. 列表
首先要导入BootStrap的css和js
<link rel="stylesheet" href="css/bootstrap.min.css"> <> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="js/jquery-3.1.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
1.下拉菜单
主要由button和ul组成，可以添加小标题和分割线
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> 地铁线路 <> <span></span> </button> <ul role="menu"> <> <li>地铁</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></li> <li><a href="#">5号线</a> </li> </ul> </div>
2.导航栏
导航栏几乎是每个网页的标配，学好怎么用一定没错
这是网页顶部的导航栏
<> <nav role="navigation"> <div> <> <div> <> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <> <a href="#">Brand</a> </div> <> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">会员管理</a></li> <li><a href="#">会员管理</a></li> <li><a href="#">会员管理</a></li> <li><a href="#">会员管理</a></li> <> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"> 系统维护<span></span> </a> <ul role="menu"> <li><a href="#">恢复系统</a></li> <li><a href="#">系统备份</a></li> <li><a href="#">断开连接</a></li> <li><a href="#">删除用户</a></li> </ul> </li> </ul> <> <> <button type="button">Sign in</button> <> <form role="search"> <div> <input type="text" placeholder="输入搜索内容"> </div> <button type="summit">搜索</button> </form> </div> </div> </nav>
我们在用网页浏览博客或者文件的时候，都有一个层级，这时如果是想返回上一级或者上几级就需要位置的导航栏
<> <ol> <li><a href="#">我的后台</a> </li> <li><a href="#">系统分析</a> </li> <> <li>访问统计</li> </ol>
3.进度条
<div> <> <> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30%</span> <> 30% </div> </div>
4.媒体对象
在微博或者Twitter里的消息基本上都是这种样式
左边是头像，右边是标题和文字
<div> <div> <img src="images/1.jpg"> </div> <div> <h4>Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div>
5.分页
这是有多个页码的
<ul> <li> <a href="#" aria-label="Previous"> <> <span aria-hidden="true">«</span> </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="#">6</a> </li> <li><a href="#">7</a> </li> <li> <a href="#" aria-label="Next"> <> <span aria-hidden="true">»</span> </a> </li> </ul>
这是只有上一页和下一页的
<ul> <li><a href="#"><span aria-hidden="true">←</span>上一页</a> </li> <li><a href="#"><span aria-hidden="true">→</span>下一页 </a> </li> </ul>
上面的写法是两个按钮连在一起的
下面的写法是两个按钮分布在两侧
<ul> <li><a href="#"><span aria-hidden="true">←</span>上一页</a> </li> <li><a href="#"><span aria-hidden="true">→</span>下一页 </a> </li> </ul>
6.列表
列表的效果十分常见，用起来也十分简单
<div> <> <a href="#">访问统计</a> <a href="#">信息统计</a> <a href="#">日志统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> </div>
我用上面的组件做了一个后台的静态网页
效果如图