Bootstrap 分页导航

最新推荐文章于 2022-04-10 15:39:13 发布
最新推荐文章于 2022-04-10 15:39:13 发布
阅读量359 收藏
点赞数
分类专栏： Bootstrap 前端 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CQL_K21/article/details/86772139
版权 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"><!--设置字符集utf-8编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
    <title>ChapterSixPagination--第六章分页</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container"> 
        <div class="h4 text-center">-----------------------------分页导航（带页码的分页导航）----------------------</div>
        <!--分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验
        。在Bootstrap框架中提供了两种分页导航：
           ☑   带页码的分页导航
           ☑   带翻页的分页导航
        带页码的分页导航
        带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，
        会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的
        分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入
        pagination(分页)方法：-->
        <!--注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下
                的a标签换成span标签
            大小设置：
            在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：
            1、通过“pagination-lg”让分页导航变大；
            2、通过“pagination-sm”让分页导航变小：
            大小设置实现原理：
        其实就是通增加相应的padding大小、font-size大小和圆角大小-->
        <ul class="pagination pagination-lg">
            <li><a href="#">&laquo;第一页</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li class="active"><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li class="disabled"><a href="#">最后一页&raquo;</a></li>
        </ul>
        <ul class="pagination pagination">
            <li><a href="#">&laquo;第一页</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li class="active"><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li class="disabled"><a href="#">最后一页&raquo;</a></li>
        </ul>
        <ul class="pagination pagination-sm">
            <li><a href="#">&laquo;第一页</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li class="active"><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li class="disabled"><a href="#">最后一页&raquo;</a></li>
        </ul>  
        <div class="h4 text-center">-----------------------------分页导航（翻页分页导航）----------------------</div>
        <!--Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在
            一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，
            只会提供一个“上一页”和“下一页”的按钮。
            使用方法：
            在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：-->
        <!--对齐样式设置：
        默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架
        提供了两个样式：
           ☑   previous：让“上一步”按钮居左
           ☑   next：让“下一步”按钮居右
        具体使用的时候，只需要在li标签上添加对应类名即可-->
        <!--状态样式设置：
        和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，
        但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签-->
        <!--代码-->
        <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>
        <div class="h4 text-center">-----------------------------标签----------------------</div>
        <!--在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，
            可能就会加一个“new”标签，来告诉用户。这是新添加的导航项-->
        <!--那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。
            既然他是一个独立的组件，当然在不同的版本下有不同的文件-->
        <span class="label label-default">默认标签</span>
        <span class="label label-primary">主要标签</span>
        <span class="label label-success">成功标签</span>
        <span class="label label-info">信息标签</span>
        <span class="label label-warning">警告标签</span>
        <span class="label label-danger">错误标签</span>
        <div class="h4 text-center">-----------------------------徽章----------------------</div>
        <!--从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。
            常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，
            系统会告诉你有多少信息未读.在Bootstrap框架中，把这种效果称作为徽章效果，
            使用“badge”样式来实现-->
        <a href="#">Inbox <span class="badge" style="background:#0094ff;">42</span></a>
        <!--navbar-default导航条勋章-->
        <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <a href="##" class="navbar-brand">慕课网</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例<span class="badge">23</span></a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
        </div>
        <!--nav-pills导航条勋章-->
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages <span class="badge">3</span></a></li>
        </ul>
        <br />
        <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
            <li class="active"><a href="#"><span class="badge pull-right">42</span> Home </a></li>
            <li><a href="#">Profile</a></li>
            <li> <a href="#"><span class="badge pull-left">3</span> Messages </a> </li>
        </ul>
        <br />
        <!--按钮勋章-->
        <button class="btn btn-primary" type="button">Messages <span class="badge">4</span></button>
        <br />
        <br />
        <br />
        <br />
        <br />  
    </div>

    <div class="container">
        <!--表格导航或标签-->
        <p>标签式的导航菜单</p>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.NET</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--胶囊式的导航菜单-->
        <p>基本的胶囊式导航菜单</p>
        <ul class="nav nav-pills">
            <li><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.NET</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--垂直胶囊式导航栏-->
        <p>垂直的胶囊式导航栏</p>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.NET</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>

    <div class="container">
        <!--两端对齐的导航-->
        <p>两端对齐的导航</p>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.NET</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul><br><br><br>
        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.NET</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>

    <div class="container">
        <!--禁用链接-->
        <p>导航元素中的禁用链接</p>
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li class="disabled"><a href="#">IOS(禁用链接)</a></li>
            <li><a href="#">VB.Net</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul><br><br>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li class="disabled"><a href="#">IOS(禁用链接)</a></li>
            <li><a href="#">VB.Net</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--下拉菜单-->
        <p>带有下拉菜单的标签</p>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">IOS</a></li>
            <li><a href="#">VB.Net</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle"data-toggle="dropdown"href="#">
                    JAVA<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Swing</a></li>
                    <li><a href="#">jMeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                </ul>
            </li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--默认的分页-->
        <ul class="pagination">
            <li><a href="#">&laquo;</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="#">&raquo;</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--分页的状态-->
        <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="#">&raquo;</a></li>
        </ul>
    </div>   

    <div class="container">
        <!--分页的大小-->
        <ul class="pagination pagination-lg">
            <li><a href="#">&laquo;</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="#">&raquo;</a></li>       
        </ul><br>
        <ul class="pagination">
            <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
        </ul><br>
        <ul class="pagination pagination-sm">
            <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
        </ul>
    </div>
    
    <div class="container">
        <!--默认的分页-->
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--对齐的链接-->
        <ul class="pager">
            <li class="previous"><a href="#">&larr; Older</a></li>
            <li class="next"><a href="#">Newer &rarr;</a></li>
        </ul>
    </div>
    
    <div class="container">
        <!--翻页的状态-->
        <ul class="pager">
            <li class="previous disabled"><a href="#">&larr;Older</a></li>
            <li class="next"><a href="#">Newer &rarr;</a></li>
        </ul>
    </div>
    
    <div class="container">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home"data-toggle="tab">菜鸟教程</a>
                </li>
                <li><a href="ios"data-toggle="tab">IOS</a></li>
                <li class="dropdown">
                    <a href="#"id="myTabDrop1"class="dropdown-toggle"data-toggle="dropdown">Java
                    <b class="caret"></b></a>
                    <ul class="dropdown-menu"role="menu"aria-labelledby="myTabDropl">
                        <li><a href="#jmeter"tabindex="-1"data-toggle="tab">jmeter</a></li>
                        <li><a href="ejb"tabindex="-1"data-toggle="tab">ejb</a></li>
                    </ul>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active"id="home">

                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <ul id="myTab"class="nav nav-tabs">
            <li class="active">
                <a href="home" data-toggle="tab">菜鸟教程</a>
            </li>
            <li><a href="#IOS" data-toggle="tab">IOS</a></li>
            <li class="dropdown">
                <a href="#"id="myTabDropl" class="dropdown-toggle"data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu"role="menu"aria-labelledby="myTabDropl">
                    <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                    <li><a href="#ejb"tabindex="-1"data-toggle="tab">ejb</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>菜鸟教程是一个提供最新的Web技术站点,本站点免费提供了相关的技术文档,帮助广大web
                技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行-学的不仅是技术,更是梦想。</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p>ios是一个由苹果公司开发和发布的手机操作系统。最初是于2007年首次发布iPhone、iPodTouch
                和Apple TV。IOS是苹果的移动版本。</p>
            </div>
            <div class="tab-pane fade"id="jmeter">
                <p>jMeter是一款开源的测试软件。它是100%纯Java应用程序,用于负载和性能测试。</p>
            </div>
            <div class="tab-pane fade"id="jmeter">
                <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如JBOSS、WEB Logic等)的J2EE上。</p>
            </div>
        </div>
    </div>
    
