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. WebDriver(Selenium2) 常见异常及处理方法

    http://uniquepig.iteye.com/blog/1568197 Exception NoSuchElementException Solutions    1. Check the l ...

  2. Xcode7 免证书真机测试

    Xcode很早就有个免证书测试,今天我自己也测试了一把,还是挺好用的,接下来,我就说一下我的大体过程: 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题 ...

  3. [转]Axis2创建WebService实例

    以下文章来自http://clq9761.iteye.com/blog/976029,作者clq9761 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下 ...

  4. springMVC源码下载地址

    https://github.com/spring-projects/spring-framework/tags可以选择需要的版本进行下载.

  5. Python+Selenuim测试网站，只能打开Firefox浏览器却不能打开网页的解决方法

    最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...

  6. 函数（swift）

    输入输出参数(In-Out Parameters) 如果你想要一个函数可以修改参数的值,并且想要在这些修改在函数调用结束后仍然存在,那么就应该把这个参数定义为输入输出参数(In-Out Paramet ...

  7. 变量-数据类型-对象-如何编写python脚本

    标识符的命名规则变量是标识符的例子. 标识符 是用来标识 某样东西 的名字.在命名标识符的时候,你要遵循这些规则:标识符的第一个字符必须是字母表中的字母(大写或小写)或者一个下划线(‘ _ ’).标识 ...

  8. window.location获取URL中各部分

    博客分类: JAVASCRIPT JavaScriptASP.netSchemeASP网络协议  URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL ...

  9. COM问题

    因为应用程序正在发送一个输入同步呼叫,所以无法执行传出的呼叫.

  10. 微信小程序-未接入app.json错误

    微信小程序建立新项目之后会出现app.json文件未接入错误如下图: 一般是因为在下图添加新项目,项目目录这一列,如果不事先建立一个空的文件夹,直接选择则不会出现quickstartup界面 所以在建 ...