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:

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

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

Here, choose the third Template, the one named "Bootstrap" , by making click on the button. Then, deselect or select the options at your wish:

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:

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:

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

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

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

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:

And this is how it looks at a iPhone 5 :

Here you can see the Navbar:

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:

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

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

Which is displayed this way:

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

And finally there is a Footer:

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:

      by Carmel Schvartzman

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