下面是一个简单的例子，使用
Bootstrap 4 的导航栏和
下拉菜单组件：
```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="#
navbar
Nav" aria-controls="
navbar
Nav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="
navbar-toggler-icon"></span>
</button>
<div class="collapse
navbar-collapse" id="
navbar
Nav">
<ul class="
navbar-
nav">
<li class="
nav-item active">
<a class="
nav-link" href="#">Home</a>
</li>
<li class="
nav-item">
<a class="
nav-link" href="#">About</a>
</li>
<li class="
nav-item dropdown">
<a class="
nav-link dropdown-toggle" href="#" id="
navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="
navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</
nav>
```
在这个例子中，我们使用了 `
navbar` 和 `
navbar-expand-lg` 类来创建导航栏，并使用了 `
navbar-light` 和 `bg-light` 类来定义颜色和背景。我们还添加了一个品牌标志和一个折叠按钮，用于在移动设备上折叠导航栏。
在导航栏中，我们使用 `
navbar-
nav` 类来创建一个无序列表，其中包含三个列表项。最后一个列表项使用了 `dropdown` 类来创建一个
下拉菜单，其中包含三个
下拉菜单项。我们还使用了 `dropdown-toggle` 类来创建一个可
点击的
下拉菜单按钮，并在 `data-toggle` 属性中指定了 `dropdown` 值，以便将
下拉菜单与按钮关联起来。最后，我们使用 `dropdown-menu` 类来创建
下拉菜单本身，并在 `aria-labelledby` 属性中使用 `
navbarDropdownMenuLink` 值指定
下拉菜单按钮的 ID。
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
