首页 > 教程 > 关键词 > Bootstrap3.0学习最新资讯 > 正文

Bootstrap3.0学习第六轮:表单

2013-12-05 15:17 · 稿源:aehyok博客园

上一篇:Bootstrap3.0学习第五轮:表格

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

本文主要来讲解以下内容:

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例

单独的表单控件会被自动赋予一些全局样式。所有设置了.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>

两个文本框的宽度的确为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>

水平排列的表单

通过为表单添加.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>

被支持的控件

在表单布局案例中展示了其所支持的标准表单控件。

Input

大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

注意:有正确设置了type的input控件才能被赋予正确的样式。

文本框示例

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

Textarea

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

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

Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。

默认外观(堆叠在一起) <div class="checkbox">

<label>

<input type="checkbox" value="">    Option one is this and that&mdash;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&mdash;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>

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>

同理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>

静态控件

在水平布局的表单中,如果需要将一行纯文本放置于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>

控件状态

控件状态

通过为控件和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对表单控件的校验状态,如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>

控件尺寸

通过.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>

调整列尺寸

用栅格系统中的列包裹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>

总结

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

  • 相关推荐
  • 大家在看
  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 外媒:大数据公司Palantir计划在数周内提交IPO申请

    6月18日消息,据国外媒体报道,知情人士称,硅谷大数据公司Palantir计划在数周内提交IPO(首次公开募股)申请,准备在今年秋天登陆资本市场。Palantir知情人士称,Palantir正在与投行合作,期望在上市之前解决公司的资本结构问题;Palantir还在与顾问协助,为IPO做好其它准备工作。去年,外媒曾报道,Palantir需要找到足够的经验丰富的财务人员来处理首次公开募股的财务事项。Palantir向政府部门,以及金融、健康和其?

  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • 苹果发布App Store生态商业数据,完整数据报告汇总

    6月16日苹果公司发布了App Store生态商业数据,这份数据报告中苹果指出2019年App Store商店全球范围促成 5190 亿美元商业交易,淘宝、京东、苏宁易购等零售类 app 完成了 2680 亿美元销售。

  • 瑞幸推迟提交年报,受到疫情和内部调查影响

    美国当地时间6月15日瑞幸咖啡向SEC提交监管备案文件称,该公司将推迟提交 2019 年度的年报,瑞幸咖啡在文件中表示本次推迟提交年报的主要原因是受新冠肺炎延迟财务报表编制过程以及内部调查悬而未决的影响。

  • 小狸AI:作为家长,该如何帮助孩子从小培养学习习惯和学习能力?

    科学证明,每个孩子都是天生的学习高手。与生俱来的学习动力让他们生来就对外界事物充满了好奇心,但随着年龄的增大,有些孩子的内在学习动力则会相对减退。因此,有远见的父母都会有意识地帮孩子从小培养主动学习的习惯和能力。甚至懂得要为孩子搭建成长生态。那么,家长到底该如何科学地帮助孩子培养主动学习力呢?一直以来,我都认为要让专业的人做专业的事。所以,在网上看了很多资料后,帮孩子选择了小狸AI课。小狸AI课,是中

  • 猿辅导在线教育开放多种学习课程 为学生提供学习支持

    随着国内疫情的缓解,学生们这个超长的假期即将结束了。国内头部K12 在线教育公司猿辅导在这个假期推出了线上免费直播课,为学生们宅在家里提供了精神食粮,帮助学生们启发思维,探索自身价值,受到了广大学子们的好评。其实无论在什么时候,学习力和专注力是影响学生学习效果的最主要的两个因素;而往往,学生自己却意识不到自己学习进步缓慢是受这两个因素的影响。寒假延长期期间,学生们在家学习,它们的影响也就更为显著了。针?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 数据:超过七成的美国人不想使用新冠病毒追踪APP

    调查数据显示,只有不到三成的美国人打算使用联系人追踪应用。该数据是美国安全公司Avira于 6 月 1 日对 2000 多名美国人进行的在线调查获得的。

  • 当代青年都该掌握的投屏学习指南

    我们正处于一个信息爆炸的时代,不管是知识层面还是技术层面,几乎都是日新月异的,职场的激烈竞争,无形中要求了每个人都需要不断学习来完善自我。所幸,这些年互联网分享知识趋势发展迅猛,以B站为例,从 2020 年 2 月 1 日到 3 月 25 日,不到 2 个月的时间,热爱知识的的UP们在学习频道里上传了数以万计的学习视频,同时有超过千万的用户在B站学习。其学习内容包罗万象,今天小编总结了一份B站学习指南,希望大家好好学习,天?

  • 冲刺科创板,天士力生物提交“上市辅导备案文件”

    据IPO早知道消息,证监会上海监管局 6 月 10 日晚间披露了天士力生物医药股份有限公司的A股上市辅导备案文件,辅导机构为中信证券。天士力生物母公司天士力医药集团是中药、生物药、化学药研发制造企业。 2018 年,天士力(600535.SH)将公司的生物药相关资产划转给旗下天士力生物,并将其改制为股份有限公司,拟将此生物药板块作为独立平台上市。今年 5 月,天士力公开表示:计划将天士力生物分拆至科创板上市。天士力生物成立于 20

  • 兴趣是英语学习源动力,阿卡索多元化课程提高孩子学习效果

    近几年,随着全球化进程加快及消费升级,父母对子女英语教育方面的投入意愿越来越强。相较于传统的线下大班教学,在线英语教育因其突破时空限制,随时随地都能学习英语,而受到众多家长青睐。易观发布的《 2020 中国互联网教育行业总结和新风向洞察》显示,聚焦互联网语言教育市场领域,青少儿英语份额正在持续上升,预计到 2022 年,青少儿英语市场份额占互联网语言教育市场比例将上升到23%。 对于青少年来说,缺少互动的线上学?

  • 终身学习者无畏,万门大学VIP一站式学习新体验

    终身学习的概念对许多人来说并不陌生。机遇和挑战伴随着人的一生,但不管是抓住机会,还是迎接挑战都离不开学习带来的提升。那有没有更实在高效的终身学习方案呢?万门大学推出万门VIP,提供一站式终身学习解决方案,为终身学习保驾护航。从万门大学官网了解到,万门大学VIP分为,一年和终身两种权益。平台课程适用人群非常广泛,从适龄中小学生,到升学、考证、跨专业学习的大学生,以及职场白领都能从万门大学VIP提供的服务中享?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 苹果要求提交游戏版号时间已过 部分游戏或面临下架风险

    DoNews 7月1日消息(记者 刘文轩)苹果早在今年年初就已经对应用上传后台审核规定进行修改,要求游戏企业在6月30日前,提交在中国大陆发布的任何付费游戏或可提供应用内购买项目游戏的批准文号。7月1日,苹果要求提交游戏批准文号的时间已过。在这之前有消息称,今年7月开始,无版号新游戏将无法通过苹果审核和上架中国区App Store。苹果在今年2月向开发者发出通知,要求6月30日前提交游戏版号。报道称,这一要求不仅针对中国开发?

  • 海外多个约会APP高达845GB数据泄露 包含露骨照片、聊天记录等

    上个月,安全研究人员Noam Rotem和Ran Locar在扫描开放的互联网时,无意中发现了一组可公开访问的亚马逊网络服务(AWS)数据包。每个数据包包含了来自多个不同约会应用的数据,包括3somes、Cougary、Gay Daddy Bear等等。研究人员总共找到了845GB和近 250 万份记录,可能涉及了数十万用户的数据。

  • 中科院少儿英语报告:在线学习意愿首超线下 72%家长愿意选择线上学习

    近日,中科院大数据挖掘与知识管理重点实验室发布了《 2020 年中国在线青少儿英语教育市场报告》,对在线青少儿英语市场和品牌,以及家长选择在线英语教育因素作了相关调查。报告显示,39%的家长认为线上师资和教研产品已经感伤甚至超越线下机构,同时具备便捷、省时省力的优势,他们更愿意只为孩子选择线上学习方式。同时为孩子搭配线上线下学习的家长占比为33%,只愿意选择线下机构的占比将至28%。这就意味着,从家长的选择意愿?

  • 上交所:科创板拟上市公司中芯国际提交注册

    据上交所披露,科创板拟上市公司中芯国际集成电路制造有限公司提交注册。6 月 19 日晚间,上交所披露科创板第 47 次上市委员会审议会议结果,同意中芯国际首发上市。

  • 直播3.0时代:综艺+带货+内容如何“赢过”买买买

    用户对不同品类商品的关注点不同,带货方式也有所不同。比如罗永浩带货网红食品钟薛高跟薇娅带货卫星,梁建章带货酒店与董明珠带货家电,都会有所不同。随着直播赛道越来越拥挤,各个细分品类的直播开始呈现出不同的行业规律。

  • 鲸小喜3.0:实体店如何用会员制提高业绩?

    最近几年,会员制的发展速度可以用惊人来形容,很多大公司,都开始疯狂推会员制。2015 年,京东推出PLUS会员; 2016 年,唯品会推出超级VIP会员; 2017 年,网易考拉推出黑卡会员、苏宁易购推出SUPER会员; 2018 年,阿里推出 88 超级会员。 以上是一些互联网公司,我们再来看一看线下实体商家。 2015 年物美推出会员制超市尚佳会员店、永辉也在上海开出超市会员店; 2017 年,银泰推出付费会员365; 2019 年,中国首家Costco开市客落址

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天