响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)

1.响应式导航栏介绍

响应式导航栏是一种在不同设备和屏幕尺寸下自适应布局和显示的导航栏。它可以根据用户所使用的设备(如桌面电脑、平板电脑或手机)自动调整其外观和交互方式,以提供更好的用户体验。

pc端:

手机端: 

2.BootStrap实现

最简单的方式是使用Bootstrap 框架,它提供了响应式的导航栏组件(Navbar),在电脑端显示为完整的导航栏,而在移动端则会以可展开的按钮形式呈现。

在 Bootstrap 中创建一个响应式导航栏,需要使用以下组件和类:

  1. <nav> 元素:用于定义导航栏的容器。
  2. .navbar 类:应用于 <nav> 元素,表示它是一个导航栏组件。
  3. .navbar-expand-* 类:用于控制导航栏在不同屏幕大小下的展开方式。* 可以是 sm(小屏幕)、md(中屏幕)、lg(大屏幕)或 xl(超大屏幕)。
  4. .navbar-toggler 类:用于创建导航栏的可展开按钮。
  5. .collapse 类:用于定义可折叠的导航栏内容。
  6. .navbar-collapse 类:应用于包含导航栏内容的容器,与 .collapse 类一起使用。

以下是一个示例代码,展示了如何使用 Bootstrap 创建一个响应式导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><title>Responsive Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"><a class="navbar-brand" href="#">Logo</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarContent"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></div>
</nav><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

效果:

3. 原生基于Flex布局实现

