Torq/tests/navbar.html
2025-04-11 17:11:57 -05:00

94 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 0;
padding-bottom: 30px;
}
.navbar {
margin-top: 20px;
}
</style>
<link href="../bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar">
<a class="navbar-brand" href="#">Project name</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="main-nav" class="navbar-collapse">
<ul class="navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="active"><a href="./navbar.html">Default</a></li>
<li><a href="./navbar-static-top.html">Static top</a></li>
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
</ul>
</div>
</nav>
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
<!-- Le javascript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>