码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 表单类

时间:2017-03-02 21:40:39      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:提交   textarea   str   元素   实例   菜鸟   name   form   input   

bootstrap 表单类

表单美化 

用法: 向父元素 <form role="form"></form>     添加 role="form"

   把标签和控件放在   .form-control 类的div里面

   向所有的文本元素   input  textarea   seclect   添加类   .form-control

  

 

 

 

三种表单布局类:  垂直表单(默认)    内联表单     水平表单

摘自菜鸟教程 
默认表单
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>


内联表单 需要对里面的元素宽度进行设置

bootstrap 表单类

标签:提交   textarea   str   元素   实例   菜鸟   name   form   input   

原文地址:http://www.cnblogs.com/baota/p/6492509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!