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

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" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

css
如何在Ember.js中使用HBS模板

本文介绍了.hbs文件作为Ember.js项目中的视图层，类似于HTML文件的功能，并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]

蜡笔小新 2024-11-21 18:50:46
console
AngularJS中ng-repeat元素的单选功能实现

本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项，并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]

蜡笔小新 2024-11-22 15:56:12
css
冲刺最后一天的任务完成情况

在项目冲刺的最后一天，团队专注于软件用户界面的细节优化，包括调整控件布局和字体设置，以确保界面的简洁性和用户友好性。 ... [详细]

蜡笔小新 2024-11-22 14:51:19
vue
Vue CLI 基础入门指南

本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]

蜡笔小新 2024-11-22 14:48:35
css
JavaScript 页面卸载事件详解 (onunload)

当用户从页面离开时（如关闭页面或刷新页面），会触发 onunload 事件，此时可以执行预设的脚本。需要注意的是，不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]

蜡笔小新 2024-11-22 14:17:44
css
如何将 Git 提交编辑器从 Nano 更改为 Vim

默认情况下，Git 使用 Nano 编辑器进行提交信息的编辑，但如果您更喜欢使用 Vim，可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]

蜡笔小新 2024-11-22 14:08:35
css
探索Java 11中的ZGC垃圾收集器

Java 11引入了一种新的垃圾收集器——ZGC，由Oracle公司研发，旨在支持TB级别的内存容量，并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]

蜡笔小新 2024-11-22 13:36:53
css
HDU 6116 路径计数优化

本文探讨了使用普通生成函数和指数生成函数解决组合与排列问题的方法，特别是在处理特定路径计数问题时的应用。文章通过详细分析和代码实现，展示了如何高效地计算在给定条件下不相邻相同元素的排列数量。 ... [详细]

蜡笔小新 2024-11-22 13:11:20
css
在Notepad++中配置Markdown语法高亮及实时预览功能

本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能，包括必要的插件安装和设置步骤。 ... [详细]

蜡笔小新 2024-11-22 13:03:49
css
解决映射文件中重复属性字段问题

探讨如何在映射文件中处理重复的属性字段，以避免数据操作时出现错误。 ... [详细]

蜡笔小新 2024-11-22 11:48:50
css
网络流24题——试题库问题

题目描述：假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]

蜡笔小新 2024-11-22 11:33:55
css
利用无代码平台实现高效业务应用开发

随着市场环境的变化加速，全球企业都在探索更为敏捷的应用开发模式，以便快速响应新兴的商业机遇。然而，传统的软件开发方式不仅成本高昂，而且耗时较长，这往往导致IT与业务部门之间的合作障碍，进而影响项目的成功。本文将探讨如何通过无代码开发平台解决这些问题。 ... [详细]

蜡笔小新 2024-11-22 11:09:21
css
为何Compose与Swarm之后仍有Kubernetes的诞生？

探讨在已有Compose和Swarm的情况下，Kubernetes是如何以其独特的设计理念和技术优势脱颖而出，成为容器编排领域的领航者。 ... [详细]

蜡笔小新 2024-11-22 09:26:11
css
使用 Python3 和 sqlacodegen 从现有数据库生成 ORM Model 文件

本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件（model.py）。此方法适用于需要快速搭建项目模型层的情况。 ... [详细]

蜡笔小新 2024-11-22 01:13:04
node.js
Node.js 后端开发指南与源码解析

本文探讨了Node.js后端开发的基础知识，包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]

蜡笔小新 2024-11-21 20:56:59

真个田_707

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

Tags | 热门标签

RankList | 热门文章