当前位置: 首页 > 前端开发 > HTML

Bootstrap表单布局有哪几种方式？Bootstrap表单布局的创建方法（附代码）

作者：小涵 | 来源：互联网 | 2020-08-10 01:38

阅读: 4400

Bootstrap是什么?Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，那么，Bootstrap如何来创建一个表单？Bootstrap通过一些简单的HTML标签和扩展的类来创建出不同样式的表单，下面我们就来看看Bootstrap创建表单的方法。

Bootstrap是什么?Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架，那么，Bootstrap如何来创建一个表单？Bootstrap 通过一些简单的 HTML 标签和扩展的类来创建出不同样式的表单，下面我们就来看看Bootstrap创建表单的方法。

Bootstrap表单布局

【相关视频推荐：Bootstrap教程】

Bootstrap提供了下列类型的表单布局：垂直表单（默认）、内联表单、水平表单、垂直或基本表单

基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父

元素添加 role="form"。

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

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

向所有的文本元素、和 <select> 添加 class ="form-control" 。</p><p>例子：<br/></p><pre class="brush:css;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 基本表单</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">《script》 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">《script》 </head> <body> <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> </body> </html></pre><p>运行结果如下：</p><p></p><p><strong>内联表单</strong></p><p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。</p><p>实例</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 内联表单</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">《script》 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">《script》 </head> <body> <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> </body> </html></pre><p>运行结果如下：</p><p></p><p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。</p><p>使用 class .sr-only，您可以隐藏内联表单的标签。</p><p><strong>水平表单</strong></p><p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p><p>向父 <form> 元素添加 class .form-horizontal。</p><p>把标签和控件放在一个带有 class .form-group 的 <div> 中。</p><p>向标签添加 class .control-label。</p><p>实例</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 水平表单</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">《script》 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">《script》 </head> <body> <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> </body> </html></pre><p>结果如下所示</p><p><strong>支持的表单控件</strong></p><p>Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。</p><p><strong>输入框（Input）</strong></p><p>最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。</p><p>实例</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 输入框</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">《script》 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">《script》 </head> <body> <form role="form"> <div class="form-group"> <label for="name">标签</label> <input type="text" class="form-control" placeholder="文本输入"> </div> </form> </body> </html></pre><p>运行结果如下：</p><p></p><p><strong>文本框（Textarea）</strong></p><p>当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。</p><p>实例</p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 文本框</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">《script》 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">《script》 </head> <body> <form role="form"> <div class="form-group"> <label for="name">文本框</label> <textarea class="form-control" rows="3">

结果如下所示：

复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。

对一系列复选框和单选框使用 .checkbox-inline 或.radio-inline class，控制它们显示在同一行上。

下面的例子演示了这两种类型（默认和内联）：

实例




     
    Bootstrap 实例 - 复选框和单选按钮
      
    




















    

    
        
    
    
        
            
        
        
            Hi，亲爱的小伙伴！

            欢迎来到php1.cn社区!
            点击登录， 发现精彩
        
    
    
        注册
        登录
    

    
    
        
            
            
        
        扫码关注 PHP1 官方微信号
        
            
        
    

    
        
            
            
        
        Tools Online | 在线开发工具
        
            
                                
                    HTML/JS格式化/压缩
                
                                
                    CSS代码格式化工具
                
                                
                    文章自动排版工具
                
                                
                    HTML/JS转换
                
                                
                    UTF-8编码转换工具
                
                                
                    Unicode 转换
                
                                
                    URL编码解码
                
                                
                    二维码生成工具
                
                                
                    IP地址查询
                
                                
                    HTTP状态码(响应码)
                
                                
                    网页Header头
                
                                
                    网页源代码
                
                                
                    JSON解析着色
                
                                
                    Diff文件比较
                
                            
        
    




    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1html标记中表示段落的标记是什么？
                
                                
                    2html中为网页设置字符集的标签是什么？
                
                                
                    3一起来聊聊html与HTML5的区别
                
                                
                    4手把手教你在html中引入另一个html文件的方法（详解）
                
                                
                    5详细介绍HTML中的label标签
                
                                
                    6display:none是什么意思
                
                                
                    7css sprite优缺点有哪些
                
                                
                    8CSS sprite是什么
                
                                
                    9img标签的alt作用是什么
                
                                
                    10img标签的title和alt有什么区别
                
                                
                    11img的title功能是什么
                
                                
                    12HTML5如何在手机端调用相机？
                
                            
        
    



    
    
        
        
        
        
    

    
        
            
            
        
        Recommend | 推荐阅读
        
            
                                
                    1CSS中overflow属性怎么使用
                
                                
                    2JavaScript加载：defer与async
                
                                
                    3学javascript要什么基础?
                
                                
                    4如何设置表单的input文本框不可编辑
                
                                
                    5sql数据库怎么创建表？
                
                                
                    6php如何设置session过期时间-PHP问题
                
                                
                    7如何设置H5的表单验证失败提示语-
                
                                
                    8PHP 学习总结之函数
                
                                
                    9HTML5的地理定位如何使用-
                
                                
                    10php中tr标签是什么意思-PHP问题
                
                                
                    11JavaScript  ES6介绍
                
                                
                    12PHP 闭包之变量作用域