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>
  • 相关阅读:
    day04 列表和元组
    Python2和Python3的区别
    Ruby学习笔记2 : 一个简单的Ruby网站,搭建ruby环境
    Patrick Hughes
    Ruby学习笔记1 -- 基本语法和数据类型, Class
    Javascript学习笔记5
    php学习笔记1——使用phpStudy进行php运行环境搭建与测试。
    Linux配置和管理msyql命令
    干净win7要做几步才能运行第一个Spring MVC 写的动态web程序
    The difference between Spring Tool Suite and Spring IDE
  • 原文地址:https://www.cnblogs.com/stono/p/4889087.html
Copyright © 2011-2022 走看看