荡货夹的这么紧欠c调教视频,日本人真人做人爱免费,无码天堂的特色

在官方文檔中是這么形容下拉菜單插件的

翻譯過來就是：

通過此插件您可以為幾乎所有東西添加下拉菜單，包括導(dǎo)航條、標(biāo)簽頁、膠囊式按鈕。

接下來，我們就按照官方文檔所描述的那樣，為大家演示，我們?nèi)绾瓮ㄟ^JS插件為導(dǎo)航條、標(biāo)簽頁以及膠囊式按鈕添加下拉菜單。

用法部分：

一、通過data屬性：

向鏈接或按鈕添加 data-toggle=”dropdown” 來切換下拉菜單。

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="../../css/bootstrap.css">    <link rel="stylesheet" href="../../css/bootstrap-theme.css">    <style>        .dropdown{            margin-top: 50px;        }        .dropdown-menu li{            margin-left: 20px;        }    </style>    <title>data屬性實(shí)現(xiàn)下拉菜單</title></head><body><div class="container">    <div class="dropdown">        <!--通過data-toggle屬性來實(shí)現(xiàn)下拉菜單-->        <button class="btn btn-info" data-toggle="dropdown">            下拉列表            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li>下拉項(xiàng)1</li>]            jl;.'                       <li>下拉項(xiàng)2</li>            <li>下拉項(xiàng)3</li>        </ul>    </div></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>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
28
29
30
31
32
33
34
35
36
37
38

效果如下：

二、通過 JavaScript調(diào)用下拉菜單切換

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="../../css/bootstrap.css">    <link rel="stylesheet" href="../../css/bootstrap-theme.css">    <style>        .dropdown{            margin-top: 50px;        }        .dropdown-menu li{            margin-left: 20px;        }    </style>    <title>通過js調(diào)用下拉菜單切換</title></head><body><div class="container">    <div class="dropdown">        <!--通過data-toggle屬性來實(shí)現(xiàn)下拉菜單-->        <button class="btn btn-info" data-toggle="dropdown">            下拉列表            <span class="caret"></span>        </button>        <ul class="dropdown-menu dropdown-toggle">            <li>下拉項(xiàng)1</li>            <li>下拉項(xiàng)2</li>            <li>下拉項(xiàng)3</li>        </ul>    </div></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script><script>    /*通過文檔就緒函數(shù)來顯示或隱藏下拉菜單*/    $(document).ready(function(){        $(".dropdown-toggle").dropdown('toggle');    });</script></html>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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果如下：

除了初始頁面下拉菜單是顯示的，其余和通過data屬性實(shí)現(xiàn)下拉菜單的效果完全一樣！

值得注意的是：

data-toggle=”dropdown”仍然需要
無論您是通過JavaScript調(diào)用下拉菜單，還是使用數(shù)據(jù)api，
data-toggle=”dropdown”總是需要出現(xiàn)在下拉菜單的觸發(fā)器元素上。

實(shí)例部分：

一、導(dǎo)航欄內(nèi)實(shí)現(xiàn)下拉菜單效果

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="../../css/bootstrap.css">    <link rel="stylesheet" href="../../css/bootstrap-theme.css">    <title>導(dǎo)航欄內(nèi)下拉菜單的用法</title></head><body><div class="container-fluid">    <nav class="navbar navbar-default">        <div class="container-fluid">            <div class="navbar-form navbar-left">                <div class="form-group">                    <input type="text" class="form-control">                </div>                <button class="btn btn-success">提交</button>            </div>            <div class="navbar-form navbar-left">                <div class="dropdown nav navbar-nav">                    <!--通過data-toggle屬性來實(shí)現(xiàn)下拉菜單-->                    <button class="btn btn-info" data-toggle="dropdown">                        下拉列表                        <span class="caret"></span>                    </button>                    <ul class="dropdown-menu">                        <li>下拉項(xiàng)1</li>                        <li>下拉項(xiàng)2</li>                        <li>下拉項(xiàng)3</li>                    </ul>                </div>            </div>        </div>    </nav></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>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
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果如下：

二、標(biāo)簽頁形式中實(shí)現(xiàn)下拉菜單效果

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="../../css/bootstrap.css">    <link rel="stylesheet" href="../../css/bootstrap-theme.css">    <title>標(biāo)簽形式實(shí)現(xiàn)下拉效果</title></head><body><div class="container">    <ul class="nav nav-tabs">        <li class="active"><a href="#">標(biāo)簽1</a></li>        <li><a href="#">標(biāo)簽2</a></li>        <li><a href="#">標(biāo)簽3</a></li>        <li class="dropdown">            <a class="dropdown-toggle" data-toggle="dropdown">                標(biāo)簽4<span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="#">下拉項(xiàng)1</a></li>                <li><a href="#">下拉項(xiàng)2</a></li>                <li><a href="#">下拉項(xiàng)3</a></li>            </ul>        </li>    </ul></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>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
28
29
30
31

效果如下：

三、膠囊形式中實(shí)現(xiàn)下拉菜單效果

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="../../css/bootstrap.css">    <link rel="stylesheet" href="../../css/bootstrap-theme.css">    <title>膠囊形式實(shí)現(xiàn)下拉菜單效果</title></head><body><div class="container">    <ul class="nav nav-pills">        <li class="active"><a href="#">標(biāo)簽1</a></li>        <li><a href="#">標(biāo)簽2</a></li>        <li><a href="#">標(biāo)簽3</a></li>        <li class="dropdown">            <a class="dropdown-toggle" data-toggle="dropdown">                標(biāo)簽4<span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="#">下拉項(xiàng)1</a></li>                <li><a href="#">下拉項(xiàng)2</a></li>                <li><a href="#">下拉項(xiàng)3</a></li>            </ul>        </li>    </ul></div></body><script src="../../jquery/jquery-3.1.1.js"></script><script src="../../js/bootstrap.js"></script></html>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
28
29
30
31

效果如下：

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

用法部分：

實(shí)例部分：