文档章节

Bootstrap响应式前端框架笔记十一——分页与标签

珲少
 珲少
发布于 2016/12/13 19:59
字数 585
阅读 105
收藏 2

Bootstrap响应式前端框架笔记十一——分页与标签

    在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下:

		<p>标准的分页器控件</p>
		<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元素添加disabled类或者active类可以将其设置为禁用或者激活状态,示例如下:

		<p>使用disabled类与active类可以将页标签设置为禁用或激活</p>
		<ul class="pagination">
			<li class="disabled">
				<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>
				<a href="#">5</a>
			</li>
			<li>
				<a href="#">&raquo;</a>
			</li>
		</ul>

效果如下图:

    除了分页器控件,Bootstrap中还提供了一种更为简单的分页控件,示例如下:

		<p>只有前进与后退的分页器</p>
		<ul class="pager">
			<li>
				<a href="#">Previous</a>
			</li>
			<li>
				<a href="#">Next</a>
			</li>
		</ul>

效果如下:

这种分页控件默认是居中的,使用previous与next类可以实现两端对齐的效果,示例如下:

		<p>进行两端对齐</p>
		<ul class="pager">
			<li class="previous">
				<a href="#">Previous</a>
			</li>
			<li class="next">
				<a href="#">Next</a>
			</li>
		</ul>

效果如下:

    Bootstrap中的标签是一种用于展示文本的控件,示例代码如下:

		<p>标签控件演示</p>
		<span class="label label-default">标签</span>
		<span class="label label-primary">标签</span>
		<span class="label label-success">标签</span>
		<span class="label label-info">标签</span>
		<span class="label label-warning">标签</span>
		<span class="label label-danger">标签</span>

效果如下:

开发者也可以使用badge类来创建气泡,示例如下:

		<p>进行气泡的创建</p>
		<a href="#">链接<span class="badge">3</span></a>
		<button class="btn btn-primary" type="button">
  		按钮
  		<span class="badge">4</span>
		</button>

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/pageAndLabel.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 869
博文 390
码字总数 469911
作品 0
上海
iOS工程师
私信 提问
Bootstrap响应式前端框架笔记五——按钮

Bootstrap响应式前端框架笔记五——按钮 Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下: 效果如下: 可以为按钮元素添加btn-lg,btn-sm,btn-xs类...

珲少
2016/12/08
35
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记七——下拉菜单

Bootstrap响应式前端框架笔记七——下拉菜单 在Bootstrap的Css框架中,下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。触发按钮dropdown-toggle类来创...

珲少
2016/12/09
52
0
Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下: 效果...

珲少
2016/12/11
130
0
Bootstrap响应式前端框架笔记三——代码与表格

Bootstrap响应式前端框架笔记三——代码与表格 一、代码 在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下: 效果如下: kbd标签可以用...

珲少
2016/12/05
122
0

没有更多内容

加载失败,请刷新页面

加载更多

用 C 语言编写 Windows 服务程序的五个步骤(转)

摘要   Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务。为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择。本文将建立并 实现一个简单的服务程...

_编程菜鸟_
12分钟前
0
0
Linux各目录及每个目录的详细介绍

目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里。 /etc 存放系统管理和配置文件 /home 存放所有用户文件的根目录,是用户主目录的基点,比如用户user的主目录就是/...

若杰
14分钟前
3
0
vue组件系列5、日期选择

插件部分源码 <template> <div class="date-picker" @click.stop> <input class="input" v-model="dateValue" v-on:mouseover="openPanel" /> <!-- 动画特效 --> <transi......

轻轻的往前走
15分钟前
0
0
SQL

BEGIN #定义一个变量来保存该记录是否存在 declare num int; #这条sql,就是查询对应的记录有多少条,注意 into num 这两句话,就是把count(*) 查出的值,赋给到num中 select co...

张泽立
16分钟前
1
0
云栖科技评论87期:建立AI规则非常重要 但充分对话更重要

【卷首语】建立AI规则非常重要 但充分对话更重要    2016年,谷歌CEO Sundar Pichai宣布谷歌战略从Mobile First(移动优先)转向AI First(人工智能优先),在此之后,谷歌不仅在AI领域持续投入...

Mr_zebra
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部