Bootstrap 表单
2015-11-26 10:34
573 查看
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。
from内 适用 当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static<
a0b9
span style="color:rgb(51,51,51);font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:24px;">。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div>
</form>
内联表单
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。水平表单
水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:向父 <form> 元素添加 class .form-horizontal。把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form>
<textarea class="form-control" rows="3"></textarea>
rows="*" 控制文本框的大小
class当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。
from内 适用 当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static<
a0b9
span style="color:rgb(51,51,51);font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:24px;">。
表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点:相关文章推荐
- bootstrap 栅格系统实现类似table跨行
- bootstrap table 插件
- bootstrap table 插件
- bootstrap table 插件
- bootstrap table 插件
- Bootstrap table
- bootstrap table 插件
- bootstrap table 插件
- bootstrap table 插件
- Bootstrap CSS样式
- Bootstrap 响应式实用工具
- Bootstrap 3 左右排序
- Bootstrap3 左边距
- bootstrap 翻页的状态
- bootstrap 翻页(对齐的链接)
- Bootstrap 翻页(pager)
- Bootstrap3 图片响应式
- Bootstrap中的面板
- Bootstrap历练实例:分页状态
- Bootstrap历练实例:分页的大小