1 <!-- bootstrap 表单 2 1、form 申明一个表单域 3 2、form-inline 内联表单域 4 3、form-horizontal 水平排列表单域 5 4、form-group 表单组、包括表单文字和表单控件 6 5、form-control 文本输入框、下拉列表控件样式 7 6、CheckBox CheckBox-inline 多选框样式 8 7、radio radio-inline 单选框样式 9 8、input-group 表单控件组 10 9、input-group-addon 表单控件组物件样式 11 10、input-group-btn 表单控件组物件为按钮的样式 12 11、form-group-lg 大尺寸表单 13 12、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 <div class="row"> 32 <form> 33 <div class="form-group"> 34 <!-- for="input01" 通过for属性，点击用户名也可以激活输入框 --> 35 <label for="input01">用户名:</label> 36 <input type="text" name="" class="form-control" id="input01"> 37 </div> 38 <div class="form-group"> 39 <!-- for="input01" 通过for属性，点击用户名也可以激活输入框 --> 40 <label for="pwd">密码:</label> 41 <input type="password" name="" class="form-control" id="pwd"> 42 </div> 43 </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>