bootstrap4-forms表单组件

最新推荐文章于 2024-04-22 10:35:30 发布

肆夜

最新推荐文章于 2024-04-22 10:35:30 发布

阅读量1.6k

点赞数 1

文章标签： bootstrap4 forms

forms 组件

input 元素的disabled,readonly,multiple属性直接使用,官方文档有示例.
使用单选框(radio)的时候,切记指定相同值的 name 属性.
默认的显示布局(layout)CSS 样式是 : display : none; width : 100%;.
在布局方向,可放弃使用.form-group .form-inline嵌套栅格系统.row .col-*-*来实现自定义的表单布局.
完整的表单组件设置参考官方文档

标准组件分类	组件 CSS 类	推荐
基本表单控件	form : `.form-inline` div : `.form-group` input\|select\|textarea : `.form-control` `.form-control-lg` `.form-control-sm`	yes
文件上传控件	div : `.form-group` input : `.form-control` `.form-control-file`	yes
精确值数字输入控件	div : `.form-group` input : `.form-control-range`	no
默认样式复选框/单选框	div : `.form-check` `.form-check-inline` input : `.form-check-input` `.form-check-label` `.position-static`	no

布局组件分类	组件 CSS 类	推荐
default	查看标准组件部分	\
嵌套栅格系统	div : `.row\|.form-row(推荐)` label : `col--` `col-form-label` input : 嵌套在`div.col--`内部	yes
自定义尺寸	div : `col-auto` label : `col-form-lg\|sm`	no

自定义表单控件分类	组件 CSS 类	推荐
单选框/复选框	div : `.custom-control` `.custom-checkbox` `.custom-radio` `.custom-control-inline` input : `.custom-control-input` label : `.custom-control-label`	yes
切换控件	div:`.custom-control` `.custom-switch`	yes
选择控件	select : `.custom-select`	yes
数字控件	input : `.custom-range`	yes
文件上传控件	div:`.custom-file` input:`.custom-file-input` label:`.custom-file-label` 属性`data-browse`设置 label 显示的内容,默认值是 Browse	yes

基础的表单控件(.form-group)

垂直表单组件
- .form-group 作用在 div 元素上,因布局排版协调推荐一个空间对应一个 div,div.form-group
- .form-control 作用在 input,select,textarea 元素上,如 input 元素 : input.check-control
- .form-control-lg|sm 和.form-control 组合使用,设置控件的大小,lg 是放大,sm 是缩小,如 input 元素 : input.form-control.form-control-sm
- 推荐div>label+input对应一个控件,若多个定义多个 div 元素

垂直表单 HTML 示例

<form action="">
  <div class="form-group">
    <label for="username">username :</label>
    <input type="text" id="username" class="form-control">
  </div>
  <div class="form-group">
    <label for="interests">interest :</label>
    <select id="interests" class="form-control">
      <option value="0">football</option>
      <option value="1">basketball</option>
      <option value="2">badminton</option>
    </select>
  </div>
  </div>
  <div class="form-group">
    <label for="sign">sign :</label>
    <textarea id="sign" class="form-control form-control-sm"></textarea>
  </div>
</form>

水平表单组件
- .form-inline 作用在 form 元素上,form.form-inline
- .form-group 同上
- .form-control 和.form-control-lg|sm 同上
- 推荐div>label+input对应一个控件,若多个定义多个 div 元素

水平表单 HTML 示例

<form action="" class="form-inline">
  ...
</form>

文件上传控件(.form-control-file,默认样式,不推荐)

默认样式的文件上传控件
- .form-group 同上
- .form-control 和.form-control-file 组合作用在 type 值是 file 的 input 元素上,input[type="file"].form-control-file
- 推荐div>label+input对应一个文件上传控件,若多个定义多个 div 元素

默认样式的文件上传控件 HTML 示例

<div class="form-group">
  <label for="choosefile">上传文件</label>
  <input class="form-contro form-control-file" type="file" id="choosefile" />
</div>

精确值数字输入控件(.form-control-range)

精确值数字输入控件 CSS 类
- .form-group 作用在 div 元素上,div.form-group
- .form-control-range 作用在类型是 rang 的 input 元素上,input[type="range"].form-control-range
- 推荐的格式div>label+input,建议一个数字输入控件对应一个 div

精确值数字输入控件 HTML 示例

<div class="form-group">
  <label for="numberid"></label>
  <input type="range" id="numberid" class="form-control-range" />
