Skip to content

B
bootstrap
Commit ae5c5e10 authored by Mark Otto's avatar Mark Otto
Browse files
Options

update docs to change topbar to navbar

parent b91d210a
Show whitespace changes
Inline Side-by-side
Showing with 21 additions and 21 deletions
docs/index.html
View file @ ae5c5e10
......@@ -25,7 +25,7 @@
<body>
<!-- Topbar
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
......@@ -1308,7 +1308,7 @@
<div class="page-header">
<h1>Navigation</h1>
</div>
<h2>Fixed topbar</h2>
<h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown">
<div class="navbar-inner">
<div class="container">
......@@ -1343,24 +1343,24 @@
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div><!-- /topbar -->
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="row">
<div class="span4">
<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 class="span4">
<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 class="span4">
<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>
</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>
......@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr>
<tr>
<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>
<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>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
......
docs/javascript.html
View file @ ae5c5e10
......@@ -25,7 +25,7 @@
<body id="bootstrap-js">
<!-- Topbar
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
......@@ -189,12 +189,12 @@ $('#my-modal').bind('hidden', function () {
</div>
<div class="row">
<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>
</div>
<div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<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>
<pre class="prettyprint linenums">
......@@ -213,10 +213,10 @@ $('#my-modal').bind('hidden', function () {
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<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>
<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="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
......@@ -263,28 +263,28 @@ $('#my-modal').bind('hidden', function () {
</div>
<div class="row">
<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>
</div>
<div class="span9 columns">
<h2>Using boostrap-scrollspy.js</h2>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<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>.
<pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="scrollspy" &gt;...&lt;/div&gt;</pre>
<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="navbar" data-scrollspy="scrollspy" &gt;...&lt;/div&gt;</pre>
<h3>Methods</h3>
<h4>$().scrollspy()</h4>
<p>
Auto activates navigation buttons by users scroll position.
</p>
<pre class="prettyprint linenums">$('body > .topbar').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>.
<pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre>
<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>
<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>
<pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
<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>
</section>
......
Markdown is supported
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