<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h2>内嵌按钮组</h2>

            <p>内嵌按钮组创建下拉菜单：</p>

            <div class="btn-group">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <div class="btn-group">

                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

                        Sony <span class="caret"></span></button>

                    <ul class="dropdown-menu" role="menu">

                        <li><a href="#">Tablet</a></li>

                        <li><a href="#">Smartphone</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组的更多相关文章

  1. Bootstrap历练实例：标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示下拉式功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 洛谷 P5057 [CQOI2006]简单题（树状数组）

    嗯... 题目链接:https://www.luogu.org/problem/P5057 首先发现这道题中只有0和1,所以肯定与二进制有关.然后发现这道题需要支持区间更改和单点查询操作,所以首先想到 ...

  2. vue.js 强行赋值、刷新数组或者对象 方法之 $.set()

    实际开发过程中,数据交互的的时候需要赋值,刷新,但是不可能每次赋值之后都刷新整个页面,所以就要用到 vue.js方法 $.set(),能实现赋值对象的局部刷新 语法:Vue.set(object, k ...

  3. Android Studio 配置Gradle

    一, 问题:①换个新电脑安装完Android Sutdio第一次打开一个工程巨慢怎么办?② 手动配置Gradle Home为什么总是无效?③ 明明已经下载了Gradle,配置了gradle home, ...

  4. C++：面向对象的相关概念

    对象: 一般意义上的对象:是现实世界中一个实际存在的事物 面向对象方法中的对象:是系统中用来描述客观事物的一个实体 抽象与分类: 分类所依据的原则:抽象 抽象出同一类对象的共同属性和行为,形成类 类与 ...

  5. Duilib程序添加托盘图标显示

    转载:https://www.zhaokeli.com/article/8266.html 温馨提示:技术类文章有它的时效性,请留意文章更新时间以及软件的版本 功能描述 实现点击关闭后,程序最小化到托 ...

  6. Springboot + redis + 注解 + 拦截器来实现接口幂等性校验

    Springboot + redis + 注解 + 拦截器来实现接口幂等性校验   1. SpringBoot 整合篇 2. 手写一套迷你版HTTP服务器 3. 记住:永远不要在MySQL中使用UTF ...

  7. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  8. SAVE 、BGSAVE和BGREWRITEAOF执行区别

    rdbSave 会将数据库数据保存到 RDB 文件,并在保存完成之前阻塞调用者. save 命令直接调用 rdbSave ,阻塞 Redis 主进程:bgsave 用子进程调用 rdbSave ,主进 ...

  9. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 特约稿件 Java并发教程（Oracle官方资料）

      本文是Oracle官方的Java并发相关的教程,感谢并发编程网的翻译和投递. (关注ITeye官微,随时随地查看最新开发资讯.技术文章.) 计算机的使用者一直以为他们的计算机可以同时做很多事情.他 ...