Lecture 3

Bootstrap Navigation Bar
- The navbar is one of the prominent features of Bootstrap sites.

- Navbars are 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 −

 A standard navigation bar is created with <nav class="navbar navbar-default">.
 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 the classes of
class="nav navbar-nav”.
<nav class="navbar navbar-default" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TVETI Institute</a>
</div>
<div id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
Inverted Navigation Bar

- If you don't like the style of the default navigation bar, Bootstrap provides an
alternative, black navbar
- Just change the navbar-default class into navbar-inverse
Fixed Navigation Bar
- The navigation bar can also be fixed at the top or at the bottom of the page.
- A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the
page scroll.
- The .navbar-fixed-top class makes the navigation bar fixed at the top:
- The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:
<nav class=" navbar navbar-default navbar-fixed-top " role = "navigation">
</div>
<div id="myNavbar">
<li><a href="#">Departments</a></li>
</ul>
</div>
</nav>
Navigation Bar with Dropdown

- Navigation bars can also hold dropdown menus.
- The following example adds a dropdown menu for the "Departments" button:
<nav class="navbar navbar-default navbar-fixed-top " role = "navigation">

</div>
<div id="myNavbar">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Departments
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">ICT</a></li>
<li><a href="#">Automotive</a></li>
<li><a href="#">Manufacturing</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Right-Aligned Navigation Bar
- The .navbar-right class is used to right-align navigation bar buttons.
- In the following example we insert a "My Account" button and a "Logout" button to the right
in the navigation bar. We also add a glyphicon on each of the two new buttons:
<nav class="navbar navbar-default navbar-fixed-top" role = "navigation">
</div>
<div id="myNavbar">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Departments
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">ICT</a></li>
<li><a href="#">Automotive</a></li>
<li><a href="#">Manufacturing</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
</ul>
</div>
</nav>
Collapsing the Navigation Bar
- The navigation bar takes up too much space on a small screen.

- We should hide the navigation bar; and only show it when it is needed.
- Use the class collapse navbar-collapse to collapse the navigation bar.
- In the following example the navigation bar is replaced by a button in the top right corner. Only when
the button is clicked, the navigation bar will be displayed:
Include the following scripts under <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>
</button>
Include the class="collapse navbar-collapse" of <div id="myNavbar">
Example
<div class="collapse navbar-collapse" id="myNavbar">
Bootstrap Sidebar
Sidebar is also a NavBar in Bootstrap that is located at the side of the screen.
Default Sidebar
To create a default Sidebar −

 A standard Sidebar is created with <nav class="navbar-default sidebar">.
 Add role = "navigation" to the above element, to help with accessibility.
 Add <div class="sidebar-nav navbar-collapse"> to make the sidebar collapse.
Example:
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
</div>
</div>
Note: If you have both NavBar and Sidebar in your Bootstrap page, it is recommended that you use
only <class=”navbar-right”> in your NavBar for better responsiveness.
Try Operation for better understanding.

Lecture 3

Uploaded by

Copyright:

Available Formats

Lecture 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 3

Uploaded by

Copyright:

Available Formats

Bootstrap Navigation Bar

- The navbar is one of the prominent features of Bootstrap sites.

To create a default navbar −

<nav class="navbar navbar-default" role = "navigation">

Inverted Navigation Bar

<nav class=" navbar navbar-default navbar-fixed-top " role = "navigation">

Navigation Bar with Dropdown

<nav class="navbar navbar-default navbar-fixed-top " role = "navigation">

<nav class="navbar navbar-default navbar-fixed-top" role = "navigation">

<ul class="nav navbar-nav navbar-right">

Collapsing the Navigation Bar

- The navigation bar takes up too much space on a small screen.

Include the following scripts under <div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

Include the class="collapse navbar-collapse" of <div id="myNavbar">

To create a default Sidebar −

Try Operation for better understanding.

You might also like