开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

bootstrap49-Bootstrap 分割的按钮下拉菜单

简介:
+关注继续查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 分割的按钮下拉菜单</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>

<div class="container">

<div class="btn-group">

<button class="btn btn-default">默认</button>

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu" role="menu">

        <li><a href="#">功能 1</a></li>

        <li><a href="#">功能 2</a></li>

        <li><a href="#">功能 3</a></li>

        <li class="divider"></li>

        <li><a href="#">功能 4</a></li>

    </ul>

</div>


<div class="btn-group">

<button class="btn btn-primary">默认</button>

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu" role="menu">

        <li><a href="#">功能 1</a></li>

        <li><a href="#">功能 2</a></li>

        <li><a href="#">功能 3</a></li>

        <li class="divider"></li>

        <li><a href="#">功能 4</a></li>

    </ul>

</div>

</div>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>


本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895823

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Bootstrap 组件_下拉菜单|学习笔记
快速学习 Bootstrap 组件_下拉菜单
0 0
Bootstrap学习笔记--下拉菜单,折叠,菜单,标签,Pills
下拉菜单: 下拉菜单是比较常见的 直接看源码: .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单,请使用按钮或具有属性的类.
2924 0
Bootstrap系列 -- 34. 按钮下拉菜单
  按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单,只不过把“”标签元素换成了“”标签元素。
523 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载