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:

This is how our Bootstrap App looks in the Ripple Mobile Emulator :    

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:

And the scripts will be close to the "Body" closing:

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:

https://github.com/CarmelSoftware/Bootstrap_Buttons

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:

The buttons will be displayed as this :

2) Buttons Groups:

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

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

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

That's all.

Our Buttons will be showed this way:

1-phones : 

Split Dropdown Button:

Grouped Buttons:

2-larger desktops:

      by Carmel Schvartzman

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