Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報(bào)）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動(dòng)視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進(jìn)度條）
Components: Scrollspy
Scrollspy（滾動(dòng)監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動(dòng)）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動(dòng)）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
文字
用于顯示分頁以指示多個(gè)頁面中存在的一系列相關(guān)內(nèi)容的文檔和示例。
概述
我們使用大量連接鏈接進(jìn)行分頁，使得鏈接很難丟失，并且易于擴(kuò)展--所有這些都提供了大的命中區(qū)域。分頁是由列表HTML元素構(gòu)建的，這樣屏幕閱讀器就可以公布可用鏈接的數(shù)量。使用包裝<nav>元素將其標(biāo)識(shí)為用于篩選閱讀器和其他輔助技術(shù)的導(dǎo)航部分。
此外，由于頁面可能有多個(gè)這樣的導(dǎo)航部分，因此建議提供一個(gè)描述性的aria-label為<nav>以反映它的目的。例如，如果分頁組件用于在一組搜索結(jié)果之間導(dǎo)航，則可以使用適當(dāng)?shù)臉?biāo)簽aria-label="Search results pages"...
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul></nav>
使用圖標(biāo)
尋找使用一個(gè)圖標(biāo)或符號(hào)代替文字的一些分頁鏈接？確保提供適當(dāng)?shù)钠聊蛔x取器支持aria屬性和.sr-only效用。
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul></nav>
禁用和活動(dòng)狀態(tài)
分頁鏈接可根據(jù)不同情況定制。使用.disabled對于出現(xiàn)不可點(diǎn)擊和不可點(diǎn)擊的鏈接。.active若要指示當(dāng)前頁，請執(zhí)行以下操作。
而.disabled類用途pointer-events: none到試一試的鏈接功能。<a>該CSS屬性還沒有標(biāo)準(zhǔn)化，也不考慮鍵盤導(dǎo)航。因此，您應(yīng)該始終添加tabindex="-1"禁用鏈接，并使用自定義JavaScript完全禁用它們的功能。
<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
您可以選擇將活動(dòng)的或禁用的錨交換為<span>，或者在PRV/Next箭頭的情況下省略錨，以刪除單擊功能并在保留預(yù)期樣式的同時(shí)防止鍵盤焦點(diǎn)。
<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <span class="page-link"> 2 <span class="sr-only">(current)</span> </span> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
上漿
喜歡更大還是更小的分頁？加.pagination-lg或.pagination-sm為了更大的尺寸。
<nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
<nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
對齊
更改分頁組件的對齊方式。撓曲箱公用設(shè)施...
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>
? 2011–2017 Twitter, Inc.
?2011-2017自帶作者
根據(jù)麻省理工學(xué)院的許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。