使用按钮组编写一个分裂式下拉菜单0926

0926作业

1.编程: 编写一个标准的下拉菜单，要求对data-属性有较深的理解

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <title>下拉菜单</title>
</head>
<body>

<!--先创建一个下拉菜单的容器-->
<div class="dropdown" style="margin-top: 200px;">

    <!--按钮-->
    <button type="button" class="btn btn-default" data-toggle="dropdown">
        前端开发 <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li class="dropdown-header">常用技术</li>
        <li><a href="">HTML5</a></li>
        <li><a href="">CSS3</a></li>
        <li><a href="">JavaScript</a></li>
        <!--分隔条-->
        <li class="divider"></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Bootstrap</a></li>
    </ul>
</div>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

NGBLK8$]PO%PWU$N{)`8@%J.png

2.编程: 使用按钮组编写一个分裂式下拉菜单，了解这类常用控件编写的基本思路

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <title>按钮工具条和按钮组</title>
</head>
<body>
<!--创建一个按钮工具条-->
<div class="btn-toolbar">
    <!--创建一个按钮组，btn-group按钮组功能可以将一组按钮集成在一个容器里，
    且相互之前没有间隔。直接贴代码和显示效果。-->
    <div class="btn-group">
        <button type="button" class="btn btn-info">前端技术</button>
        <!--、通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,data-toggle指以什么事件触发-->
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <!-- class="caret" 设置三角/箭头，可上可下-->
            <div class="caret"></div>
        </button>
        <!-- 菜单部分，只有了设置 class="dropdown-menu"才能自动隐藏并添加固定样式。-->
        <ul class="dropdown-menu">
            <!--dropdown-header下拉菜单头信息-->
            <li class="dropdown-header">常用技术</li>
            <li><a href="">HTML5</a></li>
            <li><a href="">CSS3</a></li>
            <li><a href="">JavaScript</a></li>
            <!--divider分隔条-->
            <li class="divider"></li>
            <li><a href="">jQuery</a></li>
            <li><a href="">Bootstrap</a></li>
        </ul>
    </div>
</div>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

$HRYMFVUBD74V{_T]VP5BY]T.png$

实例

实例

相关文章