Bootstrap CSS布局之表单

2019-11-19 18:25:54

字体：大中小

来源：转载

供稿：网友

1. 表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)

表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend

1.1.基础表单

<!--基础表单：1.向父 <form> 元素添加 role="form"。2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--><form role="form"> <fieldset>  <legend>用户登录</legend>  <div class="form-group">   <label for="name">姓名</label>   <input type="text" class="form-control" id="name" placeholder="请输入名称">  </div>  <div class="form-group">   <label for="psd">密码</label>   <input type="text" class="form-control" id="psd" placeholder="请输入密码">  </div>  <div class="checkbox">   <label><input type="checkbox">记住密码</label>  </div>  <button type="submit" class="btn btn-default">登录</button> </fieldset></form>

1.2.内联表单

<!-- 内联表单：  如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline --> <form role="form" class="form-inline">  <fieldset>   <legend>用户登录</legend>   <div class="form-group">    <label for="name">姓名</label>    <input type="text" class="form-control" id="name" placeholder="请输入名称">   </div>   <div class="form-group">    <label for="psd">密码</label>    <input type="text" class="form-control" id="psd" placeholder="请输入密码">   </div>   <div class="checkbox">    <label><input type="checkbox">记住密码</label>   </div>   <button type="submit" class="btn btn-default">登录</button>  </fieldset> </form>

1.3.横向表单

<!-- 横向表单：  1.向父 <form> 元素添加 class .form-horizontal。  2.把标签和控件放在一个带有 class .form-group 的 <div> 中。  3.向标签添加 class .control-label。  4.要实现横向表单，还要用栅格类--> <form role="form" class="form-horizontal">  <fieldset>   <legend>用户登录</legend>   <div class="form-group">    <label class="control-label col-lg-1" for="name">姓名</label>    <div class="col-lg-10">     <input type="text" class="form-control" id="name" placeholder="请输入名称">    </div>   </div>   <div class="form-group">    <label class="control-label col-lg-1" for="psd">密码</label>    <div class="col-lg-10">     <input type="text" class="form-control" id="psd" placeholder="请输入密码">    </div>   </div>  </fieldset> </form>

1.4.表单控件

input元素：
使用input元素的时候，必须声明type类型，否则可能引起问题。

select元素：
多行选择设置multiple=”multiple”

textarea元素：
textarea元素定义了rows数字即可定义大文本框的高度，cols宽度。但是textarea应用了form-control央视，则cols无效。

checkbox和radio(是两个特殊的type)
注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.checkbox和.radio样式。

//使用<div class="checkbox"> <label><input type="checkbox">学习前端</label></div><div class="radio"> <label><input type="radio" name="optionsRadios" value="male">男生</label></div><div class="radio"> <label><input type="radio" name="optionsRadios" value="female">女生</label></div>

//源码//让单选框和复选框都能左右和上下居中.radio,.checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px;}//内部有label的话，内联显示.radio label,.checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer;}

同时可以内联显示，在labelshang添加checkbox-inline或者radio-inline

1.5.空间状态

焦点状态、禁用状态、验证提示状态

焦点状态：
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用状态：
对添加 disabled 属性来禁用内的所有控件。

验证提示状态：
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
对文字、边框和阴影设置的颜色不同

<div class="form-group has-warning"> <label for="inputWarning" class="control-label">输入长度不够!</label> <input type="text" class="form-control"></div><div class="form-group has-error"> <label for="inputError" class="control-label">输入不符合要求！</label> <input type="text" class="form-control"></div><div class="form-group has-success has-feedback"> <label for="inputSuccess" class="control-label">输入文本符合要求！</label> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>

//相对定位，用于设置input元素的父容器的定位方式.has-feedback { position: relative;}//右内边距的设置，以便可以显示小图标.has-feedback .form-control { padding-right: 42.5px;}//设置小图标的显示方式.form-control-feedback { position: absolute;//绝对定位 top: 0; right: 0;//右对齐 z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none;}.input-lg + .form-control-feedback,.input-group-lg + .form-control-feedback,.form-group-lg .form-control + .form-control-feedback { width: 46px; height: 46px; line-height: 46px;}.input-sm + .form-control-feedback,.input-group-sm + .form-control-feedback,.form-group-sm .form-control + .form-control-feedback { width: 30px; height: 30px; line-height: 30px;}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label { color: #3c763d;}.has-success .form-control { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}.has-success .form-control:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;}.has-success .input-group-addon { color: #3c763d; background-color: #dff0d8; border-color: #3c763d;}.has-success .form-control-feedback { color: #3c763d;}

1.6.空间大小

input-lg/input-sm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Bootstrap CSS布局之按钮

下一篇：Bootstrap CSS布局之表格