Bootstrap分页

效果图

代码:

<div class="container">

       <nav>
           <ul class="pagination">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </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="#" aria-label="Next">next
                    <span aria-hidden="true">&raquo;</span>
                </a></li>

           </ul>
       </nav>

       <ul class="pager">
           <li><a href="#">上一页</a></li>
           <li><a href="#">下一页</a></li>
       </ul>

       <nav>
           <ul class="pager">
           <li class="previous"><a href="#" aria-hidden="true"><span>&larr;</span>上一页</a></li>
           <li class="next"><a href="#" aria-hidden="true">下一页<span>&rarr;</span></a></li>
       </ul>
       </nav>
</div>

时间: 2024-10-12 12:42:08

Bootstrap分页的相关文章

bootstrap分页及弹框

一.bootstrap分页 1,js内容 var pageitem = 20;//每页显示数 //是否是第一次加载js var isfirstload = true; function initPagination(count){ var num_entries = 0;//总数 if(null== count){ num_entries = $("#count").val(); if(null== num_entries){ num_entries = 0; }else{ total

bootstrap 分页

1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c&

bootstrap分页插件 用jquery

要引用bootstrap.css,jquery.js,jquery.twbsPagination.js 效果图如下: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

javascript 将 ThinkPHP 分页自动转换为 bootstrap 分页

#写的一个通用的,将thinkphp生成的分页HTML,自动转换为 bootstrap 分页: /** * @author default7#zbphp.com * @description 将ThinkPHP的分页转换为 bootstrap分页 * @param selector */ function initPagination(selector) { selector = selector || '.page'; $(selector).each(function (i, o) { va

CI 结合Bootstrap 分页

#显示列表 public function index(){ //载入分页类 $this->load->library('pagination'); //每页显示的条数 $perPage=11; /****配置分页****/ //设置分页路径 $config['base_url']=site_url('admin/locality/index'); //获取总条数 $config['total_rows']=$this->db->count_all_results('goods')

Bootstrap分页插件ajax返回数据,工具类的编写

使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href="css/bootstrap-table.min.css" rel="stylesheet" /> 需要引入的js: 1 <!-- boostrap table --> 2 <script type="text/javascript&quo

基于bootstrap分页

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet&q

Bootstrap分页插件--Bootstrap Paginator

开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: <link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.1.js">

angular+bootstrap分页指令案例

AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angular指令,在使用时无需考虑指令的内部实现细节,像使用普通HTML元素一样简单. 1:index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>TODO supply a tit