Bootstrap 输入 - HTML

Bootstrap是一个流行的前端框架之一，它提供了丰富的CSS和JavaScript组件，可以帮助开发人员快速构建响应式、美观的Web应用程序。在本文中，我们将重点介绍Bootstrap中的输入组件。

表单控件

Bootstrap提供了丰富的表单控件，如文本框、下拉框、单选按钮和复选框等，可以轻松地构建各种类型的表单。以下是一些常见的表单控件示例：

文本框

使用Bootstrap的文本框，可以创建不同类型的输入框，如文本、密码、电子邮件地址等。示例代码如下：

<input type="text" class="form-control" placeholder="请输入文本">
<input type="password" class="form-control" placeholder="请输入密码">
<input type="email" class="form-control" placeholder="请输入电子邮件地址">

下拉框

使用Bootstrap的下拉框，可以方便地在一组选项中进行选择。示例代码如下：

<select class="form-control">
  <option>请选择</option>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

单选按钮和复选框

使用Bootstrap的单选按钮和复选框，可以方便地进行单选或多选操作。示例代码如下：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    单选按钮1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    单选按钮2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    复选框1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
  <label class="form-check-label" for="defaultCheck2">
    复选框2
  </label>
</div>

表单布局

在Bootstrap中，可以使用表单布局来管理表单元素的排版。以下是一些表单布局的示例：

水平表单

使用Bootstrap的水平表单，在一行中同时显示表单标签和控件。示例代码如下：

<form>
  <div class="form-group row">
    <label for="inputUsername" class="col-sm-2 col-form-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">登录</button>
    </div>
  </div>
</form>

行内表单

使用Bootstrap的行内表单，在一行中排列表单元素。示例代码如下：

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">邮箱</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">密码</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary mb-2">登录</button>
</form>

垂直表单

使用Bootstrap的垂直表单，以一列的方式排列表单元素。示例代码如下：

<form>
  <div class="form-group">
    <label for="inputName">姓名</label>
    <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
  </div>
  <div class="form-group">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
</form>

总结

在Bootstrap中，使用输入组件可以方便地构建各种类型的表单。与此同时，表单布局可以帮助我们更好地管理表单元素的排版，使表单更加美观和易读。希望本文对你有所帮助！