Bootstrap学习笔记(四)-----Bootstrap每天必学之表单
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:
1.基本案例
2.内联表单
3.水平排列的表单
4.被支持的控件
5.静态控件
6.控件状态
7.控件尺寸
8.帮助文本
基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
form
role
=
"form"
>
<
div
class
=
"form-group"
>
<
label
for
=
"exampleInputEmail1"
>Email address</
label
>
<
input
type
=
"email"
class
=
"form-control"
id
=
"exampleInputEmail1"
placeholder
=
"Enter email"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"exampleInputPassword1"
>Password</
label
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"exampleInputPassword1"
placeholder
=
"Password"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"exampleInputFile"
>File input</
label
>
<
input
type
=
"file"
id
=
"exampleInputFile"
>
<
p
class
=
"help-block"
>Example block-level help text here.</
p
>
</
div
>
<
div
class
=
"checkbox"
>
<
label
>
<
input
type
=
"checkbox"
> Check me out
</
label
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-default"
>Submit</
button
>
</
form
>
内联表单
为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。
需要设置宽度:在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单,你需要专门为使用到的表单控件设置宽度。
一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。
<
form
class
=
"form-inline"
role
=
"form"
>
<
div
class
=
"form-group"
>
<
label
class
=
"sr-only"
for
=
"exampleInputEmail2"
>Email address</
label
>
<
input
type
=
"email"
class
=
"form-control"
id
=
"exampleInputEmail2"
placeholder
=
"Enter email"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"sr-only"
for
=
"exampleInputPassword2"
>Password</
label
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"exampleInputPassword2"
placeholder
=
"Password"
>
</
div
>
<
div
class
=
"checkbox"
>
<
label
>
<
input
type
=
"checkbox"
> Remember me
</
label
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-default"
>Sign in</
button
>
</
form
>
通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。
<
form
class
=
"form-horizontal"
role
=
"form"
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputEmail3"
class
=
"col-sm-2 control-label"
>Email</
label
>
<
div
class
=
"col-sm-10"
>
<
input
type
=
"email"
class
=
"form-control"
id
=
"inputEmail3"
placeholder
=
"Email"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputPassword3"
class
=
"col-sm-2 control-label"
>Password</
label
>
<
div
class
=
"col-sm-10"
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"inputPassword3"
placeholder
=
"Password"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-offset-2 col-sm-10"
>
<
div
class
=
"checkbox"
>
<
label
>
<
input
type
=
"checkbox"
> Remember me
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-offset-2 col-sm-10"
>
<
button
type
=
"submit"
class
=
"btn btn-default"
>Sign in</
button
>
</
div
>
</
div
>
</
form
>
在表单布局案例中展示了其所支持的标准表单控件。
Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
注意:有正确设置了type的input控件才能被赋予正确的样式。
文本框示例
支持多行文本的表单控件。可根据需要改变rows属性。
<
h1
>textarea</
h1
>
<
textarea
class
=
"form-control"
rows
=
"3"
></
textarea
>
Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。默认外观(堆叠在一起)
<
div
class
=
"checkbox"
>
<
label
>
<
input
type
=
"checkbox"
value
=
""
>
sure to include why it's great
</
label
>
</
div
>
<
div
class
=
"radio"
>
<
label
>
<
input
type
=
"radio"
name
=
"optionsRadios"
id
=
"optionsRadios1"
value
=
"option1"
checked>
include why it's great
</
label
>
</
div
>
<
div
class
=
"radio"
>
<
label
>
<
input
type
=
"radio"
name
=
"optionsRadios"
id
=
"optionsRadios2"
value
=
"option2"
>
and selecting it will deselect option one
</
label
>
</
div
>
Inline checkboxes
通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。
<
label
class
=
"checkbox-inline"
>
<
input
type
=
"checkbox"
id
=
"inlineCheckbox1"
value
=
"option1"
> 1
</
label
>
<
label
class
=
"checkbox-inline"
>
<
input
type
=
"checkbox"
id
=
"inlineCheckbox2"
value
=
"option2"
> 2
</
label
>
<
label
class
=
"checkbox-inline"
>
<
input
type
=
"checkbox"
id
=
"inlineCheckbox3"
value
=
"option3"
> 3
</
label
>
<
select
class
=
"form-control"
>
<
option
>1</
option
>
<
option
>2</
option
>
<
option
>3</
option
>
<
option
>4</
option
>
<
option
>5</
option
>
</
select
>
<
select
multiple
class
=
"form-control"
>
<
option
>1</
option
>
<
option
>2</
option
>
<
option
>3</
option
>
<
option
>4</
option
>
<
option
>5</
option
>
</
select
>
在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可。
<
form
class
=
"form-horizontal"
role
=
"form"
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>Email</
label
>
<
div
class
=
"col-sm-10"
>
<
p
class
=
"form-control-static"
>email@example.com</
p
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputPassword"
class
=
"col-sm-2 control-label"
>Password</
label
>
<
div
class
=
"col-sm-10"
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"inputPassword"
placeholder
=
"Password"
>
</
div
>
</
div
>
</
form
>
通过为控件和label设置一些基本状态,可以为用户提供回馈。
输入焦点
我们移除了某些表单控件的默认outline样式,并对其:focus状态赋予了box-shadow样式。
为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观。
被禁用的fieldset
为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。<a>标签的链接功能不受影响
这个class只改变<a class="btn btn-default">按钮的外观,并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上,Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
<
form
role
=
"form"
>
<
fieldset
disabled>
<
div
class
=
"form-group"
>
<
label
for
=
"disabledTextInput"
>Disabled input</
label
>
<
input
type
=
"text"
id
=
"disabledTextInput"
class
=
"form-control"
placeholder
=
"Disabled input"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"disabledSelect"
>Disabled select menu</
label
>
<
select
id
=
"disabledSelect"
class
=
"form-control"
>
<
option
>Disabled select</
option
>
</
select
>
</
div
>
<
div
class
=
"checkbox"
>
<
label
>
<
input
type
=
"checkbox"
> Can't check this
</
label
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-primary"
>Submit</
button
>
</
fieldset
>
</
form
>
校验状态
Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
<
div
class
=
"form-group has-success"
>
<
label
class
=
"control-label"
for
=
"inputSuccess"
>Input with success</
label
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"inputSuccess"
>
</
div
>
<
div
class
=
"form-group has-warning"
>
<
label
class
=
"control-label"
for
=
"inputWarning"
>Input with warning</
label
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"inputWarning"
>
</
div
>
<
div
class
=
"form-group has-error"
>
<
label
class
=
"control-label"
for
=
"inputError"
>Input with error</
label
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"inputError"
>
</
div
>
通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
<
input
class
=
"form-control input-lg"
type
=
"text"
placeholder
=
".input-lg"
>
<
input
class
=
"form-control"
type
=
"text"
placeholder
=
"Default input"
>
<
input
class
=
"form-control input-sm"
type
=
"text"
placeholder
=
".input-sm"
>
<
select
class
=
"form-control input-lg"
>...</
select
>
<
select
class
=
"form-control"
>...</
select
>
<
select
class
=
"form-control input-sm"
>...</
select
>
调整列尺寸
用栅格系统中的列包裹input或其任何父元素,都可很容易的为其设置宽度。
<
div
class
=
"row"
>
<
div
class
=
"col-xs-2"
>
<
input
type
=
"text"
class
=
"form-control"
placeholder
=
".col-xs-2"
>
</
div
>
<
div
class
=
"col-xs-3"
>
<
input
type
=
"text"
class
=
"form-control"
placeholder
=
".col-xs-3"
>
</
div
>
<
div
class
=
"col-xs-4"
>
<
input
type
=
"text"
class
=
"form-control"
placeholder
=
".col-xs-4"
>
</
div
>
</
div
>
用于表单控件的块级帮助文本。
转载于:https://www.cnblogs.com/gsydw/p/7008083.html
Bootstrap学习笔记(四)-----Bootstrap每天必学之表单相关推荐
- 【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法 目录 1.搭建环境 1.1直接从网上下载SpringB ...
- 『PHP学习笔记』系列九:利用from表单的onSubmit事件进行浏览器端的数据验证
数据验证思路: 当我们在网站进行注册时,一般有两个数据验证的过程,一个是在服务器端的验证,一个是在浏览器端的验证.浏览器端的验证一般是用来验证提交的信息是否符合注册的要求,即数据是否合法:服务器端的验 ...
- 前端学习笔记:Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- bootstrap学习(四)表格
bootstrap学习(四)表格 基础样式: 自适应沾满浏览器 <table class="table"><tr><th>序号</th&g ...
- bootstrap学习(四)输入框、导航
bootstrap学习(四)输入框.导航 输入框组: 基本用法: //form-control 占满 //input-group:输入框组 //input-group-addon:输入框前加入一个前缀 ...
- Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
最新文章
- cuda 判断nan 处理办法
- cadence spb 16.5 破解过程实例和使用感受_赤松子耶_新浪博客
- 33 -jQuery 属性操作,文档操作(未完成)
- JSON 之 SuperObject(17): 实例 - 借用 Google 实现全文翻译
- python f.write 保存图片到路径_Python实现生成图片路径和对应标签的方式
- 周二直播丨Oracle数据库SQL执行计划的取得和解析
- CSS伪对象选择符整理
- cc1101初始化c语言程序,cc1101无线模块的程序及使用介绍
- Java 什么是静态内部类
- Spring Boot@Component注解下的类无法@Autowired的问题
- HOOK(钩子,挂钩)
- usb摄像头做教学直播实现pc和手机都可以在线观看教程
- SPSS统计分析行业应用实战--SPSS 23.0新增
- 倍福--检测和扫描ethercat从站状态
- 全国大学生英语竞赛——作文模板
- 视频二维码应用教程与使用指南
- 【小程序按钮控制视频播放暂停】
- uva 571 Jugs
- 宽带拨号上网显示服务器失效,拨号上网失败 宽带连接错误651怎么办
- Java小游戏学习笔记
热门文章
- deepin中zz_如何解决R中的FizzBu​​zz问题
- 机器学习学习吴恩达逻辑回归_机器学习基础:逻辑回归
- REHL yum的配置(本地和centos源)
- redminote8自动关机怎么回事_红米Note8Pro手机值得入手吗 红米Note8Pro手机全面评测...
- amd为什么还用针脚_为什么AMD不取消cpu上的针脚?
- Linux系统中添加硬盘,并挂载到已有的目录,比如/home/user
- Sublime配置与各种插件
- HTML文件上传与下载
- windows下安装zabbix_agent
- Kubernetes容器上下文环境