Scribd
Upload
13 views4 pages

Lecture 3

The document discusses different types of navigation bars that can be created in Bootstrap including default, inverted, fixed, dropdown, right-aligned, and collapsing navigation bars. It also discusses creating a default sidebar in Bootstrap.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views4 pages

Lecture 3

The document discusses different types of navigation bars that can be created in Bootstrap including default, inverted, fixed, dropdown, right-aligned, and collapsing navigation bars. It also discusses creating a default sidebar in Bootstrap.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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 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>

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 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 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>

<li><a href="#">Contact</a></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 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 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>

<li><a href="#">Contact</a></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>
<span class="icon-bar"></span>
<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.

You might also like