<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 按钮（Button）插件单选按钮</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 类用于创建按钮组：</p>

  <div class="btn-group">

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

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

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

  </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>Button 按钮组 - 设置按钮大小</h2>

            <p>通过 .btn-group-* 类来控制按钮组中使用按钮的大小。</p>

            <h3>大按钮:</h3>

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

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

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

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

            </div>

            <h3>默认大小按钮:</h3>

            <div class="btn-group">

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

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

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

            </div>

            <h3>小按钮:</h3>

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

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

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

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

            </div>

            <h3>超级小按钮:</h3>

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

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

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

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

            </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>

            <p>如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：</p>

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

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

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

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

            </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 按钮：块级按钮(拉伸至父元素100%的宽度)

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

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

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

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：表示一个危险动作的按钮操作

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

随机推荐

  1. BFS迷宫问题

    链接:https://ac.nowcoder.com/acm/challenge/terminal来源:牛客网 小明现在在玩一个游戏,游戏来到了教学关卡,迷宫是一个N*M的矩阵. 小明的起点在地图中用 ...

  2. Linux kali安装chromium

    打开终端,输入以下命令 apt-get install chromium chromium-l10n

  3. Suffix Tree（后缀树）

    这篇简单的谈谈后缀树原理及实现. 如前缀树原理一般,后缀trie树是将字符串的每个后缀使用trie树的算法来构造.例如banana的所有后缀: 0: banana 1: anana 2: nana 3 ...

  4. IIS7和IIS8环境下 ThinkPHP专用URL Rewrite伪静态规则

      这是适用于IIS7,IIS7.5,IIS8.0及以上的ThinkPHP的伪静态规则,把以下代码保存成web.config文件,放到FTP的web目录内即可. <?xml version=&q ...

  5. JavaScript - call() , apply() and bind()

    参考 https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp h ...

  6. postman使用get请求的url地址传参中文乱码问题

    编码之后

  7. 阿里云Centos7安装mysql5.7

    下载mysql安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 安装mysql yum -y ...

  8. Struts配置文件报错"元素类型为 "package" 的内容必须匹配"

    报错信息 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?,d ...

  9. Codeforces 599D：Spongebob and Squares

    D. Spongebob and Squares time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  10. Atcoder Grand Contest 037B（DP，组合数学，思维）

    #include<bits/stdc++.h>using namespace std;const long long mod = 998244353;string s;int a[3000 ...