第九章之路径分页标签与徽章组件
时间:2019-03-24
本文章向大家介绍第九章之路径分页标签与徽章组件,主要包括第九章之路径分页标签与徽章组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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组件之路径分页标签与徽章组件,希望对大家有所帮助!
- 一个完整的用于追踪数据改变的解决方案
- C# 4.0新特性-"协变"与"逆变"以及背后的编程思想
- 通过内存分析工具来证明字符串驻留机制
- 如果在BackgroundWorker运行过程中关闭窗体…
- 从数据到代码——基于T4的代码生成方式
- 解决T4模板的程序集引用的五种方案
- 编写T4模板进行代码生成无法避免的两个话题:"Assembly Locking"&"Debug"
- 从yield关键字看IEnumerable和Collection的区别
- 让“链式调用(方法链)”更加自然一点
- ASP.NET应用下基于SessionState的“状态编程框架”解决方案
- 为自定义配置的编辑提供”智能感知”的支持
- 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息?
- 在ASP.NET MVC中如何应用多个相同类型的ValidationAttribute?
- [ASP.NET MVC]如何定制Numeric属性/字段验证消息
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Lombok 的作者,成功讨伐 IntelliJ IDEA!
- springboot2之优雅处理返回值
- 通过NVM管理Node.js多版本
- 探究 Android 签名机制和原理
- “有迹可循”的灰盒测试分析
- 想用 Gitee 做图床工具,失败了~~
- Nginx系列:配置跳转的常用方式
- Python骚操作:一行代码实现探索性数据分析
- 吊打 Tomcat ,Undertow 性能很炸!!
- 关于在android平台使用nanohttpd实现的http服务在WIFI环境下响应明显太慢的问题
- Vue.js组件库Element中的Select选择器、Cascader级联选择器、Switch开关和Slider滑块
- 年收200万+的Facebook前端工程师(E5)都要求些啥能力?
- 重学数据结构(二、栈)
- 基于深度学习的人员跟踪
- 为了给女朋友独特的七夕惊喜,我学会了人像美肤算法!