Bootstrap表单使用方法详解

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

导读：一、表单布局 Bootstrap 提供了下列类型的表单布局： -- 垂直表单（默认） -- 内联表单 -- 水平表单（1）垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： -- 向父元素添加 role=

一、表单布局

Bootstrap 提供了下列类型的表单布局：

--

垂直表单（默认）

--

内联表单

--

水平表单

（1）垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。

下面列出了创建基本表单的步骤：

--

向父

元素添加 role="form"。

--

把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。

--

向所有的文本元素、

和 <select> 添加 class .form-control。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form role="form"> 
 <div class="form-group"> 
 <label for="name">名称</label> 
 <input type="text" class="form-control" id="name" placeholder="请输入名称"> 
 </div> 
 <div class="form-group"> 
 <label for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 <p class="help-block">这里是块级帮助文本的实例。</p> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form> 
</pre>
</div>
<p style="text-align: center"><span style="color: #800000"><h3><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790133691.jpg?20171179224" alt="" /></p></h3></p>
<p><span style="color: #800000"><h3>（2）内联表单
</h3></p>
<p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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> 
 <div class="form-group"> 
 <label class="sr-only" for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form> 
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790244375.jpg?20171179255" alt="" /></p></p>
<p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
<h3>注：</h3>使用 class .sr-only，您可以隐藏内联表单的标签。
</p>
<p><span style="color: #800000"><h3>（3）水平表单
</h3></p>
<p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
<h3>--</h3>向父 <form> 元素添加 class .form-horizontal。
<h3>--</h3>把标签和控件放在一个带有 class .form-group 的 <div> 中。
<h3>--</h3>向标签添加 class .control-label。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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"> 
 <label for="lastname" class="col-sm-2 control-label">姓</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" id="lastname" 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> 
</pre>
</div>
<p style="text-align: center"><h3><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790414159.jpg?20171179422" alt="" /></p></h3></p>
<p><h3>二、支持的表单控件
</h3></p>
<p>Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
</p>
<p><span style="color: #800000"><h3>（1）输入框</h3>
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
<span style="color: #800000"><h3>（2）文本框
</h3></p>
<p><span style="color: #800000"><h3>（3）复选框和单选框
</h3>对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
<span style="color: #800000"><h3>（4）选择框</h3>
</p>
<p>使用 multiple="multiple" 允许用户选择多个选项。
</p>
<p><h3>三、静态控件
</h3>当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
</p>
<p><h3>四、表单控件状态
</h3></p>
<p>除了 :focus 状态外，Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
</p>
<p>（1）输入框焦点
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
</p>
<p>（2）禁用的输入框 input
如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
</p>
<p>（3）禁用的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
</p>
<p>（4）验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form class="form-horizontal" role="form"> 
 <div class="form-group"> 
 <label class="col-sm-2 control-label">聚焦</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点..."> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="inputPassword" class="col-sm-2 control-label">禁用</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled> 
 </div> 
 </div> 
 <fieldset disabled> 
 <div class="form-group"> 
  <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label> 
  <div class="col-sm-10"> 
  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label> 
  <div class="col-sm-10"> 
  <select id="disabledSelect" class="form-control"> 
   <option>禁止选择</option> 
  </select> 
  </div> 
 </div> 
 </fieldset> 
 <div class="form-group has-success"> 
 <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputSuccess"> 
 </div> 
 </div> 
 <div class="form-group has-warning"> 
 <label class="col-sm-2 control-label" for="inputWarning">输入警告</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputWarning"> 
 </div> 
 </div> 
 <div class="form-group has-error"> 
 <label class="col-sm-2 control-label" for="inputError">输入错误</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputError"> 
 </div> 
 </div> 
</form> 
</pre>
</div>
<p style="text-align: center"><h3><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790450918.jpg?2017117953" alt="" /></p></h3></p>
<p><h3>五、表单控件大小
</h3>您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form role="form"> 
 <div class="form-group"> 
 <input class="form-control input-lg" type="text" placeholder=".input-lg"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control" type="text" placeholder="默认输入"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control input-sm" type="text" placeholder=".input-sm"> 
 </div> 
 <div class="form-group"></div> 
 <div class="form-group"> 
 <select class="form-control input-lg"> 
  <option value="">.input-lg</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control"> 
  <option value="">默认选择</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control input-sm"> 
  <option value="">.input-sm</option> 
 </select> 
 </div> 
 <div class="row"> 
 <div class="col-lg-2"> 
  <input type="text" class="form-control" placeholder=".col-lg-2"> 
 </div> 
 <div class="col-lg-3"> 
  <input type="text" class="form-control" placeholder=".col-lg-3"> 
 </div> 
 <div class="col-lg-4"> 
  <input type="text" class="form-control" placeholder=".col-lg-4"> 
 </div> 
 </div> 
</form> 
</pre>
</div>
<p style="text-align: center"><h3><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790525742.jpg?20171179536" alt="" /></p></h3></p>
<p><h3>六、表单帮助文本
</h3></p>
<p>Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form role="form"> 
 <span>帮助文本实例</span> 
 <input class="form-control" type="text" placeholder=""> 
 <span class="help-block">一个较长的帮助文本块，超过一行， 
 需要扩展到下一行。本实例中的帮助文本总共有两行。</span> 
</form> </pre>
</div>
<p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.52php.cn/file_images/article/201702/201721790557698.jpg?2017117965" alt="" /></p></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/20201215/363039.html" target="_blank">shell中使用while循环ssh的注意事项</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/364114.html" target="_blank">UNIX网络编程卷１：套接字联网-第5章:TCP客户/服务器程序示</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/567677.html" target="_blank">Angular——路由跳转</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/575097.html" target="_blank">如何在Angular2中的视图中添加没有组件的HTML部分</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/357162.html" target="_blank">bash脚本编程之判断和循环</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/494504.html" target="_blank">开源 – 用于实现市场或应用商店的Opensource或库</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/529010.html" target="_blank">利用resteasy框架构建rest webservice----第二波：使用不同</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/377185.html" target="_blank">bash – 从一年中获得一年的一周</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/362886.html" target="_blank">ELK自动安装脚本</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/498584.html" target="_blank">scala – 如何清理“一种类型被推断为’任何”警告？</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/532300.html" target="_blank">xfire_webService</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/439837.html" target="_blank">swift  – 使用Vapor 3更改主机名和端口</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/424293.html" target="_blank">bash – shell脚本：if语句</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/585590.html" target="_blank">介绍一款基于Bootstarp的开源Admin管理后台--后台</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/578515.html" target="_blank">angularjs – 在浏览器中为Jasmine测试添加代码覆</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/440171.html" target="_blank">amazon-web-services  – 如何配置在AWS/Elastic</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/481442.html" target="_blank">scala – 等待未来,接受一个</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/377605.html" target="_blank">如何在tcsh Shell中检查变量是否为空？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/376284.html" target="_blank">在Vim中缩进CSS</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/472620.html" target="_blank">如何在Scala中执行以下正则表达式匹配？</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>