</body>
</html>

 

ClementQL
关注
专栏目录
Bootstrap导航条、分页导航
u011435776的博客
03-29 776
【导航条navbar】在bootstrap中导航与导航条在外观方面差不多，但在实际应用时，导航条却要复杂的多。导航条制作方法：第一步：首先在制作导航的列表(&lt;ul class=”nav”&gt;)基础上添加类名“navbar-nav”第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”1、“.navbar”样式的主要功能就是设置左右padd...
bootstrap:导航分页
weixin_33795833的博客
09-13 86
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no"> <titl...
bootstrap-分页导航（翻页分页导航）
weixin_33849215的博客
11-12 174
1.运行效果如图所示 2.实现代码如下 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <tit...
bootstrap分页插件
10-12
Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具，主要用于在大量数据或内容中实现分块显示，提供用户友好的翻页体验。在Web应用中，当需要展示的数据超过一个页面所能容纳的范围时，分页就...
bootstrap分页插件.zip
09-24
Bootstrap分页插件是前端开发中常用的一种工具，它基于Twitter Bootstrap框架，为网页提供美观且功能丰富的分页导航。这个压缩包文件“bootstrap分页插件.zip”包含了一个名为“317482454-tm.pagination-195db9b”的...
两款漂亮的bootstrap分页样式
12-13
在本主题中，我们聚焦于"两款漂亮的bootstrap分页样式"，这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件（Pagination）是一个基本的导航元素，用于分隔大量的内容或结果，让用户能够分步骤...
基于Bootstrap分页的实例讲解(必看篇)
01-19
本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航： :ballot_box_with_check: 带页码的分页导航 :ballot_box_with_check: 带翻页的分页导航 页码分页 带页码的分页导航，可能是最常见的一种...
Bootstrap路径导航与分页学习使用
08-31
Bootstrap分页 Bootstrap的分页组件提供了一种简洁、响应式的分页方式。通过使用`<ul>`和`<li>`元素，配合类`pagination`，可以快速创建分页条。例如： ```html <li><a href="#">«</a></li> <li><a ...
bootstrap-table V1.11.1扩展分页导航
08-14
扩展bootstrap-table，使其支持下拉快速跳转至任意页数。
Bootstrap黑色主题分页导航样式
12-13
这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。
Bootstrap 标准的分页导航
歪脖先生的博客
03-10 654
标准的分页导航Bootstrap 中，标准分页导航的中间是页码，两头是上一页和下一页的链接。可以使用无序列表和有序列表来定义分页导航结构，暂不支持描述列表。只需把列表放在 .pagination 的容器中，并在 &lt;li&gt; 元素中定义页码链接即可。如：&lt;div class="pagination"&gt;  &lt;ul&gt;    &lt;li&gt;&lt;a href="#...
Bootstrap学习-导航条-分页导航
weixin_30352645的博客
03-26 178
1、导航条基础 导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。 2、基础导航条 在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
专研前端，探索后端
05-16 1206
分页： 分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，bootstrap提供了分页功能，可以很好的解决这个问题，其用法：给父级ul标签添加pagination类，给子级li添加page-item,类样式如下： 类名 描述 .pagination 分页功能的容器添加的类名，用于布局 .page-item 给分页功能里面每一项添加的类名，用于选择伪类 ，布局链接样式
基于bootstrap5.1的分页导航封装
zhenxiaojie的博客
04-10 540
函数中有些测试代码也很有用,没有删除. 实际视图中的代码量非常少. 视图中 def pretty_list(request): # 临时添加数据库数据, 测试分页 # for i in range(300): # mobile = "18000000{}".format(i) # PrettyNum.objects.create(mobile=mobile, price=i * 20, level=i % 2 + 2, status=i % 2 + 1)
Bootstrap学习笔记——导航条、分页导航
gengfu_php的博客
10-05 3574
1 导航条导航条（navbar）比航（nav）复杂很多；导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。1.1 基础导航条1、在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”; 2、：在列表外部添加带有类“navbar”和“navbar-default”容器（div）。<div
bootstrap( 导航条、分页导航)
小鱼儿
08-04 2163
基础导航条<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a h
bootstrap-分页导航（带页码的分页导航）
weixin_33834910的博客
05-25 195
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>分页导航（带页码的...
Bootstrap入门：导航条与分页导航详解
"Bootstrap入门书籍之（五）导航条、分页导航" Bootstrap是目前非常流行的前端开发框架，它提供了一套完整的组件和工具，帮助开发者快速构建响应式、移动优先的网页。本部分主要讲解了Bootstrap中的两个重要组件：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ClementQL

机会只属于对自己更狠的人。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值