BootStrap-CSS樣式_佈局元件_分頁翻頁
阿新 • • 發佈：2019-01-01
Bootstrap 支援的分頁特性
pagination樣式：新增該 class 來在頁面上顯示分頁
active樣式：預設選中，指示當前的頁面
disbaled樣式：定義不可點選的連結
Pager樣式：新增該 class 來獲得翻頁連結
previous樣式： 把連結向左對齊
next樣式： 把連結向右對齊。
pull-left樣式：左浮動
pagination-lg樣式：外觀大小，大分頁
pagination：外觀大小，預設分頁
pagination-sm 樣式：外觀大小，小分頁
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>分頁</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:20px;"> <!-- pagination樣式：新增該 class 來在頁面上顯示分頁 active樣式：預設選中，指示當前的頁面 disbaled樣式：定義不可點選的連結 Pager樣式：新增該 class 來獲得翻頁連結 previous樣式： 把連結向左對齊 next樣式： 把連結向右對齊。 pull-left樣式：左浮動 pagination-lg樣式：外觀大小，大分頁 pagination：外觀大小，預設分頁 pagination-sm 樣式：外觀大小，小分頁 --> <div class="container"> <h2>1.預設的分頁</h2> <ul class="pagination"> <li><a href="#">«</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="#">»</a> </li> </ul> </div> <div class="container"> <h2>2.分頁的狀態</h2> <ul class="pagination"> <li><a href="#">«</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="#">»</a> </li> </ul> </div> <div class="container" style="padding:20px"> <h2>3.分頁的大小</h2> <div class="pull-left"> <h4>大分頁</h4> <ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a> </li> </ul> </div> <div class="pull-left"> <h4>預設分頁</h4> <ul class="pagination"> <li><a href="#">«</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="#">»</a> </li> </ul> </div> <div class="pull-left"> <h4>小分頁</h4> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a> </li> </ul> </div> </div> <div class="container"> <h2>4.翻頁Pager</h2> <ul class="pager"> <li><a href="#">上一頁</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="#">下一頁</a> </li> </ul> </div> <div class="container"> <h2>5.翻頁對齊方式</h2> <ul class="pager"> <li class="previous"><a href="#">←上一頁</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 class="next"><a href="#">下一頁→</a> </li> </ul> </div> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
