Bootstrap5 下拉菜单

news2025/2/5 5:57:46

下拉菜单可以是单选下拉菜单,也可以是多选的下拉菜单。

单选下拉菜单:

多选下拉菜单:

在 Bootstrap5 中下拉菜单 <select> 元素可以使用 .form-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 class="form-select"> <select class="form-select form-select-sm">


尝试一下 »

效果如下图:

disabled 属性可以禁止下拉菜单被选择:

实例

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


尝试一下 »

数据列表

Bootstrap 也可以通过 datalist 标签为 <input> 元素设置下拉菜单:

以下实例从列表中选择一个网站:

实例

<label for="browser" class="form-label">选择你喜欢的网站:</label> <input class="form-control" list="sites" name="site" id="site"> <datalist id="sites"> <option value="Google"> <option value="Runoob"> <option value="Taobao"> <option value="Wiki"> <option value="Zhihu"> </datalist>


尝试一下 »

效果如下图:

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

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

相关文章

内核启动过程分析

目录 一、内核源码获取查看 1.1、Source Insight使用 二、查看链接脚本 三、分析head.S 3.1、到入口前代码 3.2、内核启动的汇编阶段 四、main.c内核启动的c语言阶段 4.1、内核打印函数printk 4.2、启动信息 五、rest_init函数 5.1、进程0、进程1、进程2​编辑 5.2、…

详细复习云开发~小程序【搜索功能、登陆注册功能、点赞收藏评论功能、评论功能、CMS网页版管理后台】

文章目录一&#xff0c;搜索功能1-1&#xff0c;需求1-2&#xff0c;实现原理1-3&#xff0c;模糊搜索的代码实现1-3-1&#xff0c;模糊搜索单个字段1-3-2&#xff0c;模糊搜索多个字段&#xff08;满足一个即可&#xff09;1-3-3&#xff0c;模糊搜索多个字段&#xff08;要同…

python获取redis memory使用情况

项目研发过程中&#xff0c;用到Python操作Redis场景&#xff0c;记录学习过程中的心得体会。 一、环境搭建 Windows Anaconda3安装redis第3方包&#xff0c;pip install -u redis pip install -u # 升级安装 linux下查看redis配置信息bind 127.0.0.1 # 表示只允许本地访问,…

AssetBundle依赖打包有哪些注意点

1&#xff09;AssetBundle依赖打包有哪些注意点 ​2&#xff09;子程序集如何引用Assembly-CSharp.dll 3&#xff09;Unity的线性空间下自定义贴图在PS中修改问题 4&#xff09;如何关闭视锥体剔除 这是第318篇UWA技术知识分享的推送。今天我们继续为大家精选了若干和开发、优化…

CSS3之2D转换

文章目录2D转换一、transform1-1.2D转换之移动translate1-2.translate&#xff08;百分比&#xff09;盒子居中二、rotate2-1.旋转效果2-2.transform-origin设置旋转中心点三、2D转换之缩放scale四、2D转换综合写法总结2D转换 转换&#xff08;trabsform&#xff09;是CSS3中具…

SPDK块设备bdev简介

介绍 SPDK Bdev架构 SPDK块设备层&#xff08;通常简称为bdev&#xff09;是一个C库&#xff0c;旨在等同于操作系统块存储层&#xff0c;该层通常位于传统内核存储堆栈中设备驱动程序的正上方。具体来说&#xff0c;此库提供以下功能&#xff1a; 一种可插拔模块API&#xf…

Effective C++(二):构造/析构/赋值运算

个人读书记录&#xff0c;不适用教学内容。 目录 条款05&#xff1a;了解C默默编写并调用了哪些函数 条款06&#xff1a;若不想使用编译器自动生成的函数&#xff0c;就该明确拒绝 条款07&#xff1a;为多态基类声明virtual析构函数 条款08&#xff1a;别让异常逃离析构函数…

设备巡检系统哪个软件好?

本文将介绍&#xff1a;1、好用的设备巡检系统&#xff0c;2、评价设备巡检系统好用的标准&#xff1b;3、做好设备管理的几大关键 现今许多企业&#xff0c;尤其是制造业&#xff0c;规模日趋机械化、自动化、大型化、高速化和复杂化&#xff0c;对设备巡检工作的要求越加精细…

微信小程序网络请求

小程序的网络请求的文档是很少的&#xff0c;只提供了API&#xff0c;例子也不举。 基本使用 最简单的使用如下&#xff1a; 就是调用wx.request方法&#xff0c;这个方法已经能够应付大部分的网络请求了。 onLoad() {wx.request({url: http://123.207.32.32:1888/api/city/a…

