支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框（Input）

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


<!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" placeholder="文本输入">

  </div>

 </form>

</body>

</html>


结果例如以下所看到的：

文本框（Textarea）

当您须要进行多行输入的时，则能够使用文本框 textarea。

必要时能够改变 rows 属性。


<!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>

    <textarea class="form-control" rows="3"></textarea>

  </div>

</form>

</body>

</html>


结果例如以下所看到的：

复选框（（Checkbox）和单选框（Radio）

复选框和单选button用于让用户从一系列预设置的选项中进行选择。

当创建表单时，假设您想让用户从列表中选择若干个选项时，请使用 checkbox。假设您限制用户仅仅能选择一个选项，请使用 radio。

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

以下的实例演示了这两种类型（默认和内联）：


<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 复选框和单选button</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>

<label for="name">默认的复选框和单选button的实例</label>

<div class="checkbox">

   <label><input type="checkbox" value="">选项 1</label>

</div>

<div class="checkbox">

   <label><input type="checkbox" value="">选项 2</label>

</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>

<label for="name">内联的复选框和单选button的实例</label>

<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>

   <label class="checkbox-inline">

      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3

   </label>

   <label class="checkbox-inline">

      <input type="radio" name="optionsRadiosinline" id="optionsRadios3"

         value="option1" checked> 选项 1

   </label>

   <label class="checkbox-inline">

      <input type="radio" name="optionsRadiosinline" id="optionsRadios4"

         value="option2"> 选项 2

   </label>

</div>

</body>

</html>


结果例如以下所看到的：

复选框和单选button

当您想让用户从多个选项中进行选择，可是默认情况下仅仅能选择一个选项时，则使用选择框。

使用 <select> 展示列表选项。一般是那些用户非常熟悉的选择列表，比方州或者数字。

使用 multiple="multiple" 同意用户选择多个选项。

以下的实例演示了这两种类型（select 和 multiple）：


<!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>

      <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>

</form>

</body>

</html>


结果例如以下所看到的：

静态控件

当您须要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。


<!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 class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <p class="form-control-static">email@example.com</p>

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword"

         placeholder="请输入密码">

    </div>

  </div>

</form>

</body>

</html>


结果例如以下所看到的：

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时。输入框的轮廓会被移除。同一时候应用 box-shadow。

禁用的输入框 input

假设您想要禁用一个输入框 input。仅仅须要简单地加入 disabled 属性，这不仅会禁用输入框。还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 加入 disabled 属性来禁用 <fieldset> 内的全部控件。

验证状态

Bootstrap 包括了错误、警告和成功消息的验证样式。仅仅须要对父元素简单地加入适当的 class（.has-warning、 .has-error 或 .has-success）就可以使用验证状态。


<!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 class="col-sm-2 control-label">聚焦</label>

      <div class="col-sm-10">

         <input class="form-control" id="focusedInput" type="text"

            value="该输入框获得焦点...">

      </div>

   </div>

   <div class="form-group">

      <label for="inputPassword" class="col-sm-2 control-label">

         禁用

      </label>

      <div class="col-sm-10">

         <input class="form-control" id="disabledInput" type="text"

            placeholder="该输入框禁止输入..." disabled>

      </div>

   </div>

   <fieldset disabled>

      <div class="form-group">

         <label for="disabledTextInput"  class="col-sm-2 control-label">

            禁用输入（Fieldset disabled）

         </label>

         <div class="col-sm-10">

            <input type="text" id="disabledTextInput" class="form-control"

               placeholder="禁止输入">

         </div>

      </div>

      <div class="form-group">

         <label for="disabledSelect"  class="col-sm-2 control-label">

            禁用选择菜单（Fieldset disabled）

         </label>

         <div class="col-sm-10">

            <select id="disabledSelect" class="form-control">

               <option>禁止选择</option>

            </select>

         </div>

      </div>

   </fieldset>

   <div class="form-group has-success">

      <label class="col-sm-2 control-label" for="inputSuccess">

         输入成功

      </label>

      <div class="col-sm-10">

         <input type="text" class="form-control" id="inputSuccess">

      </div>

   </div>

   <div class="form-group has-warning">

      <label class="col-sm-2 control-label" for="inputWarning">

         输入警告

      </label>

      <div class="col-sm-10">

         <input type="text" class="form-control" id="inputWarning">

      </div>

   </div>

   <div class="form-group has-error">

      <label class="col-sm-2 control-label" for="inputError">

         输入错误

      </label>

      <div class="col-sm-10">

         <input type="text" class="form-control" id="inputError">

      </div>

   </div>

