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

update docs to change topbar to navbar

parent b91d210a
21 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix,!985Fix id anchor javascript,!906Twipsy now respects custom classes,!873Clicking a dropdown will always toggle it,!858Bordered Arrow Mixin - updated for 2.0,!832Fix thumbnails in Built With Bootstrap,!13512.0 wip - relative font sizes,!1315[2.0-wip] Fix mustache glob when building,!1268[wip-2.0] IE 7/8 Typehead JS fix,!12362.0 wip - Fix for issue #1202,!1219Removed dotted outline on navbar dropdown menu,!1210Missing icon class from examples,!1195Fixed display of secondary container,!1090Fixed typo,!1084Default `.border-radius-custom` values,!1064Typo Fix in tables.less,!10572.0 wip,!1052Missing data attribute to close modal,!10212.0 wip,!5432.0 wip
Hide whitespace changes
Inline Side-by-side
Showing
with 21 additions and 21 deletions
+21 -21
docs/index.html
+ 9
- 9
View file @ ae5c5e10
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<body> <body>
<!-- Topbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner"> <div class="navbar-inner">
...@@ -1308,7 +1308,7 @@ ...@@ -1308,7 +1308,7 @@
<div class="page-header"> <div class="page-header">
<h1>Navigation</h1> <h1>Navigation</h1>
</div> </div>
<h2>Fixed topbar</h2> <h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown"> <div class="navbar navbar-static" data-dropdown="dropdown">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
...@@ -1343,24 +1343,24 @@ ...@@ -1343,24 +1343,24 @@
</li> </li>
</ul> </ul>
</div> </div>
</div><!-- /topbar-inner --> </div><!-- /navbar-inner -->
</div><!-- /topbar --> </div><!-- /navbar -->
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4>What is it</h4> <h4>What is it</h4>
<p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div> </div>
<div class="span4"> <div class="span4">
<h4>Customizable</h4> <h4>Customizable</h4>
<p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav&mdash;or any combination of that.</p> <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav&mdash;or any combination of that.</p>
</div> </div>
<div class="span4"> <div class="span4">
<h4>Dropdowns included</h4> <h4>Dropdowns included</h4>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>&lt;li&gt;</code> tags also support <code>.active</code> for showing current page selection.</p> <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>&lt;li&gt;</code> tags also support <code>.active</code> for showing current page selection.</p>
</div> </div>
</div> </div>
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p> <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<br> <br>
...@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr> </tr>
<tr> <tr>
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td> <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td> <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td> <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
</tr> </tr>
<tr> <tr>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
......
docs/javascript.html
+ 12
- 12
View file @ ae5c5e10
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<body id="bootstrap-js"> <body id="bootstrap-js">
<!-- Topbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner"> <div class="navbar-inner">
...@@ -189,12 +189,12 @@ $('#my-modal').bind('hidden', function () { ...@@ -189,12 +189,12 @@ $('#my-modal').bind('hidden', function () {
</div> </div>
<div class="row"> <div class="row">
<div class="span3 columns"> <div class="span3 columns">
<p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p> <p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p>
<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 boostrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3> <h3>Markup</h3>
<p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p> <p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -213,10 +213,10 @@ $('#my-modal').bind('hidden', function () { ...@@ -213,10 +213,10 @@ $('#my-modal').bind('hidden', function () {
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
<p> <p>
A programatic api for activating menus for a given topbar or tabbed navigation. A programatic api for activating menus for a given navbar or tabbed navigation.
</p> </p>
<h3>Demo</h3> <h3>Demo</h3>
<div id="topbar-example" class="navbar navbar-static"> <div id="navbar-example" 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>
...@@ -263,28 +263,28 @@ $('#my-modal').bind('hidden', function () { ...@@ -263,28 +263,28 @@ $('#my-modal').bind('hidden', function () {
</div> </div>
<div class="row"> <div class="row">
<div class="span3 columns"> <div class="span3 columns">
<p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p> <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p>
<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 boostrap-scrollspy.js</h2>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3> <h3>Markup</h3>
<p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>. <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>.
<pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="scrollspy" &gt;...&lt;/div&gt;</pre> <pre class="prettyprint linenums">&lt;div class="navbar" data-scrollspy="scrollspy" &gt;...&lt;/div&gt;</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().scrollspy()</h4> <h4>$().scrollspy()</h4>
<p> <p>
Auto activates navigation buttons by users scroll position. Auto activates navigation buttons by users scroll position.
</p> </p>
<pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre> <pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre>
<p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>. <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
</p> </p>
<h4>.scrollspy('refresh')</h4> <h4>.scrollspy('refresh')</h4>
<p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p> <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
<pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre> <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
<h3>Demo</h3> <h3>Demo</h3>
<p>Checkout the the topbar navigation on this page.</p> <p>Checkout the the navbar navigation on this page.</p>
</div> </div>
</div> </div>
</section> </section>
......
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