Bootstrap - 分頁：初學者的全面指南

你好，有抱負的網頁開發者們！今天，我們將深入Bootstrap分頁的世界。作為你們友好的鄰居計算機老師，我很興奮能帶領你們走過這段旅程。別擔心你們是編程新手——我們會從基礎開始，逐步學習。在本教程結束時，你們將會成為分頁高手！

Bootstrap - Pagination

什麼是分頁？

在我們進入Bootstrap之前，先來了解什麼是分頁。想像你正在閱讀一本長篇的書。而不是將所有內容塞在壹頁上，它被分成可管理的部分——這就是數字世界中的分頁。它有助於將大量內容組織在多個頁面上，使用戶更容易導航。

Bootstrap分頁：基礎

Bootstrap，我們可靠的前端工具包，提供了一種簡單而時尚的方式來創建分頁。讓我們從基礎開始。

簡單分頁

要在Bootstrap中創建基本的分頁，我們使用帶有特定類的<nav>和<ul>元素。這裡有一個簡單的例子：

<nav aria-label="頁面導航">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一頁</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="#">下一頁</a></li>
</ul>
</nav>

讓我們分解一下：

<nav>元素包住了我們的分頁，為了語義目的。
<ul>有pagination類，這應用了Bootstrap的分頁樣式。
每個<li>代表壹個頁面，並有page-item類。
每個<li>內的<a>標籤有page-link類，這樣樣式化了可點擊的部分。

使用圖標

想要讓你的分頁看起來更酷嗎？讓我們添加壹些圖標！Bootstrap與Font Awesome等圖標庫配合得非常好。這是如何在分頁中使用圖標的例子：

<nav aria-label="頁面導航">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</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">&raquo;</span>
</a>
</li>
</ul>
</nav>

在這個例子中，我們使用了«和»來創建左和右的箭頭圖標。這些是HTML實體，分別渲染為«和»。

分頁狀態：禁用和活動

有時候，你可能想要突出顯示當前頁面或禁用某些導航選項。Bootstrap讓這些操作變得非常簡單，只需使用active和disabled類。

<nav aria-label="頁面導航">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一頁</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">下一頁</a>
</li>
</ul>
</nav>

在這裡，"上一頁"鏈接被禁用（你不能點擊它），而頁面2被標記為活動（當前選中的）。

大小

就像Goldilocks一樣，有时候你需要你的分頁剛剛好。Bootstrap提供了不同的尺寸選項：

<!-- 大尺寸分頁 -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

<!-- 小尺寸分頁 -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

添加pagination-lg以獲得更大的分頁，或者添加pagination-sm以獲得更小的分頁。這就像在您喜歡的咖啡店選擇大杯或小杯一樣！

對齊

默認情況下，分頁對齊到左邊。但如果你想要將其居中或推向右邊呢？Bootstrap為你提供了封面：

<!-- 居中對齊 -->
<nav aria-label="頁面導航">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一頁</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="#">下一頁</a>
</li>
</ul>
</nav>

<!-- 右對齊 -->
<nav aria-label="頁面導航">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一頁</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="#">下一頁</a>
</li>
</ul>
</nav>

使用justify-content-center來居中你的分頁，或者使用justify-content-end來將其對齊到右邊。

使用Flex工具對齊

為了對你的分頁對齊有更多的控制，你可以使用Bootstrap的flex工具：

<nav aria-label="頁面導航">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一頁</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="#">下一頁</a>
</li>
</ul>
</div>
</nav>

在這裡，我們將分頁包裹在壹個帶有d-flex和justify-content-center類的<div>中。這給你更多的灵活性在定位你的分頁。

結論

就是这样，各位！你剛剛完成了Bootstrap分頁的壹次盛大之旅。從基本結構到花哨對齊，你現在有了為你的網頁項目創建美觀、功能性的分頁的工具。記住，熟能生巧，所以不要害怕試驗這些例子。

這裡是壹個我們已經涵蓋的類別的快速參考表：

類別	用途
pagination	創建基本的分頁結構
page-item	樣式化分頁中的每個項目
page-link	樣式化每個項目的可點擊部分
active	突出顯示當前頁面
disabled	禁用分頁項目
pagination-lg	創建更大的分頁
pagination-sm	創建更小的分頁
justify-content-center	居中對齊分頁
justify-content-end	對齊分頁到右邊
d-flex	創建壹個flex容器

快樂編程，願你的頁面總是完美分頁！

Credits: Image by storyset