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>
  • 相关阅读:
    JS中json对象克隆
    jhipster中图片路径打包问题(webpack)
    arcgis for javascript api 4.x 中,使用本地非 4326坐标系绘制功能实现
    spring核心之IOC
    spring基于XML的声明式事务控制
    hibernate之事务处理
    hibernate之一级缓存
    hibernate之一对多,多对一
    hibernate之HQL,Criteria与SQL
    spring的基于注解的IOC配置
  • 原文地址:https://www.cnblogs.com/stono/p/4889087.html
Copyright © 2011-2022 走看看