Bootstrap CSS布局之表单

发布时间：2020-12-18 00:45:09 所属栏目：安全来源：网络整理

导读：1. 表单表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基

1. 表单

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

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

1.1.基础表单

元素添加 role="form"。 2.把标签label和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。因为form-group提供了margin 3.向所有的文本元素、

和 <select> 添加 class .form-control。-->
<p><form role="form"></p>
<fieldset>
  <legend>用户登录</legend>
  <div class="form-group">
   <label for="name">姓名</label>
   <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
<p><div class="form-group"><br />
<label for="psd">密码</label><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
<p><div class="checkbox"></p>
<label><input type="checkbox">记住密码</label>
  </div>
  <button type="submit" class="btn btn-default">登录</button>
 </fieldset>
</form>
</pre>
</div>
<p><h3>1.2.内联表单</h3></p>
<div class="jb51code">
<pre class="brush:xhtml;">

 <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>
<p><div class="form-group"><br />
<label for="psd">密码</label><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
<p><div class="checkbox"></p>
<label><input type="checkbox">记住密码</label>
   </div>
   <button type="submit" class="btn btn-default">登录</button>
  </fieldset>
 </form>
</pre>
</div>
<p><h3>1.3.横向表单</h3></p>
<div class="jb51code">
<pre class="brush:xhtml;">

 <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>
<p><div class="form-group"><br />
<label class="control-label col-lg-1" for="psd">密码</label><br />
<div class="col-lg-10"><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
   </div>
  </fieldset>
 </form>
</pre>
</div>
<p><h3>1.4.表单控件</h3></p>
<p><span style="color: #800000"><h3>input元素： 
</h3>使用input元素的时候，必须声明type类型，否则可能引起问题。</p>
<p><span style="color: #800000"><h3>select元素： 
</h3>多行选择设置multiple=”multiple”</p>
<p><span style="color: #800000"><h3>textarea元素：</h3> 
textarea元素定义了rows数字即可定义大文本框的高度，cols宽度。但是textarea应用了form-control央视，则cols无效。</p>
<p>checkbox和radio(是两个特殊的type) 
注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.checkbox和.radio样式。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
//使用
<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>
</pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
//源码
//让单选框和复选框都能左右和上下居中
.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;
}
</pre>
</div>
<p>同时可以内联显示，在labelshang添加checkbox-inline或者radio-inline</p>
<p><span style="color: #000000"><h3>1.5.空间状态</h3></p>
<p>焦点状态、禁用状态、验证提示状态</p>
<p><span style="color: #800000"><h3>焦点状态： </h3>
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。</p>
<p><span style="color: #800000"><h3>禁用状态：</h3> 
对 添加 disabled 属性来禁用 内的所有控件。</p>
<p><span style="color: #800000"><h3>验证提示状态： </h3>
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。 
–对文字、边框和阴影设置的颜色不同</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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>
</pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
//相对定位，用于设置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,.075);
   box-shadow: inset 0 1px 1px rgba(0,.075);
}
.has-success .form-control:focus {
 border-color: #2b542c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0,.075),0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0,0 0 6px #67b168;
}
.has-success .input-group-addon {
 color: #3c763d;
 background-color: #dff0d8;
 border-color: #3c763d;
}
.has-success .form-control-feedback {
 color: #3c763d;
}
</pre>
</div>
<p><h3>1.6.空间大小</h3></p>
<p>input-lg/input-sm</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/514366.html" target="_blank">生成Webservice客户端的4中方法</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/577391.html" target="_blank">Angular 2(Cli)没有缩小asstet / css文件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583369.html" target="_blank">bootstrap datetimepicker笔记</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/537214.html" target="_blank">[MES]制造执行系统（二）</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568250.html" target="_blank">原创我录制angular2的视频，今天问同事说angular4和angular</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/528640.html" target="_blank">Qt+gsoap调用WebService</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/377989.html" target="_blank">unix – 运行shell脚本为./script.sh和sh script.sh有什么区</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/580817.html" target="_blank">Bootstrap-datetimepicker日期插件简单使用</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/570549.html" target="_blank">AngularJS 1，AngularJS 2,Vue 1 ,Vue 2, React之间的区别和</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/533986.html" target="_blank">AXIS2顽固的日志输出</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/569155.html" target="_blank">2、Angular-Ui Router 嵌套状态和嵌套视图</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583870.html" target="_blank">bootstrap分割的按钮下拉菜单，按钮和下拉菜单不</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/572929.html" target="_blank">angularjs – 发电机角度和发电机角度 – 全堆叠</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/562156.html" target="_blank">angular – 视图,主机视图和嵌入视图之间的区别</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/571896.html" target="_blank">angularjs ng-bind-html 指令 对html标签转译</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/375152.html" target="_blank">在Bash中,文件以“ – ”开头</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/344596.html" target="_blank">ios ipa命令打包</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/484888.html" target="_blank">scala – 使用Dataflow将PubSub流写入云存储时出</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/581930.html" target="_blank">twitter-bootstrap – 如何针对不同的显示大小更</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/374376.html" target="_blank">Unix文件系统挂钩</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>