上一篇已经讲了一些使用BootStrap的步骤和一些基本使用，点击查看
这篇博客继续给大家介绍一些常用效果的使用，主要有以下几个组件
1. 下拉菜单
2. 导航栏
3. 进度条
4. 媒体对象
5. 分页
6. 列表
首先要导入BootStrap的css和js
<link href="https://www.jb51.net/css/bootstrap.min.css"> <!--最好也引用cdn的css，有些样式文件里没有--> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://www.jb51.net/js/jquery-3.1.0.min.js"></script> <script src="https://www.jb51.net/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的类设为navbar-inverse更加高端,设为navbar-static-top将navbar的圆角去掉并且静止固定在顶部--> <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> <!--可将Brand换成img--> <a href="#">Brand</a> </div> <!--要id设为bs-example-navbar-collapse-1才能伸缩后被点开--> <div> <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> <!--先写navbar-right越靠右--> <!--导航栏中的按钮--> <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> <!--progress-bar-striped设置条纹，active设置动画--> <!--根据style宽度的百分比显示进度条的百分比--> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30%</span> <!--文字显示在进度条中间--> 30% </div> </div>
4.媒体对象
在微博或者Twitter里的消息基本上都是这种样式
左边是头像，右边是标题和文字
<div> <div> <img src="https://www.jb51.net/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.分页
这是有多个页码的