How to develop website by twitter bootstrap Part 1

Published on : May 26, 2014

Author: wahid

Category: XHTML

Twitter Bootstarp is a toolkit to create websites. Twitter bootstrap mainly include basic html and CSS for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Pagination, Popover, Alerts etc.

Twitter bootstrap supports following browsers:

1. Mozilla Firefox
2. Opera
3. Safari
4. Google Chrome
5. Internet Explorer

How to obtain Twitter bootstrap:

Download twitter bootstrap from

https://github.com/twitter/bootstrap or http://twitter.github.io/bootstrap/getting-started.html

Once downloaded unzip the file. Then you get

Css file, js file and img.

Css folder contains

# Bootstrap.css
# Bootstrap.min.css
# Bootstrap-responsive.css
# Bootstrap-responsive.min.css

Js folder contains

Bootstrap.js

Bootstrap.min.js

Img folder contains

glyphicons-halflings

glyphicons-halflings-white

Bootstrap design system:

There are three types of design system in bootstrap.

1. Grid system
2. Fluid grid system
3. Layout system.

Grid System:

The default grid system of bootstrap is 940 px wide and 12 columns. It has four responsive variations for phone, tablet portrait, tablet landscape, small desktop and large wide screen desktop.

There are 12 span for 940 px wide screen. Different span has different wide.

And there are also 12 offset for 940 px wide screen.

Now look how to create grid.

Suppose we want to make one grid.

html file


<div class="row">

  <div>

     <p>This span size is 940px</p>

  </div>

</div>

The Output Is:

Example Of multiple Grid:


<div class="row">
  <div>
    <div>
      <p> Span4 default width is 300px </p>
    </div>
    <div class="span6 back1">
      <p> Span6 default width is 460px </p>
    </div>
  </div>
</div>

This code generate following output:

Those two is simple example of grid system.

You can modify or create new span size if you need. But be careful about size calculation.

Fluid Grid System:

In Fluid Grid system span is calculated by percentage place of px.

Layout System:

Layout system provides a common fixed width.

To Make Responsive:

For responsive web deign to work, you need to create a CSS which comprises of styles suitable for various devices sizes, or better to say for various device size ranges. Once the page is about to load on a specific device, using various font end web development techniques like Media Queries, the size of the viewport of the device is detected, then the styles specific to the device is loaded.

To make responsive follow two steps.

Step1: Add meta tag


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

Step2: Add bootstrap-responsive.css


<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

If you look at the responsiveCSS file there are various sections start with @media.

You can modify those CSS to make your website responsive.

Look at the following example::


<div class="row">
  <div>
    <div>
      <div>
        <h5 class="addvertiseheadingposition">Address Labels</h5>
        <img class="addressimageposition" src="image/address.png" />
        <div class="advertisesubdivproperties">
          <p>Utwisienim ad minim veniam, quisnostrudexercitation</p>
          <h4>$15.00</h4>
          <div class="addressbuttonposition"><a><imgsrc="image/button.png" /></a></div>
          </div>
        </div>
       </div>
       <div class="spaninneradvertise offset14">
         <div>
            <h5 class="addvertiseheadingposition">Envelope Printing</h5>
            <img class="addressimageposition1" src="image/envelop.png" >
            <div class="advertisesubdivproperties">
               <p>Utwisienim ad minim veniam, quisnostrudexercitation</p>
               <h4>$30.00</h4>
               <div class="addressbuttonposition"><a><imgsrc="image/button.png" /></a></div>
               </div>
            </div>
         </div>
         <div class="spaninneradvertise offset14">
         <div>
           <h5 class="addvertiseheadingposition">Gift Stickers</h5>
           <img class="addressimageposition1" src="image/gift.png" >
           <div class="advertisesubdivproperties">
             <p>Utwisienim ad minim veniam, quisnostrudexercitation</p>
             <h4>$16.00</h4>
		   <div class="addressbuttonposition"><a><img src="image/button.png" ></a></div>
         </div>
        </div>
       </div>
       <div class="spaninneradvertise offset14">
         <div>
			<h5 class="addvertiseheadingposition">Holidays</h5>
			<img src="image/holydays.png"  />
			<div class="advertisesubdivproperties">
			<p>Utwisienim ad minim veniam, quisnostrudexercitation</p>
			<h4>$25.00</h4>
			<div class="addressbuttonposition"><a><imgsrc="image/button.png" /></a></div>
			</div>
		 </div>
       </div>
     </div>
   </div>

The output is

To make this design i use my ownCSS. I modify span size as i need. If you modify span size on bootstrap.css file to make responsive you need also modify at bootstrap-responsive.css file.

There are also many basicCSS on bootstrap.

You can use those default CSS or you can modify those CSS.

Reference website::

http://www.w3resource.com/twitter-bootstrap/tutorial.php