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 即可。

相关文章
N..
|
29天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
N..
|
29天前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
18 0
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
31 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
12天前
|
前端开发
|
15天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
19天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
20 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0