欢迎来到福编程网,本站提供各种互联网专业知识!

功能强大的Bootstrap效果展示(二)

发布时间:2016-08-03 作者:qq_32198277 来源:转载
这篇文章主要介绍了功能强大的Bootstrap效果展示,介绍常用Bootstrap效果的使用方法,感兴趣的小伙伴们可以参考一下

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

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

1. 下拉菜单

2. 导航栏

3. 进度条

4. 媒体对象

5. 分页

6. 列表

首先要导入BootStrap的css和js







1.下拉菜单

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



2.导航栏

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

这是网页顶部的导航栏


 

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

  
   

3.进度条

30% 30%

4.媒体对象

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

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

 

Media heading

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.列表

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

 

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

效果如图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