Building responsive websites using Twitter BootStrap

Responsive web design has become the leading technique for building sites that work well on
desktop computers, phones and tablets and for better readability of the online contents in different environments. With the help of CSS3 and definitely HTML5, this trend is increasing every day.To full fill this need Twitter Bootstrap open-sourced framework is a very efficient way to serve the purpose of Responsive Web Design with ease.

Getting started with Twitter Bootstrap

Let's begin with the site url http://getbootstrap.com/. You will get all the required steps here, including some basic guides and tutorials.

Twitter Bootstrap offers you a lot of amazing stuff out of the box:

  1. Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

  2. Styles for common HTML elements like typography, code, tables, forms, and buttons, and a great little icon set.

  3. Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

  4. Javascript plugins for things like tooltips, popovers, modals, and more.

You can get started by downloading the bootstrap folder which includes the complete source code.

Setting up

To set the responsive environment, you have to follow some steps of twitter bootstrap for responsive web design.
1.  Place the correct meta tag inside the head of the webpage. 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.  Add the responsive CSS of Twitter Bootstrap.
     Responsive css is added in the  bootstrap.min.css file with @media queries.

 <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

3.  Include the Js file for bootstrap components.

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Basic template structure:
http://getbootstrap.com/getting-started/#template

How it works

To make the layout responsive, Twitter Bootstrap does the following :

  1. It modifies the width of the column in the grid.

    http://getbootstrap.com/css/#grid

  2. To render headings and text properly, it resizes them when required.

  3. It also includes a set of clean user interface widgets, such as nav bars and tabs, an icon library, excellent typography and table layouts and a set of JavaScript widgets that you can use just by providing the appropriate HTML, without writing a single line of JavaScript code and it is responsive.

    http://getbootstrap.com/javascript/

  4. For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

    http://getbootstrap.com/css/#responsive-utilities

Browser and Device support

Bootstrap is built to work best in the latest desktop and mobile browsers.
http://getbootstrap.com/getting-started/#support

Its fully customisable

It is possible to customise and grab the source code and optimize it.Your custom version of Bootstrap is now ready to be compiled.

http://getbootstrap.com/customize/

Advantage of Twitter Bootstrap

  1. Save Time
    The Bootstrap libraries offer readymade pieces of code that makes the developer life easy.
  2. Customizable
    Bootstrap allows you to customize and tailor your development project accordingly.
  3. Consistency
    Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox,etc.
  4. Responsiveness
    Bootstrap adapts to the change in platforms with super speed and efficiency.

Example of Responsive website using twitter bootstrap

Desktop
iPad
Mobile
Categories: HTML JavaScript

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.