Bootstrap4 导航
Bootstrap4 导航
Bootstrap是一个流行的前端框架，Bootstrap提供了一套用于网站和网络应用的HTML、CSS、JavaScript组件和模板。在Bootstrap中，导航是最常用的组件之一。导航主要用于为用户提供网站或应用程序的结构和组织。
导航组件
Bootstrap有两种类型的导航：导航条和面包屑导航。
导航条
导航条展示在网站或应用程序的页面的顶部或底部。它通常包含网站或应用程序的标识、链接和下拉菜单等元素。
导航条的HTML结构
导航条的HTML结构如下：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
导航条的样式
Bootstrap提供了各种导航样式，可通过添加不同的class类实现，例如：
navbar-dark: 暗色导航条bg-dark: 暗色背景导航条navbar-expand-lg: 手机屏幕下折叠navbar-brand: 导航标识navbar-toggler: 折叠按钮collapse: 折叠内容navbar-nav: 导航菜单nav-item: 导航选项active: 选中选项disabled: 禁用选项
面包屑导航
面包屑导航通常出现在页面的顶部，用于显示用户当前所处的位置，并为用户提供导航返回上一层。
面包屑导航的HTML结构
面包屑导航的HTML结构如下：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
面包屑导航的样式
Bootstrap提供了各种面包屑导航的样式，可通过添加不同的class类实现，例如：
breadcrumb: 面包屑导航breadcrumb-item: 面包屑导航选项active: 选中选项
总结
Bootstrap的导航组件可用于网站和应用程序的结构和组织。导航条是最常用的导航组件之一，而面包屑导航则用于告诉用户当前所处的位置。开发人员可以通过添加不同的class类来对导航组件进行自定义修改。