Bootstrap表单控件学习使用

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

导读：Bootstrap表单控件的学习使用，供大家参考，具体内容如下输入框（Input）最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、date

Bootstrap表单控件的学习使用，供大家参考，具体内容如下

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

这里写图片描述

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。（超过这个值就会产生滚动条）

</div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714543945.png" /></p></p>
<p><h3>复选框（Checkbox）和单选框（Radio）</h3> 
</p>
<p>（1）复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。 
（2）当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。 
（3）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
 <label>
  <input type="checkbox" value="">选项1
 </label>
</div>
<p><div class="checkbox"></p>
<label>
  <input type="checkbox" value="">选项2
 </label>
</div>
<p><div class="checkbox"></p>
<label>
  <input type="checkbox" value="">选项3
 </label>
</div>
<p><div class="radio"></p>
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label>
</div>
<p><div class="radio"></p>
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2- 选择它将会取消选择选项 1
 </label>
</div>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714543946.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
 <label class="checkbox-inline">
  <input type="checkbox" value="">选项1
 </label>
<p><label class="checkbox-inline"><br />
<input type="checkbox" value="">选项2</p>
</label>
<p><label class="checkbox-inline"><br />
<input type="checkbox" value="">选项3</p>
</label>
<p><label class="radio-inline"></p>
<input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label class="radio-inline">
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2
 </label>
</div>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714543947.png" /></p></p>
<p>选择框（Select） 
（1）当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。 
（2）使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 
（3）使用 multiple=”multiple” 允许用户选择多个选项。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form role="form">
 <div class="form-group>
  <label for="name">选择列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
<p><label for="name">可多选的选择列表</label></p>
<select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714543948.png" /></p></p>
<p><h3>静态控件</h3> 
</p>
<p>需要在一个水平表单内的表单标签后放置纯文本时，请在<p>上使用 class .form-control-static。</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">Email</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>
<p><div class="form-group"><br />
<label for="inputPassword" class="col-sm-2 control-label">密码</label><br />
<div class="col-sm-10"><br />
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码"></p>
</div>
 </div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714544049.png" /></p></p>
<p><h3>表单控件状态</h3> 
</p>
<p>（1）除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。 
（2）输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。 
（3）禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 
（4）禁用的字段集 fieldset：对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。 
（5）验证状态：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>
<p><div class="form-group"><br />
<label for="inputPassword" class="col-sm-2 control-label">禁用</label><br />
<div class="col-sm-10"></p>
<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>
<p><div class="form-group"><br />
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label><br />
<div class="col-sm-10"><br />
<select id="disabledSelect" class="form-control"></p>
<option>禁止选择</option>
    </select>
   </div>
  </div>
 </fieldset>
<p><div class="form-group has-success"><br />
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputSuccess"></p>
</div>
 </div>
<p><div class="form-group has-warning"><br />
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputWarning"></p>
</div>
 </div>
<p><div class="form-group has-error"><br />
<label class="col-sm-2 control-label" for="inputError">输入错误</label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputError"></p>
</div>
 </div>
</form>
</pre>
</div>
<p><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.52php.cn/file_images/article/201703/2017030714544050.png" /></p></p>
<p><h3>表单控件大小</h3> 
</p>
<p>可以分别使用 class .input-lg 和 .col-lg-* (<input>)来设置表单的高度和宽度。</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/20201217/546405.html" target="_blank">About .Net Petshop</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568511.html" target="_blank">Angular2请求标头字段预检响应中的Access-Control-Allow-He</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/495730.html" target="_blank">使用Scala隐式的类型平等</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/558379.html" target="_blank">异步 – 异步加载为Angular 2路由数据和构建路由指令</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/365841.html" target="_blank">shell 学习五十六天----延迟进程调度</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/423419.html" target="_blank">shell – 如何在vim中映射long bash命令？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/544182.html" target="_blank">SSIS包组件的命名规则</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/571948.html" target="_blank">AngularJS之定时器无法停止</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/363999.html" target="_blank">Vim光标移动命令</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/497882.html" target="_blank">为什么我不能在Scala中的this.apply(_)中省略“apply”？</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/579045.html" target="_blank">使用AngularJS,UI Boostrap和UI路由器时,活动选项</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/395350.html" target="_blank">bash – 用于包含两个变量的循环</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/587662.html" target="_blank">基于BootStrap的图片轮播效果展示实例代码</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/478778.html" target="_blank">Scala：过滤选项集合</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/581202.html" target="_blank">Bootstrap 4重大更新，亮点解读</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/582852.html" target="_blank">Bootstrap 代码</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/537245.html" target="_blank">.NET中使用Exchange 2007 Webservice来读取邮件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/580804.html" target="_blank">表格插件bootstrapTable中隐藏和显示某列及一些小</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/333008.html" target="_blank">【实验报告】《数据结构》实验三：栈和队列实验</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584175.html" target="_blank">bootstrap 时间控件</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>