Bootstrap3实用教程
2.6.1 基本表单
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

Bootstrap 为表单和表单控件提供了一些全局样式,不需要添加任何辅助类,即可让表单使用默认布局。默认布局中,表单元素采用垂直布局,标签和输入框采用顶对齐方式。

Bootstrap 中创建表单的基本步骤如下:

  • 为每个表单控件<input><textarea><select>元素添加 .form-control类;
  • 把成对的 <label> 和表单控件包裹在 .form-group<div> 中;
  • 将这些应用了.form-group类的 <div> 放到 <form> 中。

如,以下代码创建一个基本表单:

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="pass">Password</label>
    <input type="password" class="form-control" id="pass" placeholder="password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap为.form-control类设置了 display: block,因此每个设置了.form-control类的表单控件都各自独占一行,并且宽度为100%;。效果如图 2‑47所示:

表单的默认布局
图2-47 表单的默认布局

在大多数情况下,每个控件独占一行的布局都工作地很好,但在实际应用中,有时候我们却需要在一行内放置多个控件。由于在栅格系统中,一行内可以放置多个列。因此,可以把控件放在栅格系统的列中,来实现在一行内放置多个控件。如:

<form>
  <div class="form-group">
    <div class="col-xs-3">
      <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
      <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
    <div class="col-xs-5">
      <input type="text" class="form-control" placeholder=".col-xs-5">
    </div>
  </div>
</form>

效果如图 2‑48所示:

一行多个控件
图2-48 一行多个控件

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验