分页的状态

下面的实例演示了上表中所讨论的 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. unity语言本地化插件 I2 Location2.5.6使用简单记录

    插件下载地址: http://download.csdn.net/detail/onafioo/9579937 1 将插件Resources下的I2Languages.prefab拖到工程里 2 新建 ...

  2. OpenGL Geometry Shader

    http://blog.csdn.net/bugrunner/article/details/5455324 Geometry Shader可以处理Vertex Shader和Fragment Sha ...

  3. 2014-5-24 NOIP模拟赛

    Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时 ...

  4. TensorFlow数据集（一）——数据集的基本使用方法

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 例子:从一个张量创建一个数据集,遍历这个数据集,并对每个输入输出y = x^2 的值. #!/usr/bin/en ...

  5. 简单搭建webMagic爬虫步骤

    1.简介 WebMagic是一个简单灵活的Java爬虫框架.基于WebMagic,你可以快速开发出一个高效.易维护的爬虫. 官网:http://webmagic.io/ 中文官网:http://web ...

  6. ZJOI2017 day2 T2 线段树 想法题

    考完D2发现自己简直zz了...花式扔基本分 首先这道题有个显然的套路:树上一些点到一个定点的距离和=这些点深度和+点数*定点深度和-2*lca深度和 ——上一次见这个套路是LNOI2014,上次做的 ...

  7. Bear and Tower of Cubes Codeforces - 680D

    https://codeforces.com/contest/680/problem/D 一道2D,又是搞两个小时才搞出来...不过好在搞出来了 官方题解:可以证明对于m,设a是满足a^3<=m ...

  8. 《JavaScript设计模式》笔记之第一、二章：富有表现力的JavaScript 和 接口

    第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = functi ...

  9. YDKJ 读书笔记 01 Function vs. Block Scope

    Introduction 本系列文章为You Don't Know JS的读书笔记. 书籍地址:https://github.com/getify/You-Dont-Know-JS Scope Fro ...

  10. Promise/A+规范

    1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...