一时兴起,想开始写博客了,想保留这份激情,还是行动起来,来的实在。
这应该算是学习笔记或技术笔记类吧,很实用。
首先我们先来看下Bootstrap官方html属性顺序的编码规范:
- class
- id, name
- data-*
- src, for, type, href
- title, alt
- aria-*, role
其次让我们来看下Bootstrap表单:
这里的表单形式主要分为三类分别是基本实例、内联表单和水平排列的表单。
基本实例:
这里主要用到了
.form-group、.form-control、.help-block;
.form-group和.form-control
样式在表单中是十分常见的。
.help-block样式在表单中起着辅助文本的角色,
辅助文本:针对表单控件的“块(block)”级辅助文本。
- <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>
内联表单:
在基本实例的基础上给form标签加上.form-inline样式,基本实例表单就变成了内联表单。
这里主要介绍下
.sr-only、.input-group、.input-group-addon、.checkbox
.sr-only:假如你不想让dom元素显示在页面上这就是最好的选择。
.input-group和.input-group-addon是输入框组的混合使用,是不是很给力,如果你想在文本框两端都进行混合使用只需这样子写即可:
- <div class="input-group">
- <span class="input-group-addon">$</span>
- <input type="text" class="form-control">
- <span class="input-group-addon">0.00<span>
- </div>
- <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>
- </form>
水平排列的表单:
给表单加上.form-horizontal样式就变成了不平排列的表单。
这里主要用到了.col-sm-*和.col-sm-offset-*,具体用法可以看Bootstrap官网的栅格系统。
- <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>
我们还会遇到一个问题,假如我们想要纯文本不要文本框这要怎么对齐呢?
这里就要用到静态控件了。
为<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>