Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists

This is the Step by step Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists

In this Bootstrap tutorial for Beginners we exemplify the use of Navbars, including dropdownlist toggle buttons , and a Search Form. This is for use on all kind of Mobile devices screens  : iPhones, iPads, small screens PCs, Tablets, Nexus Galaxy, desktops computers, and so on...
Building Responsive layouts is very important for the Mobile First development  approach.

And this is how it looks in Ripple Mobile Emulator, in Nexus Galaxy display:    

Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists

For this example we'll be working with a Bootstrap template downloaded from www.initializr.com/ , as is explained in the following Tutorial about Bootstrap Templates. From this template, we leave the Head untouched, to keep the references to jQuery and the Bootstrap files, and only delete the body contents.
Also, and because we'll also use a Mobile Emulator, please read this short tutorial on installing the FREE Ripple Emulator.

However, if you begin coding a HTML5 file from scratch, just add the following references to the Head :

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

You can download the complete app from the following GitHub repository:

https://github.com/CarmelSoftware/Bootstrap_Navbars

1) Building the Navbar:

First step to build a Navbar is to define a <header> HTML5 element with the Bootstrap class "navbar navbar-default navbar-fixed-top" and the Role = Navigation.

Inside it we set a class="navbar-header" holding a Button which will open the Navbar in mobile devices:

As you see , the button target is the id or the class of a <nav> HTML5 element , initially COLLAPSED :  data-target=".my-navbar-collapse" .

Also, we add 3 "<span class="icon-bar"></span>" in order to draw a button to open the Navbar:

Inside the collapsed  class="navbar-collapse collapse "  <nav>, we insert a  class="nav navbar-nav" <ul> to hold all menu links :

2) Adding a DropDownList to the Navbar:

Inside one of the <li>, defined as  class="dropdown" , we insert
1 - a link button <a> to open the dropdownlist
2 - a <ul> representing the dropdown elements:

The button has to bore the following class definitions:  class="dropdown-toggle" data-toggle="dropdown" href="#"  :

Here you have another example of dropdownlist added to the Navbar:

3) Adding a Form to the Navbar:

To add a Form, just include it inside the <nav> element, with a class definition as follows:

<form class="navbar-form navbar-right" role="form">

That's all.

For the sake of the example, we add some text inside a Bootstrap jumbotron, as follows:

And the Navbar will be showed this way:

1-phones : 

2-tablets and medium desktops:

3-larger desktops:

      by Carmel Schvartzman

כתב: כרמל שוורצמן