English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 Supporte les contrôles de formulaires suivants :
input
textarea
checkbox
radio
select
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注意: 如果 input 的 type 属性未正确声明,输入框的样式将不会显示。
以下示例使用两个 input 元素,一个是 text,一个是 password :
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: input</h2> <p>以下示例使用两个 input 元素,一个是 text,一个是 password :/p> <form> <div class="form-group"> <label for="usr">用户名:</label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd"> </div> </form> </div> </body> </html>Testez et voyez ‹/›
以下示例演示了 textarea 的样式。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: textarea</h2> <p>以下示例演示了 textarea 的样式。</p> <form> <div class="form-group"> <label for="comment">评论:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> </form> </div> </body> </html>Testez et voyez ‹/›
复选框用于让用户从一系列预设置的选项中进行选择,可以选一个或多个。
以下示例包含了三个选项。最后一个是禁用的:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: checkbox</h2> <p>以下示例包含了三个选项。最后一个是禁用的:</p> <form> <div class="form-check"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input" value="">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input value="" disabled>Option 3 </label> </div> </form> </div> </body> </html>Testez et voyez ‹/›
使用 .form-cocher-inline 类可以让选项显示在同一行上:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: checkbox</h2> <p>以下示例包含了三个选项。最后一个是禁用的,使用 .form-cocher-inline 类可以让选项显示在同一行上:</p> <form> <div class="form-check form-cocher-inline"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input" value="">Option 1 </label> </div> <div class="form-check form-cocher-inline"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input" value="">Option 2 </label> </div> <div class="form-check form-cocher-inline disabled"> <label class="form-cocher-label"> <input type="checkbox" class="form-cocher-input value="" disabled>Option 3 </label> </div> </form> </div> </body> </html>Testez et voyez ‹/›
单选框用于让用户从一系列预设置的选项中进行选择,只能选一个。
以下示例包含了三个选项。最后一个是禁用的:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: radio</h2> <p>以下示例包含了三个选项。最后一个是禁用的:</p> <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> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Option 3</label> </div> </form> </div> </body> </html>Testez et voyez ‹/›
使用 .radio-inline 类可以让选项显示在同一行上:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>表单控件: radio</h2> <p>以下示例包含了三个选项。最后一个是禁用的,使用 .radio-inline 类可以让选项显示在同一行上::</p> <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> <label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label> </form> </div> </body> </html>Testez et voyez ‹/›
当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。
以下示例包含了两个下拉菜单:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1" <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Contrôle de formulaire: select</h2> <p>Le formulaire suivant contient deux menus déroulants (listes select):</p> <form> <div class="form-group"> <label for="sel1">Menu déroulant radio:</label> <select class="form-control" id="sel1" ">1</<option> ">2</<option> ">3</<option> ">4</<option> </select> <br> <label for="sel2">Menu déroulant multi-sélection (maintenez la touche shift pour sélectionner plusieurs options):</label> <select multiple class="form-control" id="sel2" ">1</<option> ">2</<option> ">3</<option> ">4</<option> ">5</<option> </select> </div> </form> </div> </body> </html>Testez et voyez ‹/›