【Bootstrap学习 day13】

news2024/11/17 0:45:36

Bootstrap5 下拉菜单
下拉菜单通常用于导航标题内，在用户鼠标悬停或单击触发元素时显示相关链接列表。
基础的下拉列表

<div class="dropdown">
	<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    	下拉按钮
    </button>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="#">链接 1</a></li>
        <li><a class="dropdown-item" href="#">链接 2</a></li>
        <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
</div>

在这里插入图片描述
Bootstrap下拉菜单基本上有两个组件–下拉触发元素（可以是超链接或按钮）和下拉菜单本身.dropdown类只是下拉菜单.
如需打开下拉菜单，使用设置.dropdown-toggle类，.dropdown-toggle类定义了触发器元素，而触发器元素上需要属性data-bs-toggle="dropdown"来切换下拉菜单.
带有.dropdown-menu类的<div>元素可构建下拉菜单。然后将.dropdown-item类添加到下拉菜单中的每个元素（链接或按钮）。

下拉列表分隔线
.dropdown-divider类用于通过水平细边框分隔下拉菜单中的链接
.dropdown-header向下拉菜单的标签区域添加标题

<div class="dropdown">
	<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    	下拉按钮
    </button>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="#">链接 1</a></li>
        <li><a class="dropdown-item" href="#">链接 2</a></li>
        <li><a class="dropdown-item" href="#">链接 3</a></li>
        <li class="dropdown-divider">下拉菜单标题</li>
        <li>
        	<a class="dropdown-item" href="#">分离的链接</a>
        </li>
    </ul>
</div>

在这里插入图片描述
导航中的下拉菜单

<ul class="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 dropdown">
    	<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">前端</a>
        	<ul class="dropdown-menu">
            	<li><a class="dropdown-item" href="#">HTML</a><li>
                <li><a class="dropdown-item" href="#">HTML</a><li>
            	<li><a class="dropdown-item" href="#">HTML</a><li>
			</ul>
    </li>
    <li class="nav-item">
    	<a class="nav-link disabled" href="#">禁用</a>
    </li>
</ul>

在这里插入图片描述
表单
HTML表单是网页和应用程序不可或缺的一部分。Bootstrap通过预定义的类集极大地简化了表单控件（如标签、输入字段、选择框、文本区域、按钮等）的样式设置和对齐过程。
三种不同类型的表单布局：

  • 垂直表单（默认）
  • 水平表单
  • 内联表单

创建垂直表单布局
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式，把标签和空间放在一个带有class .form-group的

中。这是获取最佳间距所必需的。
label元素添加了.form-label类以确保正确的填充。
向所有的文本元素<input><textarea>添加class=“form-control”。 

<form>
	<div class="form-group">
    	<label class="form-label">名称</label>
        <input type="text" class="form-control" placeholder="请输入名称">
    </div>
    <div class="form-group">
    	<label class="form-label">Email</label>
        <input type="email" class="form-control" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

在这里插入图片描述

创建内联表单
表单元素并排显示，可以使用.row和.col

<form>
	<div class="row">
    	<div class="col">
        	<input type="text" class="form-control" placeholder="请输入名称">
    	</div>
    	<div class="col">
        	<input type="email" class="form-control" placeholder="Email">
    	</div>
    </div>
</form>

在这里插入图片描述
表单控件尺寸
.form-control-lg或.form-control-sm更改.form-control输入控件的大小

<input type="text" class="form-control form-control-lg" placeholder="大型输入控件">
<input type="text" class="form-control" placeholder="普通输入控件">
<input type="text" class="form-control form-control-sm" placeholder="小型输入控件">

在这里插入图片描述

向表单控件添加帮助文本

<div class="row">
	<div class="col-auto">
    	<label class="col-form-label" for="inputPassword">Password</label>
    </div>
    <div class="col-auto">
    	<input type="password" class="form-control">
    </div>
    <div class="col-auto">
    	<span class="form-text">必须8-20个字符长.</span>
    </div>
</div>

在这里插入图片描述

选择菜单
通过将.form-select类添加到<select>元素

<select class="form-select">
	<option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

在这里插入图片描述
选择菜单的大小
使用.form-select-lg或.form-select-sm类来改变选择菜单的大小

<select class="form-select form-select-lg"></select>
<select class="form-select form-select-sm"></select>

在这里插入图片描述

复选框和单选按钮
复选框有不同的标记，它们被设置了.form-check类的容器元素包围.label设置.form-check-label类，而复选框和单选按钮使用.form-check-input。希望默认选中复选框，可以使用checked属性。
复选框
使用class="form-check"的包装元素，来确保标签和复选框有适当的外边距

