第四十八节 jQuery之bootstrap表单

  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>
第四十八节 jQuery之bootstrap表单

猜你喜欢
