. 1 <-! On Bootstrap Form 2 . 1, a form field declaration form . 3 2, form-in-inline form fields . 4 . 3, horizontally arranged form-Horizontal form fields . 5 . 4, form a form Group-group forms including text and form controls . 6 . 5, control-form text entry boxes, drop-down list control style . 7 . 6, the checkBox the checkBox checkbox inline-style . 8 . 7, Radio-Radio inline style radio button . 9 . 8, iNPUT form control group group- 10 . 9, input- form control group-addon article group patterns . 11 10, INPUT-group-BTN group of objects to form control button pattern 12 is . 11, form a large-size form group LG- 13 is 12 is, form a small-size form group-SM -> 14 <!DOCTYPE html> 15 <html lang="en"> 16 <head> 17 <meta charset="UTF-8"> 18 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 19 <title>Document</title> 20 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 21 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 22 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 23 <style type="text/css"> 24 .glyphicon-search{ 25 color: red 26 } 27 </style> 28 </head> 29 <body > 30 < div class = "Container" > 31 is < div class = "Row" > 32 < form > 33 is < div class = "Group-form" > 34 is <-! for = "Input01" for properties by Click user name input box may be activated -> 35 < label for = "Input01" > username: </ label > 36 < iNPUT type = "text" name = "" class="form-control" id= "Input01" > 37 [ </ div > 38 is < div class = "Group-form" > 39 <-! for = "Input01" for properties by click user name input box may be activated -> 40 < label for = "pwd" > password: </ label > 41 is < INPUT type = "password" name = "" class = "form-Control" ID = "pwd" > 42 is </ div > 43 is </form> 44 45 <br> 46 <br> 47 <form class="form-inline"> 48 <div class="form-group"> 49 <label for="input01">用户名:</label> 50 <input type="text" name="" class="form-control" id="input01"> 51 </div> 52 <div class="form-group"> 53 <label for="pwd">密码:</label> 54 <input type="password" name="" class="form-control" id="pwd"> 55 </div> 56 </form> 57 58 <br> 59 <br> 60 <form class="form-horizontal"> 61 <div class="form-group form-group-lg"> 62 <label for="input01" class="col-xs-2">用户名:</label> 63 <div class="col-xs-10"> 64 <input type="text" name="" class="form-control" id="input01"> 65 </div> 66 </div> 67 68 <div class="form-group form-group-sm"> 69 <label for="input01" class="col-xs-2">通信地址:</label> 70 <div class="col-xs-10"> 71 <input type="text" name="" class="form-control" id="input01"> 72 </div> 73 </div> 74 75 <div class="form-group"> 76 <label for="pwd" class="col-xs-2">密码:</label> 77 <div class="col-xs-10"> 78 <input type="password" name="" class="form-control" id="pwd"> 79 </div> 80 </div> 81 </form> 82 83 <br> 84 <br> 85 <form > 86 <div class="input-group"> 87 <span class="input-group-addon">@</span> 88 <input type="text" class="form-control"> 89 </div> 90 91 <br> 92 <br> 93 <div class="input-group"> 94 <input type="text" class="form-control"> 95 <span class="input-group-btn"> 96 <!-- <input type="text" name="" value="搜索" class="btn btn-default"> --> 97 <button class="btn btn-primary">搜索</button> 98 </span> 99 </div> 100 101 <br> 102 <br> 103 <div class="input-group"> 104 <input type="text" class="form-control"> 105 <span class="input-group-btn"> 106 <!-- <input type="text" name="" value="搜索" class="btn btn-default"> --> 107 108 <!-- glyphicon glyphicon-search 字体图标：显示图标，但实质是文字 --> 109 <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button> 110 </span> 111 </div> 112 </form> 113 114 115 116 </div> 117 </div> 118 </body> 119 </html>