(八)路径(面包屑导航)分页标签和徽章组件

一.路径组件 

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

<ol class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">产品列表</a></li><li><a href="#">大衣</a></li><li class="active">毛呢大衣</li>
</ol>

 

二.分页组件 

1、基本实例

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

<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>

2、首选项和禁用 

<ul class="pagination"><li><a href="#">&laquo;</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li class="disabled"><a href="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>

3、设置尺寸,四种 lg、默认、sm 和 xs 

<ul class="pagination pagination-lg">

 

4、翻页效果 

<ul class="pager"> 
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>

5、对齐翻页链接 

<ul class="pager"><li class="previous"><a href="#">上一页</a></li><li class="next"><a href="#">下一页</a></li>
</ul>

 

 6、翻页项禁用 

<li class="previous disabled"><a href="#">上一页</a></li>

 

 三.标签

1、 在文本后面带上标签 

<h3>标签 <span class="label label-default">new</span></h3>

2、不同色调的标签 

<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>

 

四.徽章

1、未读信息数量徽章 

<a href="#">信息 <span class="badge">10</span></a>

2、按钮中使用徽章 

<button class="btn btn-success"> 提交 <span class="badge">3</span></button>

3、激活状态自动适配色调 

<ul class="nav nav-pills"><li class="active"><a href="#">首页 <span class="badge">2</span></a></li><li><a href="#">资讯</a></li>
</ul>

 

转载于:https://www.cnblogs.com/shyroke/p/9184884.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/277792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python之爬虫(四)之 Requests库的基本使用

什么是Requests Requests是用python语言基于urllib编写的&#xff0c;采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关于urllib库的使用&#xff0c;你会发现&#xff0c;其实urllib还是非常不方便的&#xff0c;而Requests它会比urllib更加方便&#xff0c;可以…

win8下cocos2dx-3.2+VS2012环境配置及项目创建

这是本人CSDN的第一篇博客&#xff0c;因为假期在学校做实训项目接触到了cocos2dx&#xff0c;觉得是一个特别适用强大&#xff0c;有不错的可移植性&#xff08;虽然可移植性不错&#xff0c;但实际上写好的游戏往Android上移植&#xff0c;我的队友废了好大劲。。。&#xff…

Mac系统下Homebrew的安装和使用Homebrew安装python

这里向大家推荐一个东西&#xff0c;Mac下很好用的东西&#xff0c;叫做Homebrew。刚开始接触Mac的时候&#xff0c;我也没听过这个东西&#xff0c;但装了以后真的觉得&#xff0c;TMD太碉堡了。引用一句话&#xff1a;Homebrew is the easiest and most flexible way to inst…

Mac下cocos2dx-3.2+Xcode环境配置和项目创建

这是有关环境配置的第二篇教程&#xff0c;第一篇讲的是win8下的环境配置。这里我们使用C。所有如果你用其他语言如Lua和js进行cocos2d开发&#xff0c;那么可以再找一找其他的配置文档。下面要说Mac os 下 cocos2dx-3.2Xcode的环境配置&#xff0c;这里我使用的是Xcode 5.1.1。…

Mac OS使用技巧之一:查看Finder中的.bash_profile等系统隐藏文件

作为一个程序员&#xff0c;经常要配置变量&#xff0c;可能要更改hosts文件&#xff0c;或者你闲着没事儿寻找homebrew给你安装的东西在什么地方。Mac OS的内核是Unix&#xff0c;Linux/Unix系统出于系统安全和用户安全的考虑&#xff0c;会把一些与系统相关的文件隐藏&#x…

win8下cocos2dx3.2移植android平台及代码打包APK

cocos2dx程序不能只在VS2012下运行&#xff0c;迟早是要搬运到Android和IOS上的。Windows下移植IOS平台先搁下不说比较困难&#xff0c;而且只有越狱的苹果机才可以运行&#xff0c;而且毕竟IOS高端、小众。这里主要讲一下移植Android&#xff0c;windows下cocos2dx打包成APK和…

【转】用Fiddler做抓包分析详解

1.为什么是Fiddler? 抓包工具有很多&#xff0c;小到最常用的web调试工具firebug&#xff0c;达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下&#xff1a; a.Firebug虽然可以抓包&#xff0c;但是对于分析http请求的详细信息&#xff0c;不够强大。模拟http…

Mac下cocos2dx3.2移植android平台详细教程

本文是cocos2dx移植android的第二篇教程&#xff0c;笔者深深感觉&#xff0c;cocos2dx移植android平台是永远的痛啊。。。下面讲一下笔者花费一个周研究的Mac OS下的cocos2dx3.2android配置首先要准备的东西&#xff08;1&#xff09;下载cocos2dx3.2 http://www.cocos2d-x.o…

