今天我要講述的是在BootStrap中第二篇關于進一步使用的方法與代碼舉例;

分頁：

對于一些大型網站而言，分頁是一個很有必要的存在，如果當數據內容過大時，則需要分頁來分擔一些，這可以使得大量內容能整合并全面地展示，這大大減小了網頁的長度。使分頁可以像翻書一樣，一頁一頁地展示且工整。

? 以下則是分頁欄的基礎框架：

<nav><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>
</nav>

效果展示：

注：可以通過增加樣式來美觀化分頁欄的整體形式，如：

?class="text-center" style="margin-top: -20px;"

效果：

注：通過調整的分頁欄可以看到其形比較工整，有一絲真正制作軟件的感覺（active意為：選中；即二號藍色框內效果顯示）

而上方效果圖內左右兩邊的上下一頁的效果則以下：

<nav style="margin-top: -20px;"><ul class="pager"><li style="float: left;"><a href="#">上一頁</a></li><li style="float: right;"><a href="#">下一頁</a></li></ul></nav>

列表組：

注：列表組是靈活又強大的組件，不僅能用于顯示一組簡單的元素，還能用于復雜的定制的內容。

介紹：最簡單的列表組僅僅是一個帶有多個列表條目的無序列表，另外還需要設置適當的類，可以根據自身的需求通過 CSS 自己定制。

<div class="list-group"><a href="#" class="list-group-item active">Cras justo odio</a><a href="#" class="list-group-item">Dapibus ac facilisis in</a><a href="#" class="list-group-item">Morbi leo risus</a><a href="#" class="list-group-item">Porta ac consectetur ac</a><a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

效果：（建議配合柵格效果制作）

縮略圖：

通過縮略圖組件擴展 Bootstrap 的?柵格系統，可以很容易地展示柵格樣式的圖像、視頻、文本等內容。

<!-- 面板內容 --><div class="panel-body"><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/3.jpg" width="100px" alt="...">   《==超鏈接<div class="caption"><h3 class="text-center">此處輸入文字</h3></div></div></div>

效果：(配合下方的面板互相作用制作)

面版：

對于面板來說，它更像是一個展示柜，可以為我們展示它的基本信息，相當于大街上的商店，為想要進店購買商品的顧客展示這家店鋪物品的“精美”，

           //面板風格
<div class="panel panel-default">//面板標題<div class="panel-heading">Panel heading without title</div>  《==標題//面板內容<div class="panel-body">Panel content</div>
</div>

?效果：(內容參照上方縮略圖相互作用制作)

進度條：

非常常見的一個小玩意兒，比如在我們熟知的4399小游戲里面就有好多它的身影，包括各類大型游戲。比如原神（原神加載新地區或者進入游戲中元素自左至右等效果也是進度條加載），王者榮耀這類游戲中（王者榮耀的百分比加載內容本質上就是進度條的一種，不過其樣式是不一樣的）

<!-- 進度條 --><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div></div>

效果：

總結：深入了解 Bootstrap 底層結構的關鍵部分，多使用并熟練是可以將 web 開發能變得更好、更快、更強壯的最佳實踐。希望本篇有關于 BootStrap進階使用第二篇的知識點內容能對你帶來一定的幫助，同時非常感謝各位大佬的點贊與支持，咱們下一篇不見不散。