<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h2>自适应按钮组</h2>

            <p>以通过 .btn-group-justified 类来设置自适应大小的按钮组。</p>

            <div class="btn-group btn-group-justified">

                <a href="#" class="btn btn-primary">Apple</a>

                <a href="#" class="btn btn-primary">Samsung</a>

                <a href="#" class="btn btn-primary">Sony</a>

            </div>

        </div>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h2>自适应按钮组</h2>

            <div class="btn-group btn-group-justified">

                <div class="btn-group">

                    <button type="button" class="btn btn-primary">Apple</button>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-primary">Samsung</button>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-primary">Sony</button>

                </div>

            </div>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：自适应大小的按钮组的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 【LOJ3087】「GXOI / GZOI2019」旅行者

    题意 给定一个 \(n\) 个点 \(m\) 条边的的有向图,给出 \(k\) 个关键点,求关键点两两最短路的最小值. \(n\le 10^5, m\le 5\cdot 10^5\). 题解 二进制分 ...

  2. mysql 连接数据库时时区报错

    1.url: jdbc:mysql://192.168.0.101:3306/testdb?serverTimezone=UTC,在连接字符后面添加时区设置 2.使用navicat或者直接使用mysq ...

  3. 用Jackson进行Json序列化时的常用注解

    Jackson时spring boot默认使用的json格式化的包,它的几个常用注解: @JsonIgnore 用在属性上面,在序列化和反序列化时都自动忽略掉该属性 @JsonProperty(&qu ...

  4. C++常量表达式、const、constexpr(C++11新增)的区别

    常量表达式是指值不会改变且在编译过程中就能够得到计算结果的表达式,能在编译时求值的表达式. 程序先编译再运行:  在编译阶段, 编译器将在编译过程中把用到该常量的地方都全都替换为 常量的值. 但是常量 ...

  5. mybatis 查询标签

    语法 参考:http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html <![CDATA[内容]]>: 参考: http://blog.csd ...

  6. python爬虫（三） 用request爬取拉勾网职位信息

    request.Request类 如果想要在请求的时候添加一个请求头(增加请求头的原因是,如果不加请求头,那么在我们爬取得时候,可能会被限制),那么就必须使用request.Request类来实现,比 ...

  7. Windows驱动开发-IRP超时处理

    IRP被送到底层驱动程序以后,由于硬件设备的问题,IRP不能得到及时处理,甚至有可能永远不会被处理,这时候需要对IRP超时情况进行处理,一旦在规定时间内,IRP没有被处理,操作系统就会进入到IRP的处 ...

  8. 02-08Android学习进度报告八

    今天主要学习了昨天还没有学习完的Date & Time组件的知识. 首先是DatePicker(日期选择器) android:calendarTextColor : 日历列表的文本的颜色 an ...

  9. FineReport帆软报表需求：根据url传递过来的参数值决定显示隐藏列

    需求:角色id传递到报表页面中,然后根据角色id,决定隐藏第1列,显示第2-4列,还是隐藏第2-4列,显示第1列. 解决方法:

  10. iOS学习7：iOS沙盒(sandBox)机制（一）之获取沙盒路径及目录说明（转）

    转:http://my.oschina.net/joanfen/blog/151145 一.iOS沙盒机制 iOS的应用只能访问为该应用创建的区域,不可访问其他区域,应用的其他非代码文件都存在此目录下 ...