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

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

会员登录 | 用户注册

推荐阅读

上传
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
bootstrap
java命令运行

Java在运行已编译完成的类时，是通过java虚拟机来装载和执行的，java虚拟机通过操作系统命令JAVA_HOMEbinjava–option来启 ... [详细]

蜡笔小新 2023-12-12 19:26:55
bootstrap
ng2bootstrapprimeNG

http:valor-software.comng2-bootstraphttps:www.primefaces.orgprimeng#autocomplete转载于:https: ... [详细]

蜡笔小新 2023-12-09 20:57:51
bootstrap
bootstrapselect设置container之后，选择完之后options不隐藏？

本文讨论了使用bootstrapselect插件设置container后，选择完选项后options不隐藏的问题，给出了解决方法，并提供了相应的jsfiddle链接进行演示。 ... [详细]

蜡笔小新 2023-12-09 17:18:48
dom
org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的使用及代码示例

本文整理了Java中org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的一些代码示例，展示了Icon.ad ... [详细]

蜡笔小新 2023-10-17 22:46:43
ajax
bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...

查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ... [详细]

蜡笔小新 2023-10-17 19:40:17
bootstrap
Shell脚本自动发布springboot到docker容器中

1.脚本功能1）自动替换jar包中的配置文件。2）自动备份老版本的Jar包3）自动判断是初次启动还是更新服务2.脚本准备进入ho ... [详细]

蜡笔小新 2023-10-17 19:08:29
view
javascript – RTL布局中的bootstrap datepicker无法正常工作

RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ... [详细]

蜡笔小新 2023-10-17 18:57:35
bootstrap
初识java关于JDK、JRE、JVM 了解一下

初识java关于JDK、JRE、JVM 了解一下 ... [详细]

蜡笔小新 2023-10-17 17:17:17
正则
PRML读书会第十四章 Combining Models（committees，Boosting，AdaBoost，决策树，条件混合模型）...

主讲人网神（新浪微博:豆角茄子麻酱凉面）网神(66707180)18:57:18大家好，今天我们讲一下第14章combiningmodel ... [详细]

蜡笔小新 2023-10-17 17:04:24
bootstrap
Elastic Search 7.0 添加数据提示提示503错误

ElasticSearch成功安装完毕。测试数据添加出现{ error:{ root_cause ... [详细]

蜡笔小新 2023-10-17 15:46:32
bootstrap
基于SpringBoot打造在线教育系统（6）– 二级分类模块UI篇

这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。我们接下来，需要通过一级分类，获取所有的二级分类。开始 ... [详细]

蜡笔小新 2023-10-17 15:30:11
bootstrap
宋宝华：用systemd-nspawn运行最轻量级容器

systemd-nspawn可以创建最轻量级的容器（ns的意思就是namespace），本文的实验平台是Ubuntu16.04，x86_64机器。本文的目的是：在Ubuntu中用syst ... [详细]

蜡笔小新 2023-10-17 14:49:15
view
【珍藏】2019年最新Vue相干佳构开源项目库汇总

媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日，许多内容早已逾期或是许多近期优异组件未被收录，所以小肆 ... [详细]

蜡笔小新 2023-10-17 14:33:46
bootstrap
ipad可以开发python_这15个应用,程序员用iPad照样可以编程!

1、DashAPI文档Dash是一个API文档浏览器，使用户可以使用离线功能即时搜索无数API。程序员使用Dash可访问iOS，MacOS， ... [详细]

蜡笔小新 2023-10-17 10:15:42

阿吉

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

Tags | 热门标签

RankList | 热门文章