全面解析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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JS根据生日算年龄的方法
May 05 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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简单处理XML数据的方法示例
2017/05/19 PHP
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python处理csv数据的方法
2015/03/11 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
深入理解Python装饰器
2016/07/27 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python用match()函数爬数据方法详解
2019/07/23 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
大学生自我鉴定
2013/12/08 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
关于环保的宣传稿
2015/07/23 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
django 认证类配置实现
2021/11/11 Python