目录
表单
堆叠表单
内联表单
文本框
输入框大小
禁用/只读表单
纯文本输入
取色器
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</p> <p><strong>Bootstrap5 表单布局</strong></p> <ul> <li>堆叠表单 (全屏宽度)：垂直方向</li> <li>内联表单：水平方向</li> </ul> <p>Bootstrap 提供了两种类型的表单布局:</p> <h3 id="%E5%A0%86%E5%8F%A0%E8%A1%A8%E5%8D%95"><span style="color:#4da8ee;">堆叠表单</span></h3> <p><span style="color:#0d0016;">对于设置了.form-control类的<input>和<textarea>元素，它们将获得正确的表单样式。这样可以确保它们在堆叠表单中正确显示。</span></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <form> <div class="mb-3 mt-3"> <label for="email" class="form-label">电子邮件：</label> <input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email"> </div> <div class="mb-3"> <label for="pwd" class="form-label">密码：</label> <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd"> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> 记住我 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html></code></pre> <p><span style="color:#0d0016;">此外，为了确保正确的填充，我们为每个label元素添加了.form-label类。</span></p> <p><span style="color:#0d0016;">对于复选框和单选按钮，它们具有不同的标记样式。它们是通过.form-check类的容器元素包围的。相应的label元素使用.form-check-label类，而复选框和单选按钮则使用.form-check-input类。</span></p> <p><span style="color:#0d0016;">通过使用这些样式类，可以确保堆叠表单中的各个元素具有正确的样式和布局。</span></p> <h3 id="%E5%86%85%E8%81%94%E8%A1%A8%E5%8D%95"><span style="color:#4da8ee;">内联表单</span></h3> <p>可以使用.row和.col类来创建内联表单，并使表单元素并排显示。</p> <p>以下是一个示例代码，用于创建一个包含两个输入框的内联表单：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <form class="form-inline"> <div class="form-group row"> <label for="input1" class="col-sm-2 col-form-label">电子邮件：</label> <div class="col-sm-10"> <input type="text" class="form-control" id="input1" placeholder="请输入电子邮件地址"> </div> </div> <div class="form-group row"> <label for="input2" class="col-sm-2 col-form-label">密码</label> <div class="col-sm-10"> <input type="text" class="form-control" id="input2" placeholder="请输入密码"> </div> </div> </form> </div> </body> </html></code></pre> <p>在这个例子中，我们将整个表单设置为内联表单，使用.form-inline类。然后，在每个表单组中，我们使用.form-group和.row类来创建一个行容器，并使用.col类来指定每个表单元素的列宽度。这样，两个输入框就可以并排显示了。</p> <p>注意，我们在每个表单组的标签和输入框之间使用了一个<div>元素，以确保标签和输入框对齐。</p> <h3 id="%E6%96%87%E6%9C%AC%E6%A1%86"><span style="color:#4da8ee;">文本框</span></h3> <p>可以使用<textarea>标签来创建文本框，并使用.form-control类来渲染文本框。</p> <p>以下是一个示例代码，用于创建一个提交表单的文本框：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <form> <div class="form-group"> <label for="exampleTextarea">请输入评论：</label> <textarea class="form-control" id="exampleTextarea" placeholder="请输入评论内容" rows="3">