</form>

</body>

</html>


结果例如以下所看到的：

表单控件大小

能够分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

以下的实例演示了这点：


<!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">

      <input class="form-control input-lg" type="text"

         placeholder=".input-lg">

   </div>

   <div class="form-group">

      <input class="form-control" type="text" placeholder="默认输入">

   </div>

   <div class="form-group">

      <input class="form-control input-sm" type="text"

         placeholder=".input-sm">

   </div>

   <div class="form-group">

   </div>

   <div class="form-group">

      <select class="form-control input-lg">

         <option value="">.input-lg</option>

      </select>

   </div>

   <div class="form-group">

      <select class="form-control">

         <option value="">默认选择</option>

      </select>

   </div>

   <div class="form-group">

      <select class="form-control input-sm">

         <option value="">.input-sm</option>

      </select>

   </div>

   <div class="row">

      <div class="col-lg-2">

         <input type="text" class="form-control" placeholder=".col-lg-2">

      </div>

      <div class="col-lg-3">

         <input type="text" class="form-control" placeholder=".col-lg-3">

      </div>

      <div class="col-lg-4">

         <input type="text" class="form-control" placeholder=".col-lg-4">

      </div>

   </div>

</form>

</body>

</html>


结果例如以下所看到的：

以上就是bootstrap所支持的表单控件。

Bootstrap的表单控件的更多相关文章

  1. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  2. Bootstrap关于表单控件（按扭）

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

  3. Bootstrap关于表单控件（Radio,CheckBox）

    表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  6. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  7. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  8. Bootstrap历练实例：表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  9. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

随机推荐

  1. redis 散列学习要点记录

    散列类型键值也是种字典结构,存储了字段和字段值的映射,字段值只能是字符串,不可以是其他类型(redis数据类型都不可嵌套使用其他类型),散列类型键可以有2的32次方减1个字段 散列的命令组  hset ...

  2. java之 单根继承与集合

    1.单根继承 概念: 单根继承,意味着所有类的继承,都继承自单一的基类的继承模式 优点: (1)所有对象都具有一个共用接口,归根到底都是相同的基本类型. (1)所有对象都具有一个共用接口,归根到底都是 ...

  3. LeetCode（92） Reverse Linked List II

    题目 Reverse a linked list from position m to n. Do it in-place and in one-pass. For example: Given 1- ...

  4. 1 producer — n consumers 模型 实现

    #include<stdio.h> #include<string.h> #include<pthread.h> #include<stdlib.h> ...

  5. 算法学习记录-排序——冒泡排序（Bubble Sort）

    冒泡排序应该是最常用的排序方法,我接触的第一个排序算法就是冒泡,老师也经常那这个做例子. 冒泡排序是一种交换排序, 基本思想: 通过两两比较相邻的记录,若反序则交换,知道没有反序的记录为止. 例子: ...

  6. jquery插件编写【转载】

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  7. C# 方法冒号this的用法

    public Class1(string host, int port, string password = null):this() { this.Host=host; this.Port=port ...

  8. POJ-1743 Musical Theme，后缀数组+二分！

                                                        Musical Theme 人生第一道后缀数组的题,采用大众化思想姿势极其猥琐. 题意:给你n个 ...

  9. 快速排序php

    <?php /** * Created by PhpStorm. * User: brady.wang * Date: 2017/11/10 * Time: 9:45 */ $arr=array ...

  10. tomcat在centos6+上的自启动脚本

    #!/bin/bash # # tomcat startup script for the Tomcat server # # chkconfig: 345 80 20 # description: ...