Bootstrap 表单

2017-08-19 09:01:02 来源: 点击:站内收藏

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单布局

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="form-group">
      <label for="text">文本框</label>
      <textarea id="text" class="form-control" rows="3"></textarea>
  </div>
	<div class="radio">
	   <label>
	      <input type="radio" name="optionsRadios" id="optionsRadios1" 
	         value="option1" checked> 选项 1
	   </label>
	</div>
	<div class="radio">
	   <label>
	      <input type="radio" name="optionsRadios" id="optionsRadios2" 
	         value="option2">
	         选项 2 - 选择它将会取消选择选项 1
	   </label>
	</div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <div>
	   <label class="checkbox-inline">
	      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
	   </label>
	   <label class="checkbox-inline">
	      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
	   </label>
   </div>
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
 
      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>
<!-- 水平表单 -->
<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="请输入名字" disabled>
      </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>
使用技巧

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

2、如需创建一个水平布局的表单,向父form元素添加 class .form-horizontal。

3、最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

4、当您需要进行多行输入的时,则可以使用文本框 textarea。必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。

5、对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

6、使用 select 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。使用 multiple="multiple" 允许用户选择多个选项。

7、您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

相关热词搜索:
评论正在载入