上一篇已经讲了一些使用BootStrap的步骤和一些基本使用，点击查看
这篇博客继续给大家介绍一些常用效果的使用，主要有以下几个组件
1. 下拉菜单
2. 导航栏
3. 进度条
4. 媒体对象
5. 分页
6. 列表
首先要导入BootStrap的css和js
1.下拉菜单
主要由button和ul组成，可以添加小标题和分割线
2.导航栏
导航栏几乎是每个网页的标配，学好怎么用一定没错
这是网页顶部的导航栏
我们在用网页浏览博客或者文件的时候，都有一个层级，这时如果是想返回上一级或者上几级就需要位置的导航栏
3.进度条
30% 30%
4.媒体对象
在微博或者Twitter里的消息基本上都是这种样式
左边是头像，右边是标题和文字
Media headingCras 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.
5.分页
这是有多个页码的
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
这是只有上一页和下一页的
- ←上一页
- →下一页
上面的写法是两个按钮连在一起的
下面的写法是两个按钮分布在两侧
- ←上一页
- →下一页
6.列表
列表的效果十分常见，用起来也十分简单
访问统计 信息统计 日志统计 信息统计 信息统计 信息统计 信息统计 信息统计
我用上面的组件做了一个后台的静态网页
效果如图
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
