Blogger Information
Blog 39
fans 0
comment 0
visits 30812
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Bootstrap第三课 : 按钮 , 按钮组 ,下拉菜单 2018年9月26日 22:00
南通税企通马主任的博客
Original
824 people have browsed it

编程一 , 标准下拉菜单

实例

<!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="../dist/css/bootstrap.css">
    <title>下拉菜单</title>
    <style>
        li{
            text-align: center;
        }
    </style>
</head>
<body>
<script src="../jquery.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<h3>普通下拉菜单</h3>
<div class="dropdown">
    <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="">吃大餐</a></li>
        <li><a href="">唱KTV</a></li>
        <li><a href="">游泳</a></li>
        <li><a href="">打篮球</a></li>
        <li class="divider"></li>
        <li><a href="">写代码</a></li>
        <li><a href="">玩游戏</a></li>
    </ul>
</div>
</body>
</html>

运行实例 »

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

编程二 , 分裂式下拉菜单

实例

<!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="../dist/css/bootstrap.css">
    <title>下拉菜单</title>
    <style>
        .btn-group{
            margin-left: 100px;
        }
        li{
            text-align: center;
        }
    </style>

</head>
<body>
<script src="../jquery.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<h3>分裂式下拉菜单</h3>
<div class="btn-group">
    <button type="button" class="btn btn-info">我的爱好</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        <div class="caret"></div>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">我的爱好</li>
        <li><a href="">吃大餐</a></li>
        <li><a href="">唱KTV</a></li>
        <li><a href="">游泳</a></li>
        <li><a href="">打篮球</a></li>
        <li class="divider"></li>
        <li><a href="">写代码</a></li>
        <li><a href="">玩游戏</a></li>
    </ul>
</div>
</body>
</html>

运行实例 »

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


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments