Bootstrap 是一款流行的前端框架，它可以帮助开发者快速搭建美观、响应式的网页。在本文中，我们将关注 Bootstrap 中的表单部分，并提供一些基础的示例代码，帮助你快速上手。
表单组件
Bootstrap 提供了多种表单组件，包括文本输入框、下拉列表、单选框和复选框等。这些组件都具有相同的外观和交互方式，可以方便地集成到页面中。以下是一些示例代码：
文本输入框
<div class="form-group"> <label for="name">姓名：</label> <input type="text" class="form-control" id="name" placeholder="请输入您的姓名"> </div>
在这个示例中，我们创建了一个文本输入框，使用了 form-group 类来对其进行样式设置。label 标签用于标识该输入框的用途，而 input 标签则定义了输入框的类型和属性。通过添加 form-control 类，我们为输入框添加了 Bootstrap 默认的样式。
下拉列表
<div class="form-group"> <label for="gender">性别：</label> <select class="form-control" id="gender"> <option>男</option> <option>女</option> <option>其他</option> </select> </div>
在这个示例中，我们创建了一个下拉列表，同样使用了 form-group 类进行样式设置。select 标签定义了下拉列表的选项，每个选项由 option 标签表示。通过添加 form-control 类，我们为下拉列表添加了 Bootstrap 默认的样式。
单选框和复选框
-- -------------------- ---- ------- ---- ------------------- ------ ------------------------ ------------ ------------- --------- ------------ -------- ------ ------------------------ -------------------- ------ ---- ------------------- ------ ------------------------ ------------ ------------- ----------- --------------- ------ ------------------------ ---------------------- ------ ---- ------------------- ------ ------------------------ --------------- ----------- ------ ------------------------ ------------------------ ------展开代码
在这个示例中，我们创建了两个单选框和一个复选框。不同于之前的示例，我们使用了 form-check 和 form-check-input 类来对单选框和复选框进行样式设置。name 属性用于将几个单选框关联起来，而 checked 属性则指定了默认选项。
表单布局
除了表单组件之外，Bootstrap 还提供了多种布局选项，可以让表单更加美观和易用。以下是一些示例代码：
水平布局
-- -------------------- ---- ------- ------ ---- ----------------- ----- ------ ---------- --------------- --------------------------- ---- ------------------ ------ ----------- -------------------- --------- ---------------------- ------ ------ ---- ----------------- ----- ------ ------------ --------------- --------------------------- ---- ------------------ ------- -------------------- ------------ ------------------ ------------------ ------------------- --------- ------ ------ -------展开代码
在这个示例中，我们使用了 row 类对表单进行水平布局。通过添加 col-* 类
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2255
