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. iis8.0配置 使用备忘 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容

    由于对iis的了解度不够,使用中总会碰到这样那样的问题,在这我先开个头,遇到问题再一一更新: 我用的是iis8; 1.发布到iis服务器下的网站你自己可以访问,局域网的其他机器不能? 答:是否开放了对 ...

  2. FMDB 查询是否存在某个表，或某个数据

    //监测数据库中我要需要的表是否已经存在 NSString *existsSql = [NSString stringWithFormat:@"select count(name) as c ...

  3. C++------------typedef 函数指针类型定义

    摘要bycrazyhacking:        typedef 是定义了一种"函数指针"类型,可以再声明很多变量.函数指针的定义是定义了一个变量. int max(int x,i ...

  4. javascript高级程序设计 重读系列

    1.基本概念.数据类型.函数 1.1 数据类型 ECMAScript中有5种简单数据类型:Undefind,Null,Boolean,Number,String 问题:判断变量是否是空值的代码 解析: ...

  5. 结对编程--Goldpoint Game

    黄金点游戏 黄金点游戏描述: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  6. ICE第四篇-----python版本

    ice文件: module Modipplace {     interface  Ipplace{          string iptoplace(string s);      };   }; ...

  7. 【repost】JS中的hook机制

    hook机制也就是钩子机制,由表驱动实现,常用来处理多种特殊情况的处理.我们预定义了一些钩子,在常用的代码逻辑中去适配一些特殊的事件,这样可以让我们少些很多if else语句.举个高考加分的例子,比如 ...

  8. LPC1768串口使用

    Lpc1768内置了四个串口通讯模块,都是异步通讯模块,其中,串口0/2/3是普通串口通讯,串口1与 UART0/2/3 基本相同,只是增加了一个 Modem 接口和 RS-486/EIA-486 模 ...

  9. MQ-2烟雾传感器启动

    MQ-2气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(SnO2).当传感器所处环境中 存在可燃气体时,传感器的电导率随空气中可燃气体浓度的增加而增大.使用简单的电路即可将电导率的 变化 ...

  10. cocos2dx3.5 HTC One X 某些UI白屏或使用ClippingNode造成部分手机白屏

    public Cocos2dxGLSurfaceView onCreateView() { Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSu ...