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

 更新时间:2016年04月25日 10:04:46   作者:水之原  
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍路径分页标签与徽章组件,感兴趣的朋友一起学习吧

 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="#">&laquo;</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="#">&raquo;</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中函数的防抖与节流详解

    这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 10个基于浏览器的JavaScript调试工具分享

    10个基于浏览器的JavaScript调试工具分享

    调试Javascript可能是web开发中最让人郁闷的事情,这里是10款我们精选的基于浏览器的JS在线调试工具,感兴趣的朋友可以参考下,或许对你有所帮助
    2013-02-02
  • javascript parseInt() 函数的进制转换注意细节

    javascript parseInt() 函数的进制转换注意细节

    parseInt(string, radix) 有2个参数,第一个string 是传入的数值,第二个radix是 传入数值的进制,参数radix 可以忽略,默认为 10,各种进制的数转换为 十进制整数,接下来详细介绍,感兴趣的朋友可以了解下哦
    2013-01-01
  • 浅谈JavaScript窗体Window.ShowModalDialog使用

    浅谈JavaScript窗体Window.ShowModalDialog使用

    这篇文章主要介绍了浅谈JavaScript窗体Window.ShowModalDialog使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JavaScript 获取元素在父节点中的下标(推荐)

    JavaScript 获取元素在父节点中的下标(推荐)

    jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标,需要的朋友参考下吧
    2017-06-06
  • Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗,对Bootstrap缩略图与警示窗小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警示窗,从中得到收获。
    2015-11-11
  • ros::spin() 和 ros::spinOnce()函数的区别及详解

    ros::spin() 和 ros::spinOnce()函数的区别及详解

    这篇文章主要介绍了ros::spin() 和 ros::spinOnce()函数的区别及详解的相关资料,本文介绍的非常详细,具有参考借鉴价值,感谢兴趣的朋友一起看看吧
    2016-10-10
  • typescript编写微信小程序创建项目的方法

    typescript编写微信小程序创建项目的方法

    这篇文章主要介绍了typescript编写微信小程序创建项目的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 小程序实现计时器功能

    小程序实现计时器功能

    这篇文章主要为大家详细介绍了小程序实现计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js实现5秒倒计时重新发送短信功能

    js实现5秒倒计时重新发送短信功能

    这篇文章主要为大家详细介绍了js实现5秒倒计时重新发送短信功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论