Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • Bootstrap
  • 第六章【超入门】Bootstrap表格
  • HOME
  • Bootstrap
  • 第六章【超入门】Bootstrap表格

第六章【超入门】Bootstrap表格

Bootstrap

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。这是一个网格系统。由于输入表单和按钮被“表单行”包围,因此这些元素并排排列。然后用一列围绕每个元素。

接下来是应用了“占位符”属性的“输入”标签。如果您应用此属性并在值部分放置一些文本,该文本将显示在输入表单中。

标签:Bootstrap

文章导航

❮ Previous Post: 第五章【超入门】Bootstrap导航
Next Post: 第七章【超入门】Bootstrap的轮播 ❯

关联内容

Bootstrap
第一章【超入门】Bootstrap基本用法
Bootstrap
第二章【超入门】Bootstrap的基础
Bootstrap
第三章【超入门】理解Bootstrap 断点
Bootstrap
第四章【超入门】Bootstrap的布局
Bootstrap
第五章【超入门】Bootstrap导航
Bootstrap
第七章【超入门】Bootstrap的轮播

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com