The official home of the Python Programming Language: Bootstrap Navbar

Bootstrap Navbar

The navbar is a nice feature, and is one of the prominent features of Bootstrap sites. Navbarsare responsive meta components that serve as navigation headers for your application or site.Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.

Default navbar

To create a default navbar:

Add classes .navbar, .navbar-default to the <nav> tag.

Add role="navigation" to the above element, to help with accessibility.

Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size.

To add links to the navbar, simply add an unordered list with a classes of .nav, .navbar-nav.

Following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Responsive navbar

To add the responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a <div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has a the class of.navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Three with a class of .icon-bar create what I like to call the hamburger button. This will toggle the elements that are in the .nav-collapse <div>. For this feature to work, you need to include the Bootstrap Collapse Plugin.

Following example demonstrates this:

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#example-navbar-collapse">

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Forms in navbar

Instead of using the default class-based forms from Chapter Bootstrap Forms, forms that are in the navbar use the .navbar-form class. This ensures that the form’s proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options (explained in Component alignment section) to decide where it resides within the navbar content.

Following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</nav>

Buttons in navbar

You can add buttons using class .navbar-btn to <button> elements not residing in a <form> to vertically center them in the navbar. .navbar-btn can be used on <a> and <input> elements.

Do not use .navbar-btn nor the standard button classes on <a> elements within .navbar-nav.

Following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

</div>

<button type="submit" class="btn btn-default">Submit Button</button>

</form>

Navbar Button

</button>

</div>

</nav>

Text in navbar

To wrap strings of text in an element use class.navbar-text. This is usually used with <p> tag for proper leading and color. Following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

<p class="navbar-text">Signed in as Thomas</p>

</div>

</nav>

Non-nav links

If you want to use standard links that are not within the regular navbar navigation component, then use class navbar-link to add the proper colors for the default and inversenavbar options as shown in the following example:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

<p class="navbar-text navbar-right">Signed in as

<a href="#" class="navbar-link">Thomas</a>

</p>

</div>

Component alignment

You can align the components like nav links, forms, buttons, or text to left or right in a navbarusing the utility classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction. The following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

Left align-Submit Button

</button>

</form>

<p class="navbar-text navbar-left">Left align-Text</p>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

Right align-Submit Button

</button>

</form>

<p class="navbar-text navbar-right">Right align-Text</p>

</div>

</nav>

Fixed to top

The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. With a few helper classes, you can place it either on the top or bottom of the page, or you can make it scroll statically with the page.

If you want the navbar fixed to the top, add class.navbar-fixed-top to the .navbar class. Following example demonstrates this:

To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag or try your own values.

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Fixed to bottom

If you want the navbar fixed to the bottom of the page, add class .navbar-fixed-bottom to the.navbar class. Following example demonstrates this:

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Static top

To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding the padding to the <body>.

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Inverted navbar

To create an inverted navbar with a black background and white text, simply add .navbar-inverse class to the .navbar class as demonstrated in the following example:

To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag or try your own values.

<a class="navbar-brand"href="#">TutorialsPoint</a>

</div>

<div>

Java <b class="caret"></b>

</a>

<li><ahref="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><ahref="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

The official home of the Python Programming Language

Bootstrap Navbar

ليست هناك تعليقات:

إرسال تعليق