首页 > 代码库 > Bootstrap中的表单(1)

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>
示例代码

 

 
 
 

Bootstrap中的表单(1)