Bootstrap的导航菜单组件相关知识

news2024/11/20 0:39:58

目录

  • 01-最基本的导航示例
  • 02-设置导航的对齐方式
    • 02-1-设置导航在水平方向上的对齐方式
  • 02-2-设置导航在垂直方向上进行布局
  • 03-设计标签页导航
  • 04-带下拉菜单的标签页导航
  • 05-设计胶囊式导航
    • 05-1-基本的胶囊式导航
    • 05-2-带下拉菜单的胶囊式导航
  • 06-让导航菜单项可以切换(激活导航菜单项的交互行为)
  • 07-菜单项填充水平空间

01-最基本的导航示例

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<nav class="nav">
    <a class="nav-link active" href="#">首页</a>
    <a class="nav-link" href="#">热门课程</a>
    <a class="nav-link" href="#">技术支持</a>
    <a class="nav-link " href="#">联系我们</a>
</nav>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

02-设置导航的对齐方式

02-1-设置导航在水平方向上的对齐方式

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置导航水平方向对齐</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container border">
<h3 align="center">水平方向居中对齐</h3>
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#">联系我们</a>
    </li>
</ul>
<h3 align="center">水平方向右对齐</h3>
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

02-2-设置导航在垂直方向上进行布局

使用类flex-column可以设置导航的垂直布局。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直对齐布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">垂直方向布局</h3>
<ul class="nav flex-column border">
    <li class="nav-item">
        <a class="nav-link active" href="#">家用电器</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">电脑办公</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">家装厨具</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">箱包钟表</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">食品生鲜</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">礼品鲜花</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-设计标签页导航

可以使用类nav-tabs实现标签页导航效果：
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标签页导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">标签页导航</h3>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述
看到这里，估计还是不明白什么是“标签页导航”的效果，那我们去掉类 nav-tabs ，就知道了，去掉类nav-tabs 的效果如下：
在这里插入图片描述

04-带下拉菜单的标签页导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带下拉菜单的标签页导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">带下拉菜单的标签页导航</h3>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">热门课程</a>
        <div class="dropdown-menu">
            <a class="dropdown-item active" href="#">网络安全训练营</a>
            <a class="dropdown-item" href="#">Python智能开发训练营</a>
            <a class="dropdown-item" href="#">网站开发训练营</a>
            <a class="dropdown-item" href="#">Java开发训练营</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

05-设计胶囊式导航

05-1-基本的胶囊式导航

可以用类nav-pills实现胶囊式导航的效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>胶囊式导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">胶囊式导航</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述
非胶囊式导航的效果如下：
在这里插入图片描述

05-2-带下拉菜单的胶囊式导航

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带下拉菜单的胶囊式导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">带下拉菜单的胶囊式导航</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">热门课程</a>
        <div class="dropdown-menu">
            <a class="dropdown-item active" href="#">网络安全训练营</a>
            <a class="dropdown-item" href="#">Python智能开发训练营</a>
            <a class="dropdown-item" href="#">网站开发训练营</a>
            <a class="dropdown-item" href="#">Java开发训练营</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

06-让导航菜单项可以切换(激活导航菜单项的交互行为)

上面的示例中的菜单项都不可以切换，通过这一部分的学习，使得菜单项可以切换，即导航菜单项的交互行为)。
这里以“胶囊式导航”为例来说明这个问题。
①为每个导航菜单项上的超链接定义 data-toggle="pill"属性 或 data-toggle="tab"属性，“胶囊式导航”用data-toggle="pill"属性 ，标签页导航用data-toggle="tab"属性。
②在导航结构基础上添加各导航菜单的内容结构。使用类tab-content定义内容显示结构。在内容包含结构中插入与导航结构对应的多个子内容框，并使用类tab-pane定义每一个子内容框。同时为每个子内容框定义id值，并在导航菜单项中为超链接绑定锚链接。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>胶囊导航选项切换</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">胶囊导航选项切换</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#head">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#new">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#template">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#about">联系我们</a>
    </li>
</ul>
<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">联系昊虹AI笔记</div>

</html></div>
</body>

运行效果如下：
在这里插入图片描述
在这里插入图片描述

07-菜单项填充水平空间

nav-fill类会将含有nav-item类的元素按照比例分配空间。注意：nav-fill类是分配导航菜单所有的水平空间，不是设置每个导航菜单项的宽度相同。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>填充</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">填充</h3>
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">热门课程和热门专业</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1094928.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

精品基于django的高校竞赛比赛管理系统Python

精品基于django的高校竞赛比赛管理系统Python

《[含文档PPT源码等]精品基于django的高校竞赛管理系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;python 使用框架&#xff1a;Django 前端技术&#xff1a;JavaScri…
阅读更多...
宝塔面板部署express以及MySql项目

宝塔面板部署express以及MySql项目

