Bootstrap快速学习笔记（2）表单系列之一

欢迎收看大奥编写的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">；

注意：知识的积累是一个漫长的过程，请继续关注后续内容。