Tuesday, July 14, 2015

Twitter Bootstrap Tutorial Intro - First App using Templates

This is the Step by step Twitter Bootstrap Tutorial Intro - First App using Templates.
In this Bootstrap tutorial for Beginners we create in 5 minutes a First Bootstrap App , for use on all  Mobile devices :iPhone, iPad, Tablets, and also desktops, by using Bootstrap Templates.
Responsive layouts are part of the Mobile First web design approach, and can be easily created by using free templates, which you can alter at your wish , and give you a quick start for your App .
Here we'll be using the free templates from www.initializr.com , that will show this way:

Twitter Bootstrap Tutorial Intro - First App using Templates

Twitter Bootstrap Tutorial Intro - First App using Templates   1




And this is how it looks in a Mobile Emulator, in iPhone display:
Twitter Bootstrap Tutorial Intro - First App using Templates    2





Twitter Bootstrap Tutorial Intro - First App using Templates


In just 5 minutes , we'll have a Twitter Bootstrap web page working, so that you can customize it at your wish. We'll do that using Bootstrap templates.
Therefore, browse to http://www.initializr.com/ :
Twitter Bootstrap Tutorial Intro - First App using Templates   3



Here, choose the third Template, the one named "Bootstrap" , by making click on the button. Then, deselect or select the options at your wish:
Twitter Bootstrap Tutorial Intro - First App using Templates   4


For example, i deselected the "Google Analytics" option, to not bring the markup for Analytics.
You can see at the footer the query string that is going to be sent to the server: if you select/deselect options, this will be reflected there.
Then, click the "Download" button.

Open the .zip file and take a look at its contents:

Twitter Bootstrap Tutorial Intro - First App using Templates  5

You will notice that there is an "index.html" file, which is the Bootstrap template, and some folders which hold the javascript and CSS3 files. Opening the js folder, there is a main.js file which is your empty javascript file to write your code, and a "vendor" folder:


Twitter Bootstrap Tutorial Intro - First App using Templates  6

The  "vendor" folder is holding all javascript frameworks, like jquery, bootstrap, etc:


Twitter Bootstrap Tutorial Intro - First App using Templates  7

The same thing for the styles: you have a css folder holding all CSS3 files and also an empty  file for you : "main.css" :


Twitter Bootstrap Tutorial Intro - First App using


Open the Index.html file with your browser, and see the desktop appearance of the template:


Twitter Bootstrap Tutorial Intro - First App


Using the free Ripple emulator, ( you can read a short tutorial about installing the Ripple emulator here ) , this is how the template appears at a Tablet:

Twitter Bootstrap Tutorial Intro - First


And this is how it looks at a iPhone 5 :

Twitter Bootstrap Tutorial Intro


Here you can see the Navbar:

Twitter Bootstrap


Now take a look at the Index.html file: the Head element contains references to the CSS3 files, and checking for older browsers, as follows:


Twitter


The Body tag contains a Bootstrap Navbar which also holds a Form for Login:

Bootstrap Tutorial Intro - First App using Templates




Then, there is a div element of the Bootstrap's CSS Class "Jumbotron":


Tutorial Intro - First App using Templates


Which is displayed this way:

Twitter Tutorial Intro - First App using Templates

Then, there is the central part of the file, wrapped in a div of Class "Container":

Intro - First App using Templates

And finally there is a Footer:


First App using Templates
The footer contains scripts which run only after the whole html has been loaded, and also has a check for the loading of the jQuery framework, from the CDN(Content Delivery Network). If the jquery failed to be brought, then a local file will be used, which resides at the "js/vendor" folder .

Both Contents and Footer are displayed this way:


using Templates




      by Carmel Schvartzman


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