OpenSourceVarsity

pdf icons

What is Bootstrap?

Bootstrap is a powerful and easy to use framework which empowers front-end developers to craft professional and high quality Bootstrap templates for web pages / application UIs, which are responsive and look great on tablets, mobiles and desktops, i.e. different display sizes and pixel densities.

Since Bootstrap was released its support / documentation / development community has been growing rapidly. This helps in providing front-end developers with the knowledge (amazing documentation remember) and tools to create ready-to-use, native Bootstrap HTML5/CSS3 templates or themes that work on popular publishing platforms like WordPress and Joomla.

One of the main reasons why Bootstrap is so popular is its ability to develop web pages and application UIs fast while ensuring that these are fully responsive to the device on which they are being viewed.

Today, clients the world over no longer accept website solutions that ignore mobile users, simply because there is an exponentially growing number of tablet and smartphone users worldwide. Responsive website and Application UI design is the future of any serious Internet driven business that wants to stay ahead of its competition. Additionally, Google has indicated that it will penalize all website that are not responsive.

Bootstrap themes are great because the Bootstrap framework offers a multitude of feature, while being very flexible and easily customized. There are a ton of beautifully created, responsive, Bootstrap templates. Today there are templates for any kind of project like eCommerce, a landing page, vcard, a creative or business/corporate site, driven by WordPress, Joomla or Drupal or some other world class Content Management System (CMS).

The Bootstrap toolkit from Twitter is designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Bootstrap version 3.X is available at: http://getbootstrap.com/.

Bootstrap Home Page Diagram 1

Browser Support For Bootstrap

Bootstrap is tested and supported in all major modern browsers like Chrome, Safari, Internet Explorer, Firefox and IE8 / 9 / 10.

The Downloaded bootstrap.zip Contents

When bootstrap-X.X.X-dist.zip is downloaded from http://getbootstrap.com the downloaded zipped folder contains three sub folders:
/css
/fonts
/js

The /css folder contains all the Bootstrap CSS files, compressed and full.
The /fonts folder contains all the Bootstrap Glyphicons font files
The /js folder contains the Bootstrap JavaScript plugin file that works with the jQuery library

Glyphicons For Use Within A Bootstrap Template

Bootstrap provides a set of black and white Glyphicons. These icons are structured as fonts and hence are scalable using the font-size styling rule. All CSS font styling rules can be applied to the Glyphicons.

NOTE: We strongly recommend using icons delivered by Font-awesome the variety of icons delivered by font-awesome in much larger than the Bootstrap Glyphicons

The Bootstrap Files

There are two distinct type of files that are part of the Bootstrap download:

  1. bootstrap.css
  2. bootstrap.min.css

NOTE: The .min in the file name indicates that the CSS file content has been minified. i.e. All unnecessary white space from within the file content has been removed. While minifying a CSS file reduces its file size considerably, this makes the file content very difficult to process by human beings. In most cases CSS files are minified ( after their contents are frozen ) to help reduce their download time.

NOTE: Since you are not planning on making any internal changes to bootstrap.css, simply use bootstrap.min.css when coding your HTML5 based User Interface.

Some Bootstrap Features

Layout Grid

Bootstrap has a built in standard 12 column grid layout. This empowers application developers to create Internet driven, application user interfaces / web pages based on a standard responsive 12 column grid very quickly.

Support For Responsive Design

Bootstrap optionally delivers a variable width layout, should application developers wish to use that instead. This empowers developers to create websites that adjust automatically to the display size and resolution of the device being using to browse them.

User Interface Components

Bootstrap also delivers a large number of user interface components.

These include:

  • Standard buttons
  • Labels
  • Preformatted warning and system messages
  • Various navigation controls
  • Various wizard controls
  • Pagination
  • Breadcrumbs

And more.

NOTE: All the above elements are available in bootstrap.css and bootstrap.min.css.

Javascript Snippets

The focus here is on user interface elements. The JavaScript code snippets included in Bootstrap make the building of:

  • Tooltips
  • Dialog boxes
  • Various form input elements (which includes a nice autocomplete feature).

And tons more really simple.

NOTE: Bootstrap JavaScript code snippets are available in bootstrap.js. This file is downloaded within bootstrap.zip which is freely downloadable from http://getbootstrap.com/.

NOTE: Bootstrap version 3.X available from: http://getbootstrap.com/.

Bootstrap Home Page Diagram 2

Click Download Bootstrap and the download Bootstrap page will be displayed in the Browser. Scroll down the page a little bit and the Download Bootstrap link will be visible. Click this link to download the entire Bootstrap 3 package as shown in diagram 3.

Bootstrap Download Page Diagram 3

jQuery

Bootstrap uses jQuery, a very popular JavaScript library, as a support to run all its own JavaScript. Hence when creating a webpage or User Interface using Bootstrap, jQuery must also be included in the webpage.

NOTE: jQuery is available for free download from: http://jquery.com/

jQuery Home Page Diagram 4

A Quick Re-Cap

What we have learned so far.

Download Bootstrap 3.X from: http://getbootstrap.com/

Download jQuery from: http://jquery.com/

You can minify the templates CSS file after using anyone of the following:
CSS Compressor: http://www.csscompressor.com/
YUI Compressor: http://refresh-sf.com/yui/
CSS Compressor & Minifier: http://www.minifycss.com/css-compressor/

Prior Using bootstrap.css In A Project

Download the complete bootstrap.css zipped file. Save this file to a folder on your computer. We suggest the folder /bootstrap_source so that these files can be located / accessed / used whenever you require.

When using bootstrap.css in a project we suggest that the file be copied from /bootstrap_source and placed in a folder named /css within the project folder. That way any overrides you do will not be reflected in the original bootstrap.css source files downloaded via the Internet.

NOTE: We strongly recommend that you do not make any overrides directly within the Bootstrap source files. Create your own CSS file (eg. template_css.css) and write all your overrides there. Just ensure that this file is loaded last so that its styling rules override Bootstrap’s styling rules.

Moving Forward

In the next few lessons we will take up how to:

  • What is a webpage template
  • How to create a HTML5 template
  • How to add the bootstrap CSS files to the template
  • How to override bootstrap CSS rules

And other interesting stuff.

May 5, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X