Bootstrap 全局CSS样式：表单类的使用

原创

已于 2023-10-16 18:37:58 修改 · 1.8k 阅读

标签

#css #css3 #html5 #html #web app

于 2020-08-30 19:49:24 首次发布

本文介绍了Bootstrap中的表单样式，包括基本实例、内联表单、水平排列的表单、各种控件的使用，如输入框、文本域、多选和单选框、下拉列表等。还讲述了静态控件、焦点和禁用状态、只读状态、辅助文本和校验状态的实现方法，以及如何调整控件的尺寸。

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素包裹到.form-group中可以更好地展示表单。

<form>
	<div class="form-group">
		<label for="username">username</label>
		<input type="text" class="form-control" id="username" placeholder="username"/>
		<span class="help-block">字母下划线3-8位</span>
	</div>
	<div class="form-group">
		<label for="password">password</label>
		<input type="password" class="form-control" id="password" placeholder="password"/>
		<span class="help-block">密码为6-8位</span>
	</div>
	<div class="form-group">
		<div class="checkbox">
		<label><input type="checkbox">七天免密登陆</label>
	</div>
	<div class="form-group">
		<input type="button" name="" id="login" value="登录" class="btn btn-success" />
		<input type="button" name="" id="loginout" value="取消" class="btn btn-danger" />
	</div>
</form>

在这里插入图片描述

注意：不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向标签添加类*.form-inline*。只在屏幕视口（viewport）至少在 768px 宽度时（屏幕视口宽度再小的话就会使表单折叠）。
实例 1：

<form class="form-inline" >
	<div class="form-group">
		<label for="username">username</label>
		<input type="text" class="form-control" id="username" placeholder="username"/>
	</div>
	<div class="form-group">
		<label for="password">password</label>
		<input type="password" class="form-control" id="password" placeholder="password"/>
	</div>
	<div class="form-group">
		<input type="button" name="" id="login" value="登录" class="btn btn-success" />
	</div>
</form>

在这里插入图片描述

注意 :
1. 可能需要手动设置宽度。在 Bootstrap 中，输入框和单选/多选框控件默认被设置为width: 100%;宽度。在内联表单，我们将这些元素的宽度设置为width: auto;，多个控件就可以排列在同一行。
2. 一定要添加 label 标签。如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。如果你不想让label显示在页面中，可以通过为label设置.sr-only类将其隐藏。

实例 2：

<form class="form-inline" >
	<div class="form-group">
		<label class="sr-only" for="username">username</label>
		<input type="text" class="form-control" id="username" placeholder="username"/>
	</div>
	<div class="form-group">
		<label class="sr-only" for="password">password</label>
		<input type="password" class="form-control" id="password" placeholder="password"/>
	</div>
    <div class="checkbox">
         <label ><input type="checkbox" />
Remember me</label>
	</div>
	<div class="form-group">
		<input type="button" name="" id="login" value="登录" class=

最低0.47元/天解锁文章