<div class="form-check">
	<input class="form-check-input" type="checkbox" checked>
    <label class="form-check-label">选项1</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox">
    <label class="form-check-label">选项2</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox">
    <label class="form-check-label">选项3</label>
</div>

在这里插入图片描述

单选按钮

<div class="form-check">
	<input class="form-check-input" type="radio" name="option1" checked>选项1
    <label class="form-check-label"></label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="option1" checked>选项2
    <label class="form-check-label"></label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="option1" checked>选项3
    <label class="form-check-label"></label>
</div>

在这里插入图片描述
拨动开关
将复选框设置为切换开关的样式，可以将.form-switch类与.form-check容器一起使用

<div class="form-switch">
	<input class="form-check-input" type="checkbox" checked>
    <label class="form-check-label">开关</label>
</div>

在这里插入图片描述

滑块
.form-range类添加到type="range"的input元素，可以设置范围菜单的样式

<label class="form-label">开关</label>
    <input class="form-range" type="range" checked>

在这里插入图片描述

表单组
.input-group类是一种容器，通过在输入字段的前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入。.input-group-text类指定帮助文本的样式.

<div class="input-group">
	<span class="input-group-text">用户名</span>
    <input type="text" class="form-control" placeholder="用户名">
</div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入邮箱">
    <span class="input-group-text">@qq.com</span>
</div>

在这里插入图片描述

输入组大小
.input-group-sm类用于小型输入组，将.input-group-lg用于大型输入组

<div class="input-group input-group-sm">
	<span class="input-group-text">用户名</span>
    <input type="text" class="form-control" placeholder="用户名">
</div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入邮箱">
    <span class="input-group-text">@qq.com</span>
</div>

在这里插入图片描述

多个输入

<div class="input-group">
	<span class="input-group-text">输入姓名</span>
    <input type="text" class="form-control" placeholder="姓">
    <input type="text" class="form-control" placeholder="名">
</div>

在这里插入图片描述
带复选框和单选框的输入组

<div class="input-group">
	<div class="input-group-text">
    	<input type="checkbox">
    </div>
    <input type="text" class="form-control" placeholder="这是内容">
</div>

<div class="input-group">
	<div class="input-group-text">
    	<input type="radio">
    </div>
    <input type="text" class="form-control" placeholder="这是内容">
</div>

在这里插入图片描述

带按钮的输入组

<div class="input-group">
    <input type="text" class="form-control" placeholder="搜索">
    <button class="btn btn-success" type="submit">搜索</button>
</div>

<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入内容">
    <button class="btn btn-primary" type="button">搜索</button>
</div>

在这里插入图片描述

带下拉按钮的输入组

<div class="input-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮	</button>
    
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="#">链接1</a></li>
        <li><a class="dropdown-item" href="#">链接2</a></li>
        <li><a class="dropdown-item" href="#">链接3</a></li>
    </ul>
</div>

在这里插入图片描述
卡片
卡片提供了一个灵活的、可扩展的内容容器。可以通过类.card与.card-body可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置。
创建基本的卡片
外部包装器需要基类.card，而内容可以放置在.card-body元素内

<div class="card">
	<div class="card-body">基础的卡片</div>
</div>

在这里插入图片描述

页眉和页脚

<div class="card">
	<div class="card-header">页眉</div>
	<div class="card-body">内容</div>
    <div class="card-footer">页脚</div>
</div>

在这里插入图片描述

带有标题、文本和链接的卡片

<div class="card w-60">
	<div class="card-header">页眉</div>
	<div class="card-body">
    	<h4 class="card-title">卡片标题</h4>
        <p class="card-text">这是一些文本</p>
        <a href="#" class="card-link">卡片链接</a>
    </div>
    <div class="card-footer">页脚</div>
</div>

在这里插入图片描述
卡片图像
可以给<img>添加.card-img-top使图片位于文字上方，或添加.card-img-bottom使图片位于文字下方来设置卡片中图片的位置。

<div class="card" style="width:300px">
	<div class="card-header">页眉</div>
    <img class="card-img-top" src="avatar.png">
	<div class="card-body">
    	<h4 class="card-title">卡片标题</h4>
        <p class="card-text">这是一些文本</p>
        <a href="#" class="card-link">卡片链接</a>
    </div>
    <div class="card-footer">页脚</div>
</div>

在这里插入图片描述

