第九章之路径分页标签与徽章组件


Posted in Javascript onApril 25, 2016

 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.路径组件

2.分页组件

3.标签组件

4.徽章组件

本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件、分页组件、标签组件和徽章组件。

一.路径组件

路径组件也叫做面包屑导航。

//面包屑导航
<ol class="breadcrumb">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品列表</a>
</li>
<li class="active">
韩版 2015 年羊绒毛衣
</li>
</ol>

二.分页组件

分页组件可以提供带有展示页面的功能。

//默认分页
<ul class="pagination">
<li>
<a href="#">«</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="#">»</a>
</li>
</ul> 
//首选项和禁用
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li> 
//设置尺寸,四种 lg、默认、sm 和 xs
<ul class="pagination pagination-lg"> 
//翻页效果
<ul class="pager">
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul> 
//对齐翻页链接
<ul class="pager">
<li class="previous">
<a href="#">上一页</a>
</li>
<li class="next">
<a href="#">下一页</a>
</li>
</ul> 
//翻页项禁用
<li class="previous disabled"><a href="#">上一页</a></li>

三.标签

//在文本后面带上标签
<h3>标签 <span class="label label-default">new</span></h3> 
//不同色调的标签
<h3>标签 <span class="label label-primary">new</span></h3>
<h3>标签 <span class="label label-success">new</span></h3>
<h3>标签 <span class="label label-info">new</span></h3>
<h3>标签 <span class="label label-warning">new</span></h3>
<h3>标签 <span class="label label-danger">new</span></h3>

四.徽章

//未读信息数量徽章
<a href="#">信息 <span class="badge">10</span></a> 
//按钮中使用徽章
<button class="btn btn-success">
提交 <span class="badge">3</span>
</button> 
//激活状态自动适配色调
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页 <span class="badge">2</span></a>
</li>
<li>
<a href="#">资讯</a>
</li>
</ul>

以上所述是小编给大家介绍的Bootstrap组件之路径分页标签与徽章组件,希望对大家有所帮助!

Javascript 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
You might like
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python bytes string相互转换过程解析
2020/03/05 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python实现自动打卡的示例代码
2020/10/10 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
银行领导证婚词
2014/01/11 职场文书
中文教师求职信
2014/02/22 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
工作自我推荐信范文
2015/03/25 职场文书