第一次接触神奇的Bootstrap表单

本篇将主要介绍Bootstrap表单的使用技巧。

display: none">1.Bootstrap基础表单

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

我们先来看一个基础表单：

rush:xhtml;"> <Meta charset="UTF-8">

Box"> Box">记住密码

登录

效果图如下所示：

我们还可以通过为form添加不同的类名达成不同的效果，form的具体规则如下表所示：

例如：

2.Bootstrap表单控件

1）输入框input

rush:xhtml;">

2）下拉选择框select

rush:xhtml;">

1 2

1 2

3）文本域textarea

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

rush:xhtml;">

</div> </form> </pre> </div> <p><span style="color: #800000"><h3>4）复选框check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a></h3></p> <p>垂直排列：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form role="form"> <div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <label><input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">复选框</label> </div> </form> </pre> </div> <p>水平排列：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form role="form"> <div class="form-group"> <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"><input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="option1">复选框1</label> <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"><input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="option2">复选框2</label> </div> </form> </pre> </div> <p><span style="color: #800000"><h3>5）单选择按钮ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a></h3></p> <p>垂直排列：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form role="form"> <div class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>"> <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label> </div> <div class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>"> <!--不管是checkbox还是radio都使用label包起来了--> <label><input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="optionsRa<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>s" id="optionsRa<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>s2" value="hate">B</label> </div> </form> </pre> </div> <p>水平排列：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form role="form"> <div class="form-group"> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"><input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" value="option1" name="sex">A</label> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"><input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" value="option2" name="sex">B</label> </div> </form> </pre> </div> <p>注意：check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>连同label<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>放置在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>名为“.check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>”的容器内；ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>连同label<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>放置在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>名为“.ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>”的容器内。</p> <p><h3>3.Bootstrap表单控件状态</h3></p> <p><span style="color: #800000"><h3>1）焦点状态</h3></p> <p>焦点状态是通过为input<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>类名form-control来实现。Bootstrap框架中表单控件的焦点状态<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>了outline的<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认样式，重新<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>阴影<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>。</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <!--form-horizontal实现水平表单效果--> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点状态"> </div> </div> </form> </pre> </div> <p><span style="color: #800000"><h3>2）禁用状态</h3></p> <p>只需要在需要禁用的表单控件上<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>“<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled”即可：</p> <p><span style="color: #800000"><input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled></p> <p><span style="color: #800000"><h3>3）验证状态</h3></p> <p>做表单验证，同样也需要提供验证状态样式，在Bootstrap中同样提供这几种<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>： </p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201607/201672790508482.jpg?20166279515" /></p></p> <p>使用的时候只需要在form-group容器上对应<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>状态类名。</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form role="form"> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1"><a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>状态</label> <input type="text" class="form-control" id="inputError1" placeholder="<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>状态"> </div> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> </form> </pre> </div> <p><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图如下：</p> <p style="text-align: center"><p class="pic_center"><img title="" alt="表单验证样式" src="https://files.jb51.cc/file_images/article/201607/201607270845042.png" /></p></p> <p>如果你想让表单在对应的状态下<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>icon出来，只需要在对应的状态下<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>类名“has-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back”（此类名要与“has-error”、“has-warning”和“has-success”在一起）。</p> <p><h3>4.Bootstrap表单-按钮</h3></p> <p><span style="color: #800000"><h3>1）定制风格按钮</h3></p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <button class="btn" type="button">基础按钮</button> <button class="btn btn-default" type="button"><a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认按钮</button> <button class="btn btn-primary" type="button">主要按钮</button> <button class="btn btn-success" type="button">成功按钮</button> <button class="btn btn-info" type="button">信息按钮</button> <button class="btn btn-warning" type="button">警告按钮</button> <button class="btn btn-danger" type="button">危险按钮</button> <button class="btn btn-link" type="button"><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>按钮</button> </pre> </div> <p><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图如下：</p> <p style="text-align: center"><p class="pic_center"><img title="" alt="Bootstrap表单-按钮" src="https://files.jb51.cc/file_images/article/201607/201607270845043.png" /></p></p> <p><span style="color: #800000"><h3>2）Bootstrap按钮<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>多<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>，其他<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>制作的按钮如下：</h3></p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <button class="btn btn-default" type="button">button<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>按钮</button> <input type="submit" class="btn btn-default" value="input<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>按钮"/> <span class="btn btn-default">span<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>按钮</span> <div class="btn btn-default">div<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>按钮</div> <a href="##" class="btn btn-default">a标签按钮</a> </pre> </div> <p><span style="color: #800000"><h3>3）按钮大小</h3></p> <p>通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201607/201672790525429.jpg?20166279532" /></p></p> <div class="jb51code"> <pre class="brush:xhtml;"> <button class="btn btn-primary" type="button">正常按钮</button> <button class="btn btn-primary btn-lg" type="button">大型按钮</button> <button class="btn btn-primary btn-sm" type="button">小型按钮</button> </pre> </div> <p><span style="color: #800000"><h3>4）块状按钮（移动端用的多）</h3></p> <p>块状按钮：按钮宽度充满整个父容器（width:100%），不会有任何的padding和margin值。 Bootstrap提供了一个类名“btn-block”，按钮使用这个类名就可以实现块状按钮（具体源码请查阅bootstrap.css文件第2340行～第2353行）</p> <div class="jb51code"> <pre class="brush:xhtml;"> <button class="btn-block btn-primary btn-lg" type="button">大型按钮</button> <button class="btn-block btn-primary" type="button">正常按钮</button> <button class="btn-block btn-primary btn-sm" type="button">小型按钮</button> </pre> </div> <p>效果图如下：</p> <p style="text-align: center"><p class="pic_center"><img title="" alt="块状按钮" src="https://files.jb51.cc/file_images/article/201607/201607270845044.png" /></p></p> <p><h3>5.Bootstrap表单-按钮状态</h3></p> <p>在Bootstrap中针对按钮的状态效果主要分为两种：活动状态和禁用状态。</p> <p><span style="color: #800000"><h3>1）活动状态：</h3>主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。</p> <p><span style="color: #800000"><h3>2）禁用状态</h3></p> <p>要禁用按钮有两种实现方式： <h3>方法1：</h3>在标签中添加disabled属性 <h3>方法2：</h3>在元素标签中添加类名“disabled”</p> <p>两者的主要区别是： “.disabled”样式不会禁止按钮的默认行为。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。</p> <p><h3>6.Bootstrap图像</h3></p> <p>在Bootstrap中对于图像的样式风格提供以下几种风格： </p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201607/201672790619249.jpg?20166279626" /></p></p> <p>使用方法：只需要在img标签上添加对应的类名，如下代码：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <img class="img-rounded" alt="100x100" src="http://img.blog.csdn.net/20160726151432225"> <img class="img-circle" alt="100x100" src="http://img.blog.csdn.net/20160726151432225"> <img class="img-thumbnail" alt="100x100" src="http://img.blog.csdn.net/20160726151432225"> <img class="img-responsive" alt="100x100" src="http://img.blog.csdn.net/20160726151432225"> </pre> </div> <p>运行效果如下或查看右侧结果窗口：</p> <p style="text-align: center"><img title="" alt="Bootstrap图像效果" src="https://files.jb51.cc/file_images/article/201607/201607270845045.png" /></p> <p><h3>7.Bootstrap图标</h3></p> <p>Bootstrap提供了200个不同的icon，如下：</p> <p style="text-align: center"><p class="pic_center"><img title="" alt="Bootstrap图标" src="https://files.jb51.cc/file_images/article/201607/201607270845046.jpg" /></p></p> <p>使用方法：只需要在标签上添加对应的图标类名，如下代码：</p> <p><span style="color: #800000"><span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span></p> <p>如果大家还想深入学习，可以点击<a target="_blank" href="//www.jb51.cc/article/84087.htm">这里</a>进行学习，再为大家附两个精彩的专题：<a target="_blank" href="//www.jb51.cc/Special/334.htm">Bootstrap学习教程</a> <a target="_blank" href="//www.jb51.cc/Special/769.htm">Bootstrap实战教程</a></p> <p>系列<a href="https://www.jb51.cc/tag/wenzhang/" target="_blank" class="keywords">文章</a>：</p> <p>第一次接触神奇的Bootstrap基础排版<a href="//www.jb51.cc/article/89278.htm">//www.jb51.cc/article/89278.htm</a> 第一次接触神奇的Bootstrap网格系统<a href="//www.jb51.cc/article/89333.htm">//www.jb51.cc/article/89333.htm</a></p> <p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/biaodan/" class="tag_link" target="_blank">表单</a><a href="https://m.jb51.cc/tag/biaodanp/" class="tag_link" target="_blank">表单</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738675.html" title="Bootstrip HTML 查询搜索常用格式模版">Bootstrip HTML 查询搜索常用格式模版</a> </div> <div class="summary">Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738674.html" title="如何在按钮上加红色数字">如何在按钮上加红色数字</a> </div> <div class="summary">如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738673.html" title="让两个按钮左右排列">让两个按钮左右排列</a> </div> <div class="summary">要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738672.html" title="status能否设置为布尔值类型，前端采用复选框形式">status能否设置为布尔值类型，前端采用复选框形式</a> </div> <div class="summary">是的，可以将status设置为布尔类型，这样可以在前端使用复选...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/10-08/13/3873491c2cd9a95fadbb4d45bbe243d6.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764763.html" title="Bootstrap 按钮总结">Bootstrap 按钮总结</a> </div> <div class="summary">前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764762.html" title="Python学习-day52-bootstrap">Python学习-day52-bootstrap</a> </div> <div class="summary">起步导入：<linkrel="stylesheet"href="b...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>