第九章之路径分页标签与徽章组件
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 parseInt() 函数的进制转换注意细节
parseInt(string, radix) 有2个参数,第一个string 是传入的数值,第二个radix是 传入数值的进制,参数radix 可以忽略,默认为 10,各种进制的数转换为 十进制整数,接下来详细介绍,感兴趣的朋友可以了解下哦2013-01-01浅谈JavaScript窗体Window.ShowModalDialog使用
这篇文章主要介绍了浅谈JavaScript窗体Window.ShowModalDialog使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07ros::spin() 和 ros::spinOnce()函数的区别及详解
这篇文章主要介绍了ros::spin() 和 ros::spinOnce()函数的区别及详解的相关资料,本文介绍的非常详细,具有参考借鉴价值,感谢兴趣的朋友一起看看吧2016-10-10
最新评论