正文

掌握Bootstrap3：打造实用高效表单模板全攻略

/0 浏览量
0408

在网页设计中，表单是用户与网站互动的重要方式。Bootstrap3作为一款流行的前端框架，提供了丰富的组件和样式来帮助我们快速搭建美观、实用的表单。本文将详细讲解如何使用Bootstrap3打造实用高效的表单模板。

一、Bootstrap3表单基础

Bootstrap3提供了以下几种表单元素：

  • 表单控件（input、select、textarea等）
  • 表单控件状态（禁用、焦点、验证状态等）
  • 表单控件尺寸（大、中、小）
  • 表单水平布局
  • 表单内联

1.1 表单控件

Bootstrap3中的表单控件主要包括以下几种：

  • 输入框（input）
  • 选择框（select）
  • 文本域（textarea）

输入框（input）

<form>
  <div class="form-group">
    <label for="inputEmail">邮箱地址</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱地址">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
</form>

选择框（select）

<form>
  <div class="form-group">
    <label for="select">选择国家</label>
    <select class="form-control" id="select">
      <option>中国</option>
      <option>美国</option>
      <option>英国</option>
    </select>
  </div>
</form>

文本域（textarea）

<form>
  <div class="form-group">
    <label for="textarea">留言</label>
    <textarea class="form-control" rows="3" id="textarea"></textarea>
  </div>
</form>

1.2 表单控件状态

Bootstrap3提供了以下几种表单控件状态：

  • 禁用（disabled）
  • 焦点（focus）
  • 验证状态（valid、invalid）
<form>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">成功</label>
    <input type="text" class="form-control" id="inputSuccess" placeholder="输入成功状态">
  </div>
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">警告</label>
    <input type="text" class="form-control" id="inputWarning" placeholder="输入警告状态">
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">错误</label>
    <input type="text" class="form-control" id="inputError" placeholder="输入错误状态">
  </div>
</form>

1.3 表单控件尺寸

Bootstrap3提供了三种表单控件尺寸：大、中、小。

<form>
  <div class="form-group">
    <label class="control-label" for="largeInput">大尺寸</label>
    <input type="text" class="form-control input-lg" id="largeInput" placeholder="大尺寸输入框">
  </div>
  <div class="form-group">
    <label class="control-label" for="inputNormal">中尺寸</label>
    <input type="text" class="form-control" id="inputNormal" placeholder="中尺寸输入框">
  </div>
  <div class="form-group">
    <label class="control-label" for="smallInput">小尺寸</label>
    <input type="text" class="form-control input-sm" id="smallInput" placeholder="小尺寸输入框">
  </div>
</form>

1.4 表单水平布局

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">邮箱地址</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="请输入邮箱地址">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="请输入密码">
    </div>
  </div>
</form>

1.5 表单内联

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="密码">
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox"> 记住我
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-default">登录</button>
</form>

二、Bootstrap3表单验证

Bootstrap3提供了表单验证功能，可以帮助我们快速实现表单的输入验证。

<form class="form-validation">
  <div class="form-group">
    <label for="inputName">姓名</label>
    <input type="text" class="form-control" id="inputName" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">邮箱地址</label>
    <input type="email" class="form-control" id="inputEmail" required>
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" required>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

三、总结

通过以上讲解，相信你已经掌握了使用Bootstrap3打造实用高效表单模板的方法。在实际开发中，可以根据需求灵活运用Bootstrap3的表单组件和样式，为用户提供更好的使用体验。

-- 展开阅读全文 --