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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智云影院CMS程序PHP源码V3.0 无需数据库

本程序无需数据库&#xff0c;直接上传源码即可访问&#xff0c;&#xff08;服务器或虚拟主机空间&#xff09;都可以搭建使用&#xff01;模板自适应端&#xff0c;浏览体验更佳&#xff01;安装操作简单&#xff01;无需繁琐的操作&#xff0c;即可快速拥有一个视频看片资源…

PC+Wap仿土巴兔装修报价器源码 PHP源码

核心功能&#xff1a; 业主自助预算计算&#xff1a;通过简洁的界面&#xff0c;业主可以输入装修需求&#xff0c;系统自动进行预算计算信息自动收集&#xff1a;系统自动收集业主的基本信息&#xff0c;如姓名、联系方式、房屋面积等一键发送报价&#xff1a;业主完成预算计…

排序算法——关于快速排序的详解

目录 1.基本思想 2.基本原理 2.1划分思想 2.2排序过程 &#xff08;1&#xff09;选择基准值 &#xff08;2&#xff09;分割过程&#xff08;Partition&#xff09; &#xff08;3&#xff09;递归排序 &#xff08;4&#xff09;合并过程 2.3具体实例 2.4实现代码 2.5关键要…

VMware ESXI 8 安装ipmitool 调整戴尔服务器风扇转速

本文内容适合ESXI 8版本安装ipmitool &#xff0c;进行管理&#xff0c;已知的是8.0以上版本无法安装社区的vib.所以需要自己编译文件&#xff0c;7.0及之前的版本可以安装vib版本的ipmtools。 一、编译好的适用于esxi8的ipmitool下载 ipmitool下载 二、安装ipmitool 1、开…

DNs服务学习笔记

DNS&#xff1a;域名系统&#xff08;英文&#xff1a;Domain Name System)是一个域名系统&#xff0c;是万维网上作为域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。类似于生活中的11…

Redis 教程

Redis 简介 Redis 是完全开源的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次…

Python 雷达图的绘制(极坐标图) (Matplotlib篇-14)

Python 雷达图的绘制(极坐标图) (Matplotlib篇-14)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…

位移贴图还原电影3D角色

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 位移贴图&#xff08;Displacement Map&#xff09;在电影制作中是一…

如何实现无人机识别功能

无人机识别算法可以基于不同的传感器和技术&#xff0c;结合多种方法进行实现。以下是一些常见的无人机识别算法和技术&#xff1a; 视觉识别&#xff1a; 图像处理&#xff1a; 使用计算机视觉技术对无人机图像进行处理&#xff0c;包括特征提取、目标检测和跟踪等。深度学习&…

算法第十一天-组合总和Ⅳ

组合总和Ⅳ 题目要求 解题思路 来自[负雪明烛] 题目有个明显的提示&#xff1a;求组合的个数&#xff0c;而不是每个组合。如果是要求出每个组合&#xff0c;那么必须使用回溯法&#xff0c;保存所有路径。但是如果是组合个数&#xff0c;一般都应该想到[动态规划]的解法。 直…

Maven 开发环境搭建

Maven介绍 Apahche 软件基金会&#xff08;非营业的组织&#xff0c;把一些开源软件维护管理起来&#xff09; maven apahce的一个开宇拿项目&#xff0c;是一个优秀的项目构建&#xff08;管理工具&#xff09; maven 管理项目的jar 以及jar与jar之间的依赖 maven 可以完成…

前端结合MQTT实现连接 订阅发送信息等操作 VUE3

MQTT客户端下载 使用测试 在我之前文章中 MQTT下载基础使用 下面记录一下前端使用的话的操作 1.安装 npm i mqtt引入 import * as mqtt from "mqtt/dist/mqtt.min"; //VUE3 import mqtt from mqtt //VUE2 一、MQTT协议中的方法 Connect。等待与服务器建立连接…

04set注入专题/简单类型/数组/List/Set/Map/空字符串/null/特殊符号

1.1注入外部Bean 在之前使用的案例就是注入外部Bean的方式。 <!-- class属性声明要管理哪个类中的对象 property标签的name是提示set方法名ref标签指明注入的bean的id--><bean id"userServiceBean" class"com.powernode.spring6.service.UserService…

leetcode:908. 最小差值 I

一、题目 二、函数原型 int smallestRangeI(int* nums, int numsSize, int k) 三、思路 本题题目有些绕口&#xff0c;但是无伤大雅。本质就是可以对数组中的每个元素进行加/减 k 的操作&#xff0c;然后求数组中的最大、最小元素的最小差值。 分为几种情况&#xff1a; …

C 语言编程软件 | Dev-C++ 的安装及使用

Hi&#xff0c;大家好&#xff0c;我是源于花海。本文主要了解 Dev-C 的安装及使用。Dev-C&#xff08;又称Dev-Cpp&#xff09;是Windows环境下的一个轻量级 C/C集成开发环境&#xff08;IDE&#xff09;。它集合了功能强大的源码编辑器、MingW64/TDM-GCC 编译器、GDB 调试器和…

【数据库原理】(10)数据定义功能

SQL 数据定义功能包括定义模式、定义表、定义索引和定义视图,其语句如表所示。 一.创建、删除模式 1.创建模式 (Create Schema) 用途&#xff1a;创建模式是为了在数据库中定义一个新的命名空间&#xff0c;它可以包含多个数据库对象。 语法&#xff1a; CREATE SCHEMA &…

万界星空科技MES系统中的设备管理模块

随时工厂数字化建设的大力推进&#xff0c;设备管理的效率得到了很大的提升&#xff0c;特别是作为机加工企业&#xff0c;设备是整个企业非常重要的核心资产。 MES系统主要包含了生产计划、生产过程管理、质量管理、物料管理、设备维护等多个模块&#xff0c;各个模块之间相互…

深度学习中的自动化标签转换:对数据集所有标签做映射转换

在机器学习中&#xff0c;特别是在涉及图像识别或分类的项目中&#xff0c;标签数据的组织和准确性至关重要。本文探讨了一个旨在高效转换标签数据的 Python 脚本。该脚本在需要更新或更改类标签的场景中特别有用&#xff0c;这是正在进行的机器学习项目中的常见任务。我们将逐…

safari缓存清理

safari缓存清理 点击顶端Safari浏览器–>点击偏好设置 点击隐私–>管理网站数据 全部移除

数据库初始化脚本(用 truncate 命令一键清空某个数据库中全部数据表数据)

数据库初始化脚本&#xff08;用 truncate 命令一键清空某个数据库中全部数据表数据&#xff09; 1.执行下面的sql语句生成“清空数据库的sql脚本”2.执行“清空数据库的sql脚本” 在开发中&#xff0c;当数据表结构有变动或者数据库中有脏数据时&#xff0c;想要清空数据表中的…