Tuesday, July 28, 2015

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.

Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists



And this is how it looks in Ripple Mobile Emulator, in Nexus Galaxy display:    
Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists    1





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:

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:

Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists   2

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:


Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists    3

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

Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists   4


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:

Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists  5

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:


Bootstrap Tutorial Lesson 3 - Navbars with DropDownLists   6





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">
Bootstrap Tutorial Lesson 3 - Navbars


That's all.
For the sake of the example, we add some text inside a Bootstrap jumbotron, as follows:

Bootstrap Tutorial Lesson 3




And the Navbar will be showed this way:

1-phones : 

Bootstrap Tutorial


2-tablets and medium desktops:

Bootstrap

Tutorial Lesson 3 - Navbars with DropDownLists

Lesson 3 - Navbars with DropDownLists





3-larger desktops:


Navbars with DropDownLists





      by Carmel Schvartzman


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