支持的表单控件

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. 有关linux的GPG签名验证错误的解决方法。

    GPG签名验证错误:由于没有公钥,下列签名无法进行验证: NO_PUBKEY 6AF0E1940624A220 找了下原因,虽然不知道原理,不过大概意思还是能才出来的,解决方法如下: gpg --ke ...

  2. (转) iOS程序国际化

    IOS程序国际化  本文转自http://www.cnblogs.com/zhidao-chen/archive/2012/07/08/2581977.html 1.1 新建一个Single View ...

  3. PAT Basic 1066

    1066 图像过滤 图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一 ...

  4. 【LeetCode】Jewels and Stones(宝石与石头)

    这道题是LeetCode里的第771道题. 题目要求: 给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝 ...

  5. 【LeetCode】ZigZag Conversion(Z 字形变换)

    这道题是LeetCode里的第6道题. 题目要求: 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" ...

  6. zoj 2388 Beat the Spread!

    Beat the Spread! Time Limit: 2 Seconds      Memory Limit: 65536 KB Superbowl Sunday is nearly here. ...

  7. Java面向对象三大特征

    封装: 首先,属性可用来描述同一类事物的特征, 行为可描述一类事物可做的操作,封装就是要把属于同一类事物的共性(包括属性与行为)归到一个类中,以方便使用.比如人这个东东,可用下面的方式封装:人{ 年龄 ...

  8. [JSOI2007] 祖玛 (区间DP)

    题目描述 这是一个流行在Jsoi的游戏,名称为祖玛. 精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青蛙,石青蛙会 ...

  9. Failed building wheel for Twisted

    在安装scrapy框架的过程中,pip install scrapy 出现报错信息: building 'twisted.test.raiser' extension error: Microsoft ...

  10. 洛谷 [P2485] 计算器

    快速幂+同余方程+BSGS 同余方程在解的时候要注意,在将exgcd求出的解变换为原方程的解的时候,要取模 BSGS的原理就是用分块+hash优化暴力,要注意特判 a 和 b 是 p 的倍数的时候. ...