Thursday, July 30, 2015

Bootstrap Tutorial Lesson 5 - Responsive Forms

This is the Step by step Bootstrap Tutorial Lesson 5 - Responsive Forms
In this short Bootstrap tutorial for Beginners we exemplify the implementation of responsive Forms, including checkboxes, radiobuttons, select lists,file input,textareas, and more... , for use  on desktop computers and also on all kind of Mobile devices screens , such as iPhones, iPads, small screens PCs, Tablets , and more...
This is how is displayed our example of using Bootstrap responsive Forms:
Bootstrap Tutorial Lesson 5 - Responsive Forms



And this is how our Bootstrap Form looks in the Ripple Emulator :    

Bootstrap Tutorial Lesson 5 - Responsive Forms  1




Bootstrap Tutorial Lesson 5 - Responsive Forms


We'll be working with a Bootstrap template downloaded from www.initializr.com/ (this is explained in the following short Tutorial about Bootstrap Templates), and use a Mobile Emulator, as explained in this short tutorial on installing the FREE Ripple Emulator.
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>

And the scripts will be prep ended to the "Body" as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
    <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_Forms

Now let's add the body contents, and start coding .

1) Bootstrap Form with all supported input elements:


The Bootstrap forms controls automatically get a global styling, and therefore all textual input , textareas , and  select lists decorated with the .form-control class , are set to width 100% . 
First step is create the Form as follows:

Bootstrap Tutorial Lesson 5 - Responsive Forms 2

As you see, we wrap both labels and controls in a class .form-group , to get optimum spacing.
The CSS3 code for the .custom-form class is this:

.custom-form {
    color:#a8a3a3;
    padding: 35px;
}


Then, we use the following "success-warning-error" display together with its correspondent Glyphicons:

Bootstrap Tutorial Lesson 5 - Responsive Forms     3

Also we added an .input-group to use an add-on and to merge the input element with a "@" .

 Now we add a Textarea and an input of type "file":

Bootstrap Tutorial Lesson 5 - Responsive Forms     4

Finally we add checkboxes, marking some of them as "warning" or "error", and disabling one:


Bootstrap Tutorial Lesson 5 - Responsive Forms  5
Also we add some radiobuttons:

Bootstrap Tutorial Lesson 5 - Responsive Forms    6


Now we add a select list:

Bootstrap Tutorial Lesson 5 - Responsive Forms   7

Finally we append a Submit button: 
Bootstrap Tutorial Lesson 5 - Responsive



2) Inline forms:



Now we'll add an Inline Form. Add a class .form-inline to your form, to get a left-aligned and also an inline-block controls Form, that will apply to devices bigger than 768px wide :

Bootstrap Tutorial Lesson 5






3) Bootstrap Horizontal Forms:

Another type of useful responsive Form, is the Horizontal Form. We use several Bootstrap's  grid classes to align the groups of controls , by using the class .form-horizontal  . This causes the groups to be set as grid rows :
Bootstrap Tutorial




That's all. Our Forms will be displayed this way:

1- In Mobile devices : 


The display for Nexus Galaxy devices is as follows:

Bootstrap

 Tutorial Lesson 5 - Responsive Forms

Lesson 5 - Responsive Forms




2- Medium & larger desktops:

Forms

Tutorial  - Responsive Forms

Inline Forms:

 Tutorial Lesson 5 - Forms

Horizontal Forms:

Lesson 5 - Forms






      by Carmel Schvartzman


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









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


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








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


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









Monday, July 27, 2015

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons

This is the Step by step Bootstrap Tutorial Lesson 2 - Icons and Glyphicons
In this Bootstrap tutorial for Beginners we exemplify the use of FREE Glyphicons, for every kind of screens   :iPhone, iPad, Tablets, and desktops...
Here we build a fully responsive Mobile First web site for using on four classes of screens: phones, tablets, desktops, and larger desktops.
We will add several buttons with Glyphicons to the App, as follows:

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons


And this is how it looks in a Mobile Emulator, in iPhone 5 display:    

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons   1



Bootstrap Tutorial Lesson 2 - Icons and Glyphicons



On this post we use the Twitter Bootstrap , which also needs the  jQuery Framework,  so enter the getbootstrap.com web site and the  jQuery web site , and get The URLs of the latest versions of the files on CDN  . Also , because we  will also be using a Mobile Emulator, take a look at this tutorial on setup of the Ripple Emulator.

If you have began this HTML5 file from scratch, add the following references to its 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>

In case you're working with the Bootstrap template downloaded from www.initializr.com/ as we explained in the previous Tutorial about Bootstrap Templates, leave the Head untouched, and only delete the body contents , leaving also the "Jumbotron" div, therefore will remain a nice NavBar and an introduction.

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


The next thing to do is to download the FREE Icons from the net.

1) Step #1 : Getting the Glyphicons :



To get the Glyphicons , browse to icomoon.io , and click on the "IconMoon App" button :

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons     2


Select all the icons you need, and press the "Generate Font" button like here:

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons   3


You will get your selection together with the size of the file (in this example, the size is 2.9 KB) :

Bootstrap Tutorial Lesson 2 - Icons and Glyphicons   4

Click on "Download" and open the .zip file:


Bootstrap Tutorial Lesson 2 - Icons and Glyphicons   5

Open the "fonts" folder to see the icons files:


Bootstrap Tutorial Lesson 2 - Icons


Now copy only the "fonts" folder and the "style.css" file:

Bootstrap Tutorial Lesson 2


And paste them to your project, taking care that the fonts folder is merged with any existent folder file, and also changing the style.css file name to "icomoon.css" , and placing it in the "css" folder:

Bootstrap Tutorial

Finally, add the reference to the .css file to the Head of your HTML5 file:

Bootstrap






2) Step #2 : Using the Glyphicons :


Now you can use the Glyphicons in your Bootstrap web site.
Let's see how to add the icons to a button.
The following markup creates a Jumbotron box with several buttons:
 Tutorial Lesson 2 - Icons and Glyphicons

All you have to do to add the icons to the buttons is inserting a <span> element with the Icon Class inside the button.
The names of the icons are given to you while downloading them from the web site. But is good to know that they are inside the style.css file, so you can retrieve them for use.
Now build your project and browse to it, in "iPhone 5" mobile device settings, for example:

 Lesson 2 - Icons and Glyphicons

The buttons with the Glyphicons are displayed this way:


 Icons and Glyphicons




 Glyphicons

And in desktop resolution, the Glyphicons are shown this way:


Bootstrap  Lesson 2 - Glyphicons



      by Carmel Schvartzman


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