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

bootstrap css样式之表单

时间：2020-03-08 15:59 编辑：来源：阅读：
扫一扫，手机访问

摘要：bootstrap css样式之表单

本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下 [b]1、表单基本用法[/b] [img]http://files.jb51.net/file_images/article/201701/2017119140829238.jpg?201701914851[/img]

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

[b]2、内联表单[/b] 为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。 [img]http://files.jb51.net/file_images/article/201701/2017119140912980.jpg?201701914919[/img]

<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">
 <div class="input-group">
  <div class="input-group-addon">@</div>
  <input class="form-control" type="email" placeholder="Enter email">
 </div>
 </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>

[b]3、水平排列的表单[/b] 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 [img]http://files.jb51.net/file_images/article/201701/2017119140941897.jpg?201701914954[/img]

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：原生javascript+css3编写的3D魔方动画旋扭特效
下一篇：Bootstrap CSS布局之表格

资讯排行榜
更多>>