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>
  • 相关阅读:
    WannaCry蠕虫分析与预防
    对网络传输的理解
    RESTful API 设计最佳实践
    码农们的密码
    腾讯云公网负载均衡技术实现详解
    ELK统一日志系统的应用
    ElasticSearch + Canal 开发千万级的实时搜索系统
    聊架构:5分钟了解REST架构
    Netty5 HTTP协议栈浅析与实践
    这里,彻底了解HTTPS
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434683.html
Copyright © 2011-2022 走看看