【Bootstrap5学习 day12】

Bootstrap5 导航

Bootstrap5提供了一种简单快捷的方法来创建基本导航,它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件,包括选项卡和Pillss,都通过基本的.nav类共享相同的基本标记和样式。
创建基本导航
要创建简单的水平菜单,可以将.nav类添加到<ul>元素,然后为每个<li>元素添加.nav-item并将.nav-link类添加到它们的链接元素。

<ul class="nav"><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>

在这里插入图片描述
导航对齐
默认情况下,导航是左对齐的,可以使用flexbox实用程序添加.justify-content-center类使导航居中,添加.justify-content-end类使导航右对齐。

<ul class="nav justify-content-center"><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>

在这里插入图片描述
垂直导航栏

<ul class="nav flex-column"><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>

在这里插入图片描述
选项卡
使用类.nav-tabs添加到基本导航来生成选项卡式的导航,并将.active类添加到活动/当前链接。

<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" href="#">禁用</a><li>
</ul>

在这里插入图片描述

创建Pills导航
可以通过在基本导航上添加类.nav-pills来创建基于Pills的导航

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

在这里插入图片描述
响应式导航栏
响应式导航栏在手机等小视口的设备上会折叠,但当用户单机切换按钮时会展开。但是,它在中型和大型设备(例如笔记本电脑或台式机)上将正常显示为水平。
通过类.navbar可以创建一个标准的导航栏,若要创建响应式的导航栏,可以在类.navbar的基础上添加类.navbar-expand-xxl|xl|lg|md|sm来创建(大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项卡可以使用<ul>元素并添加class="navbar-nav"类。然后再<li>元素上添加.nav-item类,<a>元素上使用.nav-link类。

<nav class="navbar navbar-expand-sm bg-light"><ul class="navbar-nav"><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>

在这里插入图片描述
在这里插入图片描述
垂直导航栏
删除.nav-expand-*类可创建始终垂直的导航栏:

<nav class="navbar bg-light"><ul class="navbar-nav"><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>

在这里插入图片描述
彩色导航栏
可以使用.bg-color类来更改导航栏的背景颜色,.navbar-dark类为导航栏中的所有链接添加白色文本颜色,或使用.navbar-light类添加黑色文本颜色。

<nav class="navbar bg-dark navbar-dark"><ul class="navbar-nav"><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>
</nav>

在这里插入图片描述
品牌/标志
.navbar-brand类用于突出显示页面的品牌/标志/项目名称

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><div class="container-fluid"><a class="navbar-brand" href="#">Logo</a></div>
</nav>

在这里插入图片描述
固定导航栏
导航栏也可以固定在页面的顶部或底部。固定导航栏会在独立于页面滚动的固定位置(顶部或底部)保持可见。.fixed-top类使导航栏固定在页面的顶部,.fixed-bottom类把导航栏停留在页面底部.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"><div class="container-fluid"><a class="navbar-brand" href="#">Logo</a></div>
</nav>

导航栏粘在顶部
使用.navbar元素上的.sticky-top类来创建随页面滚动知道到达顶部然后停留在那里的粘性顶部导航栏。

<div class="p-5 bg-warning"><h1>Hello</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"><div class="container-fluid"><a class="navbar-brand" href="#">Logo</a></div>
</nav>

在这里插入图片描述

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

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

相关文章

亚马逊店铺遇到账号申诉模版分享

1.表达诚意&#xff0c;先认错再说&#xff1a;我知道&#xff0c;最近我们在Amazon.com上作为卖家的表现已经低于亚马逊和我们自己的质量标准。 2.清楚分明的格式&#xff1a;我们库存管理的混乱导致了延迟发货&#xff0c;更糟糕的是&#xff0c;物品无法使用。当延迟发货和…

对话新七天创始人&CEO左英杰:品牌直播电商出圈“五步法”

整理 | 飞族 编辑 | 渔舟 出品&#xff5c;极新&#xff06;北京电子商务协会 AI、AIGC、VR等数智化新技术发展日新月异&#xff0c;在直播电商领域的应用和探索逐渐深入&#xff0c;从内容生成、创意优化、购物体验、智能客服、精准营销等方面提供全方位全链路的赋能&#…

内网穿透的应用-使用Docker本地部署可编辑导航页结合内网穿透实现远程访问

文章目录 1. 使用Docker搜索镜像2. 下载镜像3. 查看镜像4. 启动容器5. 浏览器访问6. 远程访问6.1 内网穿透工具安装6.2 创建远程连接公网地址6.3 使用固定二级子域名地址远程访问 今天和大家分享如何使用Docker本地部署一个开源的简约风格网址导航页&#xff0c;支持五种搜索引…

湖南大学-数据库系统-2023期末考试【原题】

前言 早上11&#xff1a;00考完的考试&#xff0c;下午回来打了三把LOL之后&#xff0c;凭着回忆把题目重现出来了。 在复习的时候刷了15&#xff0c;16&#xff0c;17&#xff0c;18&#xff0c;19&#xff0c;21六年的卷子&#xff0c;感觉题目都差不多&#xff0c;但是难度…

记一次 .NET某股票交易软件 灵异崩溃分析

一&#xff1a;背景 1. 讲故事 在dump分析的旅程中也会碰到一些让我无法解释的灵异现象&#xff0c;追过这个系列的朋友应该知道&#xff0c;上一篇我聊过 宇宙射线 导致的程序崩溃&#xff0c;后来我又发现了一例&#xff0c;而这一例恰恰是高铁的 列控连锁一体化 程序&…

web动态月球特效

文章目录 效果预览文件分布代码 效果预览 文件分布 代码 鼠标点击特效 fireworks.js class Circle {constructor({ origin, speed, color, angle, context }) {this.origin originthis.position { ...this.origin }this.color colorthis.speed speedthis.angle anglethi…

C# OpenCvSharp DNN Gaze Estimation

目录 介绍 效果 模型信息 项目 代码 frmMain.cs GazeEstimation.cs 下载 C# OpenCvSharp DNN Gaze Estimation 介绍 训练源码地址&#xff1a;https://github.com/deepinsight/insightface/tree/master/reconstruction/gaze 效果 模型信息 Inputs ----------------…

【RabbitMQ】1 消息中间件MQ概述

目录 什么是消息中间件为什么使用消息中间件流量削峰应用解耦异步处理 主流消息中间件及选型选取原则RabbitMQRocketMQKafka如何选择 消息中间件应用场景电商秒杀案例拉勾B端C端数据同步案例支付宝购买电影票 什么是消息中间件 维基百科对消息中间件的解释&#xff1a;面向消息…

pandas保存style到excel文件中

更多pandas style用法请参考&#xff1a;https://pandas.liuzaoqi.com/doc/chapter8/style.html 示例程序 import numpy as np import pandas as pd# 示例数据 dataframe pd.DataFrame({"date": pd.date_range("2024-01-01", "2024-02-01"),&…

MyBatis标签及其应用示例

MyBatis标签及其应用示例 1. select 1.1 标签属性 id唯一的标识符parameterType传给此语句的参数的全路径名或别名如&#xff1a;com.xxx.xxx.demo.entity.User或userresultType语句返回值类型或别名。如果是集合List&#xff0c;此处填写集合的泛型T&#xff0c;而不是集合…

紫光展锐5G扬帆出海 | 东南亚成为5G新热土

东南亚是一块充满活力和潜力的市场&#xff0c;这里人口基数大、年轻消费群体占比高&#xff0c;电子市场在过去几年显著增长。 增速“狂飙”的东南亚手游 近年来&#xff0c;东南亚手游下载量逐年增长&#xff0c;2023 年第一季度下载量突破 21 亿次&#xff0c;贡献了全球近…

Python split()方法详解:分割字符串

Python 中&#xff0c;除了可以使用一些内建函数获取字符串的相关信息外&#xff08;例如 len() 函数获取字符串长度&#xff09;&#xff0c;字符串类型本身也拥有一些方法供我们使用。 注意&#xff0c;这里所说的方法&#xff0c;指的是字符串类型 str 本身所提供的&#x…

Selenium-java 定位元素时切换iFrame时的方法

具体方法如下图所示&#xff0c;如果iFrame中嵌套多层iFrame需要逐层定位到需要的那一层iFrame,完成操作后&#xff0c;执行该代码&#xff1a;driver.switchTo() .defaultContent() ; 是返回最顶部的frame

vue-vant组件库

组件库&#xff1a;第三方封装好了很多很多的组件&#xff0c;整合到一起就是一个组件库。 官网&#xff1a;Vant 2 - Mobile UI Components built on Vue vant支持vue2&#xff0c;也支持vue3&#xff1b;vant2支持vue2&#xff0c;vant3、vant4支持vue3 分类 vue的组件库…

【中小型企业网络实战案例 八】配置映射内网服务器和公网多出口、业务测试和保存配置

相关学习文章&#xff1a; 【中小型企业网络实战案例 一】规划、需求和基本配置 【中小型企业网络实战案例 二】配置网络互连互通【中小型企业网络实战案例 三】配置DHCP动态分配地址 【中小型企业网络实战案例 四】配置OSPF动态路由协议【中小型企业网络实战案例 五】配置可…

CH08_管理状态

Observer 模式 观察者模式&#xff08;Observer&#xff09;&#xff0c;又叫发布订阅模式&#xff08;Publish/Sunscribe&#xff09;模式&#xff0c;定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时&#xf…

LiveSIPB流媒体国网B接口功能-国网B接口服务安装使用说明

LiveSIPB 国网B接口服务安装使用说明 1、服务说明1.1、安装包说明1.2、国网B接口信令服务1.3、国网B接口流媒体服务1.4、配置信令服务(LiveCMS)1.5、配置流媒体服务(LiveSMS) 2、服务运行2.1、Windows2.2、Linux 3、配置设备接入3.1、海康STATE_GRID接入示例 4、平台使用4.1、管…

全网唯一值得推荐的C/C++框架和库

全网唯一值得推荐的C/C框架和库 C程序员开发指南 ​ 关注我&#xff0c;天天分享C/C开发技术干货&#xff01; ​关注他 30 人赞同了该文章 ​ 目录 收起 标准库 C通用框架和库 人工智能 异步事件循环 音频 生态学 压缩 并发性 容器 数据库 调试 游戏引擎 图…

【C语言】指针小结

一、指针是什么&#xff1f; 可以通过运算符&来取得变量实际保存的起始地址。 &#xff08;这个地址是虚拟地址&#xff0c;并不是真正物理内存上的地址。&#xff09; **数据类型 *标识符 &变量;** **int pa &a; int pa NULL; (NULL表示地址为0的内存空间…

(15)微信自动化测试-针对微信主窗体的行为控制

应一位药厂的朋友咨询&#xff0c;他说他想知道如何实现下面的功能&#xff0c;都是针对微信主窗体的一些控制&#xff01;今天我就给他解惑并安排&#xff01; 微信主窗体是否当前处于最小化。微信主窗体是否隐藏到了系统托盘。最小化微信主窗体。最大化微信主窗体。微信主窗…