支持的表单控件

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. Ajax跨域问题---jsonp

    跨域:跨域名  一个域名下的文件去请求了和他不一样的域名下资源文件,那么就会产生跨域请求 解决跨域问题办法: 1.将要访问的外部资源存到本域名下的一个php文件 2.用flash方式 3.JSONP: ...

  2. 力扣题目汇总（重复N次元素，反转字符串，斐波那契数)

    重复 N 次的元素 1.题目描述 在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3] 输出:3 ...

  3. Python的两个爬虫框架PySpider与Scrapy安装

    Python的两个爬虫框架PySpider与Scrapy安装 win10安装pyspider: 最好以管理员身份运行CMD,不然可能会出现拒绝访问文件夹的情况! pyspider:pip instal ...

  4. Arthas诊断工具使用资料

    1.https://github.com/alibaba/arthas/issues/327 2.https://alibaba.github.io/arthas/jad.html 3.https:/ ...

  5. python3--命名空间字典

    命名空间字典 我们学到了模块的命名空间实际上是以字典的形式实现的,并且可以由内置属性__dict__显示这一点.类和实例对象也是如此:属性点号运算其实内部就是字典的索引运算,而属性继承其实就是搜索连结 ...

  6. 凌乱的桌子和与 Web 的设计理念说明

    Python是一门脚本语言,因为能将其他各种编程语言写的模块粘接在一起,也被称作胶水语言.强大的包容性.强悍的功能和应用的广泛性使其受到越来越多的关注,想起一句老话:你若盛开,蝴蝶自来. 如果你感觉学 ...

  7. 北京集训TEST16——图片加密（fft+kmp）

    题目: Description CJB天天要跟妹子聊天,可是他对微信的加密算法表示担心:“微信这种加密算法,早就过时了,我发明的加密算法早已风靡全球,安全性天下第一!” CJB是这样加密的:设CJB想 ...

  8. P3146 [USACO16OPEN]248 (区间DP)

    题目描述  给定一个1*n的地图,在里面玩2048,每次可以合并相邻两个(数值范围1-40),问最大能合出多少.注意合并后的数值并非加倍而是+1,例如2与2合并后的数值为3. 这道题的思路: 状态: ...

  9. #ifdef endif 用法

    "#ifdef 语句1 程序2 #endif“ 可翻译为:如果宏定义了语句1则程序2. 作用:我们可以用它区隔一些与特定头文件.程序库和其他文件版本有关的代码. 代码举例:新建define. ...

  10. uva 12304点与直线与圆之间的关系

    Problem E 2D Geometry 110 in 1! This is a collection of 110 (in binary) 2D geometry problems. Circum ...