Skip to content
GitLab
Commit 12a0d694 authored by Mark Otto's avatar Mark Otto
Browse files

fix dropdowns in components docs page

parent 00cbadf9
Hide whitespace changes
Inline Side-by-side
Showing
with 21 additions and 32 deletions
+21 -32
docs/components.html
+ 15
- 15
View file @ 12a0d694
...@@ -22,6 +22,18 @@ ...@@ -22,6 +22,18 @@
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-transitions.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</head> </head>
<body> <body>
...@@ -230,7 +242,7 @@ ...@@ -230,7 +242,7 @@
<h1>Navbar</h1> <h1>Navbar</h1>
</div> </div>
<h2>Fixed navbar</h2> <h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown"> <div class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a> <a class="brand" href="#">Project Name</a>
...@@ -240,7 +252,7 @@ ...@@ -240,7 +252,7 @@
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li> <li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
...@@ -255,7 +267,7 @@ ...@@ -255,7 +267,7 @@
<ul class="nav secondary-nav"> <ul class="nav secondary-nav">
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li> <li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
...@@ -811,17 +823,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -811,17 +823,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer> </footer>
</div><!-- /container --> </div><!-- /container -->
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-transitions.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</body> </body>
</html> </html>
docs/javascript.html
+ 6
- 17
View file @ 12a0d694
...@@ -26,17 +26,6 @@ ...@@ -26,17 +26,6 @@
<!-- Le javascript --> <!-- Le javascript -->
<!-- placed up here so that the inline demos can be next to their markup --> <!-- placed up here so that the inline demos can be next to their markup -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
// NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
$(document).ready(function() {
$('.nav .active').click(function(e) {
e.preventDefault();
$(this).siblings().toggle();
});
});
</script>
<script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script> <script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-transition.js"></script>
...@@ -147,7 +136,7 @@ ...@@ -147,7 +136,7 @@
</tr> </tr>
<tr> <tr>
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
</tr> </tr>
<tr> <tr>
<td><a href="./javascript.html#button">bootstrap-button.js</a></td> <td><a href="./javascript.html#button">bootstrap-button.js</a></td>
...@@ -306,7 +295,7 @@ $('#myModal').bind('hidden', function () { ...@@ -306,7 +295,7 @@ $('#myModal').bind('hidden', function () {
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div> </div>
<div class="span9 columns"> <div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3> <h3>Using bootstrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
<h3>Markup</h3> <h3>Markup</h3>
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p> <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p>
...@@ -380,7 +369,7 @@ $('#myModal').bind('hidden', function () { ...@@ -380,7 +369,7 @@ $('#myModal').bind('hidden', function () {
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
</div> </div>
<div class="span9 columns"> <div class="span9 columns">
<h2>Using boostrap-scrollspy.js</h2> <h2>Using bootstrap-scrollspy.js</h2>
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3> <h3>Markup</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
...@@ -454,7 +443,7 @@ $('#myModal').bind('hidden', function () { ...@@ -454,7 +443,7 @@ $('#myModal').bind('hidden', function () {
<a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a>
</div> </div>
<div class="span9 columns"> <div class="span9 columns">
<h3>Using boostrap-tab.js</h3> <h3>Using bootstrap-tab.js</h3>
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre> <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
<h3>Markup</h3> <h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
...@@ -651,11 +640,11 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { ...@@ -651,11 +640,11 @@ $('a[data-toggle="tab"]').bind('shown', function (e) {
</div> </div>
<div class="row"> <div class="row">
<div class="span3 columns"> <div class="span3 columns">
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a> <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
</div> </div>
<div class="span9 columns"> <div class="span9 columns">
<h3>Using boostrap-popover.js</h3> <h3>Using bootstrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre> <pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<table class="striped-table"> <table class="striped-table">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment