Bootstrap表单控件学习使用


Posted in Javascript onMarch 07, 2017

Bootstrap表单控件的学习使用,供大家参考,具体内容如下

输入框(Input)

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<form role="form">
 <div class="form-group">
  <label for="name">标签</label>
  <input type="text" class="form-control" id="name" placeholder="文本输入">
 </div>
</form>

Bootstrap表单控件学习使用

文本框(Textarea)

当您需要进行多行输入的时,则可以使用文本框 textarea。
必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。(超过这个值就会产生滚动条)

<form role="form">
 <div class="form-group">
  <label for="name">文本框</label>
  <textarea class="form-control" id="name" rows="3"></textarea>
 </div>
</form>

Bootstrap表单控件学习使用

复选框(Checkbox)和单选框(Radio)

(1)复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
(2)当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。
(3)对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项1
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项2
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项3
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2- 选择它将会取消选择选项 1
 </label>
</div>

Bootstrap表单控件学习使用

<label for="name">内联的复选框和单选按钮的实例</label>
<div>
 <label class="checkbox-inline">
  <input type="checkbox" value="">选项1
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">选项2
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">选项3
 </label>

 <label class="radio-inline">
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label class="radio-inline">

 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2
 </label>
</div>

Bootstrap表单控件学习使用

选择框(Select)
(1)当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。
(2)使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
(3)使用 multiple=”multiple” 允许用户选择多个选项。

<form role="form">
 <div class="form-group>
  <label for="name">选择列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>

  <label for="name">可多选的选择列表</label>
  <select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>

Bootstrap表单控件学习使用

静态控件

需要在一个水平表单内的表单标签后放置纯文本时,请在<p>上使用 class .form-control-static。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
 </div>
</form>

Bootstrap表单控件学习使用

表单控件状态

(1)除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。
(2)输入框焦点:当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。
(3)禁用的输入框 input:如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
(4)禁用的字段集 fieldset:对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
(5)验证状态:Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">聚焦</label>
  <div class="col-sm-10">
   <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
  <div class="col-sm-10">
   <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
  </div>
 </div>

 <fieldset disabled>
  <div class="form-group">
   <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
   <div class="col-sm-10">
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
   </div>
  </div>

  <div class="form-group">
   <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
   <div class="col-sm-10">
    <select id="disabledSelect" class="form-control">
     <option>禁止选择</option>
    </select>
   </div>
  </div>
 </fieldset>

 <div class="form-group has-success">
  <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputSuccess">
  </div>
 </div>

 <div class="form-group has-warning">
  <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputWarning">
  </div>
 </div>

 <div class="form-group has-error">
  <label class="col-sm-2 control-label" for="inputError">输入错误</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputError">
  </div>
 </div>
</form>

Bootstrap表单控件学习使用

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* (<input>)来设置表单的高度和宽度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
PHP中for循环语句的几种变型
2007/03/16 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
Bootstrap Table使用整理(二)
2017/06/09 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python中元组,列表,字典的区别
2017/05/21 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python3中exp()函数用法分析
2019/02/19 Python
python dict乱码如何解决
2020/06/07 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
商场端午节活动方案
2014/01/29 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
大学生自我评价范文
2015/03/03 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python