bootstrap--按钮、表单

bootstrap 按钮

1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组

bootstrap中文网址：http://www.bootcss.com/

bootstrap 表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、form-group-sm 小尺寸表单

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap按钮</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="container">
17         <h1>按钮</h1>
18         <br>
19         <button class="btn btn-default btn-lg">button按钮</button>
20         <input type="button" class="btn btn-primary btn-sm" name="" value="inpu按钮">
21         <a href="#" class="btn btn-success btn-xs">a标签按钮</a>
22         <a href="#" class="btn btn-info">a标签按钮</a>
23         <a href="#" class="btn btn-warning">a标签按钮</a>
24         <a href="#" class="btn btn-danger">a标签按钮</a>
25     </div>
26     <br>
27     <br>
28     <div class="container">   <!--按钮占据一整行-->
29         <button class="btn btn-success btn-block">通栏按钮</button>
30     </div>
31     <br>
32     <br>
33     <div class="container">
34         <div class="btn-group">   <!--组合按钮-->
35             <a href="#" class="btn btn-info">按钮一</a>
36             <a href="#" class="btn btn-warning">按钮二</a>
37             <a href="#" class="btn btn-danger">按钮三</a>
38         </div>
39         <br>
40         <br>
41         <br>
42         <div class="btn-group btn-group-justified">  <!--通栏按钮组，组合占据一整行。如果用input做标签，需要将它用btn-group容器包起来-->
43             <div class="btn-group">
44                 <input type="button" name="" class="btn btn-primary" value="按钮1">
45             </div>
46             <div class="btn-group">
47                 <input type="button" name="" class="btn btn-warning" value="按钮2">
48             </div>
49             <div class="btn-group">
50                 <input type="button" name="" class="btn btn-danger" value="按钮3">
51             </div>
52         </div>
53         <br>
54         <br>
55         <br>
56         <div class="btn-group btn-group-justified">   <!--通栏按钮组，如果用a标签做按钮，就不用上面的结构，直接写-->
57             <a href="" class="btn btn-primary">按钮一</a>
58             <a href="" class="btn btn-default">按钮二</a>
59             <a href="" class="btn btn-default">按钮三</a>
60         </div>
61     </div>
62 </body>
63 </html>

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>bootstrap表单</title>
  9 
 10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
 12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
 13 
 14 </head>
 15 <body>
 16     <div class="container">
 17         <h1>表单</h1>
 18         <br>
 19             <!--<div class="form">
 20                 <div class="form-group">
 21                     <label>姓名</label>
 22                     <input type="text" name="" class="form-control">
 23                 </div>
 24                 <div class="form-group">
 25                     <label>密码</label>
 26                     <input type="password" name="" class="form-control">
 27                 </div>
 28             </div>-->
 29 
 30         <div class="form">
 31          <div class="form-group">
 32             <label for="exampleInputEmail1">Email address</label>   <!-- for和id联合使用，点击“Email address”这几个字的位置，可以将输入框置为填写状态-->
 33             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 34          </div>
 35           <div class="form-group">
 36             <label for="exampleInputPassword1">Password</label>
 37             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 38           </div>
 39           <div class="form-group">
 40             <label for="exampleInputFile">File input</label>
 41             <input type="file" id="exampleInputFile">    <!--文件选择-->
 42             <p class="help-block">Example block-level help text here.</p>  <!--添加文字-->
 43           </div>
 44           <div class="checkbox">
 45             <label>
 46               <input type="checkbox"> Check me out
 47             </label>
 48           </div>
 49           <button type="submit" class="btn btn-default">Submit</button>
 50         </div>
 51 
 52         <br><br><br>
 53 
 54         <div class="form-inline">   <!--内联表单-->
 55          <div class="form-group">
 56             <label for="exampleInputEmail1">Email address</label>   <!-- for和id联合使用，点击“Email address”这几个字的位置，可以将输入框置为填写状态-->
 57             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 58          </div>
 59           <div class="form-group">
 60             <label for="exampleInputPassword1">Password</label>
 61             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 62           </div>
 63           <div class="form-group">
 64             <label for="exampleInputFile">File input</label>
 65             <input type="file" id="exampleInputFile">    <!--文件选择-->
 66             <p class="help-block">Example block-level help text here.</p>  <!--添加文字-->
 67           </div>
 68           <div class="checkbox">
 69             <label>
 70               <input type="checkbox"> Check me out
 71             </label>
 72           </div>
 73           <button type="submit" class="btn btn-default">Submit</button>
 74         </div>
 75 
 76         <br><br><br>
 77 
 78         <form class="form-horizontal">     <!--水平排列的表单-->
 79           <div class="form-group">
 80             <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 81             <div class="col-sm-10">
 82               <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 83             </div>
 84           </div>
 85           <div class="form-group">
 86             <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 87             <div class="col-sm-10">
 88               <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
 89             </div>
 90           </div>
 91           <div class="form-group">
 92             <div class="col-sm-offset-2 col-sm-10">
 93               <div class="checkbox">
 94                 <label>
 95                   <input type="checkbox"> Remember me
 96                 </label>
 97               </div>
 98             </div>
 99           </div>
100           <div class="form-group">
101             <div class="col-sm-offset-2 col-sm-10">
102               <button type="submit" class="btn btn-default">Sign in</button>
103             </div>
104           </div>
105         </form>
106 
107     </div>
108 </body>
109 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap表单控件组</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="container">
17         <h1>表单控件组</h1>
18         <div class="input-group">
19             <input type="text" name="" class="form-control">
20             <span class="input-group-addon">@</span>
21         </div>
22 
23         <br>
24         <br>
25         <div class="input-group">
26             <input type="text" name="" class="form-control">
27             <div class="input-group-btn">
28                 <span class="btn btn-primary">go</span>
29             </div>
30         </div>
31 
32         <br>
33         <br>
34         <div class="input-group">
35             <input type="text" name="" class="form-control">
36             <div class="input-group-btn">
37                 <div class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span></div>
38             </div>
39         </div>
40     </div>
41 </body>
42 </html>

posted on 2020-01-03 21:43 cherry_ning 阅读(134) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning