分页用于将你的长页面分成较短, 更易于理解的块。它用于链接单个主页上的小页面。
分页类用于在Materialize CSS中添加分页。
分页:用于将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.jquery.com/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 = "http://www.srcmini.com/#!">
<
i class = "material-icons">
chevron_left<
/i>
<
/a>
<
/li>
<
li class = "active">
<
a href = "http://www.srcmini.com/#!">
1<
/a>
<
/li>
<
li class = "waves-effect">
<
a href = "http://www.srcmini.com/#!">
2<
/a>
<
/li>
<
li class = "waves-effect">
<
a href = "http://www.srcmini.com/#!">
3<
/a>
<
/li>
<
li class = "waves-effect">
<
a href = "http://www.srcmini.com/#!">
4<
/a>
<
/li>
<
li class = "waves-effect">
<
a href = "http://www.srcmini.com/#!">
5<
/a>
<
/li>
<
li class = "waves-effect">
<
a href = "http://www.srcmini.com/#!">
<
i class = "material-icons">
chevron_right<
/i>
<
/a>
<
/li>
<
/ul>
<
/div>
<
/div>
<
/body>
<
/html>
【Materialise CSS分页】立即测试
输出
文章图片
推荐阅读
- Materialise CSS轮播
- Materialise CSS导航栏
- Materialise CSS图标
- appium安卓自动化常见问题处理
- Java + Selenium + Appium手机自动化测试
- MyBatis小问题-Mapper中错误No constructor found...
- 绝地求生全军出击电脑版怎么玩(绝地求生全军出击安卓模拟器攻略)
- Failed to load C:ProgramFilesTwoAndroidsdkuild-tools27.0.3libdx.jar
- 智能家居 手机一键自配置APP