完全深入学习Bootstrap表单


Posted in Javascript onNovember 28, 2016

前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

一、基础表单

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱:</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

具体解释:

(1)对于form标签的role属性,只是为了增强语义性,并无其他作用;

(2)给div设定.form-group类名,是为了让每个输入框上下间隔一定的距离,不然两个就会挨着;

(3)还有label的for属性和input的id必须同名,是为了标识它俩是一组,且当鼠标点击label标签时,光标会自动锁定到输入框,不用for属性时也可这样写:<label>邮箱:<input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </label>,此时input的长度不是屏幕宽度;

(4)给form添加.form-control类:
1.宽度100%显示;
2.设置了一个浅灰色(#ccc)的边框;
3.具有4px的圆角;
4.设置阴影效果,并且元素得到聚焦时,阴影和边框效果会有所变化;

二、水平表单(标签在左,输入框在右)

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入邮箱</button>
  </div>
 </div>
</form>

具体解释:

在form标签上使用类.form-horizontal主要有以下作用:
1、设置表单控件padding和margin值;
2、改变“form-group”的表现形式,类似于网格系统的“row”;
在使用时必须和网格系统配合使用,才能实现水平方向的效果,对于不同宽度的设备显示不同的布局,使用时可以调节浏览器的大小看不同的效果,当浏览器大小小于某个值就会呈垂直显示。

三、内联表单(表单控件都在一行显示)

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">邮箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

具体解释:
有时我们会用到在网页顶部的导航栏输入用户名和密码,这时就需要在一行显示,此时给form标签添加.form-inline类就可轻而易举的实现;同时当改变显示设备大小时就会自动发生换行,呈普通表单的样式。

四、表单的基本元素

1、input元素:加上类.form-control就可以实现最基本的输入框样式

(1)基本输入框

<input type="text" class="form-control">

(2)比基本大的输入框

<input type="text" class="form-control input-lg">

(3)比基本小的输入框

<input type="text" class="form-control input-sm">

2、 textarea元素:加上类.form-control可以不用设置cols属性值,此时标签宽度为100%

<textarea rows="5" class="form-control">

3.、select元素:与原始一致,作为下拉选择框,可以实现多行选择和单行选择,加上.form-control类只是为了同一风格

<select class="form-control"><option>222</option></select>

4.、复选框checkbox和单选按钮radio:

(1)给checkbox和radio专门写了.checkbox和.radio这两个类,是为了解决对齐问题,下面的代码是垂直显示

`<form role="form">
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   踢足球
  </label>
 </div>
 <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>   `

(2)复选框和单选框水平显示,此时不需要.checkbox和.radio类,但是要配合.form-group类同时使用,给label标签加上.check-inline或.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>

五、表单的验证

<form role="form">
 <div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  <span class="help-block">请输入正确信息</span>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 <span class="help-block">你输入的信息是错误的</span>  
  <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
 </div>
</form>

具体解释:
给div加上不同的类,如.has-warning警告状态,显示为黄色,.has-error错误状态,显示为红色,.has-success成功状态,显示为绿色;第一个span的.help-block为提示信息;第二个span加上后面的一长串类名,是为了在输入框后面提示不同的图标,其中.form-control-feedback必须和div的.has-feedback一同使用,不然图标不能显示在输入框内部。

总结:以上介绍了表单的不同显示样式,以及表单的具体的一些标签,个人觉得作为框架,最主要的是它的嵌套结构,在用时需要知道哪个标签里嵌套哪个标签。想要不同的风格,可以加入自己的css样式,总之灵活运用吧!

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
微信开发 微信授权详解
Oct 21 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
es6在react中的应用代码解析
Nov 08 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
Bootstrap选项卡动态切换效果
Nov 28 #Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 #Javascript
Bootstrap实现导航栏的2种方式
Nov 28 #Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 #Javascript
Bootstrap框架实现广告轮播效果
Nov 28 #Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
You might like
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python 基础知识之字符串处理
2017/01/06 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
家长给小学生的评语
2014/01/30 职场文书
促销活动总结报告
2014/04/26 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Go使用协程交替打印字符
2021/04/29 Golang