Bootstrap 5的navbar-expand-lg到底是干什么的？使用场景是什么？底层原理是什么？

快点好好学习吧

于 2024-11-29 16:37:44 发布

阅读量1k

点赞数 24

分类专栏： PHP 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq_36777143/article/details/144112293

版权

PHP 专栏收录该内容

3090 篇文章

订阅专栏

在 Bootstrap 5 中，navbar-expand-lg 是一个用于导航栏（navbar）的类，它控制着导航栏在不同屏幕尺寸下的显示方式。具体来说，navbar-expand-lg 类使得导航栏在大屏幕设备（如桌面显示器）上展开显示菜单项，而在较小的屏幕上则折叠成一个汉堡包图标（通常称为“折叠菜单”或“折叠按钮”）。

使用场景

响应式设计：当需要根据屏幕大小调整导航栏布局时，使用 navbar-expand-lg 可以确保在较大屏幕上显示完整的导航链接，而在较小屏幕上将这些链接折叠起来。
移动优先：在移动端优先的设计中，navbar-expand-lg 允许你为小屏幕设备提供简洁的界面，同时在大屏幕上展示更多的信息和功能。
用户体验：通过在不同的屏幕尺寸上提供适合的导航体验，可以提高用户的满意度。例如，在手机上，用户可能更喜欢点击一个按钮来查看所有选项，而不是滚动长列表。

底层原理

navbar-expand-lg 的工作原理基于 CSS 媒体查询（media queries）。Bootstrap 使用媒体查询来定义何时应用特定样式。对于 navbar-expand-lg，Bootstrap 设置了一个断点，这个断点是针对大于等于 lg（large）屏幕尺寸的，即宽度大于等于 992px 的屏幕。以下是它的底层实现：

默认折叠：如果没有 navbar-expand-* 类，导航栏默认处于折叠状态，所有的导航链接都会被隐藏在一个折叠按钮下。
媒体查询：当屏幕宽度达到或超过 lg 断点时，navbar-expand-lg 类会生效，此时导航栏会展开，所有的导航链接会水平排列显示。
CSS 样式：navbar-expand-lg 类通过设置一系列的 CSS 属性来改变导航栏的行为，包括但不限于：
- flex-direction: row; 将导航项改为行内显示。
- justify-content: space-between; 在导航项之间添加间距。
- display: flex; 使用 Flexbox 布局来管理导航项的位置。
- 隐藏折叠按钮，并显示导航链接。
JavaScript 支持：虽然 navbar-expand-lg 主要依赖于 CSS，但 Bootstrap 还提供了 JavaScript 插件来处理折叠/展开动画以及交互逻辑。这确保了即使在没有 CSS 动画支持的浏览器中，导航栏也能正常工作。

示例代码

以下是一个简单的示例，展示了如何使用 navbar-expand-lg 来创建一个响应式的导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Navbar Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">我的网站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            服务
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">服务一</a></li>
                            <li><a class="dropdown-item" href="#">服务二</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">其他服务</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">联系</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
                    <button class="btn btn-outline-success" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>