Bootstrap 组件 表单（forms）[待续]

最新推荐文章于 2024-05-09 09:59:41 发布
最新推荐文章于 2024-05-09 09:59:41 发布
阅读量460 收藏 1
点赞数
分类专栏： Bootstrap 前端 文章标签： Bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiabenshu/article/details/89956360
版权

表单

用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。

概述

Bootstrap的表单控件扩展了我们使用类重新引导的表单样式。使用这些类来选择它们的自定义显示，以便在浏览器和设备之间实现更一致的呈现。

确保在所有输入上使用适当的类型属性(例如，电子邮件用于电子邮件地址或数字信息的数字)，以利用较新的输入控件，如电子邮件验证、数字选择等。

下面是一个演示Bootstrap表单样式的快速示例。请继续阅读有关所需类、表单布局等的文档。

这是一个简单的表单

在这里插入图片描述

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表单控制

添加很多不同类型的内容组件去实现一个表单。
在这里插入图片描述
单选器，多选器，文本框等。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

对于上传文件。使用 .form-control-file.
在这里插入图片描述

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

大小

选择高度类通过一些类，就像 .form-control-lg 和 .form-control-sm.
在这里插入图片描述

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

在这里插入图片描述

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

只读属性

在输入上添加readonly boolean属性，以防止修改输入的值。只读输入看起来更轻(就像禁用的输入一样)，但保留标准游标。
在这里插入图片描述

没有文本框的只读文本

在这里插入图片描述

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

在这里插入图片描述

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

范围输入

设置水平的滚动范围使用.form-control-range。在这里插入图片描述

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

选项盒子和单选框

默认复选框和单选项在.form-check的帮助下得到了改进，form-check是两个输入类型的一个类，它改进了HTML元素的布局和行为。复选框用于选择列表中的一个或多个选项，而收音机用于从多个选项中选择一个选项。
支持禁用的复选框和收音机。disabled属性将应用较浅的颜色来帮助指示输入的状态。
复选框和收音机的使用是为了支持基于html的表单验证，并提供简洁、可访问的标签。因此，我们的s和

默认（堆选）

默认情况下，任何数量的复选框和对应台都将垂直堆叠，并以.form-check适当间隔。
在这里插入图片描述

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

在这里插入图片描述

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

行内选项

通过将.form-check内联到任何.form-check中，将复选框或单选框分组到同一水平行。
在这里插入图片描述

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

在这里插入图片描述

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

没有label 的选项框

将.position-static添加到.form-check中没有任何标签文本的输入中。记住，仍然要为辅助技术提供某种形式的标签(例如，使用aria-label)。
在这里插入图片描述

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

布局

由于Bootstrap将display: block和width: 100%应用于几乎所有的表单控件，默认情况下表单将垂直堆叠。可以使用其他类根据每个表单更改此布局。

表单组结构

form-group类是向表单添加一些结构的最简单方法。它提供了一个灵活的类，鼓励对标签、控件、可选帮助文本和表单验证消息进行适当的分组。默认情况下，它只应用页边距-底部，但它会根据需要选择.form-inline中的其他样式。与s、

s或几乎任何其他元素一起使用。
在这里插入图片描述 

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

表单网格

可以使用网格类构建更复杂的表单。将它们用于需要多个列、不同宽度和其他对齐选项的表单布局。
在这里插入图片描述

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

使用form row来整合

您还可以将.row替换为.form-row，这是我们的标准网格行，它覆盖了默认的列插槽，从而实现更紧凑的布局。
在这里插入图片描述

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

东西太多，未完待续。。。

