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. JS学习随手笔记

    ===================字符串===================== 字符串中间的空格也是要算长度的. 每一个字符都可以返回对应的Unicode 编码 文字的简单加密都是通过char ...

  2. Python之路：线程池

    版本一 #!/usr/bin/env  python # --*--coding:utf-8 --*-- import Queue import threading class ThreadPool( ...

  3. OpenStack - liberty CentOS 7

    OpenStack私有云部署 Controller Node:       em1(10.6.17.11),em2() Computer Node:         em1(10.6.17.12),e ...

  4. Shell条件与测试

    分类参考 文件状态测试 -b filename 当filename 存在并且是块文件时返回真(返回0) -c filename 当filename 存在并且是字符文件时返回真 -d pathname ...

  5. python模块--ip地址转换为整数

    python整数与IP地址转换 [转] 我们有时会将一个整数与IP地址进行互换,用python代码实现很简单 将一个整数如2000000,变为一个IP地址的方式 >>> import ...

  6. FZU 1056 扫雷游戏

    水题.统计一下周围有几个雷. #include<cstdio> #include<cstring> #include<cmath> #include<algo ...

  7. Android SQLite 加密模块实现入门

    安卓的安全性那是众所周知,最近学习安卓apk反编译,发现某些即时通讯软件都封装了自己独立使用的数据库模块(从framework java/C++ 一直到底层的SQLite的C库), 为了防止被root ...

  8. libusb开发者指南（转）

    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...

  9. php连接mysql数据库（新浪云SAE）

    新浪云提供了免费的创建服务器端应用的服务.网址为:https://www.sinacloud.com/ 在上面创建好应用,然后在本地使用记事本编写应用的代码如下: <?php echo &quo ...

  10. 动态添加试题选项按钮 radioButton(一)

    最近在做WebView加载试题的功能,但是选项按钮如果放的WebView中,点击时反应很慢.于是把选项用原生的RadioButton,而试题题目和答案放在WebView中.但是选项的个数不确定,所以需 ...