<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dropdown</title> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Dropdown <small>Bootstrap Visual Test</small></h1> <nav id="navbar-example" class="navbar navbar-light bg-faded"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> ☰ </button> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <ul class="nav navbar-nav pull-left"> <li class="dropdown nav-item"> <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="drop1"> <a class="dropdown-item" href="https://twitter.com/fat">Action</a> <a class="dropdown-item" href="https://twitter.com/fat">Another action</a> <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a> </div> </li> <li class="dropdown nav-item"> <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 2 </a> <div class="dropdown-menu" aria-labelledby="drop2"> <a class="dropdown-item" href="https://twitter.com/fat">Action</a> <a class="dropdown-item" href="https://twitter.com/fat">Another action</a> <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a> </div> </li> </ul> <ul class="nav navbar-nav pull-right"> <li id="fat-menu" class="dropdown nav-item"> <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 3 </a> <div class="dropdown-menu" aria-labelledby="drop3"> <a class="dropdown-item" href="https://twitter.com/fat">Action</a> <a class="dropdown-item" href="https://twitter.com/fat">Another action</a> <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a> </div> </li> </ul> </div> </nav> <ul class="nav nav-pills m-t-lg"> <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li> <li class="dropdown nav-item"> <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div id="menu1" class="dropdown-menu" aria-labelledby="drop4"> <a class="dropdown-item" href="https://twitter.com/fat">Action</a> <a class="dropdown-item" href="https://twitter.com/fat">Another action</a> <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a> </div> </li> <li class="dropdown nav-item"> <a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false"> Dropdown 2 </a> <div id="menu2" class="dropdown-menu" aria-labelledby="drop5"> <a class="dropdown-item" href="https://twitter.com/fat">Action</a> <a class="dropdown-item" href="https://twitter.com/fat">Another action</a> <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a> </div> </li> </ul> </div> <!-- JavaScript Includes --> <script src="../vendor/jquery.min.js"></script> <script src="../../dist/util.js"></script> <script src="../../dist/dropdown.js"></script> <script src="../../dist/collapse.js"></script> </body> </html>