<pre><!doctype html> <html lang="en"> <head> <!-- Import FontAwesome --> <script src="https://use.fontawesome.com/ca1bf02164.js"></script> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Hello, world!</title> <!-- Import Jquery --> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Brand</a> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left links --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <!-- Navbar dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown </a> <!-- Dropdown menu --> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider" /></li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a > </li> </ul> <!-- Left links --> <!-- Search form --> <form class="d-flex input-group w-auto"> <input type="search" class="form-control" placeholder="Type query" aria-label="Search" /> <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" > Search </button> </form> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav> <!-- Navbar --> <div class="container text-center"> <h1>Hello, world!</h1> </div> <!-- Import Bootstrap and Popper--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
Quote: data-mdb-toggle="dropdown"
data-mdb-toggle="dropdown"
data-bs-toggle="dropdown"
data-mdb-toggle
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)