<!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. Linux服务器yum安装mysql

    阿里云Linux 服务器安装mysql 可以用rpm 和yum 方式安装,我这次安装是采用yum方式安装 请直接复制以下链接,看安装步骤 https://www.cnblogs.com/nzplear ...

  2. rem布局，在用户调整手机字体大小/用户调整浏览器字体大小后，布局错乱问题

    一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...

  3. vue.js 第八课

    列表渲染 v-for template v-for 数组变动检查 变异方法 替换数组 track-by track-by $index 问题 对象 v-for 值域 v-for 显示过滤/排序的结果 ...

  4. Invalid or unexpected token：数据格式错误

    一个查询页面突然出现如下这个错误: Uncaught SyntaxError: Invalid or unexpected token, 翻译成中文是: 捕获的查询无效或意外的标记. 既然代码逻辑没问 ...

  5. oracle 高级函数2

    原 oracle 高级函数 2017年08月17日 16:44:19 阅读数:1731 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013278 ...

  6. 如何安装部署和优化Tomcat？（Tomcat部署和优化与压测，虚拟主机配置，Tomcat处理请求的过程）

    文章目录 前言 一:Tomcat安装部署 1.1:Tomcat简介 1.2:Tomcat核心组件 1.3:Tomcat处理请求的过程 1.3.1:请求过程基本解释 1.3.2:请求过程详细解释 1.4 ...

  7. PAT T1024 Currency Exchange Centers

    krustral算法求最少结点数的最小生成树,用优先队列实时排序,优先选择已经被选中的中心~ #include<bits/stdc++.h> using namespace std; ; ...

  8. C 语言入门第八章--C语言预处理命令

    例如:#include ,这种以#号开头的命令称为预处理命令. ===C语言宏定义(#define的用法)==== #define 叫做宏定义命令,它也是C语言预处理命令的一种.所谓宏定义,就是用一个 ...

  9. Tarjan算法与割点割边

    目录 Tarjan算法与无向图的连通性 1:基础概念 2:Tarjan判断割点 3:Tarjan判断割边 Tarjan算法与无向图的连通性 1:基础概念 在说Tarjan算法求解无向图的连通性之前,先 ...

  10. MongoDB基础篇2：数据库/用户/数据集合的增删改

    一.数据库操作 创建并进入数据库: 命令:use DATABASE_NAME 示例:use tms   查看所有数据库: 命令:show dbs   注意: (1)新创建的数据库在show dbs命令 ...