表单系列1
欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一
本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦:
- .form-control类
- 水平表单
- 内联表单
详细介绍
- form-control类
把该类直接添加到控件上; 1、宽度变成了100%;2、设置了一个浅灰色(#ccc)的边框;3、具有4px的圆角;4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化;5、设置了placeholder的颜色为#999
- 水平表单
最外层form标签要添加form-horizontal类;每一对label和input的外围要添加div容器并带有类 名form-group;其中label标签要添加类col-sm-2;input标签要添加div容器并带有类名col-sm-10;记住密码选项要用 类型为checkbox的input标签来实现,外围要有label标签,再外边是div标签带有checkbox类名,再外边是div标签带有col- sm-offset-2 col-sm-10类名,再外边是带有form-group类名的div标签;提交按钮用button标签带有btn btn-default类名来实现,外围是div标签带有col-sm-offset-2 col-sm-10类名,再外边是带有form-group类名的div标签;
- 内联表单
将所有表单控件显示在一行之内,通过class类form-inline来实现;如果要在input标签前面添加label 标签的话,要把两个标签都包含在带有form-group类属性的div标签里,并为label标签设置sr-only类属性,此举出于为残障人士的考 虑;
- 复选框和单选按钮水平排列
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox- inline”;2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”;大致结构<form role="form">中包含<div class="form-group">中包含<label class="radio-inline">中包含<input type="radio">;
注意:知识的积累是一个漫长的过程,请继续关注后续内容。