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>
  1.  
  1.  

bootstrap左右圆角按钮-适配手机页面的更多相关文章

  1. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  2. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  3. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  4. HTML5手机页面里面如何把长按复制避免

    在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的 但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...

  5. 手机页面开发的meta

    <meta name="viewport" content="width=device-width, initial-scale=1"> 手机环境. ...

  6. 第二百三十七节，Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  7. 第二百三十三节，Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...

  8. 安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了

    TML5 手机页面 输入表单被键盘遮挡住了 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的 ...

  9. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

随机推荐

  1. 一个getjson()方式调用实例【前后台】，适于跨域访问。

    题记:首次发个随笔,把以前写的一个笔记发过来,劝当记录,以供查询. jquery的推出确实解决了大部分程序员都感到头痛的事情,无论是对于UI的访问和处理,还是在一系列的远程访问等方面都有了很大的改善, ...

  2. 1427. SMS

    http://acm.timus.ru/problem.aspx?space=1&num=1427 没想到这道题错了N遍  细节很重要呀 代码: #include<iostream> ...

  3. PB中用oracle的存储过程返回记录集做数据源来生成数据窗口，PB会找不到此存储过程及不能正常识别存储过程的参数问题（转）

    (转)在PB中用oracle的存储过程返回记录集做数据源来生成数据窗口 首先oracle的存储过程写法与MSSQL不一样,差别比较大. 如果是返回数据集的存储过程则需要利用oracle的包来定义游标. ...

  4. Dooioo Deal

    using AnfleCrawler.Common; using System; using System.Collections.Generic; using System.Linq; using ...

  5. Python的平凡之路（2）

    一.标准库(sys & os):   Python 的标准库(standard library) 是随着 Python 一起安装在你的电脑中的,是 Python 的一部分 (当然也有特殊情况. ...

  6. android技巧（四）数据库跨版本升级写法

    当项目中接手的需求需要在就前数据库数据表做出修改时,不得不面对数据库表结构的更新问题.一般的sqlite数据库更新修改数据库版本号时都会自动调用SqliteOptenHelper及其子类中的onUpg ...

  7. 详解<a>标签

    相信对于学前端的人而言<a>标签并不陌生,我们先把他所有的属性列出来 一.主要属性 一般来说,a标签有着四种状态,分别是link,hover,active,visited,接下来我会仔细讲 ...

  8. .Net MVC框架 + WCF 搭建 集群开发

    http://www.cnblogs.com/zhijianliutang/archive/2012/01/28/2258844.html

  9. Toad快速入门

    Toad快速入门       在实际中,Toad的用户很少用到其强大的新特性,同时新用户的摸索式熟悉Toad往往花费更多的时间.为此,铸锐数码为每个新购买Toad客户,提供两人次的在线培训服务,帮助客 ...

  10. bootstrap-9

    图像: bootstrap中有以下几种样式风格: 1.img-responsive:响应式图片,主要针对响应式设计 2.img-rounded:圆角图片 3.img-circle:圆形图片 4.img ...