图像作为卡片背景
将图像转换为卡片背景并使用.card-img-overlay并叠加卡片的文字

<div class="card" style="width:300px">
    <img class="card-img-top" src="avatar.png">
	<div class="card-img-overlay">
    	<h4 class="card-title">卡片标题</h4>
        <p class="card-text">这是一些文本</p>
        <a href="#" class="card-link">卡片链接</a>
    </div>
</div>

在这里插入图片描述

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

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

相关文章

Kafka集群详解

Kafka集群详解

Kafka介绍Kafka集群介绍Kafka集群特点Kafka集群搭建在这里插入图片描述Kafka集群如何进行故障切换Kafka集群Leader的选举Kafka集群如何快速横向拓展Kafka集群搭建最佳实践Kafka集群可以使用单节点Zookeeper吗Kafka集群的消费者信息保存在那里Kafka集群的Topic的分区数的设置规则…
阅读更多...
css单位介绍

css单位介绍

当我们在编写网页或应用程序时&#xff0c;选择合适的单位来描述元素的尺寸是非常重要的。在CSS中&#xff0c;我们常常会使用像素(px)、相对像素(rpx)、字号单位(em)、根元素字号单位(rem)、百分比(%)和视口百分比(vh、vw)等单位来描述元素的大小。 像素(px)是最常见的单位&a…
阅读更多...
企业邮箱发送会议邀请：简单高效的邮件安排技巧与指南

企业邮箱发送会议邀请：简单高效的邮件安排技巧与指南

通过电子邮件安排会议是工作中的常见做法。这也是确认口头安排的会议的一种有益方式。在本视频中&#xff0c;我们将详细介绍此类电子邮件的基本部分&#xff01; 您可能出于多种原因需要安排会议&#xff0c;例如安排面试、跟进业务主管或与潜在客户探讨项目。通过电子邮件有效…
阅读更多...
硬链接和软链接以及inode的简述【Linux】

硬链接和软链接以及inode的简述【Linux】

硬链接和软链接 inode是什么&#xff1f;面试题 硬链接软链接 inode是什么&#xff1f; 认识inode之前&#xff0c;先来看一下一个文件在磁盘里面是怎么存储的。   首先一个物理的圆盘形状且多层的一个磁盘会被逻辑化成为一个数组&#xff0c;找到一个文件在这个数组里面叫做…
阅读更多...
进程控制-操作系统

进程控制-操作系统

1. 进程概述 进程和程序的区别:程序和进程是两个不同的概念&#xff0c;他们的状态&#xff0c;占用的系统资源都是不同的。 程序&#xff1a;就是磁盘上的可执行文件文件, 并且只占用磁盘上的空间&#xff0c;是一个静态的概念。进程&#xff1a;被执行之后的程序叫做进程&a…
阅读更多...
Zabbix自定义监控内容实验（带自动报警）

Zabbix自定义监控内容实验（带自动报警）

实验前准备 zabbix服务端&#xff1a;192.168.188.17 zabbix客户端&#xff1a;192.168.188.11 部署zabbix服务端&#xff08;192.168.188.17&#xff09; zabbix-server 内存至少2G&#xff0c;推荐4G (1) 关闭防火墙 systemctl stop firewalld setenforce 0 (2)获取zabbix下…
阅读更多...
python基础语法（一）变量

python基础语法（一）变量

目录 使用变量 变量的类型 整数 浮点数 字符串 布尔 其他 使用变量 读取变量的值 a 10 print(a) 修改变量的值 a20 print(a) 在Python中&#xff0c;需要注意的是&#xff0c;修改变量也是使用运算&#xff0c;看起来和定义变量没有明显区别 当然&#xff0c;也可…
阅读更多...
git 本地仓库

git 本地仓库

本地仓库 start.bat 启动
阅读更多...
C#上位机与欧姆龙PLC的通信09----开发专用的通讯工具软件(Winform版)

C#上位机与欧姆龙PLC的通信09----开发专用的通讯工具软件(Winform版)

1、介绍 上节文章已经完成了通讯库的开发&#xff0c;可以看到库还是蛮厉害的&#xff0c;在项目中就可以直接拿来应用&#xff0c;这节要做的就是做一个工具软件&#xff0c;形成自己专业的通讯工具&#xff0c;也是对通讯库的直接利用&#xff0c;本节要写的工具软件是一个w…
阅读更多...
数据采集：获取有价值信息的关键步骤

数据采集：获取有价值信息的关键步骤