xiabe
关注
专栏目录
bootstrap form表单
qq_37538698的博客
04-10 1228
Bootstrap 表单 ： 1.垂直表单2.内联表单3.水平表单1.1 垂直表单 ： for : 与id的名称一致，属性规定label与那个字段绑定，并且当鼠标选中的时候有文本框变色效果 ； form-group : 取得最佳间距 ； 父级form表单中添加向父role = “form”向所有的文本元素 &lt;input&gt;、&lt;textarea&gt; 和 &lt;select&gt...
Bootstrap系列之表单（Forms）
老__L的博客
06-13 5764
表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。Bootstrap 表单控件通过类来扩展我们的表单样式。使用这些类可以选择使用它们的定制显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入中使用适当的type属性(例如，用于电子邮件地址，用于数字信息)，以利用较新的输入控件，如电子邮件验证、数字选择等。这里有一个演示Bootstrap表单样式的快速示例。 文本表单控件，如、和都使用类进行样式化。包括一般外观、焦点状态、大小等样式。一定要探索我们的自定义表单以进一步样式化。 对
BootStrap表单
modelmd的博客
11-11 318
BootStrap表单BootStrap介绍预处理脚本一个框架、多种设备特性齐全BootStrap 使用引入相关的 js、css兼容IE浏览器BootStrap代码解读JS事件 BootStrap介绍 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单...
bootstrap4-forms表单组件
@siye
03-30 1717
forms 组件 input 元素的disabled,readonly,multiple属性直接使用,官方文档有示例. 使用单选框(radio)的时候,切记指定相同值的 name 属性. 默认的显示布局(layout)CSS 样式是 : display : none; width : 100%;. 在布局方向,可放弃使用.form-group .form-inline嵌套栅格系统.row .co...
html中内联的form,bootstrap3.0教程之表单(form)使用详解
weixin_39624705的博客
06-17 519
本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容：1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本9.总结基本案例单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和元素都将被默认设置为width: 100%;。将label和前面...
Bootstrap表单组件教程详解
09-02
此外，Bootstrap还提供了其他表单组件，如预填充的表单（.form-group.has-feedback）、帮助文本（.help-block）、验证状态（.has-error, .has-warning, .has-success）以及表单控制组（.form-control-feedback）等，...
BootStrap 智能表单实战系列(十)自动完成组件的支持
09-02
在Bootstrap的智能表单实战系列中，第十部分主要关注的是自动完成组件，这个组件在网页表单设计中扮演着重要角色，尤其对于提升用户体验有着显著效果。 自动完成组件，也称为自动填充或建议输入，常用于搜索框或...
BootStrap智能表单实战系列(三)分块表单配置详解
11-24
总结来说，Bootstrap 的分块表单配置允许开发者更加灵活地组织和呈现表单内容，同时利用框架的组件和样式，实现美观且响应式的界面。在实际应用中，这种灵活性和可扩展性使得 Bootstrap 成为了开发高效 Web 应用的...
BootStrap 智能表单实战系列(五) 表单依赖插件处理
09-02
总结来说，BootStrap智能表单实战系列第五部分主要探讨了在生成表单元素后的后续处理，特别是如何利用插件如datepicker和autocomplete提升表单功能。通过理解并熟练运用Bootstrap的这些工具和方法，开发者能够创建出...
标准bootstrap3 form表单美化
懒得安分的博客
01-31 7954
/*文本框美化*/ .form-control[type='text'], .form-control[type='password'] { padding-left: 20px; } .form-group:last-child label:before { position: a...
Bootstrap 表单的扩展控件
歪脖先生的博客
03-07 1458
表单的扩展控件除了基本的控件，作为对 HTML 表单控件的补充，Bootstrap 还为表单额外提供了一些非常实用的扩展控件。输入框的前置和后置组件，是非常实用的控制控件。利用输入框的前置和后置组件，可以在输入框的前面或后面添加用户输入中的公共内容。如，可以为输入框前置人民币符号、电子邮件的 @ 符号、或其他公共的内容。要在输入框的前面或后面添加内容，首先创建一个 .input-prepend 或...
bootstrap一次性回显数据，根据form的name属性回显
weixin_41711593的博客
12-17 1965
bootstrap处理编辑时重新加载（回显）数据问题 var rows = $("#mainTable").datagrid("getRows"); var row = rows[index]; //判断input的name属性，当name属性=object的属性时，让这个dom的value=object对应属性的值 for(var i in row){ $("#formao input"...
bootstrap在线定制工具
virgil
01-30 6268
四种最好的免费Bootstrap在线设计工具 Bootstrap带来了设计革命，本文介绍的四种免费Bootstrap在线设计工具，可视化所见所得设计网页，然后输出Html/CSS代码，其中有些甚至可以实现拖曳，也有可以设定自己的主题模板Theme。 1. Layoutit LayoutIt通过使用我们的拖放界面生成器帮助您简单快速地创建Bootstrap前端代码。它陈列出Bootstrap的
推荐一款神奇的Bootstrap表单构建器：bootstrap_form
最新发布
gitblog_00009的博客
05-09 499
推荐一款神奇的Bootstrap表单构建器：bootstrap_form bootstrap_formOfficial repository of the bootstrap_form gem, a Rails form builder that makes it super easy to create beautiful-looking forms using Bootstrap 5.项目地...
bootstrap4-表单
weixin_46410264的博客
10-03 525
表单 表单控件 1.文本控件 如 input、select、textarea 统一采用 .form-control 样式进行处理优化，包括外观、选中状态、大小等； 2.上传文件则用 .form-control-file 代替了 .form-control ； 3.大小规格 使用.form-control-lg 和 .form-control-sm 样式控制控件大小； 4.输入范围 使用 .form-control-range 设置水平滚动范围输入； 5.只读属性 readonly属性 防止控件的值
Form controls表单属性控制
Jenis57的博客
03-04 1083
有些时候，我们需要提供给用户一些默认的可期待的选项，而这时我们希望在用户点击input框时，有跳出的内容以供用户选择，当然用户也可以手动输入，而这些选择就是属于datalist的内容。因为不同的浏览器可能对于type：color的input框会设置不同的高度，bootstrap规定了固定的大小。在input的list属性标注的id得到绑定。但是这种datalist的style在各个浏览器是不同的。的value属性被作为展开的选项。
Bootstrap表单的使用
Debug的博客
02-26 2624
HTML中表单是网页和应用程序不可缺少的一部分，Bootstrap通过预定义的类极大的简化了表单组件的样式及使用方式。
Bootstrap组件——表单
xun__xing的博客
07-30 1458
表单一、表单1.基础表单2.大小规格3.只读属性4.表单栅格排列5.表单表格式的排列6.水平排列表单7.内联表单二、验证1.验证2.自定义表单样式 一、表单 1.基础表单 使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。 <div class="row"> <div class="col mt-5"> <form action="#"> <
Bootstrap学习实践笔记（四）
FED_AF的博客
05-24 564
组件：下拉菜单、表单、大块屏、列表组、媒体对象、弹出模态框 、导航栏、分页、POP提示 、进度条、滚动监听、旋转特效、弹出提示框、提示冒泡
Bootstrap表单组件深度解析
- Bootstrap允许开发者通过LESS或SASS（根据项目需求）进行自定义，例如在`forms.less`或`_forms.scss`文件中，可以修改或扩展表单组件的样式。 Bootstrap的表单组件教程提供了一套完整的解决方案，帮助开发者快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值