Bootstrap2用户指南
3.4.2 表单的可选布局
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

表单的默认布局

表单的可选布局

Bootstrap还提供了 3 个辅助类 .form-search、.form-inline、.form-horizontal,用来实现搜索表单、行内表单、水平布局的表单。

1、搜索表单

为 <form> 标签添加 .form-search 类,就可以创建一个搜索表单。搜索表单的输入框和提交按钮都在一行内显示。如果给 <input> 添加 .search-query 类,还会为输入框提供一个额外的圆角。如:

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

效果如图 3‑29所示:

Bootstrap搜索表单
图3-29 Bootstrap搜索表单

如果将输入框和提交按钮放在一个 class="input-append" 的包含框中,就可以让它们连在一起,成为一个整体。如:

<form class="form-search">
  <div class="input-append">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
  </div>
</form>

效果如图 3‑30所示:

Bootstrap搜索表单
图3-30 Bootstrap搜索表单

2、行内表单

为 <form> 标签添加 .form-inline 类,就可以创建一个行内表单。行内表单采用紧凑布局,它的所有控件都在一行内显示,标签和输入框使用左对齐方式。如:

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

效果如图 3 30所示:

Bootstrap行内表单
图3-31 Bootstrap行内表单

3、水平布局的表单

为 <form> 标签添加 .form-horizontal 类,就可以创建一个水平布局的表单。创建水平布局表单的步骤如下:

  • 为 <form> 元素添加 .form-horizontal 类;
  • 把成对的 <label> 和控件包装在 .control-group 的 <div> 中;
  • 为每个 <label> 添加 .control-label 类;
  • 把每个控件包装在一个类为 .controls 的 <div> 中,以便正确对齐。

如,以下是一个横向表单:

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

效果如图 3‑32所示:

Bootstrap水平布局的表单
图3-32 Bootstrap水平布局的表单

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验