码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap中的表单(1)

时间:2017-06-08 23:43:46      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:sheet   lin   rip   meta   输入框   textarea   小练习   inpu   doctype   


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)

标签:sheet   lin   rip   meta   输入框   textarea   小练习   inpu   doctype   

原文地址:http://www.cnblogs.com/123wyy123wyy/p/6965025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!