</div>
...

单选和复选按钮(.form-check,HTML 默认样式,不推荐使用)

复选框 CSS 类
- .form-check 作用在 div 元素上,div.form-check
- .from-check-input 作用在 input 元素上,input[type="checkbox"].form-check-input
- .form-check-label 作用在 label 元素上,label.form-check-label
- div>input+label表示一个复选框,若多个,定义多个 div(推荐格式)

复选框 HTML 示例

<div class="form-check">
  <input id="checkbox1" type="checkbox" class="form-check-input" />
  <label for="checkbox1" class="form-check-label"></label>
</div>
<div class="form-check">
  <input id="checkbox2" type="checkbox" class="form-check-input" />
  <label for="checkbox2" class="form-check-label"></label>
</div>
...

单选框 CSS 类
- .form-check 作用在 div 元素上,div.form-check
- .from-check-input 作用在 input 元素上,input[type="radio"].form-check-input
- .form-check-label 作用在 label 元素上,label.form-check-label
- div>input+label表示一个复选框,若多个,定义多个 div(推荐格式)
- HTML 基础易忘点补充 : 单选框的 input 应定义同值的name属性值

单选框 HTML 示例

<div class="form-check">
  <input name="radioname" id="radio1" type="radio" class="form-check-input" />
  <label for="radio1" class="form-check-label"></label>
</div>
<div class="form-check">
  <input name="radioname" id="radio2" type="radio" class="form-check-input" />
  <label for="radio2" class="form-check-label"></label>
</div>
...

水平复选框/单选框(HTML 默认样式,不推荐使用)
- .form-check-inline 和.form-check 同时作用在 div 元素上,div.form-check.form-check-inline
- .form-check-input 和.form-check-label 使用方式同上
- div>input+label表示一个复选框/单选框,若多个,定义多个 div 元素
- 不要遗忘 input 单选框的易忘点 name 的值设定

水平复选框/单选框 HTML 示例

<div class="form-check form-check-inline">
  input.form-check-input+lable.form-check-label
</div>
...

取消 label 元素
- .form-check 或.form-check .form-check-inline 组合作用在 div 元素上
- .position-static 和.form-check-input 同时作用在 input 元素上,input.form-check-input.position-static
- label 元素和.form-check-label 类不在使用

取消 label 元素的 HTML 示例

<div class="form-check">
  <input class="form-check-input position-static" />
</div>
...

嵌套栅格系统的表单布局(推荐方式)

嵌套栅格系统的表单布局
- form 元素嵌套 div 元素,使用栅格系统的.row或表单组件的.form-row定义块级行,form>div.row
- label 元素组合使用.col-*-*和.col-form-label定义控件标记,如label.col-sm-2.col-form-label
- div 元素使用栅格系统的col-*-*规划控件布局,在内嵌控件元素的.form-control,如div.col-sm-6>input.form-control

嵌套栅格系统的表单布局 HTML 示例

<form action="">
  <!-- 推荐使用.form-row -->
  <div class="form-row">
    <label for="" class="col-sm-3 offset-sm-2 col-form-label">标记:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" value="嵌套栅格系统" />
    </div>
  </div>
  <br />
  <div class="form-row">
    <label for="" class="col-sm-3 offset-sm-2 col-form-label">标记:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" value="嵌套栅格系统" />
    </div>
  </div>
  ...
</form>

自定义尺寸
- 过于简单不进行测试
- 在使用.col-form-label的地方使用col-form-label-lg|sm即可

自定义表单控件组件

自定义的复选框
- div 元素使用.custom-control .custom-checkbox布局一个控件,div.custom-control.custom-checkbox
- input 元素使用.custom-control-input注意 type 值设置为 checkbox,input.custom-control-input
- label 元素使用.custom-control-label,label.custom-control-label
- 推荐div>input+label表示一个控件,若多个定义多个 div 元素
- 可使用 js 对 input 进行设置,优化复选框的显示样式$("#customcheckbox2").prop('indeterminate', true)

自定义复选框的组件的 HTML 示例

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customcheckbox1" />
  <label for="customcheckbox1" class="custom-control-label">复选框</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customcheckbox2" />
  <label for="customcheckbox2" class="custom-control-label">复选框</label>
</div>
...

<script type="text/javascript">
  $(function() {$("#customcheckbox2").prop("indeterminate", true)})
</script>

