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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

删除 WordPress 导航菜单的多余 CSS 选择器

在默认情况下,WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-c...

30570
来自专栏happyJared

IDEA快捷键拆解系列(十三):Window篇

  以下是关于Window导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

35210
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

38540
来自专栏TungHsu

Microsoft Office的几个快捷键

顾名思义,就是把你刚刚做过的那个动作再来一遍。比如:要取消某段话中的某些超链接超链接

10820
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(7)---单元格的交互操作

单元格的编辑模式 通常情况下,当终端用户双击单元格时,编辑控件将允许用户在该单元格中输入内容。在一个单元格中编辑的能力被称为编辑模式。一些属性和方法可以用来自定...

211100
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,...

29830
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

512140
来自专栏抠抠空间

Toastr 通知提示插件

Toastr 简介 jquery toastr 一款轻量级的通知提示框插件。 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。 所以一般通...

43590
来自专栏前端之心

你真的了解回流和重绘吗

最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。

95550
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

14800

扫码关注云+社区

领取腾讯云代金券