码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-11-25 23:26:00      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 


 

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

标签:

原文地址:http://www.cnblogs.com/hcrs/p/4996106.html

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