分页的状态

下面的实例演示了上表中所讨论的 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. APP为什么会被打回来??

    APP的设置界面, 按钮使用了类似iPhone的操作方式以及icon的圆角设计  ->  重新设计 APP的年龄设置太低  ->  改年龄 APP里有实物奖励  ->  免责声明, ...

  2. 第十九篇 .NET高级技术之C#中的线程(一)

    原文://http://www.cnblogs.com/miniwiki/archive/2010/06/18/1760540.html 文章系参考转载,英文原文网址请参考:http://www.al ...

  3. .netcore--Controller后台实现企业微信发送消息

    一.获得企业微信管理端权限,登录企业企业微信管理端界面,并创建应用,如下图中的[网站消息推送] 二.参见企业微信API文献,根据corpid=ID&corpsecret=SECRET(其中企业 ...

  4. 51Nod 1097 拼成最小的数（字符串的排序）

    #include <iostream> #include <cstring> #include <cstdlib> #include <cstdio> ...

  5. [模板]（luogu P3387）縮點

    前言:對於這週的咕咕咕表示好像沒什麼好表示的,完全沒有靈感a......寫東西真的好難啊......於是又玩了半天鬼泣4???還挺好玩的 來源:題解 题目背景 缩点+DP 题目描述 给定一个n个点m条 ...

  6. Python 数字模块

    Python中的数字模块 math模块 random模块 Decimal模块 - 没有损失的小数 Fraction模块 - 可以计算分数

  7. Codeforces Round #541 (Div. 2) A.Sea Battle

    链接:https://codeforces.com/contest/1131/problem/A 题意: 给两个矩形,一个再上一个在下,求两个矩形合并的周围一圈的面积. 思路: 因为存在下面矩形宽度大 ...

  8. 洛谷 P1593 因子和 || Sumdiv POJ - 1845

    以下弃用 这是一道一样的题(poj1845)的数据 没错,所有宣称直接用逆元/快速幂+费马小定理可做的,都会被hack掉(包括大量题解及AC代码) 什么原因呢?只是因为此题的模数太小了...虽然990 ...

  9. chrome浏览器历史版本

    持续更新中······ google-chrome 浏览器 win64位 版本号 大小 官网更新日期 66.0.3359.181 48.58 MB 2018年5月16日 65.0.3325.181 4 ...

  10. morphia(5)-删除

    @Test public void delete() throws Exception { final Query<Employee> query = datastore.createQu ...