<!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. inline-block,真的懂吗

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  2. 【原】简单shell练习（五）

    1.查询一个文件中某个单词出现的次数 # grep -o 'ts' ./test/txt |wc -l 2.统计当前文件夹下文件的个数 ls -l |grep "^-"|wc -l ...

  3. Spring、SpringMvc、MyBatis 整合

    web.xml   SSMProject示例项目下载    SSMProject_jar包 <?xml version="1.0" encoding="UTF-8& ...

  4. 【PAT甲级】1052 Linked List Sorting (25 分)

    题意: 输入一个正整数N(<=100000),和一个链表的头结点地址.接着输入N行,每行包括一个结点的地址,结点存放的值(-1e5~1e5),指向下一个结点的地址.地址由五位包含前导零的正整数组 ...

  5. android studio 导入主题设置，代码风格（附带eclipse 主题代码样式）

    在这里我最想说的,android studio默认主题样式,太low.不适合长时间写代码,看代码颜色不好识别,相对于背景的代码样式,我都不想吐槽了.还是网上下载主题代码样式导入样式.在这里我推荐 Su ...

  6. Oracle字符集查询及修改

    字符集包括以下四种: 1.oracle服务端字符集 select * from nls_database_parameters; 2.oracle服务器注册字符集 HKEY_LOCAL_MACHINE ...

  7. python--脚本传参与shell脚本传参（位置参数）

    写一个最简单的shell脚本,了解shell脚本是如何传参 1. vim test1.sh name=$1 age=$2 echo ${name} echo ${age} 2.调用脚本并传参 sh t ...

  8. Jquery+ajax模板

    $.ajax({     url:'',     type:'POST', //GET     async:true,    //或false,是否异步     data:{         name ...

  9. PAT T1009 Triple Inversions

    树状数组判断三元逆序对~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; ]; long long l[maxn], ...

  10. AVL-Tree （平衡二叉树）

    看到网上AVL-Tree大多数都是用相同的实现方式 —— 递归进行插入.删除.维护平衡等,而我比较喜欢用带父指针的数据结构,于是想了一下午,用C实现了一个迭代版的. 由于没有暂时没有好的画二叉树的工具 ...