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

最新推荐文章于 2024-06-09 18:06:43 发布

转载最新推荐文章于 2024-06-09 18:06:43 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hcrs/p/4996106.html

本文介绍了一种使用HTML和Bootstrap CSS框架实现左右布局按钮的方法。通过定义特定的样式类，可以创建具有不同背景颜色和边框圆角效果的按钮，并确保它们在不同屏幕尺寸下保持良好的响应式布局。

 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>