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>

  • 相关阅读:
    面试话痨(四)常量在哪里呀,常量在哪里
    面试话痨(三)我会锁的四种配法,您配吗?
    面试话痨(二)C:JAVA String,别以为你穿个马甲我就不认识你了
    面试话痨(一)让我们来热切的讨论这个养猪场吧
    (JAVA)String类型的逻辑语句编译
    小白的REDIS学习(二)-链表
    小白的Redis学习(一)-SDS简单动态字符串
    mongo中的游标与数据一致性的取舍
    spring-data-mongodb与mongo shell的对应关系
    spring-data-mongodb 使用原生aggregate语句
  • 原文地址:https://www.cnblogs.com/tszr/p/10888900.html
Copyright © 2011-2022 走看看