13-Bootstrap 全局 css 样式---表单2|学习笔记

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

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

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


13-Bootstrap 全局 css 样式---表单2


目录  

一、水平排列的表单

二、被支持的控件

1.输入框

2.文本域

3.多选和单选框

4.下拉列表(select)

三、静态控件


一、水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类可将 Jabel 标签和控件组水平并排布局。

这样做将改变.forim-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加.row 了。

此时的输入框是占满全屏的,宽度为百分之百。当我们使用栅格系统进行控制,更改 label 中类名的与 div 的类即可。

所以通过栅格系统进行控制是十分方便的


二、被支持的控件

表单布局实例中展示了其所支持的标准表单控件。

1.输入框

包括大部分表单控件、文本输入域控件,还支持所有 HTML5类型的输入短件

text、password、datetime、datetime

local、date、month、timeweek、numberniemaidii, ur l uli seanbh tel 和 color。

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式 

输入控件组

如需在文本输入域<input>前面或后面添加文本内容或按钮控件,请参考输入控件组。

2.文本域

支持多行文本的表单控件,可根据需要改变 rows 属性

3.多选和单选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的<1abel>标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将.disabled 类赋予radio、.rad1o.line checkbox. checkbos.inline 或<fieldiet>

默认外观(堆叠在一起)

4.下拉列表(select)

注要,很多原生选降某单-即在 Satan 和 Chione 中的国角是无去通过样改 bondar.nodtus 属性来改变的

对于标记了 multiple 属性的<select>控件来说,默认显示多选项


三、静态控件

如果需要在表单中将一行纯文本文字和 label 元素放置于同一行,为<p>元素添加 .form-control-static 即可。

相关文章
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
192 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
112 1
|
8月前
|
前端开发
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
217 54
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
前端开发 数据安全/隐私保护 容器
Bootstrap5 表单1
本章介绍如何使用 Bootstrap5 创建表单,包括堆叠和内联表单布局。表单元素如 `&lt;input&gt;`、`&lt;textarea&gt;` 和 `&lt;select&gt;` 使用 `.form-control` 类后宽度为 100%。示例展示了如何创建包含邮箱、密码输入框及复选框的堆叠表单,并使用 `.form-label` 确保标签有适当内边距。
Bootstrap5 表单3
使用 `&lt;textarea&gt;` 标签和 `.form-control` 类创建和调整大小的表单文本框示例,包括大、中、小三种尺寸的输入框。
Bootstrap5 表单4
介绍禁用/只读表单、纯文本输入及取色器的使用方法。通过设置 `disabled` 和 `readonly` 属性,可使输入框变为禁用或只读状态;使用 `.form-control-plaintext` 类可去除输入框边框,实现纯文本显示效果;添加 `.form-control-color` 类则可创建取色器。示例代码展示了具体应用。
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
136 5