<!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. dom4j递归解析XML字符串所有子节点

    /** * dom4j递归解析所有子节点 * * @param childElements * @param mapEle * @return */ public Map<String, Obj ...

  2. 「JSOI2010」旅行

    「JSOI2010」旅行 传送门 比较妙的一道 \(\text{DP}\) 题,思维瓶颈应该就是如何确定状态. 首先将边按边权排序. 如果我们用 \(01\) 串来表示 \(m\) 条边是否在路径上, ...

  3. C++的const成员函数

    我们知道,在C++中,若一个变量声明为const类型,则试图修改该变量的值的操作都被视编译错误.例如, const char blank = ‘’; blank = ‘\n’;  // 错误 面向对象 ...

  4. JS获取CHECKBOX的值 AND 两个CHECKBOX 循环选中

    获取多选按钮的值 var chk_value = ''; $('input[data-action="checkRole"]:checked').each(function(){ ...

  5. 【转】How to create a test plan

    What is a Test Plan? A TEST PLAN is a detailed document that describes the test strategy, objectives ...

  6. 编写自己的JDBC框架

    目的 简化代码,提高开发效率 设计模式 策略设计模式 代码 #连接设置 driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql://localhost ...

  7. 吴裕雄--天生自然ORACLE数据库学习笔记：管理控制文件和日志文件

    alter database add logfile ('D:\OracleFiles\LogFiles\REDO4_A.LOG', 'E:\OracleFiles\LogFiles\REDO4_B. ...

  8. JavaWeb开发记录全过程--(1)环境配置

    一. 开发工具:idea 理由:根据idea 如何连接服务器,可以直接在idea上连接服务器 安装:根据IntelliJ IDEA 下载安装(含注册码),进行非常规手段使用idea 二.分析问题: # ...

  9. js中数值各进制之间的转换

    十进制转换为二进制 toString()方法可把一个 Number 对象转换为一个字符串,并返回结果.语法如下: NumberObject.toString(radix); 其中,radix为可选.规 ...

  10. IDEA 打 jar包

    方法一:Maven插件打包(我用此方法解决的问题) 报错:找不到主类Main class,找不到某个依赖的 jar包 解决方法:将未找到的依赖 jar,使用mvn命令打包放入到我们的本地mvn仓库,I ...