当前位置：首页 > 资讯 > 技术文档

Bootstrap每天必学之表单

时间：2021-06-10 05:15 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap每天必学之表单

本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容： [b]1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本[/b] [b]基本案例 [/b] 单独的表单控件会被自动赋予一些全局样式。所有设置了.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>

[img]http://files.jb51.net/file_images/article/201511/20151123115326120.png?20151023115335[/img] 两个文本框的宽度的确为100%。并且有三个form-group。 [b]内联表单[/b] 为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。 [b]需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。 [/b] [b] 一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。[/b]

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

[img]http://files.jb51.net/file_images/article/201511/20151123115429540.png?20151023115436[/img] [b]水平排列的表单[/b] 通过为表单添加.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>

[img]http://files.jb51.net/file_images/article/201511/20151123115509519.png?20151023115517[/img] [b]被支持的控件[/b] 在表单布局案例中展示了其所支持的标准表单控件。 [b]Input[/b] 大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。注意：有正确设置了type的input控件才能被赋予正确的样式。文本框示例

[url=http://www.1sucai.cn/article/75326.htm][b]全面解析Bootstrap表单使用方法（表单样式）[/b][/url] [url=http://www.1sucai.cn/article/75328.htm][b]全面解析Bootstrap表单使用方法（表单控件）[/b][/url] [url=http://www.1sucai.cn/article/75332.htm][b]全面解析Bootstrap表单使用方法（表单控件状态）[/b][/url] [url=http://www.1sucai.cn/article/75333.htm][b]全面解析Bootstrap表单使用方法（表单按钮）[/b][/url] 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Bootstrap基本插件学习笔记之Alert警告框(20)
下一篇：Bootstrap基本样式学习笔记之表单(3)

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部