脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap表单使用方法

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

 更新时间：2015年11月24日 09:27:22   作者：傻籽  
这篇文章全面解析了Bootstrap表单的使用方法，本文重点介绍Bootstrap表单控件，感兴趣的小伙伴们可以参考一下

一、输入框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>

 

二、下拉选择框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>


三、文本域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>

四、复选框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>

五、复选框和单选按钮水平排列
　　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框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
　　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表单控件的使用方法，之后还有更多内容会不断更新，希望大家继续关注。

您可能感兴趣的文章:

相关文章

  • JS中使用sort结合localeCompare实现中文排序实例

    JS中使用sort结合localeCompare实现中文排序实例

    这篇文章主要介绍了JS中使用sort结合localeCompare实现中文排序实例,重点介绍localeCompare函数,需要的朋友可以参考下
    2014-07-07
  • javaScript遍历对象和数组的方法总结

    javaScript遍历对象和数组的方法总结

    这篇文章介绍了javaScript遍历对象和数组的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 浅谈Javascript鼠标和滚轮事件

    浅谈Javascript鼠标和滚轮事件

    浅谈Javascript鼠标和滚轮事件,鼠标事件也许是web页面当中最常用到的事件，因为鼠标是最常用的导航设备
    2012-06-06
  • 浅析JavaScript 函数柯里化

    浅析JavaScript 函数柯里化

    这篇文章主要介绍了JavaScript 函数柯里化的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • 20行JS代码实现粘贴板复制功能

    20行JS代码实现粘贴板复制功能

    本文给大家分析20行JS代码实现粘贴板功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-02-02
  • javascript 在firebug调试时用console.log的方法

    javascript 在firebug调试时用console.log的方法

    当你使用console.log()函数时，下面的firebug一定要打开，不然这函数在用firefox运行时无效且影响正常程序，如果用IE打开，将会出错
    2012-05-05
  • 使用js画图之画切线

    使用js画图之画切线

    这篇文章主要介绍了使用js绘制几何图形系列教程中的画切线篇，非常方便我们好好熟悉理解javascript，推荐给大家
    2015-01-01
  • JavaScript 数组去重详解

    JavaScript 数组去重详解

    下面小编就为大家带来一篇JavaScript数组去重的几方法推荐。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看
    2021-09-09
  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)

    这篇文章主要介绍了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法,结合实例形式分析了javascript函数式编程中箭头函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-05-05
  • javascript表单验证 - Parsley.js使用和配置

    javascript表单验证 - Parsley.js使用和配置

    大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦
    2013-01-01

最新评论