全面解析Bootstrap表单使用方法(表单控件)_javascript技巧
单行输入框,常见的文本输入框,也就是input的type属性值为text。
在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”]
(其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”。
二、下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。
三、文本域textarea
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。
但如果textarea元素中添加了类名“.form-control”类名,则无需设置cols属性。
因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
四、复选框checkbox和单选择按钮radio
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
五、复选框和单选按钮水平排列
1、如果checkbox需要水平排列,只需要在label标签上添加类名“.checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“.radio-inline”
六、表单控件大小
Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件。
以上就是Bootstrap表单控件的使用方法,之后还有更多内容会不断更新,希望大家继续关注。
推荐阅读
-
全面解析Bootstrap表单使用方法(表单控件)_javascript技巧
-
全面解析Bootstrap表单使用方法(表单样式)_javascript技巧
-
全面解析Bootstrap表单使用方法(表单按钮)_javascript技巧
-
全面解析Bootstrap弹窗的实现方法_javascript技巧
-
基于Bootstrap实现Material Design风格表单插件 附源码下载_javascript技巧
-
全面解析Bootstrap表单使用方法(表单控件)_javascript技巧
-
全面解析Bootstrap表单使用方法(表单控件状态)_javascript技巧
-
获取表单控件原始(初始)值的方法_javascript技巧
-
全面解析Bootstrap图片轮播效果_javascript技巧
-
全面解析Bootstrap弹窗的实现方法_javascript技巧