robotframework(12)修改用户密码(从数据库查询短信验证码)

一、testcase&#xff1a;修改用户密码需要6个参数&#xff08;短信验证码、设置的新密码、用户已登录的userid及用户唯一标识、接口校验码、被修改的手机号&#xff09;&#xff0c;故先准备这些参数 二、用户登录请求&#xff0c;&#xff08;获取userid、用户唯一标识&#…

Mac OS使用技巧之二:修改变量Path解决android: command not found

前一阵子&#xff0c;一直在搞Mac OS和win8下cocos2dx移植android平台的方法。一步步从无到有的慢慢摸索出来。最近发现了一个小问题&#xff0c;有关环境变量配置的写下来分享给大家。就是我们在windows8下查看已有android SDK的版本&#xff0c;需要在CMD里面输入&#xff1a…

Jenkins架构

一. Master 和slave.下图阐述了master-slave交互的架构&#xff1a;在上面这个分布式的构建环境中&#xff0c;Jenkins master主要负责如下&#xff1a;接收构建触发&#xff08;比如&#xff0c;一个提交到GitHub后&#xff09;发送通知&#xff08;比如&#xff0c;在构建失败…

Mac OS使用技巧之三:发射无线网络信号的方法

许多人知道在windows下可以直接借助各种辅助软件来直接发射wifi信号&#xff0c;比如360wifi&#xff0c;猎豹wifi。或者可以直接在命令行里面设置。许多人却不知道Mac系统也有方便快捷发射无线信号的功能。下面讲一下利用Mac OS发射无线网络信号的方法。前提&#xff1a;你的电…

纪实:对CSDN博客系统的一些质疑

我是一个对编程充满热情的在校大学生&#xff0c;本来我是怀着满腔热情来到CSDN写博客&#xff0c;记录和分享自己的学习经历。却被这糟糕的博客系统一次次的泼冷水。写这篇博客确实是因为心中十分不甘和特别生气&#xff0c;所以我决定要把自己的遭遇写出来&#xff0c;我自己…

php框架之laravel

常见问题: 1. 访问网站500错误 这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置&#xff0c;默认存在storage文件夹中 解决:需要保证storage/framework下面创建 sessions&#xff0c; views, cache 文件夹并确保可写权限 转载于:https://ww…

MySQL的命令合集

2019独角兽企业重金招聘Python工程师标准>>> MySQL客户端操作 $db$是数据库名称$table$是数据表名称$field$是数据表里的字段名称有些语句最后加上**/G**可以使结果更美观数据库相关 创建数据库,修改数据库 create database $db$; 使用默认设置create database $db$…

Mac OS使用技巧之四:修改打开不同格式视频的默认播放器

这里说一下视频播放的一些问题。大家知道Mac OS中有自带的一款播放器&#xff0c;叫做Quicktime Player。这已经是一款很牛X的软件了&#xff0c;但他的定位并不是单纯的视频播放软件&#xff0c;而是数字媒体制作平台&#xff0c;可以用于视频格式的转换&#xff0c;视频的录制…

爬取汽车之家新闻

爬取汽车之家新闻 伪造浏览器向某个地址发送Http请求&#xff0c;获取返回的字符串 response requests.get(url 地址)response.contentresponse.encoding apparent_encodingresponse.textbs4&#xff0c;解析HTML格式的字符串 soup BeautifulSoup(<html>...</html…

Mac OS使用技巧之五:Macbook键盘的使用基础技巧

使用过苹果电脑的朋友应该都知道苹果的台式机和笔记本键盘布局有自己独有的风格&#xff0c;Mac里面的键盘细节就值得我们深深推敲。这篇博客将为一些Mac的新手&#xff0c; 详细介绍一下苹果电脑键盘的基础使用技巧&#xff0c;笔者目前的系统是Mac mavericks。Mac OS按键符号…

需求工程week1

这是第一周&#xff0c;我们小组确定了项目工程的主题&#xff0c;对于需求不清楚的地方与甲方进行了沟通。简单制定了下一周的工作计划。 以下是详细说明&#xff1a; &#xff08;1&#xff09;项目背景和范围 ①背景&#xff1a;在急需志愿活动的今天&#xff0c;在部分个人…

3- 快速上手Linux玩转典型应用- Linux准备工作

4- 准备工作 查看ip ifconfig # 查看ip地址 ipaddr # ip vi /etc/sysconfig/network-scripts/ifcfg-xxyum install net-tools最小化安装的server版本没有ifconfig。使用ip addr tab补全键一次补全。两次提示。 使用pageup pagedown键&#xff0c;翻动。 编辑我们的配置文件将o…