Bootstrap 基础教程：表单部分实例代码

Bootstrap 是一款流行的前端框架，它可以帮助开发者快速搭建美观、响应式的网页。在本文中，我们将关注 Bootstrap 中的表单部分，并提供一些基础的示例代码，帮助你快速上手。

表单组件

Bootstrap 提供了多种表单组件，包括文本输入框、下拉列表、单选框和复选框等。这些组件都具有相同的外观和交互方式，可以方便地集成到页面中。以下是一些示例代码：

文本输入框

---- -------------------
  ------ ----------------------
  ------ ----------- -------------------- --------- ----------------------
------

在这个示例中，我们创建了一个文本输入框，使用了 form-group 类来对其进行样式设置。label 标签用于标识该输入框的用途，而 input 标签则定义了输入框的类型和属性。通过添加 form-control 类，我们为输入框添加了 Bootstrap 默认的样式。

下拉列表

---- -------------------
  ------ ------------------------
  ------- -------------------- ------------
    ------------------
    ------------------
    -------------------
  ---------
------

在这个示例中，我们创建了一个下拉列表，同样使用了 form-group 类进行样式设置。select 标签定义了下拉列表的选项，每个选项由 option 标签表示。通过添加 form-control 类，我们为下拉列表添加了 Bootstrap 默认的样式。

单选框和复选框

---- -------------------
  ------ ------------------------ ------------ ------------- --------- ------------ --------
  ------ ------------------------ --------------------
------
---- -------------------
  ------ ------------------------ ------------ ------------- ----------- ---------------
  ------ ------------------------ ----------------------
------
---- -------------------
  ------ ------------------------ --------------- -----------
  ------ ------------------------ ------------------------
------

在这个示例中，我们创建了两个单选框和一个复选框。不同于之前的示例，我们使用了 form-check 和 form-check-input 类来对单选框和复选框进行样式设置。name 属性用于将几个单选框关联起来，而 checked 属性则指定了默认选项。

表单布局

除了表单组件之外，Bootstrap 还提供了多种布局选项，可以让表单更加美观和易用。以下是一些示例代码：

水平布局

------
  ---- ----------------- -----
    ------ ---------- --------------- ---------------------------
    ---- ------------------
      ------ ----------- -------------------- --------- ----------------------
    ------
  ------
  ---- ----------------- -----
    ------ ------------ --------------- ---------------------------
    ---- ------------------
      ------- -------------------- ------------
        ------------------
        ------------------
        -------------------
      ---------
    ------
  ------
-------

在这个示例中，我们使用了 row 类对表单进行水平布局。通过添加 col-* 类

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/2255

Bootstarp 基础教程之表单部分实例代码