Bootstrap所支持的表单控件实例详解

Bootstrap所支持的表单控件如下所示：

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）

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

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

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

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

<!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>
<label for="name">默认的复选框和单选按钮的实例</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">内联的复选框和单选按钮的实例</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>

结果如下所示：

复选框和单选按钮

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

使用 <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 相关知识汇总

以上就是bootstrap所支持的表单控件。大家都看明白了，有任何疑问欢迎给我留言，小编会及时回复大家的，同时也非常感谢大家对我们网站的支持

赞 (0)

相关推荐

  • Bootstrap中表单控件状态(验证状态)

    Bootstrap中表单控件状态(验证状态)

    在制作表单时,难免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果. 1..has-warning:警告状态(黄色) 2..has-error:错误状态(红色) 3..has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名. <form role="form"> <div class="form-group has-success"> <label c

  • 全面解析Bootstrap表单使用方法（表单控件）

    全面解析Bootstrap表单使用方法（表单控件）

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con

  • 全面解析Bootstrap表单使用方法（表单控件状态）

    全面解析Bootstrap表单使用方法（表单控件状态）

    一.焦点状态 焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • BootStrap 表单控件之单选按钮水平排列

    BootStrap 表单控件之单选按钮水平排列

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心

  • BootStrap表单控件之复选框checkbox和单选择按钮radio

    BootStrap表单控件之复选框checkbox和单选择按钮radio

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--复选框checkbox和单选择按钮radio</title> <!-- 最新版本

  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

  • Vue.js事件处理器与表单控件绑定详解

    事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&

  • vue v-model表单控件绑定详解

    vue v-model表单控件绑定详解

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js&quo

  • jQuery表单插件ajaxForm实例详解

    前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

  • Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解 今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatc

  • javascript表单控件实例讲解

    本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下 实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e

  • AngularJS自定义表单验证功能实例详解

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能.分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max). 在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上.为了取得这个c

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

  • Android自定义日历控件实例详解

    Android自定义日历控件实例详解

    为什么要自定义控件 有时,原生控件不能满足我们对于外观和功能的需求,这时候可以自定义控件来定制外观或功能:有时,原生控件可以通过复杂的编码实现想要的功能,这时候可以自定义控件来提高代码的可复用性. 如何自定义控件 下面我通过我在github上开源的Android-CalendarView项目为例,来介绍一下自定义控件的方法.该项目中自定义的控件类名是CalendarView.这个自定义控件覆盖了一些自定义控件时常需要重写的一些方法. 构造函数 为了支持本控件既能使用xml布局文件声明,也可在ja

  • Android5.0新控件实例详解

    谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种. 1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLayout.它是一个带圆角的背景和阴影FrameLayout.CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为容器使用. CardView的使用非常简单: <android.support.v7.widget.CardView android:l

随机推荐