Difference between revisions of "Team:Oxford/Templates/Nav"

(Created page with "This is the header. Header end.")
 
Line 1: Line 1:
−
This is the header.
+
<html>
 +
<head>
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 +
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 +
</head>
 +
<body>
  
−
Header end.
+
<div class="container">
 +
  <h2>Dropdowns</h2>
 +
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
 +
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
 +
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
 +
  <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>
 +
 
 +
</body>
 +
</html>

Revision as of 21:23, 26 June 2016

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".