学习

Activity 5: Form styling with Bootstrap 5's CSS

5.1 打开 Form.vue 并通过将不同的元素分成单独的 div 并引入不同的类（来自 Bootstrap 5）来更改我们现有的表单，使用以下代码：

javascript

<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <h1 class="text-center">User Information Form</h1>
        <form @submit.prevent="submitForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="username" class="form-label">Username</label>
              <input type="text" class="form-control" id="username" v-model="formData.username" />
            </div>
            <div class="col-md-6">
              <label for="password" class="form-label">Password</label>
              <input
                type="password"
                class="form-control"
                id="password"
                v-model="formData.password"
              />
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="form-check">
                <input
                  type="checkbox"
                  class="form-check-input"
                  id="isAustralian"
                  v-model="formData.isAustralian"
                />
                <label class="form-check-label" for="isAustralian">Australian Resident?</label>
              </div>
            </div>
            <div class="col-md-6">
              <label for="gender" class="form-label">Gender</label>
              <select class="form-select" id="gender" v-model="formData.gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label for="reason" class="form-label">Reason for joining</label>
            <textarea class="form-control" id="reason" rows="3" v-model="formData.reason"></textarea>
          </div>
          <div class="text-center">
            <button type="submit" class="btn btn-primary me-2">Submit</button>
            <button type="button" class="btn btn-secondary" @click="clearForm">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
// Our logic will go here
</script>

<style scoped></style>

分解该代码片段中的所有 HTML - 这是它的树状结构：

javascript

template
└─ div.container.mt-5
   └─ div.row
      └─ div.col-md-8.offset-md-2
         ├─ h1.text-center "User Information Form"
         └─ form(@submit.prevent="submitForm")
            ├─ div.row.mb-3
            │  ├─ div.col-md-6
            │  │  ├─ label.form-label[for="username"] "Username"
            │  │  └─ input.form-control#username[type="text" v-model="formData.username"]
            │  └─ div.col-md-6
            │     ├─ label.form-label[for="password"] "Password"
            │     └─ input.form-control#password[type="password" v-model="formData.password"]
            ├─ div.row.mb-3
            │  ├─ div.col-md-6
            │  │  └─ div.form-check
            │  │     ├─ input.form-check-input#isAustralian[type="checkbox" v-model="formData.isAustralian"]
            │  │     └─ label.form-check-label[for="isAustralian"] "Australian Resident?"
            │  └─ div.col-md-6
            │     ├─ label.form-label[for="gender"] "Gender"
            │     └─ select.form-select#gender[v-model="formData.gender"]
            │        ├─ option[value="male"] "Male"
            │        ├─ option[value="female"] "Female"
            │        └─ option[value="other"] "Other"
            ├─ div.mb-3
            │  ├─ label.form-label[for="reason"] "Reason for joining"
            │  └─ textarea.form-control#reason[rows="3" v-model="formData.reason"]
            └─ div.text-center
               ├─ button.btn.btn-primary.me-2[type="submit"] "submit"
               └─ button.btn.btn-secondary[type="button" @click="clearForm"] "Clear"

Bootstrap Class

container mt-5 ：创建一个居中容器，其上边距为 5 个单位
- mt-5 类容器用于创建一个响应式固定宽度容器，使内容在页面上居中。该 container 类确保其内部的内容正确对齐，并在不同的屏幕尺寸下保持一致。mt mt-5 类添加了 5 个单位的上边距，在使用默认 Bootstrap 间距比例时，相当于 3rem（或 48px）。此间距有助于将容器与页面顶部分隔开，使其更具视觉吸引力。
row ：在 Bootstrap 的网格系统中定义一行
col-md-8 offset-md-2 ：定义一个跨越 8 个网格空间的列，并在中型和大型屏幕上通过将其偏移 2 个网格空间来居中
- 在行内， col-md-8 和 offset-md-2 类的组合用于定义一个列，该列在中型（≥768px）及更大的屏幕上占据 12 个网格空间中的 8 个。col col-md-8 类确保该列占据 8 个网格空间，而 offset-md-2 类则将列向右移动 2 个网格空间，从而有效地使其在行内居中。此技术对于在中型和大型屏幕上将内容居中放置在页面中间非常有用
text-center ：将元素内的文本居中
mb-3 ：添加 3 个单位的底部边距
- mb-3 类是另一个实用类，用于为元素添加 3 个单位（1rem 或 16px）的下边距。此间距有助于垂直分隔元素，使布局更易读、更井然有序。mb mb-3 类是 Bootstrap 全面的实用类集的一部分，可用于轻松且一致地调整间距
form-control 、 form-check 、 form-check-input 、 form-check-label 、 form-select ：用于设置表单元素样式的 Bootstrap 类
- 对于表单元素，Bootstrap 提供了几个专门的类来确保样式的一致性。form -control 类用于设置输入字段、选择框和文本区域的样式，提供填充、边框和其他样式，以实现统一的外观。form -check 类用于设置复选框或单选按钮组的样式，将输入框和标签组合在一起。在 form-check 容器中， form-check-input 类应用于输入元素，确保它们具有正确的样式和位置。同样， form-check-label 类应用于标签，使其与输入元素对齐
- 最后， form-select 类用于设置选择元素的样式，使其与其他表单控件具有一致的外观。该类确保选择下拉菜单具有与输入字段相同的填充、边框和整体样式，从而使表单看起来统一且专业

表单元素和 Vue 指令

<form @submit.prevent="submitForm"> ：使用 Vue 指令定义一个表单，该指令可阻止默认提交行为并调用 submitForm 方法
<input type="text" class="form-control" id="username" v-model="formData.username"> ：用户名的输入字段，使用 Bootstrap 5 设置样式并使用 v-model 绑定到 formData.username
<input type="password" class="form-control" id="password" v-model="formData.password"> ：密码输入字段，采用 Bootstrap 5 设计样式并使用 v-model 绑定到 formData.password
<input type="checkbox" class="form-check-input" id="isAustralian" v-model="formData.isAustralian"> ：一个复选框，用于指示用户是否是澳大利亚居民，使用 Bootstrap 设计样式，并使用 v-model 绑定到 formData.isAustralian
<select class="form-select" id="gender" v-model="formData.gender"> ：用于选择性别的下拉菜单，采用 Bootstrap 设计样式，并使用 v-model 绑定到 formData.gender
<textarea class="form-control" id="reason" rows="3" v-model="formData.reason"></textarea> ：加入原因的文本区域，使用 Bootstrap 设置样式，并使用 v-model 绑定到 formData.reason

Buttons

<button type="submit" class="btn btn-primary me-2">Submit</button> ：使用 Bootstrap 的主按钮类进行样式设置的提交按钮
<button type="button" class="btn btn-secondary" @click="clearForm">Clear</button> ：用于清除表单的按钮，使用 Bootstrap 的辅助按钮类进行样式设置，并使用 @click 绑定到 clearForm 方法

您可能会注意到“提交”和“清除”按钮尚未起作用。

Let's make it function in the next activity!

学习

学习

学习

Activity 5: Form styling with Bootstrap 5's CSS

Bootstrap Class

表单元素和 Vue 指令

Buttons

本页目录

学习

Activity 5: Form styling with Bootstrap 5's CSS

Bootstrap Class

表单元素和 Vue 指令

Buttons

本页目录