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 相关文章推荐
JavaScript实现带标题的图片轮播特效
May 20 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
用webAPI实现图片放大镜效果
Nov 23 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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
prototype class详解
2006/09/07 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python K最近邻从原理到实现的方法
2019/08/15 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python logging设置level失败的解决方法
2020/02/19 Python
python 的topk算法实例
2020/04/02 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
幼师自荐信
2013/10/26 职场文书
红色故事演讲稿
2014/05/22 职场文书
设备售后服务承诺书
2014/05/30 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
单身证明格式样本
2015/06/15 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android