Bootstrap是一款广受欢迎的前端框架，它提供了很多常用的UI组件和样式，能够帮助我们快速构建出漂亮的网站。其中路径导航和分页是非常常见的组件，本文将介绍如何使用Bootstrap来实现这两个组件。
路径导航
路径导航通常用于显示当前页面所属的位置，以及上一级、上上级等链接，方便用户进行页面跳转。Bootstrap提供了一个简单易用的路径导航组件，使用起来非常方便。
基本用法
下面是一个基本的路径导航示例：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>这里使用了<nav>元素和<ol>元素来构建路径导航，其中aria-label属性用于描述该组件的用途，class属性为breadcrumb表示这是一个路径导航组件。<li>元素表示每个路径节点，active类表示当前节点，aria-current="page"属性也用于描述当前节点。
高级用法
除了基本的用法外，Bootstrap还提供了很多自定义选项，可以根据需要来灵活配置路径导航组件。
例如，我们可以添加图标、禁用链接等：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fa fa-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
<li class="breadcrumb-item disabled">Disabled</li>
</ol>
</nav>这里使用了FontAwesome图标库中的fa-home图标，并在第四个节点上加上了disabled类，使它不能被点击。
分页
分页是非常常见的UI组件，通常用于展示大量数据时进行分页展示。Bootstrap也提供了一个简单易用的分页组件，下面介绍如何使用。
基本用法
下面是一个基本的分页示例：
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- -------------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------这里使用了<nav>元素和<ul>元素来构建分页组件，其中aria-label属性用于描述该组件的用途，class属性为pagination表示这是一个分页组件。<li>元素表示每个分页节点，page-item类表示普通节点，active类表示当前节点。
高级用法
Bootstrap还提供了很多自定义选项，可以根据需要来灵活配置分页组件。
例如，我们可以设置最大显示页数、添加上一页和下一页按钮等：
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2308) ，转载请注明来源
[https://www.javascriptcn.com/post/2308](https://www.javascriptcn.com/post/2308)