Bootstrap 使嵌入表单变得容易。只是写表单标签是一个枯燥的设计,但是当你用 Bootstrap 写的时候,它非常漂亮并且有很多变化。
表格
这是表单的一部分,也包含在上一章中使用的导航模板中。表单不仅仅可以用于导航。让我们仔细看看表格。
以上是基本的表单结构。用“form”标签包围整个表单,并使用 CSS 的Class“form-group”包围每个表单。“label”标签描述输入表单的轮廓,“input”标签创建输入字段。在输入字段中指定 CSS 的Class“form-control”。在本课程中,将输入表单等的设计制作成模板。
最后创建一个带有“button”标签的提交按钮。在 CSS 的Class部分,您可以指定按钮的设计。如果要更改颜色,请将“btn-primary”部分更改为其他颜色名称。可以在 Bootstrap 官方网站的“实用程序”部分的“颜色”部分找到颜色列表。生成的页面将如下所示:
表格定制
还可以通过多种方式自定义表单。首先,让我们更改输入表单的大小。将以下代码添加到 CSS 的Class部分。
如果它只是“form-control”,它将是标准尺寸。添加“form-control-sm”会降低高度,添加“form-control-lg”会增加高度。
布局
我向您展示的第一个基本形式具有垂直排列的所有元素。现在让我们看看如何并排放置元素。首先,在“form”标签下添加一个CSS类为“form-row”的div。这是一个网格系统。由于输入表单和按钮被“表单行”包围,因此这些元素并排排列。然后用一列围绕每个元素。
接下来是应用了“占位符”属性的“输入”标签。如果您应用此属性并在值部分放置一些文本,该文本将显示在输入表单中。