|
Post by account_disabled on Jan 25, 2024 6:57:08 GMT
在本文中,您将了解如何使用 Bootstrap 表单组件设置表单元素的样式,以及如何利用网格系统来对齐这些元素。此外,我们还将看到水平表单和内联表单的实际应用,并讨论表单验证。 我仍然记得(不太好)过去的日子,当时我们必须手动编写网站的所有样式。可靠的 CSS 解决方案非常少,创建复杂的 UI 曾经是一件非常痛苦的事情。这就像开发人员互相分享的神秘知识:他们讲述了如何制作圆形、如何突出显示焦点元素或创建渐变背景的故事……我真的很怀念那些日子。幸运的是,有许多新技术可以帮助我们加快 Web 应用程序样式设计的过程。Bootstrap就是此类技术之一,今天我们将讨论其最常用的组件之一:表单。 有大量预定义样式可以应用于表单,通过使用它们,您可以轻松创建精美的 UI。 入门 如果您想继续操作,请创建以下样板 HTML 我们加载示例之一所需的 Bootstrap 样式和一些脚本。 就是这个!所有标记都应放置在container充当页面主要元素的块内。 我们可以继续下一部分并开始制作我们的第一个表单。 创建一个简单的表单 假设我们正在为我们新的闪亮网站创建一个注册表。我们的表单至少应该提供电子邮件地址和密码字段现在让我们稍 WhatsApp 号码数据 微设计一下这些字段的样式。首先也是最重要的,label和input应该用 Bootstrap 表单组件类包装在一个元素内form-group,这将添加一个小的顶部边距。此外,我们form-control为输入分配一个类,以使它们看起来更好 请注意,Bootstrap 会自动重新启动表单元素,以便可以轻松应用新样式。 为什么我们不在电子邮件表单下方显示一些帮助文本,以告知用户我们不会以任何恶意方式使用他们的数据?在 Bootstrap 3 中,帮助文本用类标记help-block,但该框架的最新版本使用了一个名为form-text. 让我们将其放置在input(内部form-group)的正下方。 另外,让我们通过应用 Bootstrap 表单组件类使文本看起来更微妙text-muted请注意我们如何aria-describedby为输入添加属性(点#1)以解释我们的帮助块(#2)正在描述该字段。 为什么我们不把这两个字段放大一点来强调它们的重要性呢?可以使用 Bootstrap 表单组件和类轻松调整输入的大小 结果如下: 基本 Bootstrap 表单组件 表单看起来非常清晰,当前选择的输入有一个漂亮的蓝色边框。凉爽的! Bootstrap 表单组件只读元素 假设现在我们想为用户引入多种定价计划,但目前只有“基本”计划可用。让我们添加一个 Bootstrap 表单组件只读输入,样式为纯文本。就像分配form-control-plaintext班级一样简单 结果如下: Learn to Code with JavaScript Bootstrap 表单组件的 form-control-plaintext 类 Bootstrap Form 组件支持的其他类型的输入 Bootstrap 支持所有类型输入的样式。
|
|