<!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. netty同时实现http与socket

    (1)启动类 package test; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.EventLoopGro ...

  2. 使用maven搭建web项目

    在pom.xml中添加java ee相关的三个依赖包:<scope> jar的有效范围 provided 表示编译期生效,不会打包发布到 tomcat 中 <properties&g ...

  3. 让 el-dialog 居中，并且内容多的时候内部可以滚动

    .el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50 ...

  4. UIAutomation 测试winForm

    static void Main(string[] args) { Console.WriteLine("\n开始窗口程序自动化测试\n"); //启动被测试程序 string p ...

  5. leetcode刷题-- 4. 贪心

    贪心 455分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼 ...

  6. swoole 父子进程间通信

    <?php /** * 场景: * 监控订单表状态 父子进程通信 * 一个主进程 两个子进程实现 */ //设置主进程名 echo '主进程id:' . posix_getpid() . PHP ...

  7. Curl常用函数介绍

    一.LibCurl基本编程框架 在基于LibCurl的程序里,主要采用callback function (回调函数)的形式完成传输任务,用户在启动传输前设置好各类参数和回调函数,当满足条件时libc ...

  8. 第一个Vue-cli创建项目

    需要环境: Node.js:http://nodejs.cn/download/ 安装完成之后,使用cmd测试: 我现在的是最新的 安装Node.js加速器: 这个下载的稍微慢一些 npm insta ...

  9. JS拖拽-面向对象拖拽-继承

    //普通拖拽 /* * CSS */ #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move; ...

  10. 设计模式课程 设计模式精讲 8-8 单例设计模式-Enum枚举单例、原理源码解析以及反编译实战

    1 课堂解析 2 代码演练 2.1 枚举类单例解决序列化破坏demo 2.2 枚举类单例解决序列化破坏原理 2.3 枚举类单例解决反射攻击demo 2.4 枚举类单例解决反射攻击原理 3 jad的使用 ...