当前位置：首页 > 资讯 > 技术文档

全面解析Bootstrap表单使用方法（表单控件）

时间：2020-08-27 01:18 编辑：来源：阅读：
扫一扫，手机访问

摘要：全面解析Bootstrap表单使用方法（表单控件）

[b]一、输入框input[/b] 　　单行输入框，常见的文本输入框，也就是input的type属性值为text。　　在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。　　为了让控件在各种表单风格中样式不出错，需要添加类名“.form-control”。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

[img]http://files.jb51.net/file_images/article/201511/2015112492924428.jpg?2015102492932[/img] [b]二、下拉选择框select[/b] 　　Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

[img]http://files.jb51.net/file_images/article/201511/2015112492945450.jpg?2015102492953[/img] [b]三、文本域textarea[/b] 　　文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。　　但如果textarea元素中添加了类名“.form-control”类名，则无需设置cols属性。　　因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

[b][img]http://files.jb51.net/file_images/article/201511/2015112492959309.jpg?2015102493017[/img] [/b] [b]四、复选框checkbox和单选择按钮radio[/b] 　　1、不管是checkbox还是radio都使用label包起来了　　2、checkbox连同label标签放置在一个名为“.checkbox”的容器内　　3、radio连同label标签放置在一个名为“.radio”的容器内

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

[b][img]http://files.jb51.net/file_images/article/201511/2015112493029696.jpg?2015102493036[/img] [/b] [b]五、复选框和单选按钮水平排列 [/b]　　1、如果checkbox需要水平排列，只需要在label标签上添加类名“.checkbox-inline” 　　2、如果radio需要水平排列，只需要在label标签上添加类名“.radio-inline”

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

[b][img]http://files.jb51.net/file_images/article/201511/2015112493045176.jpg?2015102493053[/img] [/b] [b]六、表单控件大小 [/b]Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：　　1、input-sm:让控件比正常大小更小　　2、input-lg:让控件比正常大小更大这两个类适用于表单中的input，textarea和select控件。

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

[img]http://files.jb51.net/file_images/article/201511/2015112493106123.jpg?2015102493114[/img] 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是Bootstrap表单控件的使用方法，之后还有更多内容会不断更新，希望大家继续关注。

全部评论(0)

上一篇：Bootstrap自定义文件上传下载样式
下一篇：JS简单随机数生成方法

资讯排行榜
更多>>