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>
  • 相关阅读:
    WinForm简单进度条
    金庸群侠传 3小时爆机
    One Day
    css组件化
    PHP判断端口是否打开的代码
    PHP下像JQUery下查找修改HYML元素的类PHP Simple HTML DOM Parser
    兼容IE和FF的添加收藏和设为主页代码
    注册成功啦,终于在博客园注册成功了,以后要更加努力的学习技术啊!
    ppz css栅格框架
    使用live writer 发布一下日志
  • 原文地址:https://www.cnblogs.com/stono/p/4889087.html
Copyright © 2011-2022 走看看