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>
  • 相关阅读:
    网络芯片应用:GPS公交车行驶记录仪
    “黑暗潜伏者” -- 手机病毒新型攻击方式
    Android导入工程提示Invalid project description
    设计模式_代理模式
    el简略说明与11个隐含对象
    jsp九大内置对象
    js全局函数
    python基础:multiprocessing的使用
    pgAdmin III 使用图解
    windows下简单安装postgres
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434683.html
Copyright © 2011-2022 走看看