支持的表单控件

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. python--前端CSS

    一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...

  2. 日志logging

    日志: 日志分为5个级别:debug(10),info(20),warning(30),error(40),critical(50) 日志四个组成部分:logger,handler,filter,fo ...

  3. (转) 改变UITextField placeHolder颜色、字体 、输入光标位置等

    我们有时需要定制化UITextField对象的风格,可以添加许多不同的重写方法,来改变文本字段的显示行为.这些方法都会返回一个CGRect结构,制定了文本字段每个部件的边界范围,甚至修改placeHo ...

  4. ACM训练联盟周赛 K. Teemo's reunited

    Teemo likes to drink raspberry juice.  He even spent some of his spare time tomake the raspberry jui ...

  5. python基础——10（三元运算符、匿名函数）

    一.三元运算符 本质是if--else--的语法糖 前提:简化if--else--的结构,且两个分支有且只有一条语句 案例: a = 20 b = 30 res = a if a > b els ...

  6. HDU 3507 斜率优化 DP Print Article

    在kuangbin巨巨博客上学的. #include <iostream> #include <cstdio> #include <cstring> #includ ...

  7. H5系列之地理位置（必知必会）

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  8. kali-set

    Set 简介 开源的社会工程学利用套件,通常结合metasploit(部分)来使用 更改 /etc/setoolkit下的配置文件 set_config BLEEDING_EDGE="Fal ...

  9. xtu数据结构 G. Count the Colors

    G. Count the Colors Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Jav ...

  10. Axure：从单一评价方式到用户自由选择

    导读: 亲,还记得淘宝对货物的评价方式吗?还记得对快递哥的评价方式吗? 1,经典五星评:                                                         ...