自定义的单选框
- div 元素使用.custom-control .custom-radio布局一个控件,div.custom-control.custom-radio
- input 元素使用.custom-control-input注意 type 值设置为 radio,input.custom-control-input
- label 元素使用.custom-control-label,label.custom-control-label
- 推荐div>input+label表示一个控件,若多个定义多个 div 元素

自定义单选框 HTML 示例

<div class="custom-control custom-radio">
  <input
    id="customradio1"
    name="customradio"
    type="radio"
    class="custom-  control-input"
  />
  <label for="customradio1" class="custom-control-label">单选框</label>
</div>
<div class="custom-control custom-radio">
  <input
    id="customradio2"
    name="customradio"
    type="radio"
    class="custom-  control-input"
  />
  <label for="customradio2" class="custom-control-label">单选框</label>
</div>
...

自定义水平复选框/单选框
- 原本 div 元素使用.custom-control .custom-checkbox或.custom-radio上再添加.custom-control-inline即可

自定义水平单选框 HTML 示例

<div class="custom-control custom-radio custom-control-inline">
  <input
    id="customradio3"
    name="inlineradio"
    type="radio"
    class="custom-control-input"
  />
  <label for="customradio3" class="custom-control-label">单选框</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input
    id="customradio4"
    name="inlineradio"
    type="radio"
    class="custom-control-input"
  />
  <label for="customradio4" class="custom-control-label">单选框</label>
</div>

附录 : 测试静态页面,直接查看效果选择所需控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://libs.cdnjs.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://libs.cdnjs.net/jquery/3.3.1/jquery.min.js"></script>
<script src="https://libs.cdnjs.net/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://libs.cdnjs.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Document</title>
<style type="text/css">
.siye-font {
	font-size: 16px;
}
</style>
<script type="text/javascript">
	$(function() {
		$("#customcheckbox2").prop('indeterminate', true)
	})
