Bootstrap从入门到实战---分页和进度条

最新推荐文章于 2023-06-26 16:39:42 发布
最新推荐文章于 2023-06-26 16:39:42 发布
阅读量213 收藏 1
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118558522
版权

Bootstrap从入门到实战—分页和进度条
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>
<body>
    <!--分页1-->
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#" >1</a></li>
            <li class="page-item"><a class="page-link" href="#" >2</a></li>
            <li class="page-item"><a class="page-link" href="#" >3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!--分页2-->
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#" >1</a></li>
            <li class="page-item active"><span class="page-link" href="#" >2</a></li>
            <li class="page-item"><a class="page-link" href="#" >3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!--分页3-->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-lg">
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#" >1</a></li>
            <li class="page-item active"><span class="page-link" href="#" >2</a></li>
            <li class="page-item"><a class="page-link" href="#" >3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!--Alignment-->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-lg justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#" >1</a></li>
            <li class="page-item active"><span class="page-link" href="#" >2</a></li>
            <li class="page-item"><a class="page-link" href="#" >3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!--Progress-->
    <div class="progress m-1">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar" role="progressbar" style="width:25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar w-50" role="progressbar"  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar" role="progressbar" style="width:75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75%</div>
    </div>
    <div class="progress m-1" style="height: 1px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1" style="height: 20px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <br>
    <div class="progress m-1">
        <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress m-1">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
    </div>


            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>



</body>
</html>

在这里插入图片描述

i see the future
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 组件：分页组件的使用
WangMin@汪末末
09-07 2373
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 给网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。 默认分页样式 注意： 标记分页组件。分页组件应该包装在nav元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。此外，由于一个页面可能已经有多个这样的导航部分（例如标题中的主导航或侧栏导航），建议为nav提供一个描述性的aria标签，以说明它的用途。例如，如果分页组件用于在一组搜索结果之间导航，则适当的标签可以是aria l
路径导航
yszbrzdd的博客
09-16 1267
代码段： &lt;!--注意:代码模板中的代码将会被复制到任何新创建的文件中，编辑代码模板中的代码，让他帮你自动增加固定代码吧--&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&amp
Bootstrap系列之分页（Pagination）
老__L的博客
06-18 8966
我们让分页（pagination）占据了一大块区域来放置相互关联的链接，这让链接更醒目并且易于扩充，除了这些好处，还为链接提供了较大的点击区域。分页（Pagination）是利用 HTML 的列表元素构建的，因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。此外，由于页面上可能会有多个这样的导航区域，因此建议为设置一个用于描述其用途的aria-label属性。
分页 —【创建分页】
Zyl_CN的博客
05-30 233
&lt;nav aria-label="Page navigation"&gt; &lt;ul class="pagination"&gt; &lt;li&gt; &lt;a href="#" aria-label="Previous"&gt; &lt;span aria-hid
分页工具，js在我的下载
码渝的博客
05-11 190
先引入JS和css&lt;link href="${request.contextPath}/build/css/pageNav.css" rel="stylesheet"&gt;&lt;script src="${request.contextPath}/build/js/pageNav.js"&gt;&lt;/script&gt;然后把分页按钮框放在需要的位置&lt;nav aria-la
bootstrap-table后端分页功能完整实例
10-15
在实际的 Web 开发中，为了提高性能和减少服务器负担，我们通常会采用后端分页技术，即在服务器端处理数据分页，而不是一次性加载所有数据到前端。本篇文章将详细介绍如何在 Bootstrap Table 中实现后端分页功能。 ...
Node.js中Bootstrap-table的两种分页的实现方法
10-19
主要介绍了Node.js中Bootstrap-table的两种分页的使用方法,需要的朋友可以参考下
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
startbootstrap-sb-admin-2-master
09-26
"startbootstrap-sb-admin-2-master" 是一个广泛使用的后台管理模板，由 StartBootstrap 团队开发。StartBootstrap 是一个开源的 HTML、CSS 和 JavaScript 模板库，它提供了多种预设计的网页模板，帮助开发者快速...
bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行
03-05
"bootstrap-table-fixed-columns...总的来说，这个修复版的 `bootstrap-table-fixed-columns` 插件提高了Bootstrap Table的可用性和功能性，使得在复杂的数据展示场景下，用户能够更加便捷、高效地浏览和操作表格数据。
bootstrap3.0 实现分页、跳转、翻页功能
FA的博客
06-26 1458
bootstrap3.0 +angularjs实现分页栏效果。
三种方式实现：进度条
qq_40687809的博客
06-30 1136
1、Bootstrap实现进度条 bootstrap.min.css下载地址：https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css bootstrap.min.js下载地址：
Django 学习之 分页器的使用
chanzhoujian8385的博客
07-02 246
# 创建项目 page_project配置settings启动# 导入分页器相关模块fromdjango.core.paginatorimportPaginator,EmptyPage,PageNotAnInteger查看urlsfromapp01importviews urlpatterns=[ url(r'^admin/',admi...
vue实现分页功能(BootStrap5.x + vue2.x)
ravi's blog
09-30 1220
0.前置知识 SpringBoot基础 Vue2.x 尚硅谷Vue视频前三十集内容 BootStrap会看文档，懂点英文 1.需求实现 注意第一页的前一页功能为disabled 同理第四页的后一页功能为disabled 中间页 2.后端接口 假如我们拥有这样一个接口： @GetMapping("patients/{pageNum}/{pageSize}") public R getPatientsList(@PathVariable String pageNum, @P
Bootstrap组件学习笔记（四）——分页和翻页
Andy_lau
08-28 3407
目录：     1.bootstrap分页     2 bootstrap标签 1.bootstrap分页     1.1 总结      1.2 代码示例 12html>3head lang="en">4    meta charset="UTF-8">5    title>组件title>6    7    link hr
boostrp 分页格式
qq_39612654的博客
03-31 149
默认分页格式 <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li>&...
关于vue的那些事
dj1540225203的博客
05-21 200
以前，看到vue觉得特别难，其实也没啥的，会用就好，代码思想都差不多，简单的前端数据访问渲染自己处理就好了，省的麻烦前端，自己丰衣足食！ 1.引入vue.js该引入的东西，不懂看文档哦 2.定义标签如：id="#app" 3.使用vue实例化渲染数据，ajax请求等。 //前端代码 <div id="app"> <!-- 设置核销员 --> <div class="modal fade" id="edit" tabi
bootstrap中，使用Pagination处理前后端分页
热门推荐
天涯的博客
12-26 1万+
在前端界面编辑过程中，我们经常遇到需要进行分页处理的情况，很多博客都介绍了表格进行前后端分页处理的方法，本博客主要介绍非表格处理时(例如template)，使用Pagination处理前后端分页方法。
bootstrap 分页学习笔记
yijing_的博客
07-19 305
1.分页代码 &lt;div class="container"&gt;   &lt;nav aria-label="Page navigation"&gt;    &lt;ul class="pagination"&gt;     &lt;li&gt;      &lt;a href="#" aria-label="Previous"
bootstrap-form-builder-gh-pages
最新发布
07-10
总之，bootstrap-form-builder-gh-pages 是一个使用 Bootstrap 框架构建的表单生成器的 GitHub 页面，提供了方便的界面和功能，帮助开发者快速生成各种类型的表单，并且通过 GitHub 的协作功能，可以与其他开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值