bootstrap框架中的data-toggle属性值之下拉菜单
在使⽤bootstrap时需要先引⼊bootstrap的css、js⽂件以及jquery⽂件，这⾥，我使⽤的是 Staticfile CDN 上的库：
<!-- 新 Bootstrap4 核⼼ CSS ⽂件 -->
<link rel="stylesheet"href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery⽂件。务必在bootstrap.min.js 之前引⼊ -->
<script src="/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap4 核⼼ JavaScript ⽂件 -->
为什么使用bootstrap?
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
点击图中购物车（这⾥购物车使⽤的icon字体图标），则会出现图中所⽰下拉框。
主要代码如下：
<div class="dropdown">
<i class="iconfont icongouwucheman dropdown-toggle"data-toggle="dropdown"></i>
<ul class="dropdown-menu pull-left">
<li class="dropdown-item">
<a href="#">上⾐</a>
</li>
<li class="dropdown-item">
<a href="#">裙⼦</a>
</li>
<li class="dropdown-item">
<a href="#">裤⼦</a>
</li>
</ul>
</div>
.dropdown 类⽤来指定⼀个下拉菜单。
我们可以使⽤⼀个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=”dropdown” 属性。这⾥我使⽤了⼀个字体图标来打开下拉菜单。
ul或div 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。