这里使用了@media来查询媒体的最大宽度,并以此改变样式,再使用flex弹性布局实现响应式导航栏:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* 全局样式 */body {margin: 0;padding: 0;font-family: Arial, sans-serif;}/* 导航栏样式 */.navbar {display: flex;justify-content: space-between;align-items: center;background-color: #333;color: #fff;padding: 10px;}.navbar-brand {font-size: 1.5rem;color: #fff;text-decoration: none;}.nav-button {display: none;float: right;}.navbar-nav {display: flex;flex-flow: row wrap;list-style-type: none;margin: 0;padding: 0;}.nav-item {margin-left: 10px;}.nav-link {color: #fff;text-decoration: none;}/* 媒体查询 */@media (max-width: 768px) {.navbar {flex-flow: row wrap;justify-content: space-between;}.nav-button {width: 20%;display: block;}.navbar-brand {width: 80%;}.navbar-nav {display: flex;flex-direction: column;align-items: center;width: 100%;}.nav-item {margin: 10px 0 0 0;}}</style><title>Responsive Navbar</title>
</head>
<body>
<nav class="navbar"><a class="navbar-brand" href="#">Logo</a><button class="nav-button" onclick="show()">展开</button><ul class="navbar-nav" id="navs"><li class="nav-item"><a class="nav-link" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul>
</nav>
</body>
<script>const show = () =>{let navs = document.getElementById("navs");if(navs.style.display === "none"){navs.style.display = "flex";}else{navs.style.display = "none";}}
</script>
</html>

效果和bootstrap效果一样,就是按钮我只用了文字,没有加上icon

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python进阶:装饰器

decorator 一、何为装饰器?<一>、装饰器<二>、带有参数的装饰器<三>、带有自定义参数的装饰器<四>、类装饰器<五>、装饰器的嵌套二、装饰器的功能?一、何为装饰器? <一>、装饰器 上一篇文章讲到了函数中的闭包,这篇文章讲讲python中的…

嵌入式开发行业会不会也变成java行业?

今日话题&#xff0c;嵌入式开发行业会不会也变成java行业&#xff1f;关于嵌入式行业的未来&#xff0c;与一些人的担忧不同&#xff0c;它并不会内卷化&#xff0c;而是具有相对稳定性的领域。嵌入式开发在制造业等重要第二产业中扮演着关键角色&#xff0c;这些领域的稳定性…

ubuntu部署llama2-chinese

ubuntu上安装cuda见之前的blog&#xff0c;已安装cuda12&#xff0c;使用nvcc-V 下载llama2-chinese&#xff1a;GitHub - FlagAlpha/Llama2-Chinese: Llama中文社区&#xff0c;最好的中文Llama大模型&#xff0c;完全开源可商用 conda create -n llamachinese python3.10 pi…

C#二甲医院实验室信息系统源码

医院实验室信息系统简称(Hospitallaboratoryinformationsystem)&#xff0c;也可以称作实验室&#xff08;检验科&#xff09;信息系统或者LIS系统。 LIS定义 其主要功能是将检验的实验仪器传出的检验数据经分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据…

第79讲: MySQL Binlog二进制日志恢复误删数据的实践指南

文章目录 利用Binlog二进制日志恢复误删除的数据1.模拟误删除的场景2.基于Position标识位进行数据恢复2.1.获取要截取BInlog日志的标识位号2.2.截取Binlog中特定标识位范围的数据2.3.通过截取的Binlog中恢复数据3.基于事件范围对误删除的数据进行恢复3.1.在Binlog中确定以时间段…

当我分别问8款GPT一个问题。。。

前两天下班在地铁上无聊寻思问一下不同的GPT一个相同的问题&#xff0c;哪个会给出我比较满意的答案&#xff0c;然后我就提问&#xff1a;我老妹有点憨怎么办&#xff1f;&#xff08;ps&#xff1a;开玩笑的&#xff0c;嘻嘻。。。&#xff09; 很明显其他GPT都给出了大差不差…

Java的数据类型

文章目录 整形浮点型字符型布尔型基本数据类型转换自动类型转换自动类型转换注意和细节强制类型转换强制类型转换细节说明 整形 浮点型 字符型 字符型使用细节 布尔型 基本数据类型转换 自动类型转换 自动类型转换注意和细节 强制类型转换 自动类型转换的逆过程&#x…

金三银四精选面试题系列

Java中有哪几种方式来创建线程执行任务&#xff1f; 1. 继承Thread类 public class ZhouyuThread extends Thread{public static void main(String[] args) {ZhouyuThread thread new ZhouyuThread();thread.start();}Overridepublic void run() {System.out.println("h…

python爬虫---urllib

urllib是Python的一个内置库&#xff0c;专门用于处理网络请求 。主要包含了四个模块&#xff1a;request、error、parse和robotparser。 # 1.导包 # 使用urllib来获取百度首页的源码 import urllib.request # quote&#xff1a;将非ASCII字符转换为%XX格式&#xff0c;以便在…

Mistral AI CEO宣布于2024年开源GPT-4级别模型

法国初创公司Mistral AI的首席执行官Arthur Mensch在法国国家广播电台宣布&#xff0c;公司计划于2024年开源GPT-4级模型&#xff0c;引发了业界的关注。 最近&#xff0c;Mistral AI推出了基于MoE架构的8X7B模型&#xff0c;与GPT3.5和Llama270B等其他流行模型相媲美&#xf…

leetcode --- 30. 串联所有单词的子串[C++ 滑动窗口/双指针]

原题&#xff1a;30. 串联所有单词的子串 - 力扣&#xff08;LeetCode&#xff09; 题目解析&#xff1a; 本题在这道题的算法原理基础上进行思考会简单许多 leetcode --- 438. 找到字符串中所有字母异位词[C/滑动窗口哈希表]-CSDN博客 关键信息---words中的字符串长度都相等 …

二叉树【数据结构】

目录 二叉树1. 二叉树定义二叉树的存储定义 2. 遍历二叉树(1) 前序遍历(2) 中序遍历(3) 后序遍历(4) 层序遍历 3. 二叉树的相关操作(1) 二叉树的初始化(2) 二叉树的结点的手动创建(3) 二叉树结点的个数(4) 二叉树叶子结点的个数(5) 二叉树的高度(6) 第k层结点个数(7) 通过前序遍…

豆袋市场分析:预计到 2026年将达到44 亿美元

几十年来&#xff0c;豆袋椅一直是一种流行的多功能座椅选择&#xff0c;近年来它们的市场持续增长。在本次分析中&#xff0c;我们将考 察全球豆袋市场和中国市场的发展趋势。 全球市场&#xff1a; 过去几年&#xff0c;全球豆袋市场一直在稳步增长。在住宅和商业空间中越来越…

科技巨头三巨头:百度、阿里巴巴、腾讯的崛起与角力

导言 百度、阿里巴巴、腾讯被誉为中国科技领域的“三巨头”&#xff0c;在搜索、电商、社交等多个领域取得了巨大成功。本文将深入探讨这三家公司的崛起原因、核心业务、战略布局以及彼此之间的竞争和合作关系。 1. 百度的搜索帝国 搜索引擎&#xff1a; 百度以其搜索…

Java 序列化机制详解

Java 序列化机制是一种将对象转换为字节流的过程&#xff0c;以便在网络上传输或保存到文件中&#xff0c;并能在需要时将字节流还原为对象。这一机制通过实现 java.io.Serializable 接口来实现&#xff0c;同时涉及到一些关键概念和注意事项。 Serializable 接口 Serializabl…

CCF编程能力等级认证GESP—C++4级—20230611

CCF编程能力等级认证GESP—C4级—20230611 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;判断题&#xff08;每题 2 分&#xff0c;共 20 分&#xff09;编程题 (每题 25 分&#xff0c;共 50 分)幸运数图像压缩 答案及解析单选题判断题编程题1编程题2 单选题&…

Redis结合SpringBoot 基本使用

1.1 简介 1.1.1 概述 Spring Data 中有一个成员 Spring Data Redis&#xff0c;他提供了 RedisTemplate 可以在 Spring 应用中更简便的访问 Redis 以及异常处理及序列化&#xff0c;支持发布订阅等操作。 1.2 RedisTemplate 常见 API   RedisTemplate 针对 jedis 客户端中大…

深入探索COM技术:实现跨语言组件集成

com技术&#xff0c;如何c#界面嵌入到另一种语言界面 COM&#xff08;Component Object Model&#xff09;技术可以用于在不同编程语言之间共享和使用代码&#xff0c;包括在C#和其他语言创建的界面之间实现集成。若要将C#界面嵌入到用另一种语言&#xff08;如C或VB&#xff…

开发知识点-09Rust

Rust Rust 语言通常用于编写系统级软件、网络服务器和高性能应用程序&#xff0c;它具有以下特点&#xff1a;1. 高性能和内存安全&#xff1a;Rust 在保证高性能的同时&#xff0c;利用其所有权模型和借用检查器等特性确保内存安全&#xff0c;避免了 C/C 等语言的内存错误和崩…

瑞友天翼应用虚拟化系统 多处SQL 注入漏洞复现(可RCE)

0x01 产品简介 瑞友天翼应用虚拟化系统是西安瑞友信息技术资讯有限公司研发的具有自主知识产权,基于服务器计算架构的应用虚拟化平台。它将用户各种应用软件集中部署在瑞友天翼服务器(群)上,客户端通过WEB即可快速安全的访问经服务器上授权的应用软件,实现集中应用、远程接…