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

Bootstrap三种表单布局的使用方法

作者：阿吉 | 来源：互联网 | 2022-10-12 19:26

这篇文章主要为大家详细介绍了Bootstrap三种表单布局的使用方法，感兴趣的小伙伴们可以参考一下

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单
创建垂直或基本表单：
&＃8226;·向父元素添加 role="form"。
&＃8226;·把标签和控件放在一个带有 class .form-group 的

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

和 <select> 添加 class .form-control<br />
</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="请输入名称">
    </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>
   
</pre>
</div>
<p ><img alt="" src="https://img.php1.cn/3cd4a/1e804/ae9/eafe330448a2b881.png" /></p>
<p><strong>内联表单：<br />
</strong> 内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline<br />
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
  
   <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>
   
</pre>
</div>
<p>显示效果如下：<br />
</p>
<p ><img alt="" src="https://img.php1.cn/3cd4a/1e804/ae9/958a166b7ef1a36f.png" /></p>
<p>注意:默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。 <br />
</p>
<p><strong>水平表单:</strong>和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.<br />
 &＃8226;向父  元素添加 class .form-horizontal。<br />
 &＃8226;把标签和控件放在一个带有 class .form-group 的 <div> 中。<br />
 &＃8226;向标签添加 class .control-label。<br />
 例如: <br />
</p>
<div class="jb51code">
<pre class="brush:xhtml;">

<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>
   
</pre>
</div>
<p>显示效果如下：<br />
</p>
<p><img alt="" src="https://img.php1.cn/3cd4a/1e804/ae9/548c4ecb9fa759a9.png" /></p>
<p>如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：</p>
<p>Bootstrap学习教程</p>
<p>Bootstrap实战教程</p>
<p>Bootstrap插件使用教程</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</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>
                    </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" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

bootstrap
利用决策树预测NBA比赛胜负的Python数据挖掘实践

本文通过使用2013-14赛季NBA赛程与结果数据集以及2013年NBA排名数据，结合《Python数据挖掘入门与实践》一书中的方法，展示如何应用决策树算法进行比赛胜负预测。我们将详细讲解数据预处理、特征工程及模型评估等关键步骤。 ... [详细]

蜡笔小新 2024-12-23 09:07:40
bootstrap
深入解析Java虚拟机（JVM）架构与原理

本文旨在为读者提供对Java虚拟机（JVM）的全面理解，涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制，帮助开发者更好地掌握Java编程的核心技术。 ... [详细]

蜡笔小新 2024-12-21 23:50:40
bootstrap
探索Bootstrap 5中的五种表单样式

本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式，包括输入框、选择器和文本区域等元素。 ... [详细]

蜡笔小新 2024-12-16 14:40:07
bootstrap
window下kafka的安装以及测试

目录一、安装JDK（需要安装依赖javaJDK）二、安装Kafka三、测试参考在Windows系统上安装消息队列kafka一、安装JDKÿ ... [详细]

蜡笔小新 2024-12-16 12:01:36
bootstrap
Kafka Topic 数据管理与清理策略

本文探讨了在生产环境中如何有效管理和定期清理Kafka Topic中的数据。介绍了基于时间、日志大小和日志起始偏移量三种清除方式，并重点讲解了基于时间的清除策略及其配置方法。 ... [详细]

蜡笔小新 2024-12-15 13:50:22
bootstrap
Spring Cloud Config 配置中心请求路径未生效问题解决

在使用 Spring Cloud Config 作为配置中心时，若在配置文件中指定了请求路径但未能生效，本文将探讨其原因及解决方案。 ... [详细]

蜡笔小新 2024-12-15 13:22:47
bootstrap
修复(Datepicker)：初始为空时输入验证器未被调用

修复了Datepicker组件中，当字段值默认为null时，输入验证器直到选择日期后才被调用的问题。 ... [详细]

蜡笔小新 2024-12-15 10:40:38
bootstrap
前端常用的布局类型——前端布局

1.Static静态布局固定宽高：2.Liquid流式布局宽高用百分比，按屏幕分辨率调整，布局不发生变化3.Adaptive自适应 ... [详细]

蜡笔小新 2024-12-14 10:35:02
bootstrap
PHP中静态类与静态变量的应用差异探讨

本文深入探讨了PHP编程语言中静态类与静态变量的具体应用及其差异性，旨在帮助开发者更好地理解和运用这些概念，以提升代码质量和效率。 ... [详细]

蜡笔小新 2024-12-13 16:35:20
bootstrap
Web前端开发中Webpack项目的实用技巧总结

本文探讨了在使用Webpack构建前端项目时的一些实用技巧，包括如何高效地使用移动端UI框架Mint UI和MUI，以及如何优化项目性能和用户体验。 ... [详细]

蜡笔小新 2024-12-13 16:21:04
bootstrap
如何解决PHP中时间获取不准确的问题

本文探讨了在PHP开发过程中遇到的时间获取错误问题，并提供了详细的解决方案，包括通过修改配置文件和编程方法来调整时区设置。 ... [详细]

蜡笔小新 2024-12-13 15:33:22
bootstrap
Consul 单节点与集群环境构建指南

本文详细介绍了如何安装和配置 Consul 以支持服务注册与发现、健康检查等功能，包括单节点和集群环境的搭建步骤。 ... [详细]

蜡笔小新 2024-12-13 09:10:57
jquery
使用Bootstrap创建响应式渐变固定头部导航栏的方法

本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏，包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]

蜡笔小新 2024-12-12 18:04:25
bootstrap
深入理解Java类加载机制

本文详细探讨了Java虚拟机（JVM）中类加载器的工作原理，特别是如何通过类的全限定名从外部源获取二进制字节流，以及不同类型的类加载器及其在双亲委派模型中的角色。 ... [详细]

蜡笔小新 2024-12-12 13:15:46
bootstrap
深入解析JVM：类加载子系统详解

本文旨在深入探讨Java虚拟机（JVM）中的类加载子系统，包括其基本结构、类加载器的工作原理、类的加载过程以及双亲委派机制。通过对这些关键点的详细分析，帮助读者更好地理解和掌握JVM的核心机制。 ... [详细]

蜡笔小新 2024-12-12 12:59:12

阿吉

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

Tags | 热门标签

RankList | 热门文章