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

相关文章
|
运维 监控 Java
研发规范第十三讲:阿里 - 如何进行项目稳定性建设
研发规范第十三讲:阿里 - 如何进行项目稳定性建设
923 1
|
安全 数据库 存储
数据库设计基石:一文搞懂 1NF、2NF、3NF 三大范式
数据库设计常遇数据冗余、增删改异常?根源往往是表结构不规范。本文带你轻松掌握数据库三大范式——1NF、2NF、3NF,从原子列到消除依赖,层层递进,提升数据一致性与可维护性,让数据库设计更高效、安全!#数据库 #范式设计
730 0
|
传感器 自动驾驶 算法
SLAM:SLAM(即时定位与地图构建)的简介、发展、案例应用之详细攻略
SLAM:SLAM(即时定位与地图构建)的简介、发展、案例应用之详细攻略
|
12月前
|
人工智能 自然语言处理 搜索推荐
科技云报到:澳门旅游局x百度智能云:打造懂游客的智能客服
科技云报到:澳门旅游局x百度智能云:打造懂游客的智能客服
496 8
|
存储 分布式计算 资源调度
两万字长文向你解密大数据组件 Hadoop
两万字长文向你解密大数据组件 Hadoop
481 11
GitHub爆赞!终于有大佬把《Python学习手册》学习笔记分享出来了
这份笔记的目标是为了给出一份比较精炼,但是又要浅显易懂的Python教程。《Python学习手册》中文第四版虽然比较简单,但是措辞比较罗嗦,而且一个语法点往往散落在多个章节,不方便读者总结。 我在做笔记时,将一个知识点的内容都统筹在一个章节里面,因此提炼性大大提高。而且还有《Python学习手册》中文第四版的翻译在某些章节(可能难度较大?)措辞可能前后矛盾。当知识点提炼之后就能够很快的找到一些难以理解的概念的上下文,方便吃透这些难点。
|
安全 Linux
探索Linux中的`aulast`命令:审计用户的登录历史
`aulast`是Linux审计系统中的工具,用于查看用户登录历史。它显示登录时间、终端、IP地址等信息,帮助管理员分析登录模式和检测入侵。命令语法包括选项如 `-i` 显示IP地址,`-l` 显示详细信息,`-n` 指定记录数,`-s` 和 `-e` 指定时间范围。在使用前需确保`auditd`已启用并配置好规则。
|
存储 关系型数据库 数据库
利用Python与SQLite构建轻量级数据库应用
在当今日益增长的数据处理需求下,数据库成为存储、检索和管理数据的关键技术。然而,对于小型项目或快速原型开发,大型数据库系统可能显得过于庞大和复杂。本文将介绍如何利用Python编程语言与SQLite轻量级数据库,快速搭建一个功能齐全、易于维护的数据库应用。我们将探讨SQLite数据库的特点、Python对SQLite的支持,并通过一个实际案例展示如何构建一个简单的数据库应用,为读者提供一种高效、灵活的解决方案。
|
存储 程序员 Python
在10.24这个特殊的日子里,带你详细解读1024!
在10.24这个特殊的日子里,带你详细解读1024!
1202 0
在10.24这个特殊的日子里,带你详细解读1024!