Wednesday, July 29, 2015

Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns

This is the Step by step Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns
In this Bootstrap tutorial for Beginners we exemplify the use of Buttons, including Grouped Buttons, Buttons dropdowns,  and Split Buttons Dropdowns , for use on all kind of Mobile screens  : iPads, small screens PCs,  iPhones,Tablets, Nexus Galaxy, desktops computers, and more...
This is our example of using Bootstrap Buttons:

Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns

Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns  1





This is how our Bootstrap App looks in the Ripple Mobile Emulator :    
Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns    2





Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns


Here we'll be working with a Bootstrap template, which we downloaded from www.initializr.com/ , as is explained in the short Tutorial about Bootstrap Templates.
Also  we'll  use a Mobile Emulator, so read this short tutorial on installing the FREE Ripple Emulator.
The Head of the HTML5 file will look as follows:
Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns   3



And the scripts will be close to the "Body" closing:
Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns   4



In case you began coding an HTML5 file from scratch, just add this 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>

Then delete the body contents, to start coding following this tutorial.
The entire app can be seen at GitHub:

1) Bootstrap Buttons:


The Bootstrap Buttons provide a visual weight to identify a primary action , or to indicate a successful action, or to give informational alert messages, or to indicate caution , or to indicate a dangerous or possibly negative action.
First step we'll create 6 different buttons as follows:
Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns   5


The buttons will be displayed as this :
Bootstrap Tutorial Lesson 4 - Buttons and Dropdowns  6



2) Buttons Groups:



Now we'll group several Buttons , by using the class="btn-group" and the role="group" :

Bootstrap Tutorial Lesson 4 - Buttons






3) Buttons Dropdowns:

Another type of useful Button, are Buttons Dropdowns . They display a toggle List with additional links, by using the class="btn btn-default dropdown-toggle" and the directive data-toggle="dropdown", which enables the button to open a List class="dropdown-menu":


Bootstrap Tutorial Lesson 4


In the case of the Split Button Dropdown, a <span> holding a caret should be added:

Bootstrap Tutorial





That's all.
Our Buttons will be showed this way:

1-phones : 
Tutorial Lesson 4 - Buttons and Dropdowns

Split Dropdown Button:

Lesson 4 - Buttons and Dropdowns

Grouped Buttons:

Buttons and Dropdowns



2-larger desktops:

Dropdowns

Bootstrap  Lesson 4 - Buttons and Dropdowns

Bootstrap  Lesson 4 - Buttons



      by Carmel Schvartzman


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