zoukankan      html  css  js  c++  java
  • Bootstrap 按钮分组

    Bootstrap 按钮分组:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
    </head>
    
    <body style="margin:50px 0">
        <div class="container">
            <div class="btn-group">
                <button class="btn btn-default">01</button>
                <button class="btn btn-default">02</button>
                <button class="btn btn-default">03</button>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">04<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="">01</a>
                        </li>
                        <li><a href="">02</a>
                        </li>
                        <li><a href="">03</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn btn-default" type="button">01</button>
                    <button class="btn btn-default" type="button">02</button>
                    <button class="btn btn-default" type="button">03</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default">04</button>
                </div>
                <div class="btn-group btn-group-lg">
                    <button class="btn btn-default" type="button">01</button>
                    <button class="btn btn-default" type="button">02</button>
                    <button class="btn btn-default" type="button">03</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">01</button>
                    <button class="btn btn-default" type="button">02</button>
                    <button class="btn btn-default" type="button">03</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-default" type="button">01</button>
                    <button class="btn btn-default" type="button">02</button>
                    <button class="btn btn-default" type="button">03</button>
                </div>
                <div class="btn-group btn-group-xs">
                    <button class="btn btn-default" type="button">01</button>
                    <button class="btn btn-default" type="button">02</button>
                    <button class="btn btn-default" type="button">03</button>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.js"></script>
    </body>
    
    </html>
  • 相关阅读:
    void及void指针含义的深刻解析
    对个人站长职业前景的探讨之路在何方?
    Swift编程语言学习4.3—— 控制语句
    二分查找
    分布式文件系统
    常见浏览器兼容性问题与解决方式
    OutputDebugString()
    眼睛的颜色
    SVM-支持向量机算法概述
    Android学习笔记(四十):Preference的使用
  • 原文地址:https://www.cnblogs.com/stono/p/4889087.html
Copyright © 2011-2022 走看看