1. 概述

表单控件用来获取表单中输入的信息，HTML5提供了各种不同的表单控件，而在Bootstrap中这些控件的样式得到了进一步的加强。

2. 基本输入控件

在Bootstrap中，只需为基本输入控件添加.form-control类，即可将控件的样式设置为Bootstrap提供的预设样式。接下来我们用一个实例来展示下常用的输入控件。

             <!-- 基本输入控件 --><div class="col-md-12"><form action="#" class="form-horizontal"><div class="form-group"><label class="control-label col-md-3">文本框:</label><div class="col-md-9"><input type="text" class="form-control"></div></div><div class="form-group"><label class="control-label col-md-3">密码框:</label><div class="col-md-9"><input type="password" class="form-control"></div></div><div class="form-group"><label class="control-label col-md-3">单选框:</label><div class="col-md-9"><input type="radio" class="form-control"></div></div><div class="form-group"><label class="control-label col-md-3">复选框:</label><div class="col-md-9"><input type="checkbox" class="form-control"></div></div><div class="form-group"><label class="control-label col-md-3">文本域:</label><div class="col-md-9"><textarea rows="10" class="form-control"></textarea></div></div></form></div>

对应效果如下，可见Bootstrap对样式进行了优化，但是对功能是没啥影响的。

3. 调整表单控件的大小

有时候我们需要手工调整控件的大小，主要是设置控件的宽度和高度。

一般我们为了提供响应式的实现效果，对宽度的调节是通过调节.col-md-*网格类实现的。

而对于高度的调节，除了默认的大小，BootStrap还提供了.input-lg、.input-sm类，来提供大号、小号的显示效果。

代码如下：

         <!-- 调整控件大小 --><div class="col-md-12"><form action="#" class="form-horizontal"><div class="form-group"><label class="control-label col-md-3">正常:</label><div class="col-md-9"><input type="text" class="form-control"></div></div><div class="form-group"><label class="control-label col-md-3">大号:</label><div class="col-md-9"><input type="text" class="form-control input-lg"></div></div><div class="form-group"><label class="control-label col-md-3">小号:</label><div class="col-md-9"><input type="text" class="form-control input-sm"></div></div></form></div>

效果如下：

4. 表单控件的特殊用法

Bootstrap还针对单选框、复选框提供了特殊用法，使这些控件使用起来更加符合用户习惯。

4.1 单选框用法

在上面的示例中，单选框的描述文字在左侧，单选按钮在右侧。

而在实际使用场景中，一般是单选框在左侧，而相应的描述文字在右侧，所以Bootstrap提供了.radio样式，用于包裹单选按钮及其描述。代码如下：

                 <div class="radio"><label><input type="radio" name="sex" value="radio-male">男</label></div><div class="radio"><label><input type="radio" name="sex" value="radio-femal">女</label></div>

还可使用.radio-inline样式创建内联的单选框组，代码如下：

             <div class="radio-inline"><label><input type="radio" name="sex2" value="radio-male">男</label></div><div class="radio-inline"><label><input type="radio" name="sex2" value="radio-femal">女</label></div>

上述两段代码效果如下：

4.2 复选框用法

复选框的用法与单选框类似，Bootstrap提供了.checkbox和.checkbox-inline样式用来设置复选框的样式。代码如下：

          <div class="col-md-12"><div class="checkbox"><label><input type="checkbox">篮球</label></div><div class="checkbox"><label><input type="checkbox">足球</label></div><div class="checkbox-inline"><label><input type="checkbox">篮球</label></div><div class="checkbox-inline"><label><input type="checkbox">足球</label></div></div>

对应效果如下：

5. 小结

Bootstrap为表单控件提供了几个样式，使表单控件的显示更加规范且符合用户习惯，简单且优雅，极具实用和借鉴价值。

零基础Bootstrap入门教程(9)--使用表单控件相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础Bootstrap入门教程(26)–轮播的实现
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1. 概述上一篇我们讲述了折叠插件的用法,可以将任意的div元素包含的内容进行动态的折叠/显 ...
零基础Bootstrap入门教程(16)--模态框
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述模态框 ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
零基础HTML入门教程(17)——表单的单选框和复选框
本章目录 1.任务目标 2.单选框radio 3.复选框checkbox 4.小结 1.任务目标我们上一小结学习了,密码输入框和文本输入框,我们这一小结学习复选框和单选框. 2.单选框radio 单 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...

零基础Bootstrap入门教程(9)--使用表单控件

本文目录