form-inline、form-control和form-group

最新推荐文章于 2024-05-17 12:15:53 发布
最新推荐文章于 2024-05-17 12:15:53 发布
阅读量4.1w 收藏 32
点赞数 8
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/63753637
版权

这里写图片描述

这里写图片描述

这里写图片描述

form-inline使带有form-control和form-group的元素表现出行内的效果

form-inline一定要保证在一定的行宽下，否则会看不到内联效果

之前我说过：
form-control :换行+填充整行
form-group : 增加块元素的下部留白或下部边界，从而使块元素的间距变大

最后，本人不建议在实际开发中使用内联表单，因为在宽度不能够保证情况下，内联是不理想或不起作用

FR:Hunk xu (QQ技术交流群：386476712）

海涛高软
关注
  • 8
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap表单组form-inline（横向排列）
frankcfol的博客
03-27 2649
名称 文件输入 请打勾 提交
bootstrap-form-examples:引导程序形式的示例
07-09
4. **表单布局**：Bootstrap提供了两种基本的表单布局方式：默认的行内布局（inline form）和水平布局（horizontal form）。水平布局通过`.form-horizontal`类实现，将标签和输入框放在同一行内，使用`.form-label`...
form-control 效果
Bonnie Learning Summary --- Special column
08-07 2万+
表单控件加上类form-control后，效果为： 宽度为100% 设置边框为浅灰色 控件具有4px的圆角 设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化 设置placeholder的颜色为#999
FastAdmin的Selectpage动态选择问题
最新发布
cyylovelz的博客
05-17 768
FastAdmin1.2.0之前的版本SelectPage只支持使用JS来实现格式化模板功能});FastAdmin1.2.0版本开始，支持占位符和模板占位符模式模板模式%=%=
html form inline,Bootstrap Form Inline
weixin_36075067的博客
06-28 365
Bootstrap Form InlineIntroductionBootstrap delivers a variety of form control styles, layout opportunities, and also custom-made components for developing a vast range of Bootstrap Form Group.F...
form-inline+form-group 实现表单横排显示（Bootstrap）
热门推荐
海涛高软
01-15 2万+
先看一个例子，代码如下：运行后的效果如下：FR：海涛高软（QQ技术群：386476712）
Form controls表单属性控制
Jenis57的博客
03-04 1026
有些时候，我们需要提供给用户一些默认的可期待的选项，而这时我们希望在用户点击input框时，有跳出的内容以供用户选择，当然用户也可以手动输入，而这些选择就是属于datalist的内容。因为不同的浏览器可能对于type：color的input框会设置不同的高度，bootstrap规定了固定的大小。在input的list属性标注的id得到绑定。但是这种datalist的style在各个浏览器是不同的。的value属性被作为展开的选项。
html form-inline,如何將HTML
weixin_33631836的博客
07-01 199
This is probably a basic html/css question...這可能是一個基本的html/css問題……I have a simple one-button form that I would like to display inline inside paragraph text.我有一個簡單的單按鈕表單，我想在段落文本內顯示。Read this sentencety...
bootstrap3.0教程之表单(form)使用详解
09-25
基本的Bootstrap表单设计包括将`<input>`、`<textarea>`和`<select>`元素设置为`.form-control`类，以获得一致的样式。这会将控件的宽度设置为100%，使它们充满其容器。`<label>`元素与输入控件一起使用，提供清晰...
全面解析Bootstrap中form、navbar的使用方法
09-02
3. input-group-addon：这个类用于添加辅助元素，如图标或文本。若出现图标与文字对齐问题，需注意glyphicon类的position: relative; top: 1px;属性，确保图标正确显示。 二、导航条（navbar） Bootstrap的navbar...
angular-play-inline-editor:玩转 Angular - 内联编辑器
07-10
通过`FormControl`, `FormGroup`和`FormBuilder`等类，可以构建复杂的动态表单，适合大型应用中的内联编辑需求。 3. **指令（Directives）**：Angular的指令系统是其核心特性之一，可以扩展HTML的功能。自定义指令...
学习使用bootstrap基本控件（table、form、button）
09-02
对于内联表单（form-inline），只需将`class="form-inline"` 添加到`<form>` 元素中，然后将`sr-only` 类添加到`<label>` 元素，这样在视觉上隐藏了标签，但仍然保留了辅助技术的可访问性。 3. 按钮（Button） ...
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1224
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
给表单中的文本元素添加 class 属性 form-control
qq_37499398的博客
05-19 1万+
Style Text Inputs as Form Controls你可以在你的 button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标，方法是在元素中增加 &lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; 。给你表单的文本输入框增加 classform-control 。在你的表单提交按钮中增加 class btn ...
html的form-inline,浅谈layui表单中的inline和block
weixin_39600331的博客
06-10 528
本篇文章来给大家介绍一下layui表单中的inline和block。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。layui表单中的inline和block：block：block元素会独自占一行，多个block元素各自新起一行，默认情况下 ，block元素宽度自动填充其父元素宽度单行输入框placeholder="请输入标题" class="layui-input">验证...
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...
FormControl的属性和常用方法
weixin_48290187的博客
10-15 5758
FormControl跟踪独立表单控件的值和验证状态。 它和 FormGroup 和 FormArray 是 Angular 表单的三大基本构造块之一。 它扩展了 AbstractControl 类，并实现了关于访问值、验证状态、用户交互和事件的大部分基本功能。 参数 formState 使用一个初始值或定义了初始值和禁用状态的对象初始化该控件。 使用方式： form.controls.控件名.state form.get(‘控件名’).state this.paramsForm.controls.cust
element form inline属性bug
呵呵，到处看看
06-30 4472
element form inline属性bug element-ui 中 form 中 设置 inline 属性为 true 后会出现因设备分辨率改变，form 换行的bug 原因分析 图例 总结 出现 form 换行原因是由于： inline 属性给 form 设置了width：auto的样式， 这会导致form按百分比缩放 同时 form中 input 组件样式中存在 width：100%的设定 这使得 input width 会自动与外层的div width 保持一致 ...
查询条件布局方式form-inline 查询条件(失败,不得行)
tanzongbiao的专栏
12-14 877
<!--查询条件(失败,不得行)--> <div class="row" style="margin: 5px;padding: 5px"> <div class="col-md-12"> <div class="form-group row"> <div class="col-md-2"> <form class="form-inline"> .
form-inline的内容代码是什么
07-13
`form-inline` 是 Bootstrap 框架中的一个 CSS 类，用于创建内联表单，使表单元素在同一行水平排列。 以下是一个示例代码，展示如何使用 `form-inline` 类创建内联表单： ```html <form class="form-inline"> <div class="form-group"> <label for="name">姓名：</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">邮箱：</label> <input type="email" class="form-control" id="email"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> ``` 在这个示例中，我们使用了 `form-inline` 类将整个 `<form>` 元素设为内联表单。然后，我们在 `<form>` 内部创建了两个表单组（`<div class="form-group">`），每个表单组包含一个标签和一个输入框。最后，我们添加了一个提交按钮。 通过这种方式，表单中的元素将水平排列在同一行上，而不是默认的垂直排列。这样的内联表单适合在有限的空间中展示简单的表单。你可以根据需要添加更多的表单元素或调整样式以满足你的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值