第一次在宝塔面板上部署express和MySql项目&#xff0c;部署过程一直跑不通接口&#xff0c;特此记录一下。 在部署的时候&#xff0c;建议第一步把数据库MySql给跑通&#xff0c;中间好多原因是由于数据库的原因给引起的。 一.连接数据库 &#xff08;1&#xff09;在宝塔面…
阅读更多...
IP 协议的相关特性（部分）

IP 协议的相关特性（部分）

IP 协议的报文格式 4位版本号&#xff1a; 用来表示IP协议的版本&#xff0c;现有的IP协议只有两个版本&#xff0c;IPv4&#xff0c;IPv6。 4位首部长度&#xff1a; 设定和TCP的首部长度一样 8位服务类型&#xff1a; &#xff08;真正只有4位才有效果&#xff09;&#xf…
阅读更多...
教你快速解决unity无法添加脚本bug

教你快速解决unity无法添加脚本bug

原因一 就是报错的字面意思&#xff0c;文件名与类名不一致&#xff01; 原因二 与版本不兼容的汉化导致系统出错&#xff01; 解决办法一 使用原版本自带的英文显示 解决办法二 更换汉化包 我其实更加推荐使用英文版本的Unity&#xff01;
阅读更多...
Rust闭包 - Fn/FnMut/FnOnce traits，捕获和传参

Rust闭包 - Fn/FnMut/FnOnce traits，捕获和传参

Rust闭包: 是一类能够 捕获周围作用域中变量 的 函数 |参数| {函数体} 参数及返回值类型可推导&#xff0c;无需显示标注类型唯一性&#xff0c;确定后不可更改函数体为单个表达式时&#xff0c;{}可省略 文章目录 引言1 分类 Fn / FnMut / FnOnce2 关键词 move3 闭包作为参数…
阅读更多...
MySQL8安装步骤

MySQL8安装步骤

本次安装所需版本为MySQL8.0.24,客户端工具选用的是Navicat11. 大家可以进入官网下载其它版本&#xff0c; 1.双击安装文件 2.等待一段时间进入以下界面 3.选择Custom,点击Next 4.进入以下界面&#xff0c;需要C2019的环境&#xff0c;选中此行然后Execute执行。 5.点击Exe…
阅读更多...
论文解析——一种多核处理器直连接口QoS的设计与验证

论文解析——一种多核处理器直连接口QoS的设计与验证

作者 罗莉&#xff0c;周宏伟&#xff0c;周理&#xff0c;潘国腾&#xff0c;周海亮&#xff08; 国防科技大学&#xff09; 刘彬 &#xff08; 武警贵州省总队&#xff09; 摘要 多核处理器直接互连构建多路并行系统&#xff0c;一直是提高高性能计算机并行性的主要方式。…
阅读更多...
【Hello Algorithm】暴力递归到动态规划（三）

【Hello Algorithm】暴力递归到动态规划（三）

暴力递归到动态规划&#xff08;三&#xff09; 最长公共子序列递归版本动态规划 最长回文串子序列方法一方法二递归版本动态规划 象棋问题递归版本动态规划 咖啡机问题递归版本动态规划 最长公共子序列 这是leetcode上的一道原题 题目连接如下 最长公共子序列 题目描述如下…
阅读更多...
三种对象注入的区别以及@Autowired和@Resource的区别

三种对象注入的区别以及@Autowired和@Resource的区别

文章目录 1. 对象注入1.2 属性注入1.2.1 属性注入的优缺点 1.3 Setter方法注入1.3.1 Setter注入的优缺点 1.4 构造方法注入&#xff08;官方推荐&#xff09;1.4.1 构造方法的优缺点 1.5 Resource与Autowired区别 1. 对象注入 获取Bean对象也称为对象注入/对象装配&#xff0c…
阅读更多...
Linux：Termius连接本地虚拟机与虚拟机快照

Linux：Termius连接本地虚拟机与虚拟机快照

Termius连接本地虚拟机与虚拟机快照 1. Termius连接本地虚拟机2. 虚拟机快照与还原2.1 设置快照以及恢复 附录 1. Termius连接本地虚拟机 ifconfig -a 查看配置 连接成功 2. 虚拟机快照与还原 在学习阶段我们无法避免的可能损坏Linux操作系统。 如果损坏的话&#xff0c;重新…
阅读更多...
FPGA复习（功耗）

FPGA复习（功耗）

减小功耗 就得减小电流 电流和CF有关&#xff08; C: 电容&#xff08;被门数目和布线长度影响&#xff09; F:时钟频率&#xff09; 方法大纲 减小功耗&#xff1a;1 时钟控制 2输入控制 3减小供电电压 4双沿触发器 5修改终端 同步数字电路降低动态功耗&#xff1a;动态禁止…
阅读更多...
零食百货经营商城小程序的作用是什么

