1. 表单复习
回去看我的另一篇博客 https://blog.csdn.net/weixin_44055272/article/details/88284523
2.Bootstrap表单总体样式
2.1 基础样式
创建基本表单的步骤:
1.向父 元素添加 role=“form”。
2.把标签和控件放在一个带有 class .form-group 的
3.向所有的文本元素 、 和 添加 class =“form-control” 。
实例。
<form role="form">
<div class="from-group">
<label>用户名</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>密码</label>
<input class="form-control" type="password">
</div>
</form>
2.2 内联样式
为form添加类form-inline
<form role="form" class="form-inline">
2.3 水平样式
为form添加类form-horizontal
<form role="form" class="form-horizontal">
2.4 label标签
Bootstrap认为每一个表单控件都应该有一个label标签进行解释,否则不能实现某些特定的功能,因此我们要注意
1.为每个控件添加一个标签
2.如果不想看见这个标签,就为他添加一个sr-only类。
3.有一个for属性表示他和哪个控件绑定。
<label class="sr-only" for="name">用户名</label>
<input class="form-control" type="text" placeholder="name" id="name">
3.表单各个控件的样式
在这顺便复习一下各个控件的常用属性
3.1 input控件
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。
可以有
palceholder属性,提示信息。
value属性,表示默认值。
<label class="sr-only" for="name">用户名</label>
<input class="form-control" type="text" placeholder="name" id="name">
3.2 textarea控件
多行文本框,palceholder属性,提示信息。
row表示显示的行数,如果超过了这么多行,就会显示滚动条。
<div class="form-group">
<label class="sr-only" for="content">内容</label>
<textarea class="form-control" placeholder="content" id="content" rows="3" ></textarea>
</div>
3.3 select 下拉选择框
使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
使用 multiple=“multiple"或"true” 允许用户选择多个选项。按住ctrl可以进行多选
<label class="sr-only" for="choice2">内容</label>
<select multiple="true" id="choice2" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
3.4 特殊单选、多选
radio和checkbox本应该属于input标签里的不同type,但是他们的对齐方式很麻烦。因此,就有了bootstrap为他设计的css.Bootsrap4里像普通的input标签一样设置就可以了。Bootstrap3里设置比较麻烦(https://www.imooc.com/code/2348).
1.Bootstrap3里处理
(1)不管是checkbox还是radio都使用label包起来了
(2)checkbox连同label标签放置在一个名为“.checkbox”的容器内
(3)radio连同label标签放置在一个名为“.radio”的容器内
4Bootstrap4的处理
(1)正常情况可以直接像普通的input属性设置就好。
(2)自定义复选框和单选框 。https://www.runoob.com/bootstrap4/bootstrap4-forms-custom.html
3.关于属性
(1)name相同的认为是一组选项。
(2)value不显示
(3)checked表示默认选中。
4.Bootstrap实例,
div里form-check-inline表示水平排列的check,form-check表示竖直的check。radio同理
label里form-check-label或form-radio-label
checkbox里form-check-input
radio里form-radion-input
4.控件的状态
4.1 焦点状态,添加form-control类后
1.焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。
2.在Bootstrap框架中,file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样,主要是因为Bootstrap对他们做了一些特殊处理:
4.2 禁用状态disabled,添加form-control类后
在相应的表单控件上添加属性“disabled”
4.3 只读状态readonly,添加form-control类后
<div class="form-group">
<label for="test1">查看获得焦点的状态</label>
<input type="text" class="form-control" id="test1" placeholder="1">
</div>
<div class="form-group">
<label for="test2">查看不可选中的状态</label>
<input type="text" class="form-control" id="test2" placeholder="2" disabled>
</div>
<div class="form-group">
<label for="test3">查看只读的状态</label>
<input type="text" class="form-control" id="test3" placeholder="3" readonly>
</div>
4.3 验证状态
通过这个可以控制表单整体的颜色(在Bootstrap3中)
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
同时可以设置feedback属性来设置再各个控件上显示状态。
等待补充
5 其他
5.1帮助文本
<form role="form">
<span>帮助文本实例</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">一个较长的帮助文本块,超过一行,
需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>