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获取Form表单中被选中的radio值
Aug 09 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
angular实现商品筛选功能
Feb 01 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
原生js轮播特效
2017/05/18 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
一个超级简单的python web程序
2014/09/11 Python
python中的闭包用法实例详解
2015/05/05 Python
Python多线程thread及模块使用实例
2020/04/28 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
python跨文件使用全局变量的实现
2020/11/17 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
学生处主任岗位职责
2013/12/01 职场文书
求职自荐书范文
2013/12/04 职场文书
自我鉴定书面格式
2014/01/13 职场文书
授权委托书怎么写
2014/04/03 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
房屋授权委托书范本
2014/10/07 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Java实现多文件上传功能
2021/06/30 Java/Android