Bootstrap-表单

原創

2020-02-21 04:47

表单中常见元素主要是：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮。

1、基础表单（仅对表单内的 fieldset、legend、label标签进行定制）：

源码：

fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}
legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;
        color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}
label {display: inline-block;margin-bottom: 5px;font-weight: bold;}

说明：主要将这几个元素的margin、padding、border值进行设置；

还对input、select、textarea通过使用类名“form-control”进行设置（宽度变成了100%；设置了一个浅灰色的边框；具有4px的圆角；设置了placeholder的颜色为#999；设置了阴影效果，而且在元素得到焦点之前，阴影和边框效果会有所变化）。

用法：

<form role="form">
    <div class="form-group">
    <lable for="exampleInputEmail1">邮箱:</lable> 
    <input type="email" placeholder="请输入您的邮箱地址" class=" form-control" id="exampleInputEmail1"  />
    </div>
    
    <div class="form-group">
    <lable for="exampleInputPassword1">密码:</lable>
    <input type="password" placeholder="请输入您的密码" class="form-control" id="exampleInputPassword1"  />  
    </div>
    <div class="checkbox">
    <lable>
     <input type="checkbox">记住密码
    </lable>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

2、水平表单（bootstrap默认的表单为垂直显示，使用类名".form-horizontal"使其水平显示）

条件：在<form>元素使用类名"form-horizontal"；配合bootstrap框架的网格系统。

“form-horizontal”的作用：设置表单控件padding和margin值；改变“form-group”的表现形式，类似网格系统中的“row”。

源码：

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}
.form-horizontal .radio,
.form-horizontal .checkbox {min-height: 27px;}
.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}
.form-horizontal .form-control-static {padding-top: 7px;}
@media (min-width: 768px) {
.form-horizontal .control-label {text-align: right;}
}
.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}

用法：

<form class="form-horizontal" >
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-10">
        <input type="email" placeholder="请输入你的密码" id="inputEmail" class="form-control" />
        </div>
    </div>
</form>

注：必须配合bootstrap框架的网格系统。

3、内联表单（让表单控件在一行显示，在form元素中添加类名“form-inline”）

源码：将其设置成内联块元素即可；

用法：

法一，需要将换行显示的内容放在<div class="form-group">中：

<form class="form-inline">
<div class="form-group">
<label for="email">邮箱</label>
</div>
<div class="form-group">
<input type="email"  id="emali" class="form-control" placeholder="enter email" />
</div>
</form>

法二，label不需要放置在<div class="form-group">中，但是需要设置类名“sr-only”，将标签隐藏。

“sr-only”设置样式源码：（将其隐藏是为了让屏幕阅读器进行阅读）

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}

用法：

<form class="form-inline">
<div class="form-group">
<label for="email" class="sr-only">邮箱</label>
<input type="email"  id="emali" class="form-control" placeholder="enter email" />
</div>
</form>