当前位置: 开发笔记 > 前端 > 正文

Bootstrap如何创建表单

作者：真个田_707 | 来源：互联网 | 2022-01-05 09:42

这篇文章主要为大家详细介绍了Bootstrap如何创建表单，介绍了Bootstrap表单的三种类型,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。

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

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

中。这是获取最佳间距所必需的。
向所有的文本元素、

和 <select> 添加 class .form-control。<br />
</p>
<div class="jb51code">
<pre class="brush:xhtml;">

<div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3">
 
  <div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
  <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
  <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
  </div>
  <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
  <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div>
 
 </div>
 
</pre>
</div>
<p>效果如下：</p>
<p ><img id="theimg" alt="" src="https://img.php1.cn/3cd4a/343b/61b/eec4270fa15a480a.jpeg?s=＃63;2016921144818" /></p>
<p>如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。</p>
<div id="footer" ><img id="theimg" alt="" src="https://img.php1.cn/3cd4a/343b/61b/7a1eabc236a17b9f.jpeg?s=＃63;2016921144834" /></div>
<p>是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取</p>
<p>焦点时form的样式。</p>
<p><strong>内联表单（全部在同一行，display为inline-block）<br />
</strong></p>
<p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向  标签添加 class .form-inline。<br />
因为head部分的内容都是一样的，所以我们只列出body部分的内容。</p>
<div class="jb51code">
<pre class="brush:xhtml;">

<div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input>
 </div>
 <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input>
 </div>
 <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
 </div>
 <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
  <option>软件工程师</option>
  <option>测试工程师</option>
  <option>硬件工程师</option>
  <option>质量分析师</option>
  </select>
 </div>
 <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
 </div>
  
</pre>
</div>
<p>显示效果：</p>
<p ><img id="theimg" alt="" src="https://img.php1.cn/3cd4a/343b/61b/77924469bccad5a4.jpeg?s=＃63;2016921144932" /><br />
</p>
<p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。<br />
</p>
<p>使用 <span >class .sr-only</span>，可以隐藏内联表单的标签。 <br />
</p>
<p>注：sr-only是展示给屏幕阅读器，而非是普通的读者看的。<br />
其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;<br />
</p>
<p><strong>水平表单(label和input等表单元素在同一行)<br />
</strong></p>
<p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p>
<p>     1、向父  元素添加 class .form-horizontal。<br />
     2、把标签和控件放在一个带有 class .form-group 的 <div> 中。<br />
     3、向标签添加 class .control-label。<br />
     4、设置label和其兄弟div的宽度（因为input等默认宽度是100%）。<br />
</p>
<div class="jb51code">
<pre class="brush:xhtml;">

<div class = "form-group">
  <label class="col-sm-2 control-label" for = "name">姓名</label>
  <div class="col-sm-2">
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "tel">电话号码</label>
  <div class="col-sm-2">
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label>
  <div class="col-sm-2">
  <input type = "file" id = "idCard" ></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "profession">选择职业</label>
  <div class="col-sm-2">
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
 </div>
 <div class="form-group">
 <div class="col-sm-2 col-sm-offset-2">
 <button type = "submit" class="btn-info btn-lg">提交</button>
 </div>  
 </div>
  
</pre>
</div>
<p>效果：<br />
</p>
<p ><img id="theimg" alt="" src="https://img.php1.cn/3cd4a/343b/61b/9871d5ba2935bc12.jpeg?s=＃63;2016921144947" /></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。<br />
</p>
<p>如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程</p>
                            
                                    <br>
        <script type="text/javascript">
            var cpro_id = "u6885494";

</script>
        <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script>
    </div>

<div class="blog_tags">
        <ul>
                        <li><a href="https://www.php1.cn/tag/bootstrap" target="_blank" title="bootstrap">bootstrap</a></li>
                        <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li>
                        <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li>
                    </ul>
    </div>

<div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">写下你的评论吧 !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

view
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
css
Bootstrap 缩略图展示示例

