Bootstrap表单介绍

来源：互联网发布：ubuntu使用方法编辑：程序博客网时间：2024/06/04 18:28

Bootstrap来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文介绍一下Bootstrap的表单类型以及实现方法。Bootstrap 提供了下列类型的表单布局：

- 垂直表单（默认）
- 内联表单
- 水平表单
- 垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父 <form> 元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 基本表单</title>   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form">   <div class="form-group">      <label for="name">名称</label>      <input type="text" class="form-control" id="name"          placeholder="请输入名称">   </div>   <div class="form-group">      <label for="inputfile">文件输入</label>      <input type="file" id="inputfile">      <p class="help-block">这里是块级帮助文本的实例。</p>   </div>   <div class="checkbox">      <label>      <input type="checkbox"> 请打勾      </label>   </div>   <button type="submit" class="btn btn-default">提交</button></form></body></html>

结果如下所示：

这里写图片描述

内联表单如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 内联表单</title>   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-inline" role="form">   <div class="form-group">      <label class="sr-only" for="name">名称</label>      <input type="text" class="form-control" id="name"          placeholder="请输入名称">   </div>   <div class="form-group">      <label class="sr-only" for="inputfile">文件输入</label>      <input type="file" id="inputfile">   </div>   <div class="checkbox">      <label>      <input type="checkbox"> 请打勾      </label>   </div>   <button type="submit" class="btn btn-default">提交</button></form></body></html>

结果如下所示：

这里写图片描述

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。水平表单水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：向父 <form> 元素添加 class .form-horizontal。把标签和控件放在一个带有 class .form-group 的 <div> 中。向标签添加 class .control-label。

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 水平表单</title>   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-horizontal" role="form">   <div class="form-group">      <label for="firstname" class="col-sm-2 control-label">名字</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="firstname"             placeholder="请输入名字">      </div>   </div>   <div class="form-group">      <label for="lastname" class="col-sm-2 control-label">姓</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="lastname"             placeholder="请输入姓">      </div>   </div>   <div class="form-group">      <div class="col-sm-offset-2 col-sm-10">         <div class="checkbox">            <label>               <input type="checkbox"> 请记住我            </label>         </div>      </div>   </div>   <div class="form-group">      <div class="col-sm-offset-2 col-sm-10">         <button type="submit" class="btn btn-default">登录</button>      </div>   </div></form></body></html>

结果如下所示：

这里写图片描述

本文介绍了Bootstrap的表单类型和实现方法，下篇介绍表单支持的控件。

0 3