zoukankan      html  css  js  c++  java
  • Bootstrap按钮组 按钮工具栏 嵌套

    @{
        Layout = null;
    }


    <!DOCTYPE html>


    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>View1</title>
        <link href="~/Bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <script src="~/jquery3.3.1/jquery-3.3.1.min.js"></script>
        <script src="~/Bootstrap3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>


        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group" role="group" aria-label="First group">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">3</button>
                <button type="button" class="btn btn-default">4</button>
            </div>
            <div class="btn-group" role="group" aria-label="Second group">
                <button type="button" class="btn btn-default">5</button>
                <button type="button" class="btn btn-default">6</button>
                <button type="button" class="btn btn-default">7</button>
            </div>
            <div class="btn-group" role="group" aria-label="Third group">
                <button type="button" class="btn btn-default">8</button>
            </div>
        </div>


        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>


            <div class="btn-group" role="group">
                <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
              <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>


    </body>
    </html>
  • 相关阅读:
    腾讯的这款产品,让我不禁打了个冷颤
    奇了,结婚也能写成区块链智能合约
    每个人都在经历淘宝的“大数据杀熟”,这5个办法巧妙避开
    云存储的未来:Scale Up还是Scale Out?
    storj白皮书v3最全面解读,Docker创始人的加入能否扳倒AWS S3
    一切为了解决隐私问题,绿洲实验室Ekiden协议介绍
    为什么去中心化存储也能保证数据不丢失?
    Vue调试辅助神器
    Spring Boot Admin 使用的坑
    Beyond Compare比较文件夹内容
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434683.html
Copyright © 2011-2022 走看看