zoukankan      html  css  js  c++  java
  • 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:自适应大小的按钮组

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

  • 相关阅读:
    【使用 DOM】使用 DOM 元素
    【使用 DOM】使用 Window 对象
    【使用 DOM】使用 Document 对象
    Groovy中的脚本与类
    Groovy操作符
    Android开源天气预报应用Weather-Lite
    进击的RecyclerView入门三(要是能拖动就好了)
    进击的RecyclerView入门二(来点小装饰?)
    进击的RecyclerView入门一(简单上手)
    Android 5.0+删除Sdcard文件
  • 原文地址:https://www.cnblogs.com/tszr/p/10888919.html
Copyright © 2011-2022 走看看