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. docker k8s 1.3.8 + flannel

    docker k8s + flannel kubernetes 是谷歌开源的 docker 集群管理解决方案. 项目地址: http://kubernetes.io/ 测试环境: node-1: 10 ...

  2. Myeclipse配置优化

    http://blog.csdn.net/chen_zw/article/details/7525277

  3. eclipse代码提示配置

    打开 MyEclipse 6.5,然后“window”→ “Preferences” 2.选择“java”, 展开, “Editor”, 选择“Content Assist”. 3.选择“Conten ...

  4. 51Nod 1534

    分析:Pwin代表Polycarp走的步数,而Win代表Vasiliy走的步数,则有Pwin=p.x+p.y,Vwin=max(v.x,v.y);显然若Pwin<=Win,肯定是Vasiliy胜 ...

  5. 省市区三级联动插件：app-jquery-cityselect.js

    (function ($) { $.fn.cityselect = function (options) { var settings = $.extend ({}, options); this.e ...

  6. 方法的标签_With携带

    方法中参数的标签: 标签的由来:1.标签也是方法名的一部分:2.为了提高程序的阅读性:OC方法允许我们给每个参数添加一个标签来说明当前参数的含义: 标签的作用:标签是为了标识变量的,因此标签名和变量名 ...

  7. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  8. ie6,ie7兼容性总结

    摘自: http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html 其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致 ...

  9. UVA 11551 Experienced Endeavour

    矩阵快速幂. 题意事实上已经告诉我们这是一个矩阵乘法的运算过程. 构造矩阵:把xi列的bij都标为1. 例如样例二: #include<cstdio> #include<cstrin ...

  10. iOS开发实现Label中多颜色多字体

     UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(8, 100, 300, 30)]; label.textColor = wor ...