Thursday, November 19, 2015

Simple Dropdown Menu Button with Bootstrap

Bootstrap is a pretty cool framework that can be used in standard html web pages for some pretty impressive design options.
It's an open source git-hub project: Git-Hub Bootstrap

Here's an example of how easily it is to create a dropdown menu button with the bootstrap framework in html:




<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<div id="sidebar" class="column-right">
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>

No comments:

Post a Comment