本文将展示如何使用 Bootstrap 实现缩略图效果，并提供详细的代码示例。 ... [详细]

蜡笔小新 2024-11-14 17:27:35
css
Manacher算法详解：寻找最长回文子串

本文将详细介绍Manacher算法，该算法用于高效地找到字符串中的最长回文子串。通过在字符间插入特殊符号，Manacher算法能够同时处理奇数和偶数长度的回文子串问题。 ... [详细]

蜡笔小新 2024-11-14 13:54:45
css
C++ 中的 malloc 函数详解

malloc 是 C 语言中的一个标准库函数，全称为 memory allocation，即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域，并返回该区域的起始地址。当无法预先确定内存的具体位置时，可以通过 malloc 动态分配内存。 ... [详细]

蜡笔小新 2024-11-14 13:38:03
css
开源数据库与数据结构算法

本文介绍了多种开源数据库及其核心数据结构和算法，包括MySQL的B+树、MVCC和WAL，MongoDB的tokuDB和cola，boltDB的追加仅树和mmap，levelDB的LSM树，以及内存缓存中的一致性哈希。 ... [详细]

蜡笔小新 2024-11-14 12:53:50
css
Python多线程详解与示例

本文介绍了Python中的多线程编程，包括僵尸进程和孤儿进程的概念，并提供了具体的代码示例。同时，详细解释了0号进程和1号进程在系统中的作用。 ... [详细]

蜡笔小新 2024-11-14 12:47:24
css
Linux常用命令解析：ipcs与ipcrm

本文详细介绍了Linux系统中用于管理IPC（Inter-Process Communication）资源的两个重要命令：ipcs和ipcrm。通过这些命令，用户可以查看和删除系统中的消息队列、共享内存和信号量。 ... [详细]

蜡笔小新 2024-11-14 11:42:14
css
A*算法在AI路径规划中的应用

路径规划算法用于在地图上找到从起点到终点的最佳路径，特别是在存在障碍物的情况下。A*算法是一种高效且广泛使用的路径规划算法，适用于静态和动态环境。 ... [详细]

蜡笔小新 2024-11-14 10:53:20
css
NX二次开发：UFUN点收集器UF_UI_select_point_collection详解

本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发，包括必要的头文件包含、初始化和选择点集合的具体实现。 ... [详细]

蜡笔小新 2024-11-14 10:18:35
css
解决SQL Server数据库sa登录名无法连接的问题

在安装SQL Server数据库后，使用Windows身份验证成功，但使用SQL Server身份验证时遇到问题。本文将介绍如何通过设置sa登录名的密码、启用登录名状态以及开启TCP协议来解决这一问题。 ... [详细]

蜡笔小新 2024-11-14 10:15:02
css
MySQL 数据库连接方法

本文介绍了如何使用 MySQL 命令行工具连接到指定的数据库。 ... [详细]

蜡笔小新 2024-11-14 10:08:54
css
如何解决8080端口被占用问题

本文介绍了如何通过命令行和任务管理器查找并终止占用8080端口的进程，以确保该端口能够正常使用。 ... [详细]

蜡笔小新 2024-11-14 09:42:20
view
HTML a 标签中 href 属性的多种用法

本文详细介绍了 HTML 中 a 标签的 href 属性的多种用法，包括实现超链接、锚点以及调用 JavaScript 方法。通过具体的示例和解释，帮助开发者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-14 09:07:08
css
Excel 数据分析基础

Excel 是数据分析中最基本且强大的工具之一，具备多种实用功能和操作方法。本文将简要介绍 Excel 的不同版本及其兼容性问题，并探讨在处理大数据时的替代方案。 ... [详细]

蜡笔小新 2024-11-14 07:39:50
firefox
深入解析HTML5字符集属性：charset与defaultCharset

本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset，帮助开发者更好地理解和应用这些属性，以确保网页在不同环境下的正确显示。 ... [详细]

蜡笔小新 2024-11-13 11:09:46

真个田_707

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章