1. 程式人生 > >詳解Bootstrap中JS外掛實現下拉選單效果

詳解Bootstrap中JS外掛實現下拉選單效果


在編寫網站過程中,導航條中下拉選單功能十分常見。那麼,今天就分享一下關於如何通過Bootstrap中JS外掛來實現下拉選單功能。

在官方文件中是這麼形容下拉選單外掛的


這裡寫圖片描述


翻譯過來就是:

通過此外掛您可以為幾乎所有東西新增下拉選單,包括導航條、標籤頁、膠囊式按鈕。



接下來,我們就按照官方文件所描述的那樣,為大家演示, 我們如何通過JS外掛為導航條、標籤頁以及膠囊式按鈕新增下拉選單。

用法部分:


一、通過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屬性實現下拉選單</title> </head> <body> <div class="container"> <div class="dropdown"> <!--通過data-toggle屬性來實現下拉選單-->
<button class="btn btn-info" data-toggle="dropdown"> 下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>下拉項1</li>]\ jl;.' <li>下拉項2</li> <li>下拉項3</li> </ul> </div> </div> </body> <script src="../../jquery/jquery-3.1.1.js"></script> <script src="../../js/bootstrap.js"></script> </html>


效果如下:


這裡寫圖片描述



二、通過 JavaScript呼叫下拉選單切換

程式碼如下:

<!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呼叫下拉選單切換</title>
</head>
<body>
<div class="container">
    <div class="dropdown">
        <!--通過data-toggle屬性來實現下拉選單-->
        <button class="btn btn-info" data-toggle="dropdown">
            下拉列表
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-toggle">
            <li>下拉項1</li>
            <li>下拉項2</li>
            <li>下拉項3</li>
        </ul>

    </div>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
<script>
    /*通過文件就緒函式來顯示或隱藏下拉選單*/
    $(document).ready(function(){
        $(".dropdown-toggle").dropdown('toggle');
    });
</script>
</html>


效果如下:


這裡寫圖片描述


除了初始頁面下拉選單是顯示的,其餘和通過data屬性實現下拉選單的效果完全一樣!


值得注意的是:

這裡寫圖片描述


data-toggle=”dropdown”仍然需要
無論您是通過JavaScript呼叫下拉選單,還是使用資料api,
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">
    <title>導航欄內下拉選單的用法</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屬性來實現下拉選單-->
                    <button class="btn btn-info" data-toggle="dropdown">
                        下拉列表
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>下拉項1</li>
                        <li>下拉項2</li>
                        <li>下拉項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>


效果如下:


這裡寫圖片描述



二、標籤頁形式中實現下拉選單效果

程式碼如下:

<!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>標籤形式實現下拉效果</title>
</head>
<body>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">標籤1</a></li>
        <li><a href="#">標籤2</a></li>
        <li><a href="#">標籤3</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
                標籤4<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">下拉項1</a></li>
                <li><a href="#">下拉項2</a></li>
                <li><a href="#">下拉項3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下:


這裡寫圖片描述



三、膠囊形式中實現下拉選單效果

程式碼如下:

<!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>膠囊形式實現下拉選單效果</title>
</head>
<body>
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">標籤1</a></li>
        <li><a href="#">標籤2</a></li>
        <li><a href="#">標籤3</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
                標籤4<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">下拉項1</a></li>
                <li><a href="#">下拉項2</a></li>
                <li><a href="#">下拉項3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下:


這裡寫圖片描述

以上,就是關於Bootstrap中JS外掛實現下拉選單效果的全部內容。


在呼叫.js檔案時需要注意,如果您想要單獨引用該外掛的功能,那麼您需要引用 dropdown.js。或者,正如 Bootstrap 外掛概覽 一章中所提到,您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。


Programming is an art form.