- 垂直或基本表单
向父form添加role=“form”
将标签和控件放在class=form-group的
中,作用:获取最佳间距所需。
向所有文本元素、、添加class=“form-control”
向所有文本元素、、添加class=“form-control”
<form role="form">
<div class="form-group">
<label >名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
</form>
- 内联表单
向左并齐,标签并排,向form中添加class=“form-inline”
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
</form>
可以通过为 label 设置 .sr-only 类将其隐藏
- 水平表单
form添加class=“form-horizontal”
lable添加class=“control-label”
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</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>
- 表单控件大小
class=“input-lg”(或input-sm)控制表单高度
class=“col-lg-number”(或col-sm-n)控制表单宽度
class="col-sm-offset-n”控制间隔
bootstrap网格系统列数量和为12
超小设备手机(<768px) | 小型设备电脑(>=768px) | 中型设备电脑(>=992px) | 大型设备电脑(>=1200px) | |
---|---|---|---|---|
class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
class前缀 | auto | 60px | 78px | 95px |
间隙宽度 | 30px(一个列两边每边分别为15px) | 30px | 30px | 30px |
偏移列 | 不支持 | .col-sm-offset-* | .col-md-offset-* | .col-lg-offset-* |
把一个列的左外边距margin增加*列,范围是1-11
列排序:.col-md-push-* 向右偏移
.col-md-pull-*向左偏移
*范围1-11