BootStrap中的表单大全

  对于表单中的input、textarea、select,一般我都会加上类”form-control”,它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单)。并且每个元素(包括label和待输入元素)都会加上”form-group”。它的样式只有一个。margin-bottom:15px。   

<form action=""> <div> <label for="">用户名:</label> <input type="text"/> </div> <div> <label for="">密码:</label> <input type="password"/> </div> </form>

  内联表单

  通过给最外层元素(form-group的父元素)加上”form-inline”。表示所有表单元素都在一行显示(充足的宽度的情况下)。并且”.form-inline .form-group”展示为内联块元素(inline-block)。并且”.form-inline .form-control”的宽度是auto。这样可以保证在一行展示。

<form action=""> <div> <label for="">用户名:</label> <input type="text"/> </div> <div> <label for="">密码:</label> <input type="password"/> </div> </form>

  水平表单

  不同于普通表单和内联表单。如果要将label和input表单元素显示在一行,则需要使用”form-horizontal”。该类联合”form-group”使用,就相当于网格系统中的”row”。所以它的子类有”col-md-*”,而label的 “control-label”—-“.form-horizontal .control-label”,有文本右对齐的效果。如果不加这个,label和input的会显得不对齐。

<form action=""> <div> <label for="">用户名:</label> <div> <input type="text"/> </div> </div> <div> <label for="">密码:</label> <div> <input type="password"/> </div> </div> </form>

  表单大小

  控制input大小的是”input-sm”,”input-lg”,它们使input输入框比正常看起来更小或者更大。与此对应的是label中文本的大小。需要在父级”form-group”同时加上”form-group-sm”,”form-group-lg”。如上面一个demo的密码输入框。

输入框

  在HTML5中,输入框(input)标签中的type支持了更多的类型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。标签<input>上只有赋值了特定的type才能显示正确的样式。有些元素只有在手机上才能显示其效果。

下拉框select

  与输入框类似。只是将input改成了select,同时加上了”form-control”类。

<form action=""> <div> <label for="">请选择:</label> <div> <select> <option value="">HTML</option> <option value="">CSS</option> <option value="">Javascript</option> <option value="">JAVA</option> <option value="">PHP</option> <option value="">Nodejs</option> </select> </div> </div> </form>

  col-md-pull-*是左偏移。

文本域

  和上面类似。  

<form action=""> <div> <label for="">textarea:</label> <div> <textarea rows="3"> hello </textarea> </div> </div> </form>

多选框和单选框

  为了使radio和checkbox元素显示在一行,并且和label对齐。bootstrap提供了两种选择。其一:

<div> <label for=""> <input type="radio"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio"/>保密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label> <label for=""> <input type="checkbox"/>HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox"/>CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox"/>JavaScript&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label> </div>

  label本身是inline-block的。但是.radio,.checkbox本身却是block的。  

  所以用一个label包裹多个单选框或复选框,这样会显得很不专业(haha)。还有,很多的&nbsp;也是很不美观的。So,第二种写法来了。

<div> <label for=""> <input type="radio"/>男 </label> <label for=""> <input type="radio"/>女 </label> <label for=""> <input type="radio"/>保密 </label> <br /> <label for=""> <input type="checkbox" />HTML </label> <label for=""> <input type="checkbox" />CSS </label> <label for=""> <input type="checkbox" />JavaScript </label> </div>

表单验证

  has-success:成功,绿色。

  has-warning:警告,黄色。

  has-error:错误,红色。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfyxz.html