零食百货经营商城小程序的作用是什么

零食可以只指某款单品&#xff0c;也可以是一堆各品牌食品&#xff0c;其行业涵盖人群广泛&#xff0c;主要以零售和批发为主&#xff0c;不受限制&#xff0c;各地从业商家也非常多&#xff0c;但随着线上电商崛起&#xff0c;零食经营痛点也逐渐凸显。 通过【雨科】平台搭建零…
阅读更多...
Elasticsearch实现检索词自动补全(检索词补全，自动纠错，拼音补全，繁简转换) 包含demo

Elasticsearch实现检索词自动补全(检索词补全，自动纠错，拼音补全，繁简转换) 包含demo

Elasticsearch实现检索词自动补全 自动补全定义映射字段建立索引测试自动补全 自动纠错查询语句查询结果 拼音补全与繁简转换安装 elasticsearch-analysis-pinyin 插件定义索引与映射建立拼音自动补全索引测试拼音自动补全测试繁简转换自动补全 代码实现demo结构demo获取 自动补…
阅读更多...
C# 图解教程 第5版 —— 第5章 类的基本概念

C# 图解教程 第5版 —— 第5章 类的基本概念

文章目录 5.1 类的概述5.2 程序和类&#xff1a;一个简单的示例&#xff08;*&#xff09;5.3 声明类&#xff08;*&#xff09;5.4 类成员&#xff08;*&#xff09;5.4.1 字段&#xff08;*&#xff09;5.4.2 方法 5.5 创建变量和类的实例&#xff08;*&#xff09;5.6 为数据…
阅读更多...
解析找不到msvcp140.dll的5个解决方法，快速修复dll丢失问题

解析找不到msvcp140.dll的5个解决方法，快速修复dll丢失问题

​在使用计算机过程中&#xff0c;我们也会遇到各种各样的问题。其中&#xff0c;找不到msvcp140.dll修复方法是一个非常普遍的问题。msvcp140.dll是一个动态链接库文件&#xff0c;它是Microsoft Visual C 2015 Redistributable的一部分。这个文件包含了许多用于运行C程序的函…
阅读更多...
计算机网络基础（三）：IPv4编址方式、子网划分、IPv4通信的建立与验证及ICMP协议

计算机网络基础（三）：IPv4编址方式、子网划分、IPv4通信的建立与验证及ICMP协议

**IPv4地址是一个32位长的二进制数。**而这个32位二进制数又通常会表示为4个用点隔开的十进制数。那么&#xff0c;这个32位二进制数要如何通过4个十进制数表示出来呢&#xff1f; 我们在配置IPv4地址时&#xff0c;同时配置的“掩码”又有何用途&#xff1f; 1.IPv4编址方式…
阅读更多...
MySQL 约束,视图,索引及常见函数

MySQL 约束,视图,索引及常见函数

​​​​​​ ​​​​​​​ 2-MySQL 约束,视图,索引及常见函 1 SQL约束 SQL 约束用于规定表中的数据规则。实际上就是表中数据的限制条件。是为了保证数据的完整性而实现的一套机制。 MySQL的约束种类如下&#xff1a; 非空约束&#xff1a;NOT NULL NOT NULL约束强制…
阅读更多...
汉堡炸鸡快餐店商城小程序的作用是什么

汉堡炸鸡快餐店商城小程序的作用是什么

汉堡炸鸡等快餐店是不少年轻人常去的餐饮店&#xff0c;市场中除了头部品牌外&#xff0c;还有不少中小品牌&#xff0c;消费者选择度高&#xff0c;然而在实际经营中&#xff0c;面对线下流量匮乏、互联网电商发展&#xff0c;快餐店经营痛点不少。 对炸鸡汉堡店来说&#xf…
阅读更多...
全球产业链：脑机接口产业链

全球产业链：脑机接口产业链

本心、输入输出、结果 文章目录 全球产业链：脑机接口产业链前言马斯克旗下的脑机接口公司`Neuralink`宣布概念：什么是脑机接口脑机接口技术有哪几种路线脑机接口未来在各行业的应用脑机接口产业链上游脑机接口芯片脑电采集设备系统软件手术耗材脑机接口产业链中游脑机接口产业…
阅读更多...
扩散模型的系统性学习（一）：DDPM的学习

扩散模型的系统性学习（一）：DDPM的学习

文章目录 一、学习的资料1.1 对于扩散模型的发展过程的综述1.2对论文中涉及的公式以及公式对应的代码的解读1.3github中对于各模型实现的代码1.4相关基础知识的学习 二、DDPM的学习2.1 DDPM总体知识的梳理2.2相关代码的解读2.2.1unet 代码块2.2.2高斯扩散代码块2.2.3 实验流程代…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023