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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
JS访问SWF的函数用法实例
2015/07/01 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python中np是做什么的
2020/07/21 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
单位绩效考核方案
2014/05/11 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
行风评议整改报告
2014/11/06 职场文书
首次购房证明
2015/06/19 职场文书
详解JS数组方法
2021/11/20 Javascript