在当今数据驱动的时代&#xff0c;数据已成为企业、组织和个人做出明智决策的重要依据。而数据采集作为数据分析和应用的第一步&#xff0c;其重要性不言而喻。本文将探讨数据采集的概念意义、方法工具、面临的挑战和应对策略以及注意事项。 一、数据采集的定义和重要性 &…
阅读更多...
【docker】一文讲完docker搭建私有仓库

【docker】一文讲完docker搭建私有仓库

一、docker搭建私有仓库方法总结 搭建Docker私有仓库主要有以下几种方式&#xff1a; 使用Docker官方提供的Registry镜像&#xff1a;Docker官方提供了一个用于构建私有镜像仓库的Registry镜像&#xff0c;只需将镜像下载并运行容器&#xff0c;然后暴露5000端口即可使用。可以…
阅读更多...
【mysql】报错1349 - View‘s SELECT contains a subquery in the FROM clause

【mysql】报错1349 - View‘s SELECT contains a subquery in the FROM clause

操作 创建视图的sql语句中有不支持子查询 mysql创建视图 select * from (select name,age from table_name where 11 and namea ) tb where 11 and type1问题 报错1349 - View’s SELECT contains a subquery in the FROM clause 原因 原因创建视图的sql语句中有不支持子查…
阅读更多...
2023 | 美团技术团队热门技术文章汇总

2023 | 美团技术团队热门技术文章汇总

新年好&#xff01;时光飞逝&#xff0c;我们告别了难忘的2023&#xff0c;迎来了充满希望的2024。再次感谢大家的一路相伴~~ 今天&#xff0c;我们整理了2023年公众号阅读量靠前的10篇技术文章&#xff0c;欢迎大家品阅。祝愿大家在新的一年里&#xff0c;幸福平安&#xff0…
阅读更多...
LLM 中的长文本问题

LLM 中的长文本问题

近期，随着大模型技术的发展，长文本问题逐渐成为热门且关键的问题，不妨简单梳理一下近期出现的典型的长文本模型： 10 月上旬，Moonshot AI 的 Kimi Chat 问世，这是首个支持 20 万汉字输入的智能助手产品； 10 月下旬，百川智能发布 Baichuan2-192K 长窗口大模型，相当于一次…
阅读更多...
arr.prototype 数组的方法

arr.prototype 数组的方法

1.forEach 作用:遍历这个数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];arr.forEach((item) > {console.log(item);}); 返回值:没有返回值 2.fiflter 作用:过滤数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];let newArr arr.filter((item) > {retu…
阅读更多...
Go语言中的HTTP请求和响应处理

Go语言中的HTTP请求和响应处理

在Web开发中&#xff0c;HTTP请求和响应是核心的交互方式。Go语言&#xff0c;作为一种高效且现代的编程语言&#xff0c;为开发者提供了简洁、强大的工具来处理HTTP请求和响应。本文将简要介绍在Go语言中如何处理HTTP请求和响应。 在Go语言中&#xff0c;HTTP请求和响应的处理…
阅读更多...
Dart调用JS对10000条定位数据滤波

Dart调用JS对10000条定位数据滤波

使用Dart调用JS&#xff0c;还是为了练习跨语言调用&#xff1b; 一、编写对应的JS代码 平时在开发时不推荐将算法放在JS里&#xff0c;我这里是简单的做一下数据过滤&#xff1b; 首先生成一些随机定位数据&#xff0c;在实际开发中可以使用真实数据&#xff1b; // 随机定…
阅读更多...
ROS学习笔记（9）进一步深入了解ROS第三步

ROS学习笔记（9）进一步深入了解ROS第三步

0.前提 1. (C)Why did you include the header file of the message file instead of the message file itself?&#xff08;为包含消息的头文件而不是消息本身&#xff1f;&#xff09; 回答&#xff1a;msg文件是描述ROS消息字段的文本文件&#xff0c;用于生成不同语言消息…
阅读更多...
【亚马逊云科技】自家的AI助手 - Amazon Q

【亚马逊云科技】自家的AI助手 - Amazon Q

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…
阅读更多...
生活中的物理3——神奇陷阱（随机倒下的抽屉柜门）

生活中的物理3——神奇陷阱（随机倒下的抽屉柜门）

1实验 材料&#xff1a;大自然&#xff08;风&#xff09;、抽屉门松掉的抽屉 实验 1、找一个大风的日子&#xff0c;打开窗户&#xff08;不要找下雨天&#xff0c;不然你会被你亲爱的嫲嫲KO&#xff09; 2、让风在抽屉面前刮过 3、你发现了什么&#xff1f;&#xff1f;&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023