Bootstrap每天必学之表单


Posted in Javascript onNovember 23, 2015

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:

1.基本案例
2.内联表单
3.水平排列的表单
4.被支持的控件
5.静态控件
6.控件状态
7.控件尺寸
8.帮助文本

基本案例
 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

<form role="form">
 <div class="form-group">
 <label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
 <label for="exampleInputFile">File input</label>
 <input type="file" id="exampleInputFile">
 <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Check me out
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap每天必学之表单

两个文本框的宽度的确为100%。并且有三个form-group。
内联表单
为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。
需要设置宽度:在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单,你需要专门为使用到的表单控件设置宽度。

 一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。

<form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="submit" class="btn btn-default">Sign in</button>
</form>

Bootstrap每天必学之表单

水平排列的表单
 通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-10">
 <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <button type="submit" class="btn btn-default">Sign in</button>
 </div>
 </div>
</form>

Bootstrap每天必学之表单

被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telcolor。
注意:有正确设置了type的input控件才能被赋予正确的样式。
文本框示例

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

Bootstrap每天必学之表单

Textarea
支持多行文本的表单控件。可根据需要改变rows属性。  

<h1>textarea</h1>
 <textarea class="form-control" rows="3"></textarea>

Bootstrap每天必学之表单

Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)

<div class="checkbox">
 <label>
 <input type="checkbox" value="">
 Option one is this and that—be sure to include why it's great
 </label>
</div>

<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 Option one is this and that—be sure to include why it's great
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 Option two can be something else and selecting it will deselect option one
 </label>
</div>

Bootstrap每天必学之表单 

Inline checkboxes

通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。

<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

 Bootstrap每天必学之表单

 同理Radio是一样的,只需要添加一下样式即可。
Select

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

<select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Bootstrap每天必学之表单 

静态控件
 在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为<p>元素添加.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">Password</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" id="inputPassword" placeholder="Password">
 </div>
 </div>
</form>

Bootstrap每天必学之表单

控件状态

通过为控件和label设置一些基本状态,可以为用户提供回馈。

输入焦点

我们移除了某些表单控件的默认outline样式,并对其:focus状态赋予了box-shadow样式。

<input class="form-control" id="focusedInput" type="text" value="This is focused...">

被禁用的输入框
 

为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的fieldset

为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。
<a>标签的链接功能不受影响

这个class只改变<a class="btn btn-default">按钮的外观,并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。

跨浏览器兼容性

虽然Bootstrap会将这些样式应用到所有浏览器上,Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset

<form role="form">
 <fieldset disabled>
 <div class="form-group">
 <label for="disabledTextInput">Disabled input</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
 </div>
 <div class="form-group">
 <label for="disabledSelect">Disabled select menu</label>
 <select id="disabledSelect" class="form-control">
 <option>Disabled select</option>
 </select>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Can't check this
 </label>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </fieldset>
</form>

Bootstrap每天必学之表单

可将鼠标移到各个控件上进行查看效果。
校验状态
Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

<div class="form-group has-success">
 <label class="control-label" for="inputSuccess">Input with success</label>
 <input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
 <label class="control-label" for="inputWarning">Input with warning</label>
 <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
 <label class="control-label" for="inputError">Input with error</label>
 <input type="text" class="form-control" id="inputError">
</div>

Bootstrap每天必学之表单

控件尺寸
通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
 <input class="form-control" type="text" placeholder="Default input">
 <input class="form-control input-sm" type="text" placeholder=".input-sm">
 
 <select class="form-control input-lg">...</select>
 <select class="form-control">...</select>
 <select class="form-control input-sm">...</select>

Bootstrap每天必学之表单 

调整列尺寸
用栅格系统中的列包裹input或其任何父元素,都可很容易的为其设置宽度。

<div class="row">
 <div class="col-xs-2">
 <input type="text" class="form-control" placeholder=".col-xs-2">
 </div>
 <div class="col-xs-3">
 <input type="text" class="form-control" placeholder=".col-xs-3">
 </div>
 <div class="col-xs-4">
 <input type="text" class="form-control" placeholder=".col-xs-4">
 </div>
</div>

帮助文本
 用于表单控件的块级帮助文本。

<span class="help-block">自己独占一行或多行的块级帮助文本。</span>

 本篇文章主要讲解表单中各种控件的样式控制,其中也有看到按钮的简单样式使用,下一篇文章将重点来讲解按钮的样式。

详细内容可以参考:

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

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

Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
javascript实现表单验证
Jan 29 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
jquery制作属于自己的select自定义样式
Nov 23 #Javascript
基于jquery实现省市联动效果
Nov 23 #Javascript
jquery实现加载进度条提示效果
Nov 23 #Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 #Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 #Javascript
Jquery 效果使用详解
Nov 23 #Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
You might like
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
node网页分段渲染详解
2016/09/05 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
解密Python中的描述符(descriptor)
2015/06/03 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python把转列表为集合的方法
2019/06/28 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
深圳茁壮笔试题
2015/05/28 面试题
技术人员面试提纲
2013/11/28 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年党员自评材料
2014/12/17 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
Nginx跨域问题解析与解决
2022/08/05 Servers