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>

Bootstrap 按钮分组的更多相关文章

  1. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  2. Bootstrap按钮组学习

    简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...

  3. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

  4. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  5. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  7. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  8. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  9. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

随机推荐

  1. 深入理解setTimeout和setinterval

    以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...

  2. C#代码发送邮件

    本次测试的邮箱为163邮箱 1.首相对邮箱进行一些设置(详见下图):打开设置选取客户端授权密码项,开启设置:以后在客户端登录时将使用刚刚设置的密码! 2.上干货 public static void ...

  3. BNU OJ 51003 BQG's Confusing Sequence

    二进制++高精度取模 #include<cstdio> #include<cstring> #include<algorithm> using namespace ...

  4. Apriori算法第一篇

    摘要: Apriori算法是产生k项高频项目组的一般手段.算法概要:首先产生k项高频项目集合Lk,自身链接形成k+1项的项目结合C(k+1),然后剪枝(去掉以前去掉的不满足支持度的高频),生成K=1项 ...

  5. 数据降维技术（2）—奇异值分解（SVD）

    上一篇文章讲了PCA的数据原理,明白了PCA主要的思想及使用PCA做数据降维的步骤,本文我们详细探讨下另一种数据降维技术—奇异值分解(SVD). 在介绍奇异值分解前,先谈谈这个比较奇怪的名字:奇异值分 ...

  6. 使用msm文件创建msi

    一.不使用merge module的ModuleSubstitution和ModuleConfiguration 1.创建MyMsm.msm <?xml version="1.0&qu ...

  7. jvm 配置，看看

    http://my.oschina.net/qiangzigege/blog/661757

  8. (简单) POJ 2387 Til the Cows Come Home，Dijkstra。

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  9. FZU 2091 播放器

    简单模拟题,开个栈维护一下即可. #include<cstdio> #include<cstring> #include<cmath> #include<st ...

  10. 用HTML 格式导出Excel

    只需按照如下格式写就可,在<head> 里面嵌套table,必须修改html的命名空间,加上一些描述.保存为xls文件 <html xmlns:x="urn:schemas ...