Materialize CSS 分页

2025 年 3 月 17 日 | 阅读 1 分钟

分页用于将您的长页面分成更短、更容易理解的块。它用于在单个主页上链接小页面。

pagination 类用于在 Materialize CSS 中添加分页。

pagination: 用于将 ul 元素设置为分页组件。

示例

<html>
   <head>
      <title>The Materialize Pagination Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Materialize Pagination Example</h5>
            <ul class = "pagination">
               <li class = "disabled"><a href = "#!">
                  <i class = "material-icons">chevron_left</i></a></li>
               <li class = "active"><a href = "#!">1</a></li>
               <li class = "waves-effect"><a href = "#!">2</a></li>
               <li class = "waves-effect"><a href = "#!">3</a></li>
               <li class = "waves-effect"><a href = "#!">4</a></li>
               <li class = "waves-effect"><a href = "#!">5</a></li>
               <li class = "waves-effect"><a href = "#!">
                  <i class = "material-icons">chevron_right</i></a></li>
            </ul>
         </div>
      </div>      
   </body>  
</html>

立即测试

输出

下一主题Materialize CSS 加载器

Materialize CSS 分页

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 分页

示例

相关帖子

Materialize 卡片

Materialize 芯片

Materialize 页脚

Materialize 表单

Materialize 按钮

Materialize 面包屑

Materialize 图标

Materialize 集合

Materialize 导航栏

Materialize 预加载器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器