<!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. Update(Stage5)：DMP项目_业务介绍_框架搭建

    DMP (Data Management Platform) 导读 整个课程的内容大致分为如下两个部分 业务介绍 技术实现 对于业务介绍, 比较困难的是理解广告交易过程中各个参与者是干什么的 对于技术 ...

  2. Codeforces Round #593 (Div. 2)D（螺旋形模拟）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;vector<int>po[100 ...

  3. springMVC 的拦截器理解

    请复制以下链接看,我只是搬运工 http://blog.csdn.net/yerenyuan_pku/article/details/72567761 http://blog.csdn.net/u01 ...

  4. nyoj 57

    6174问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 假设你有一个各位数字互不相同的四位数,把所有的数字从大到小排序后得到a,从小到大后得到b,然后用a-b替 ...

  5. 01-JAVA语言基础（动手动脑）

    一.一个JAVA类文件中只能有一个public类吗? 01-JAVA语言基础.ppt第22页“一个Java源文件中可以写多个类,但其中只能有一个类是“公有(public)”的,并且Java要求源文件名 ...

  6. vue通过get方法下载java服务器excel模板

    vue方法 handleDownTemplateXls(fileName){ if(!fileName || typeof fileName != "string"){ fileN ...

  7. C/C++网络编程3——地址族与数据序列

    C/C++网络编程2中介绍了套接字,这一节介绍给套接字分配ip和端口号.ip用于标识一台主机,端口号用于标识一个主机中的一个应用程序,端口号占16位,0到65535,其中0到1023是知名端口号. 表 ...

  8. Vacuum Pump Manufacturer Introduction: Airless Pump Bottle

    Fillable vacuum pump bottle with matt silver aluminum base and cap and shiny silver aluminum collar. ...

  9. Apache Shiro安全（权限框架）学习笔记二

    课程目标 通过学习本课程掌握权限管理的设计思想及方法,使用Shiro框架完成权限管理功能开发. 1.  理解基于资源的权限管理方法. 2.  掌握权限管理的数据模型. 3.  掌握不使用shiro开发 ...

  10. SZWI3800

    xml <mapper namespace="jp.co.alsok.g6.zwi.dao.mapper.g6.custom.SZWI3800Mapper"> < ...