bootstrap input类型 bootstrapinput类型|Bootstrap教程

本文概述

Boostrap输入
Bootstrap Textarea
Boostrap程序选择列表

自举输入类型
输入类型：复选框
输入类型：单选按钮
Boostrap复选框
【bootstrap input类型】复选框可帮助你从当前选项列表中选择任意数量的选项。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Input type: checkbox< /h2> < form role="form"> < div class="checkbox"> < label>< input type="checkbox" value="">Option 1< /label> < /div> < div class="checkbox"> < label>< input type="checkbox" value="">Option 2< /label>< /div> < /form> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F25510R-1.jpg">< /script> < /body> < /html>

如果希望复选框显示在同一行上，请使用.checkbox-inline类：
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Inline checkbox< /h2> < p>The following checkboxes appear in the same line :< /p> < form role="form"> < label class="checkbox-inline"> < input type="checkbox" value="">Option 1 < /label> < label class="checkbox-inline"> < input type="checkbox" value="">Option 2 < /label> < /form> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F25510R-1.jpg">< /script> < /body> < /html>

Boostrap单选按钮
单选按钮还可以帮助你从当前选项列表中选择任意数量的选项。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body> < div class="container"> < h2>Input type: Radio buttons< /h2>< form role="form"> < div class="radio"> < label>< input type="radio" name="optradio">Option 1< /label> < /div> < div class="radio"> < label>< input type="radio" name="optradio">Option 2< /label> < /div> < /form> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F25510R-1.jpg">< /script> < /body> < /html>

如果你希望单选按钮出现在同一行上，请使用.radio-inline类：
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Inline radio buttons< /h2> < p>The following radio boxes appear in the same line:< /p> < form role="form"> < label class="radio-inline"> < input type="radio" name="optradio">Option 1 < /label> < label class="radio-inline"> < input type="radio" name="optradio">Option 2 < /label> < /form> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F25510R-1.jpg">< /script> < /body> < /html>

Bootstrap 4支持以下类型的表单控件：

输入
文本区域
复选框
无线电
选择

Boostrap输入Bootstrap支持所有HTML5输入类型：文本，密码，日期时间，本地日期时间，日期，月份，时间，星期，数字，电子邮件，URL，搜索，电话和颜色。
注意：如果输入的类型未正确声明，则输入的样式将不完全！例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F2555216-9.jpg">< /script> < script src="http://img.readke.com/220416/1F2554b3-10.jpg">< /script> < /head> < body> < div class="container"> < h2>Form control: input example< /h2> < form> < div class="form-group"> < label for="usr">Name:< /label> < input type="text" class="form-control" id="usr"> < /div> < div class="form-group"> < label for="pwd">Password:< /label> < input type="password" class="form-control" id="pwd"> < /div> < /form> < /div> < /body> < /html>

Bootstrap Textarea将textarea与“ form-control”一起使用以创建Bootstrap textarea。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F2555216-9.jpg">< /script> < script src="http://img.readke.com/220416/1F2554b3-10.jpg">< /script> < /head> < body> < div class="container"> < h2>Form control: textarea< /h2> < p>The form below contains a textarea for comments:< /p> < form> < div class="form-group"> < label for="comment">Comment:< /label> < textarea class="form-control" rows="5" id="comment">< /textarea> < /div> < /form> < /div> < /body> < /html>

Boostrap程序选择列表Boostrap程序选择列表用于选择单个或多个列表。如果要允许用户选择多个选项，则使用选择列表。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F2555216-9.jpg">< /script> < script src="http://img.readke.com/220416/1F2554b3-10.jpg">< /script> < /head> < body> < div class="container"> < h2>Form control: select< /h2> < p>The form below contains two dropdown menus (select lists):< /p> < form> < div class="form-group"> < label for="sel1">Select list (select one):< /label> < select class="form-control" id="sel1"> < option>1< /option> < option>2< /option> < option>3< /option> < option>4< /option> < /select> < br> < label for="sel2">Mutiple select list (hold shift to select more than one):< /label> < select multiple class="form-control" id="sel2"> < option>1< /option> < option>2< /option> < option>3< /option> < option>4< /option> < option>5< /option> < /select> < /div> < /form> < /div> < /body> < /html>