bootstrap-分页导航（翻页分页导航）

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分页导航（翻页分页导航）</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
     crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <ul class="pager">
          <li><a href="#">&laquo;上一页</a></li>
          <li><a href="#">下一页&raquo;</a></li>
    </ul> 

    <!--左右对齐-->
    <ul class="pager">
          <li class="previous"><a href="#">&laquo;上一页</a></li>
          <li class="next"><a href="#">下一页&raquo;</a></li>
    </ul> 

    <!--禁止状态-->
    <ul class="pager">
          <li class="disabled"><span>&laquo;上一页</span></li>
          <li><a href="#">下一页&raquo;</a></li>
    </ul>  

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-12-29 11:16:25

bootstrap-分页导航（翻页分页导航）的相关文章

bootstrap分页与翻页

bootstrap分页在ul中添加pagination可显示如下效果: bootstrap翻页在ul中添加pager类可显示如下效果: 结合分页与翻页可显示如下效果: 因此,需要3个块元素xian显示在同一列,解决办法: 为第一个和最后一个ul设置float分别为left和right 代码如下: 1 <div class="col-sm-offset-4 col-sm-3"> 2 <ul id="previous" class="page

Atitit.列表页面and条件查询的实现最佳实践(2)------翻页分页控件的实现java .net php

Atitit.列表页面and条件查询的实现最佳实践(2)------翻页分页控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui--"首页"."上页"."下页"."末页",还要有Goto到指定页 1 2.2. 百度式::...<上一页567891011121314下一页 2 2.3. 综合的页面首

24款较经典的Page翻页分页css代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

bootstrap(5)分页，翻页，徽章效果

一 : 分页效果我们可以看到在网站上的翻页效果如下: 使用bootstrap如何实现的呢? 代码如下: <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true"&g

JeeSite数据分页与翻页

本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您无用,在这里友情提醒,避免浪费您宝贵的时间. 翻页功能在各种项目中都会用到,在JeeSite开源项目中使用翻页也非常的容易,只要在配置文件中进行就可以就可以使用,系统的默认值为30页. 配置文件在src\main\resources\jeesite.properties文件中,配置如下: 1 pag

织梦DeDeCms列表分页和内容页分页错位解决办法

文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病,下面秀站网总结了一下织梦的列表页和文章页分页问题,希望可以帮助到大家.主要修改两个文件一个是include/arc.listview.class,一个是修改CSS样式表. 第一,在CSS样式表里面添加如下代码: /*列表分页*/.page_list {padding:3px; margin: 3px

bootStrap中的翻页效果

<div class="container"> <br/> <ul class="pagination"> <li><a href="">首页</a></li> <li><a href="">上一页</a></li> <li><a href="">...

控制器隐藏了导航下页pop 导航位置看到黑条

解决: -(void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear:animated]; [self.navigationController setNavigationBarHidden:NO animated:NO]; } -(void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [self.

Bootstrap之导航条，分页导航

导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 基础导航条使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使