</script>
</head>
<body>
	<br>
	<div class="container">
		<div class="row">
			<div class="col-sm-12 border border-secondary rounded bg-light text-center">表单组件</div>
		</div>
		<br>
		<div class="row">
			<div class="col-sm-4 border border-secondary rounded">
				<form action="">
					<div class="form-group">
						<label for="username">input控件 :</label>
						<input type="text" id="username" class="form-control">
					</div>
					<div class="form-group">
						<label for="interests">select控件</label>
						<select id="interests" class="form-control">
							<option value="0">足球</option>
							<option value="1">篮球</option>
							<option value="2">羽毛球</option>
							<option value="3">乒乓球</option>
						</select>
					</div>
					<div class="form-group">
						<label for="interests">多选select控件</label>
						<select multiple id="interests" class="form-control">
							<option value="0">足球</option>
							<option value="1">篮球</option>
							<option value="2">羽毛球</option>
							<option value="3">乒乓球</option>
						</select>
					</div>
					<div class="form-group">
						<label for="sign">textarea控件</label>
						<textarea name="" id="sign" class="form-control"></textarea>
					</div>
				</form>
			</div>
			<div class="col-sm-4 border border-secondary rounded">
				<form action="">
					<div class="form-group">
						<label for="yourfile">文件上传控件</label>
						<input type="file" class="form-contro form-control-file" id="yourfile">
					</div>
					<div class="form-group">
						<label for="">放大控件</label>
						<input type="text" class="form-control form-control-lg">
					</div>
					<div class="form-group">
						<label for="">缩小控件</label>
						<input type="text" class="form-control form-control-sm">
					</div>
					<div class="form-group">
						<label for="">缩小控件</label>
						<input readonly type="text" class="form-control" value="readonly text input">
					</div>
				</form>
				<form action="" class="form-inline">
					<div class="form-group">
						<label for="username">input控件 :</label>
						<input type="text" id="username" class="form-control form-control-sm">
					</div>
					<div class="form-group">
						<label for="interests">select控件</label>
						<select id="interests" class="form-control form-control-sm">
							<option value="0">足球</option>
							<option value="1">篮球</option>
							<option value="2">羽毛球</option>
							<option value="3">乒乓球</option>
						</select>
					</div>
				</form>
			</div>
			<div class="col-sm-4 border border-secondary rounded">
				<form action="">
					<div class="form-group">
						<label for="">精确值输入控件</label>
						<input type="range" class="form-control-range">
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input">
						<label for="" class="form-check-label">复选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input position-static">
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input position-static">
					</div>
					<div class="form-check form-check-inline">
						<input type="checkbox" class="form-check-input position-static">
					</div>
					<div class="form-check">
						<input name="radio1" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check">
						<input name="radio1" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check">
						<input name="radio1" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input name="radio2" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input name="radio2" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input name="radio2" type="radio" class="form-check-input">
						<label for="" class="form-check-label">单选框控件</label>
					</div>
					<div class="form-check form-check-inline">
						<input name="radio3" type="radio" class="form-check-input position-static">
					</div>
					<div class="form-check form-check-inline">
						<input name="radio3" type="radio" class="form-check-input position-static">
					</div>
					<div class="form-check form-check-inline">
						<input name="radio3" type="radio" class="form-check-input position-static">
					</div>
				</form>
			</div>
		</div>
		<!-- layout forms components -->
		<div class="row">
			<div class="col-sm-4 border border-secondary rounded">
				<br>
				<form action="">
					<div class="row">
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
					</div>
				</form>
				<br>
				<form action="">
					<!-- 可将.row换成.form-row -->
					<div class="form-row">
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
					</div>
				</form>
				<br>
				<form action="">
					<div class="form-row">
						<label for="" class="col-sm-2 col-form-label">标记 : </label>
						<div class="col-sm-8">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
					</div>
					<br>
					<div class="row">
						<label for="" class="col-sm-4 col-form-label col-form-label-lg">标记 : </label>
						<div class="col-sm-8">
							<input type="text" class="form-control form-control-lg" value="嵌套栅格系统">
						</div>
					</div>
				</form>
				<br>
				<form action="">
					<!-- 可将.row换成.form-row -->
					<div class="form-row">
						<label for="" class="col-sm-3 offset-sm-2 col-form-label">标记:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
					</div>
					<br>
					<div class="form-row">
						<label for="" class="col-sm-3 offset-sm-2 col-form-label">标记:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" value="嵌套栅格系统">
						</div>
					</div>
				</form>
				<br>
				<br>
			</div>
			<div class="col-sm-4 border border-secondary rounded">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="customcheckbox1">
					<label for="customcheckbox1" class="custom-control-label">复选框</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="customcheckbox2">
					<label for="customcheckbox2" class="custom-control-label">复选框</label>
				</div>
				<div class="custom-control custom-radio">
					<input id="customradio1" name="customradio" type="radio" class="custom-control-input">
					<label for="customradio1" class="custom-control-label">单选框</label>
				</div>
				<div class="custom-control custom-radio">
					<input id="customradio2" name="customradio" type="radio" class="custom-control-input">
					<label for="customradio2" class="custom-control-label">单选框</label>
				</div>
				<div class="custom-control custom-radio custom-control-inline">
					<input id="customradio3" name="inlineradio" type="radio" class="custom-control-input">
					<label for="customradio3" class="custom-control-label">单选框</label>
				</div>
				<div class="custom-control custom-radio custom-control-inline">
					<input id="customradio4" name="inlineradio" type="radio" class="custom-control-input">
					<label for="customradio4" class="custom-control-label">单选框</label>
				</div>
				<br>
				<div class="custom-control custom-switch">
					<input id="customradio5" name="switchradio" type="radio" class="custom-control-input">
					<label for="customradio5" class="custom-control-label">单选框</label>
				</div>
				<div class="custom-control custom-switch">
					<input id="customradio6" name="switchradio" type="radio" class="custom-control-input">
					<label for="customradio6" class="custom-control-label">单选框</label>
				</div>
				<br>
				<select name="" id="" class="custom-select">
					<option value="">篮球</option>
					<option value="">足球</option>
					<option value="">羽毛球</option>
				</select>
				<br>
				<br>
				<input type="range" class="custom-range">
				<br>
				<br>
				<div class="custom-file">
					<input type="file" class="custom-file-input">
					<label for="" class="custom-file-label"></label>
				</div>
			</div>
		</div>
	</div>
	<br>
	<br>
	<br>
</body>
</html>

肆夜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
bootstrap4-forms表单组件

forms 组件input 元素的disabled,readonly,multiple属性直接使用,官方文档有示例.使用单选框(radio)的时候,切记指定相同值的 name 属性.默认的显示布局(layout)CSS 样式是 : display : none; width : 100%;.在布局方向,可放弃使用.form-group .form-inline嵌套栅格系统.row .co...
复制链接

扫一扫