分页的状态

下面的实例演示了上表中所讨论的 class .disabled、.active 的用法：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：分页状态</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:150px">
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><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="#">6</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：分页状态的更多相关文章

  1. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

  2. Bootstrap历练实例：分页的大小

    分页的大小 下面的实例演示了上表中所讨论的 class .pagination-* 的用法: <!DOCTYPE html><html><head><meta ...

  3. Bootstrap历练实例：验证状态

    验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...

  4. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  5. Bootstrap历练实例：语境色彩的面板

    带语境色彩的面板 使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如下: ...

  6. bootstrap历练实例： 导航元素中禁用的链接

    对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态, <!DOCTYPE html><html& ...

  7. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  8. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Codeforces Round #377 (Div. 2)A,B,C,D【二分】

    PS:这一场真的是上分场,只要手速快就行.然而在自己做的时候不用翻译软件,看题非常吃力非常慢,还有给队友讲D题如何判断的时候又犯了一个毛病,一定要心平气和,比赛也要保证,不要用翻译软件做题: Code ...

  2. IT兄弟连 JavaWeb教程 JSTL定义

    JSTL标签库实际上包含5个不同的标签库.JSTL1.1规范为这些标签库的URI和前缀做了预定,参见表7.3. 表3  JSTL标签库

  3. 升级log4j到log4j2报错：cannot access org.apache.http.annotation.NotThreadSafe

    问题与分析 今天把项目的log4j的依赖改成了log4j2的依赖后,发现使用Maven打包时报错如下: [ERROR] Failed to execute goal org.apache.maven. ...

  4. 关于maven+springmvc+mybits搭建的框架clean，build后错误：org.apache.ibatis.binding.BindingException的处理

    1.错误原型截图: 2.我对错误的处理轨迹: a.首先,可能是我的mapper.xml配置错了,但是经过查看发现mybits.xml配置如下: 我项目的目录结构如下: 初次判断mybits的配置没有问 ...

  5. git 版本控制(一)

    新建代码库repository 1.在当前目录新建一个git代码库 git init git init projectname 2.下载一个项目,如果已经有了远端的代码,则可以使用clone下载 gi ...

  6. CF #541div2 F

    题目本质:并查集的链式合并 解决方法1: 类似哈夫曼树,叶节点们为真点,其余造一些虚的父节点,使得dfs这棵树的时候,先进行并查合并的点一定是兄弟节点因而紧挨着被输出,巧妙达到了效果. #pragma ...

  7. 洛谷 P4362 [NOI2002]贪吃的九头龙

    https://www.luogu.org/problemnew/show/P4362 首先有个很显然的dp:ans[i][j][k]表示i节点用j号头,i节点为根的子树中共有k个点用大头时i节点为根 ...

  8. linux系统下安装Git

    Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.Git 是 Linus Tor ...

  9. Jasper_crosstab_group_dataset_Error incrementing crosstab dataset

    Error detail: net.sf.jasperreports.engine.JRException: net.sf.jasperreports.engine.JRRuntimeExceptio ...

  10. 113 Path Sum II 路径总和 II

    给定一个二叉树和一个和,找到所有从根到叶路径总和等于给定总和的路径.例如,给定下面的二叉树和 sum = 22,              5             / \            4 ...