Bootstrap 5 导航组件详解
Bootstrap 5 作为当前主流的前端框架,其导航组件在构建响应式布局时扮演着核心角色。无论是顶部导航栏还是选项卡切换,掌握这些组件的用法能显著提升开发效率。
导航栏实战
导航栏通常位于页面顶部,支持品牌标识、链接列表以及表单控件。通过 .navbar-expand-lg 等类,我们可以控制其在不同屏幕尺寸下的折叠行为。这里有个细节,.container-fluid 会让内容撑满容器宽度,而 .container 则居中并限制最大宽度,根据设计需求选择即可。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 =>
Home
Features
Disabled

