Penomboran Bootstrap
Bab ini akan menerangkan ciri paging yang disokong oleh Bootstrap. Penomboran ialah senarai tidak tertib Bootstrap mengendalikan penomboran seperti elemen antara muka yang lain.
Penomboran
Jadual berikut menyenaraikan kelas yang disediakan oleh Bootstrap untuk mengendalikan penomboran.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 | <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
| .disabled, .active | 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 | <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 | <ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
Penomboran Lalai
Contoh berikut menunjukkan penggunaan kelas .penomboran yang dibincangkan dalam jadual di atas:
Contoh
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat status contoh dalam talian
penomboran
Contoh berikut menunjukkan penggunaan kelas .disabled, .active dibincangkan dalam jadual di atas:
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的状态</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Saiz halaman
Contoh berikut menunjukkan perkara di atas jadual Membincangkan penggunaan kelas .penomboran-*:
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的大小</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pagination pagination-lg"> <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><br> <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><br> <ul class="pagination pagination-sm"> <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> </body> </html>
Jalankan instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Halaman (Pager)
Jika anda ingin mencipta pautan paging mudah untuk menyediakan navigasi untuk pengguna, anda boleh lakukan ia dengan membelok halaman mencapai. Seperti pautan penomboran, paging juga merupakan senarai tidak tersusun. Secara lalai, pautan dipusatkan. Jadual berikut menyenaraikan kelas Bootstrap yang mengendalikan perubahan halaman.
| Kelas | Penerangan | Kod Contoh | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .pager | Tambahkan kelas ini untuk mendapatkan pautan membelok halaman. | <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> | ||||||||||||
| .sebelumnya, .next | Gunakan kelas
| <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 翻页中对齐的链接</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </body> </html> | ||||||||||||
| .disabled | Tambahkan kelas ini untuk mendapatkan penampilan pudar. | <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 翻页的状态</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </body> </html> |
Paging lalai
Contoh berikut menunjukkan penggunaan kelas .pager yang dibincangkan dalam jadual di atas:
Pautan sejajar
di bawah contoh menunjukkan penggunaan kelas .sebelumnya, .next dibincangkan dalam jadual di atas:
Status perubahan halaman
Contoh berikut menunjukkan kelas yang dibincangkan dalam jadual di atas < Penggunaan daripada 🎜>.disabled:
