Bootstrap中的表单（1） 



class="form-inline" 　　水平排列
class="form-group"　　　组键


form-control　　 　　　　圆角方框发光
input-lg　　 　　　　　　 输入框变大
input-sm　　　　 　　　　 输入框变小

小练习：







 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 9     </head>
10     <body>
11         <from class="form-inline">
12             <div class="form-group">
13                 <label class="form-group has-success">这是一个输入框：</label>
14                 <input type="text" class="form-control input-lg" placeholder="这是一个输入框"/>
15             </div>
16             
17             <div class="form-group">
18                 <label class="form-group has-success">这是一个输入框：</label>
19                 <select class="form-control" name="" id="">
20                     <option value="">北京</option>
21                     <option value="">北京</option>
22                     <option value="">北京</option>
23                     <option value="">北京</option>
24                 </select>
25             </div>
26             
27             <div class="form-group">
28                 <label class="form-group has-success">这是一个输入框：</label>
29                 <textarea class="form-control" name="" id="" cols="30" rows="10">
30                 </textarea>
31             </div>
32         </from>
33     </body>
34 </html>



示例代码




 


 


 


 






            

            
posted @ 
2017-06-08 22:02 
#安生 
阅读(212) 
评论(0) 
编辑 
收藏 
举报