bootstrap框架中的data-toggle属性值之下拉菜单

在使用bootstrap时需要先引入bootstrap的css、js文件以及jquery文件，这里，我使用的是 Staticfile CDN 上的库：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
1
2
3
4
5
6

点击图中购物车（这里购物车使用的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=”dropdown” 属性。这里我使用了一个字体图标来打开下拉菜单。

ul或div 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。