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


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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
swiper 自动图片无限轮播实现代码
May 21 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP实现简易计算器功能
2020/08/28 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
jQuery的三种$()
2009/12/30 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
简单实现python爬虫功能
2015/12/31 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
pycharm新建一个python工程步骤
2019/07/16 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python 实现任务管理清单案例
2020/04/25 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
车辆安全检查制度
2014/01/12 职场文书
大学军训感言1000字
2014/02/25 职场文书
求职自我评价范文100字
2014/09/23 职场文书
公司员工管理制度
2015/08/04 职场文书