Bootstrap 提供了丰富的导航元素,可以帮助我们创建各种不同风格的导航菜单。在本章节中,我们将介绍 Bootstrap 中常用的导航元素及其用法。
导航栏
导航栏是网站中最常见的导航元素之一,它通常位于页面的顶部,用于展示网站的主要导航链接。在 Bootstrap 中,我们可以使用 .navbar
类来创建导航栏。
-- -------------------- ---- ------- ---- ------------- ---------------- ---- ------------------ ---- ---------------------- ------- ------------- -------------------- ---------- ---------------------- --------------------- --------------------- ----------------------- ----- ---------------------- ----------------- ----- ------------------------ ----- ------------------------ ----- ------------------------ --------- -- -------------------- ------------------ ------ ---- ----------- ---------------------- ---------- --- ---------- ------------ --- ----------------- ---------------------- ------ ----------------------- ------ -------------------------- ------ ------------------------- ----- ------ ------ ------
在上面的示例代码中,我们创建了一个基本的导航栏,包含了一个品牌标识和四个导航链接。通过添加不同的 Bootstrap 类,我们可以定制导航栏的样式和布局。
标签页
标签页是另一种常见的导航元素,可以用来切换不同内容区域。在 Bootstrap 中,我们可以使用 .nav-tabs
类来创建标签页。
-- -------------------- ---- ------- --- ---------- ---------- --- ----------------- ------------ --------------------- ---------- ------ ------------ --------------------- ---------- ------ ------------ --------------------- ---------- ----- ---- -------------------- ---- --------------- ------- ---------- ------ - ----------- ------ ---- ---------------- ---------- ------ - ----------- ------ ---- ---------------- ---------- ------ - ----------- ------ ------
在上面的示例代码中,我们创建了一个包含三个标签页的标签页导航。每个标签页都有对应的内容区域,通过点击不同的标签页可以切换显示不同的内容。
面包屑导航
面包屑导航用来显示当前页面在网站结构中的位置,通常以层级结构展示。在 Bootstrap 中,我们可以使用 .breadcrumb
类来创建面包屑导航。
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li class="active">Current Page</li> </ol>
在上面的示例代码中,我们创建了一个包含三个层级的面包屑导航,显示当前页面在网站结构中的位置。
以上是关于 Bootstrap 导航元素的介绍,希望能帮助你更好地使用 Bootstrap 创建漂亮的导航菜单。