14-Bootstrap 全局 css 样式-表单3|学习笔记

简介: 快速学习14-Bootstrap 全局 css 样式-表单3

开发者学堂课程【前端开发框架 Bootstrap 使用教程14-Bootstrap 全局 css 样式-表单3】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4233


14-Bootstrap 全局 css 样式-表单3


目录

一、焦点状态

二、禁用状态

三、只读状态


一、焦点状态

我们将某些表单控件的默认 owtline 样式移除,然后对 :focus 状志赋予 box-shadow 属性。


二、禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了not-allowed 鼠标状态。

被禁用的 fieldset

为<fietdsets>设置 disb1ed 属性可以禁用<fietdsets>中包含的所有控件。

<a>标签的链接功能不受影响

默认情况下,浏览器会将<fietdsets disb1ed>内所有的原生的表单控件(<input>、<select>和<button>元素)设置为禁用状态,防止键盘和鼠与他们交互。

然而,如果表单中还包含<a…class=“btn btn-*”>元素,这些元素将只被赋予 pointer-events:none 属性。

正如在关于禁用状态的按钮中(尤其是关于锚点元素的子章节中)所描述的那样,该 CSS 属性尚不规范,并且在Opera 18及更低版本的浏览器或 Internel Expilorer 11总没有得到全面支持,并且不会阻止键盘用户能够获取焦点或制活这些链接。

所以为了安全起见,建议使用自定义 JavaScnpt 来禁用这些链接。

image.png

此时若想禁用三个 input 框只需如下操作即可

image.png

其余同样

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏范器上,Internet Expiorer 11及以下测览器中的 xflelgset)元素并不完全支持 d1sabled 属性,因此建议在这些测览器上通过 JavaScipt 代码采禁用更浅,并且还季加了 not-allone 能标状态


三、只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更找(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。


image.png

image.png

相关文章
|
机器学习/深度学习 网络协议 中间件
[ROS2] --- ROS diff ROS2
[ROS2] --- ROS diff ROS2
289 0
地理编码与反地理编码
地理编码与反地理编码
786 0
地理编码与反地理编码
|
2月前
|
监控 算法 API
拼多多API团购活动自动化:拼单成功率暴涨的幕后技术解析
本方案通过API自动化引擎破解传统团购效率低、响应慢、数据分散等问题,实现库存、价格、成团的实时联动。实战数据显示,成团时效提升74%,拼单成功率高达92%,人力成本下降80%。某生鲜商家接入后,月GMV突破500万元,成团率高达98.3%。API赋能团购,开启电商效率新纪元。
152 0
|
5月前
|
PyTorch API 算法框架/工具
DeepSeek 部署方式与技术实践
DeepSeek的部署灵活性使其在多个领域大放异彩,但需根据场景权衡性能、成本与安全性。随着工具生态的完善与行业方案的沉淀,2025年将成为AI大模型落地关键年。开发者应持续关注MoE、COT等技术创新,结合自身需求选择最优部署策略。
379 1
|
8月前
|
人工智能 Java 程序员
一文彻底搞定C语言的表达式和语句
本文介绍了C语言中的表达式和语句,涵盖算术、关系等表达式及各类语句的用法,帮助初学者理解核心概念。本文介绍C语言表达式(算术、关系等)和语句(表达式、复合、控制、函数、空语句),助你掌握核心概念。
491 0
一文彻底搞定C语言的表达式和语句
|
11月前
|
人工智能 自然语言处理 测试技术
苹果一篇论文得罪大模型圈?Transformer不会推理,只是高级模式匹配器!所有LLM都判死刑
苹果公司发布论文《GSM-Symbolic: Understanding the Limitations of Mathematical Reasoning in Large Language Models》,质疑大型语言模型(LLM)在数学推理方面的能力。尽管LLM在GSM8K等测试中表现良好,但在新基准测试GSM-Symbolic中,其准确率随数值变化而显著下降,表明LLM可能依赖于记忆和模式匹配而非真正的数学理解。这一发现引发了AI领域的广泛讨论。
184 5
|
11月前
|
芯片
浮动CPU和定点CPU的主要区别是什么
浮动CPU和定点CPU的主要区别在于处理数据的方式不同。浮动CPU支持浮点运算,能高效处理小数和高精度计算;而定点CPU仅支持整数运算,适用于对精度要求不高的场景。
|
11月前
|
前端开发 开发者
CSS中的长度单位详解
通过合理选择和组合使用不同的长度单位,开发者可以实现高效、灵活和响应式的Web布局设计。以上详解希望能帮助你更好地理解和应用CSS中的长度单位,提高页面的表现力和可维护性。
368 3
|
监控 算法 数据安全/隐私保护
基于三帧差算法的运动目标检测系统FPGA实现,包含testbench和MATLAB辅助验证程序
本项目展示了基于FPGA与MATLAB实现的三帧差算法运动目标检测。使用Vivado 2019.2和MATLAB 2022a开发环境,通过对比连续三帧图像的像素值变化,有效识别运动区域。项目包括完整无水印的运行效果预览、详细中文注释的代码及操作步骤视频,适合学习和研究。
|
监控 数据可视化 前端开发
基于python django的电商数据分析系统,包括大屏和登录
本文介绍了一个基于Python Django框架开发的电商数据分析系统,该系统具备大屏展示功能和用户登录机制,旨在帮助电商企业实时监控和分析销售数据,支持多维度数据分析和趋势预测。
358 0
基于python django的电商数据分析系统,包括大屏和登录