全面解析Bootstrap表单使用方法(表单控件)


Posted in Javascript onNovember 24, 2015

一、输入框input

单行输入框,常见的文本输入框,也就是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>

 全面解析Bootstrap表单使用方法(表单控件)

二、下拉选择框select

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>

全面解析Bootstrap表单使用方法(表单控件)

三、文本域textarea

文本域和原始使用方法一样,设置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>

全面解析Bootstrap表单使用方法(表单控件)

四、复选框checkbox和单选择按钮radio

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>

全面解析Bootstrap表单使用方法(表单控件)

五、复选框和单选按钮水平排列

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>

全面解析Bootstrap表单使用方法(表单控件)

六、表单控件大小
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,控件变小">

全面解析Bootstrap表单使用方法(表单控件)

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是Bootstrap表单控件的使用方法,之后还有更多内容会不断更新,希望大家继续关注。

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
JS实现密码框效果
Sep 10 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Vue header组件开发详解
2018/01/26 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
python实现随机调用一个浏览器打开网页
2018/04/21 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python中安装django模块的方法
2020/03/12 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
《争吵》教学反思
2014/02/15 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Python中的 Set 与 dict
2022/03/13 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python