zoukankan      html  css  js  c++  java
  • 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组

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

  • 相关阅读:
    搜索专题: HDU1242 Rescue
    搜索专题: HDU2102 A计划
    搜索 问题 D: 神奇密码锁
    HNUSTOJ-1674 水果消除(搜索或并查集)
    搜索专题:问题 E: 挑战ACM迷宫
    【网络流24题】【洛谷P4013】数字梯形问题【费用流】
    【网络流24题】【洛谷P4013】数字梯形问题【费用流】
    【牛客想开了大赛2 B】n的约数【打表】
    【牛客想开了大赛2 B】n的约数【打表】
    【牛客想开了大赛2 A】平面【数论,数学】
  • 原文地址:https://www.cnblogs.com/tszr/p/10888900.html
Copyright © 2011-2022 走看看