Navs(导航)
Navs 是 Bootstrap 中的一个组件,用于创建水平或垂直的导航链接组。它可以用于创建主导航、面包屑导航、选项卡导航等。
基本用法
HTML 结构通常包括一个 <ul>
或 <div>
元素,其中包含多个 <li>
或 <a>
元素,每个元素代表一个导航项。
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
类名解释
nav
: 用于<ul>
或<div>
元素,表示这是一个导航组。nav-item
: 用于<li>
元素,表示这是一个导航项。nav-link
: 用于<a>
元素,表示这是一个导航链接。active
: 可选类,用于指示当前活动的导航链接。
垂直导航
要创建垂直导航,你可以添加 flex-column
类到 <ul>
或 <div>
元素上。
<ul class="nav flex-column">
<!-- Nav items -->
</ul>
Tabs(选项卡)
Tabs 是另一种导航形式,允许用户在不同的内容区域之间切换。在 Bootstrap 5 中,Tabs 组件与 Navs 组件紧密结合,使用相同的 HTML 结构和类名。
基本用法
HTML 结构通常包括一个包含导航链接的 <ul>
或 <div>
,以及一个或多个包含选项卡内容的 <div>
。
<!-- Navbar with tabs -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features" data-bs-toggle="tab">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing" data-bs-toggle="tab">Pricing</a>
</li>
</ul>
</div>
</nav>
<!-- Tab contents -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<!-- Content for Home tab -->
</div>
<div class="tab-pane" id="features">
<!-- Content for Features tab -->
</div>
<div class="tab-pane" id="pricing">
<!-- Content for Pricing tab -->
</div>
</div>
类名解释
tab-content
: 用于包含所有选项卡内容的<div>
元素。tab-pane
: 用于每个选项卡内容的<div>
元素。active
: 用于指示哪个选项卡内容应该是默认显示的。
JavaScript 交互
为了使 Tabs 正常工作,你需要引入 Bootstrap 的 JavaScript 插件。
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
总结
Bootstrap 5 中的 Navs 和 Tabs 提供了灵活且易于使用的工具,以创建各种类型的导航结构。通过简单的 HTML 结构和类名,你可以快速构建出美观且功能丰富的导航和选项卡界面。此外,结合 Bootstrap 的 JavaScript 插件,你可以实现更多高级的交互效果。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容