五、Bootstrap之菜单栏和导航栏

Itcodewizard

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

阅读量4.1k

点赞数 18

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

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

本文链接：https://blog.youkuaiyun.com/Itcodewizard/article/details/138837464

版权

文章目录

前言

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

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:/

最低0.47元/天解锁文章