form-group 两种常用使用

最新推荐文章于 2021-12-20 14:45:24 发布
最新推荐文章于 2021-12-20 14:45:24 发布
阅读量3.7w 收藏 23
点赞数 12
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/63736215
版权

用法一：
这里写图片描述

运行结果如下：
这里写图片描述

form-group ：增加盒子的下边界
form-control： 充满整个父元素，并且有换行作用

用法二：
这里写图片描述

运行结果如下：
这里写图片描述

control-label :元素内实现包含内容右对齐

FR:海涛高软（QQ技术交流群：386476712）

海涛高软
关注
  • 12
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Bootstrap 全局CSS样式：表单类的使用
WangMin@汪末末
08-30 1468
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素包裹到.form-group中可以更好地展示表单。 <form> <div class="form-group"> &l
bootstrap之学习笔记
My52Hz
10-27 273
form-inline:    用于强行将多个form-group div放在一行（禁止换行）里面。 案例： &lt;div class="form-inline"&gt; &lt;div class="form-group"&gt; &lt;label&gt;username:&lt;/label&gt; &lt;input type="text" cla
bootstrap中的class=“form-group“是什么意思
weixin_45709255的博客
07-16 1万+
form-group 你可以理解为一个格式化 就是一个小集体他就是集体的圈 就是把需要的东西放在一个集体中 <h2 class="page-header">增</h2> <form id="addForm" action="" method="post"> <div class="form-group"> <label for="userName">姓名</label><span style="color:
FormGroup的属性和常用方法
weixin_48290187的博客
10-15 4280
FormGroup跟踪一组FormControl实例的值和有效性状态。 FormGroup把每个子FormControl的值聚合进一个对象，它的key是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态 。比如，若组中的任何一个控件是无效的，那么整个组就是无效的。 FormCroup是Angular中用来定义表单的三大基本构造块之一，就像FormControl、FormArray一样。 当实例化FormGroup时，在第一个参数中传入一组子控件。每个子控件会用控件名把自己注册进去。 属性 cont
4.bootstrap的form表单的form-group和form-control的区别与联系
weixin_30906425的博客
10-13 3689
1. form-group一般用于div form-control一般用于置于div中的标签元素，为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如： <form role="form"> <div class="form-group"> <input type="email" class="for...
form-group与input-group （Bootstrap）
热门推荐
海涛高软
01-04 3万+
整体是一个from-group，下面分两列，一列放入文本标签，一列放入输入项文本标签要加上control-label类修饰，其实control-label 具有靠右对齐功能input标签加上form-control类修饰，使输入框更加好看输入项中每一行都要用input-group修饰最后运行的效果如下： 再举一个例子运行效果如下： 运行后的效果如下： input-group表示一行 form
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2005
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
bootstrap-form-examples:引导程序形式的示例
07-09
4. **表单布局**：Bootstrap提供了两种基本的表单布局方式：默认的行内布局（inline form）和水平布局（horizontal form）。水平布局通过`.form-horizontal`类实现，将标签和输入框放在同一行内，使用`.form-label`...
手工注入常用SQL语句笔记.docx
04-10
手工注入常用 SQL 语句笔记 ...手工注入常用 SQL 语句笔记对 MySQL 和 MSSQL 两种数据库管理系统进行了详细的介绍，涵盖了注入原理、实战心得、判断数据库类型、常用内置函数使用、数据库的扩展存储过程等方面的内容。
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
09-01
Bootstrap时间选择器是前端开发中常用的一种组件，用于方便用户在网页上选取日期和时间。在Bootstrap框架中，有两个常见的插件用于实现这一功能：datetimepicker和daterangepicker。 1. **datetimepicker**： 这个...
To-doList:用JS和Bootstrap创建的待办事项列表
05-12
【描述】中提到的“待办事项清单Criada com JS e Bootstrap”表明该应用使用了两种关键的技术：JavaScript作为客户端脚本语言，用于处理用户的输入和更新界面；Bootstrap则是一个流行的开源CSS框架，提供响应式布局...
Java学习笔记-个人整理的
12-19
{8.3}创建线程的两种方法}{123}{section.8.3} {8.4}Runnable}{123}{section.8.4} {8.5}Sleep阻塞与打断唤醒}{124}{section.8.5} {8.5.1}sleep与wait的差异}{124}{subsection.8.5.1} {8.6}IO阻塞}{126}{section....
表单的布局
chenmo2001的博客
05-27 2191
表单的布局 自从Bootstrap使用display:block和width:100%在全部的input控件上后，表单默认都是基于垂直堆叠排列的，可以使用其他Class类来改变表单的布局。 .form-group（表单组） .form-group 可以向为表单赋予一些结构样式，目的是提供标签的控制配对以及margin-bottom属性，由于它是一个类选择器，可以在<div>或其他元素中使用它。 例如： <form> <div class="form-g...
表单 form-inline 内容一行显示时，换行
weixin_36404364的博客
05-31 1万+
表单元素一行显示时，由于屏幕宽度不够时，自动换行不好看 可以在指定位置手动换行 自还要增加标签<br/> form 一个表单的简单写法： <form class="form-inline" id="search_form"> <div class="form-group"> <label>产品名称:</label...
Bootstrap-04-常用样式——表单布局
Void的博客
03-02 675
水平表单布局 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 结构 向<form>元素添加role=“form”。 把标签和控件放在一个带有.from-group的div中。以获取最佳间距 向所有文本元素<input>、<textarea>、<sel
解决label和input在一行放不下时同时换行的问题
baidu_39068138的博客
09-17 9247
解决label和input在一行放不下时同时换行的问题 上问题： 可以看到我们以图中红色框框起来的为一组，当前的状态的各自安好的，但好景不长，对于一些国际化的项目必须去适配多语言的系统，就导致会出现筛选项的名字长度无法确定在固定的范围，从而导致如下图的情况： 可以看到我们的问题就来了，黄色的区域的内容原本应该是成对存在的，在一行无法放下的时候最好的解决方法是两个一起到下一行（在要求label必须全部展示完整名字的情况下） 那么如何解决呢：我们可以看到原先的代码例如Bootstrap ..
bootstrap4--表单
zxn200125的博客
12-20 3698
bootstrap4中表单布局、输入框组，以及默认和自定义表单控件的一些设置
angular 响应式表单FormGroup和模型驱动表单[(ngModel)] —angular学习笔记4
qq_38918953的博客
05-30 1175
文章目录响应式表单和模型驱动表单相同与不同之处响应式表单创建案例模板驱动表单创建案例表单底层原理（底层构造块）：响应式表单fromGroup与FormBuilder对比表单的验证方法 响应式表单和模型驱动表单相同与不同之处 相同：两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。 不同：主要是在如何处理和管理表单和表单数据方面有所不同。具体方面： 不同 响应式 模板驱动 建立（表单模式） 显式，在组件类中创建 例如:this.myForm
form-group 如何按钮和文本框结合
最新发布
06-02
可以使用 Bootstrap 中的 form-group 和 input-group 组件来实现按钮和文本框的结合。 下面是一个示例代码： ``` <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入内容"> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span> </div> </div> ``` 在这个示例中，我们使用 input-group 将文本框和按钮包裹起来，然后将整个组合放在 form-group 内部。通过添加 input-group-btn 类，我们可以将按钮放在文本框的旁边。 注意，上述代码中引用了 Bootstrap 的样式文件和脚本文件，需要在页面中引入这些文件才能使用这些组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值