我学python的那段日子(五)python中的函数

python中的函数 1.1自定义函数 1.1.1 函数的定义 ​ 和Java一样&#xff0c;python也有内置函数和自定义函数&#xff0c;内置函数是python已经定义好的函数&#xff0c;而自定义函数则是我们根据需要自己定义的函数。 ​ 语法 def 函数名称(参数): ​ 函数体 ​ 其中参数的…

一个转行学习前端的初学者,应该如何计划自己的学习规划?

就目前的发展来看&#xff0c;在语言排行中&#xff0c;前端多年霸主的地位还未被撼动&#xff0c;前端语言的特点就注定了很多公司会选用它&#xff0c;强大的第三方库使前端正在web端的强大无法被替代。目前由于大数据&#xff0c;人工智能的发展&#xff0c;互联网成为了发展…

Bootstrap5 复选框与单选框

如果您希望用户从预设选项列表中选择任意数量的选项&#xff0c;可以使用复选框&#xff1a; 实例 <div class"form-check"> <input class"form-check-input" type"checkbox" id"check1" name"option1" value&quo…

【Python机器学习】朴素贝叶斯分类的讲解及预测决策实战(图文解释 附源码)

需要代码请点赞关注收藏后评论区留言私信~~~ 朴素贝叶斯分类 朴素贝叶斯&#xff08;nave Bayes&#xff09;分类是基于贝叶斯定理与特征条件独立假定的分类方法。 设试验E的样本空间为S&#xff0c;A为E的事件&#xff0c;B_1&#xff0c;B_2&#xff0c;⋯&#xff0c;B_n为…

深入浅出理解Java并发AQS的共享锁模式

自定义共享锁例子 首先我们通过AQS实现一个非常最最最轻量简单的共享锁例子&#xff0c;帮助大家对共享锁有一个整体的感知。 Slf4j public class ShareLock {/*** 共享锁帮助类*/private static class ShareSync extends AbstractQueuedSynchronizer {private int lockCount…

C. Sequence Pair Weight(数学贡献法)

Problem - 1527C - Codeforces 序列的权重被定义为具有相同值&#xff08;aiaj&#xff09;的无序索引对&#xff08;i,j&#xff09;&#xff08;这里i<j&#xff09;的数量。例如&#xff0c;序列a[1,1,2,2,1]的权重是4&#xff0c;具有相同值的无序索引对的集合是&#x…

结构篇-适配器模式

文章目录一、跨越鸿沟靠适配二、插头与插孔的冲突1.三相插孔接口2.两相插孔接口3.电视机机类TV4.客户端类二、通用适配1. 适配器2.客户端类三、专属适配1.电视机专属适配器2.客户端类总结1. 对象适配器2. 类适配器总结适配器模式(Adapter)通常也被称为转换器&#xff0c;顾名思…

数字孪生炒得火热,但好像对企业发展还没有任何实质性的突破,是否只是表面功夫?

首先&#xff0c;什么是数字孪生&#xff1f; ​ 数字孪生是充分利用物理模型、传感器更新、运行历史等数据&#xff0c;集成多学科、多物理量、多尺度、多概率的仿真过程&#xff0c;在虚拟空间中完成映射&#xff0c;从而反映相对应的实体装备的全生命周期过程。数字孪生是一…

const成员,流插入,流提取重载,初始化列表!(6千字长文详解!)

c详解之const成员&#xff0c;流插入&#xff0c;流提取重载&#xff0c;初始化列表&#xff01; 文章目录c详解之const成员&#xff0c;流插入&#xff0c;流提取重载&#xff0c;初始化列表&#xff01;<< 流插入 和 >> 流提取的重载解决共有成员函数问题链式访问…

实用!7个强大的Python机器学习库!⛵

&#x1f4a1; 作者&#xff1a;韩信子ShowMeAI &#x1f4d8; 机器学习实战系列&#xff1a;https://www.showmeai.tech/tutorials/41 &#x1f4d8; 本文地址&#xff1a;https://www.showmeai.tech/article-detail/412 &#x1f4e2; 声明&#xff1a;版权所有&#xff0c;转…

如何借助扬尘视频监测系统开展扬尘污染防控工作?

一、方案背景 目前&#xff0c;跟随国家快速发展的步伐&#xff0c;城市化建设也在飞速发展&#xff0c;各种建设工程遍地开花。如何更好抵管理施工扬尘&#xff0c;杜绝各种违规及不文明现象&#xff0c;一直是施工企业、政府管理部门关注的焦点。 二、系统介绍 环境扬尘视频…