五、Bootstrap之菜单栏和导航栏

Itcodewizard

已于 2024-05-14 10:02:27 修改

阅读量2.6k

点赞数 18

分类专栏： Bootstrap基础文章标签： bootstrap 前端 html

于 2024-05-14 09:55:02 首次发布

本文链接：https://blog.csdn.net/Itcodewizard/article/details/138837464

版权

Bootstrap基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

前言

一、菜单栏和导航栏要学习什么？
组件：
布局：
二、使用步骤

1.引入bootstrap样式文件和jquery

2.水平导航栏

3.垂直导航栏

4.胶囊导航选项卡（垂直形式）

5.水平导航栏（填充和对齐）

6.胶囊式水平导航

7.带下拉菜单的标签导航

总结

前言

本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如 .navbar、.nav、.navbar-brand、.nav-item、.nav-link 等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。

学习方法：1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；2、查看 Bootstrap 官方示例或其他开源项目中关于菜单栏和导航栏的用法，借鉴他人的实践经验。

一、菜单栏和导航栏要学习什么？

学习 Bootstrap 中的菜单栏（Menu Bar）和导航栏（Navbar）涉及以下组件和布局：

组件：

Navbar（导航栏）：
- .navbar：用于创建基本的导航栏容器。
- .navbar-brand：用于显示品牌 LOGO 或网站名称。
- .navbar-toggler：用于在小屏幕上显示折叠按钮。
- .navbar-collapse：用于包裹导航链接，使其能够响应折叠按钮的点击事件。
- .navbar-nav：用于包裹导航链接的列表。
Navs（导航链接）：
- .nav：用于创建导航链接的容器。
- .nav-item：用于每个导航项。
- .nav-link：用于导航链接。
Dropdowns（下拉菜单）：
- .dropdown：用于创建下拉菜单的容器。
- .dropdown-menu：下拉菜单的选项列表。
- .dropdown-item：下拉菜单中的每个选项。

布局：

水平导航栏：导航栏中的导航链接水平排列。
垂直导航栏：导航栏中的导航链接垂直排列。
折叠导航栏：在小屏幕上，导航栏中的导航链接会被折叠起来，通过折叠按钮展开或收起。
固定导航栏：导航栏固定在页面顶部或底部，当用户向下滚动页面时会保持可见。
响应式设计：导航栏能够在不同屏幕尺寸下自适应，保持良好的显示效果。

二、使用步骤

1.引入bootstrap样式文件和jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body>

</body>
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

2.水平导航栏

运行截图：

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container border">
<h3 class="mb-4">居中对齐</h3>
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a href="#" class="nav-link active">网站首页</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">新闻中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">模板中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
    </li>
</ul>
<h3 class="my-5 mb-3">右对齐</h3>
<ul class="nav justify-content-end">
      <li class="nav-item">
        <a href="#" class="nav-link active">网站首页</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">新闻中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">模板中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
    </li>

</ul>


<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

3.垂直导航栏

运行截图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navbar with Dropdown Menu</title>
<!--    Bootstrap核心css文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav flex-column">
                <li class="nav-item active">
                    <a class="nav-link" href="#">主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
                <li class="nav-item dropright">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        技术服务
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">产品手册</a>
                        <a class="dropdown-item" href="#">系统驱动</a>
                        <a class="dropdown-item" href="#">常见问题</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系方式</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

4.胶囊导航选项卡（垂直形式）

运行截图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container border bg-light">
<h3 class="mb-4">胶囊导航选项卡（垂直形式）</h3>
<div class="row">
    <div class="col-4">
        <ul class="nav nav-pills flex-column">
            <li class="nav-item">
                <a href="#head" class="nav-link active" data-toggle="pill">网站首页</a>
            </li>
            <li class="nav-item">
                <a href="#new" class="nav-link" data-toggle="pill">新闻中心</a>
            </li>
            <li class="nav-item">
                <a href="#template" class="nav-link" data-toggle="pill">模板展示</a>
            </li>
            <li class="nav-item">
                <a href="#about" class="nav-link" data-toggle="pill">关于我们</a>
            </li>
        </ul>
    </div>
    <div class="col-8">
        <div class="tab-content">
            <div class="tab-pane active" id="head">网站首页内容</div>
            <div class="tab-pane" id="new">新闻中心内容</div>
            <div class="tab-pane" id="template">模板展示内容</div>
            <div class="tab-pane" id="about">关于我们内容</div>
        </div>
    </div>
</div>



<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

5.水平导航栏（填充和对齐）

运行截图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container border">
<h3 class="mb-4">填充和对齐</h3>
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a href="#" class="nav-link active">网站首页</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link">新闻中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">模板中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
    </li>
</ul>



<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

6.胶囊式水平导航

运行截图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container border">
<h3 class="mb-4">胶囊式导航</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link">网站首页</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">新闻中心</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item active">新闻1</a>
            <a href="#" class="dropdown-item">新闻2</a>
            <a href="#" class="dropdown-item">新闻3</a>
        </div>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">模板中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
    </li>
</ul>



<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

7.带下拉菜单的标签导航

运行截图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>认识CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container border">
<h3 class="mb-4">带下拉菜单的标签导航</h3>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link active">网站首页</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">新闻中心</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item active">新闻1</a>
            <a href="#" class="dropdown-item">新闻2</a>
            <a href="#" class="dropdown-item">新闻3</a>
        </div>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">模板中心</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
    </li>
</ul>



<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

总结

以上就是今天要讲的内容，本文仅仅简单学习 Bootstrap 的菜单栏和导航栏涉及掌握导航栏组件（如.navbar、.navbar-brand、.navbar-toggler）、导航链接组件（如.nav、.nav-item、.nav-link）、下拉菜单组件（如.dropdown、.dropdown-menu、.dropdown-item）等内容。同时，需要了解不同布局方式（水平、垂直、固定、响应式设计）的实现方法，以便创建具有各种样式和功能的导航元素。通过阅读文档、实践编码和参考示例，可以掌握 Bootstrap 菜单栏和导航栏的基本用法和定制技巧。