功能强大的Bootstrap效果展示（二）

功能强大的Bootstrap效果展示（二）

上一篇已经讲了一些使用BootStrap的步骤和一些基本使用，点击查看

这篇博客继续给大家介绍一些常用效果的使用，主要有以下几个组件

1. 下拉菜单

2. 导航栏

3. 进度条

4. 媒体对象

5. 分页

6. 列表

首先要导入BootStrap的css和js

1.下拉菜单

主要由button和ul组成，可以添加小标题和分割线

地铁线路

2.导航栏

导航栏几乎是每个网页的标配，学好怎么用一定没错

这是网页顶部的导航栏

data-target="#bs-example-navbar-collapse-1">

Toggle navigation

data-target="#bs-example-navbar-collapse-1">

Toggle navigation

Brand

系统维护

Sign in

搜索

我们在用网页浏览博客或者文件的时候，都有一个层级，这时如果是想返回上一级或者上几级就需要位置的导航栏

3.进度条

30%

30%

4.媒体对象

在微博或者Twitter里的消息基本上都是这种样式

左边是头像，右边是标题和文字

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.

5.分页

这是有多个页码的

«

»

这是只有上一页和下一页的

上面的写法是两个按钮连在一起的

下面的写法是两个按钮分布在两侧

6.列表

列表的效果十分常见，用起来也十分简单

访问统计

信息统计

日志统计

信息统计

信息统计

信息统计

信息统计

信息统计

我用上面的组件做了一个后台的静态网页

效果如图

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。