Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Bootstrap下拉菜单/分裂式下拉菜单_2018年9月26日
Blogger Information
Blog 36
fans 1
comment 0
visits 32574
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Bootstrap下拉菜单/分裂式下拉菜单_2018年9月26日
宋超的博客
Original
1097 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="https://staff.bootcss.com/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://staff.bootcss.com/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <title>按钮工具条和按钮组</title>
</head>
<body>

<!--创建一个按钮工具条-->

<div class="btn-toolbar">
    <!--按钮组-->
    <!--<div class="btn-group btn-xs btn-group-vertical">
        <button type="button" class="btn btn-success">编辑</button>
        <button type="button" class="btn btn-success">更新</button>
        <button type="button" class="btn btn-success">删除</button>
    </div>

    <div class="btn-group btn-lg">
        <button type="button" class="btn btn-primary">复制</button>
        <button type="button" class="btn btn-success">粘贴</button>
        <button type="button" class="btn btn-danger">剪切</button>
    </div>-->

    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">后端开发 <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">常用语言</li>
            <li><a href="">php</a></li>
            <li><a href="">java</a></li>
            <li><a href="">.net</a></li>
        </ul>

    </div>


    <div class="btn-group">
        <button class="btn btn-danger dropdown-toggle" 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="">桃子</a></li>
            <li><a href="">西瓜</a></li>
            <li class="divider"></li>
            <li><a href="">橘子</a></li>
            <li><a href="">香蕉</a></li>
        </ul>

    </div>
    <br>
    <hr>

    <div class="btn-group">
        <button type="button" class="btn btn-info">前端技术</button>
        <button type="button" class="btn btn-info dropdown-toggle" 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>
    <div class="btn-group">
        <button type="button" class="btn btn-success">后端技术</button>
        <button type="button" class="btn btn-success dropdown-toggle" 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>
    <div class="btn-group">
    <button type="button" class="btn btn-info">服务器技术</button>
    <button type="button" class="btn btn-info dropdown-toggle" 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>

    <div class="btn-group">
        <button type="button" class="btn btn-danger">学习课程</button>
        <button type="button" class="btn btn-danger dropdown-toggle" 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>

    <div class="btn-group">
        <button class="btn btn-danger btn-lg">吃水果</button>
        <button class="btn btn-danger dropdown-toggle btn-lg" data-toggle="dropdown"><span class="caret"></span></button>

        <ul class="dropdown-menu" style="font-size: 2rem;">
            <li class="dropdown-header">喜欢吃的</li>
            <li><a href="">苹果</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>

</div>
</body>
</html>

运行实例 »

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

总结:
<!--1.创建容器 dropdown
2.创建列表项 dropdown-menu
3.创建触发按钮 设置data-toggle=dropdown 属性-->
分裂式下拉菜单是用两个按钮拼起来的下拉菜单! data-toggle 关联下拉列表项

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
Author's latest blog post