网络编程 
首页 > 网络编程 > 浏览文章

Bootstrap基本组件学习笔记之分页(12)

(编辑:jimmy 日期: 2025/7/6 浏览:3 次 )

Bootstrap提供了对分页的良好支持。

0x01 默认的分页

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

效果如下:

Bootstrap基本组件学习笔记之分页(12)

上面增加了disabled和active的效果。

0x02 综合案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

效果如下:

Bootstrap基本组件学习笔记之分页(12)

0x03 翻页

下面的例子演示.pager的样式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

效果如下:

Bootstrap基本组件学习笔记之分页(12)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:Bootstrap基本组件学习笔记之缩略图(13)
下一篇:浅谈Node.js:fs文件系统模块
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。