荒草燃烧

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

bootstrap左右圆角按钮-适配手机页面 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 5     <meta charset="utf-8" />
 6     <title></title>
 7     <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 8 </head>
 9 <body>
10 <style>
11     .kch_wx_btn_left{
12         background-color: orange;
13         border-top-left-radius:1em;
14         border-bottom-left-radius:1em;
15     }
16     .kch_wx_btn_left a{
17         color: #fff;
18         text-decoration: none;
19         line-height: 2em;
20         padding: 1em;
21     }
22     .kch_wx_btn_right{
23         background-color: #c1e2b3;
24         border-top-right-radius:1em;
25         border-bottom-right-radius:1em;
26     }
27 
28     .kch_wx_btn_right a{
29         color: black;
30         text-decoration: none;
31         line-height: 2em;
32         padding: 1em;
33     }
34 </style>
35 
36 <div class="container">
37     <div class="row text-center">
38         <div class="col-sm-5 col-xs-5 col-xs-offset-1 col-sm-offset-1 kch_wx_btn_left">
39             <a href="#" id="kch_wx_left_btnId">我的左边</a>
40         </div>
41         <div class="col-sm-5 col-xs-5 kch_wx_btn_right">
42             <a href="#" id="kch_wx_right_btnId">我的右边</a>
43         </div>
44     </div>
45 </div>
46 
47 </body>
48 </html>

 



 







	

	
	

		posted on 
2015-11-25 22:09 
王大仙￥ 
阅读(1000) 
评论(0) 
 
收藏 
举报