Bootstrap Starting Point

I decided to use Twitter bootstrap for my following web projects. Today, I want to start my exploration of this well-known framework. Here is a great tutorial that I found several weeks ago: W3Resource Twitter Bootstrap tutorial.

Creating Navigation

  • class="navbar" indicated the navigation bar in the container level.
  • class="navbar-inverse" changes the default color of the navigation bar dark instead of the default lighter one.
  • class="navbar-fixed-top" makes sure that the navbar is fixed in the top position.
  • role="navigation" is new in Bootstrap V3.0.0 while creating navigation. Bootstrap recommends to use this for nabbers for accessibility purpose.
  • class="navbar-brand" presents the brand name.

Creating Slideshow with Carousal

Main container

The main container is defined using a div tag and ‘carousel slide’ class is assigned to it.

Indicators

Each of the list item refers to a slide. ‘active’ is assigned to the slide which loads by default when the page loads.

Slide

Slides are nested inside the ‘carousel-inner’ class. Each slide is represented as a div which is assigned with class ‘item’. Each slide has a image and a caption which is also a div with the class of ‘carousel-caption’.

Controls

The last part is for next previous and slide/slide by control. This is defined using ‘left/right’ and ‘carousel-control’.
‘icon-prev’ and ‘icon-next’ classes are used for next and previous icons

Responsive Image

Using the ‘img-responsive’ class along with img tag, Bootstrap makes the images responsive.

I have no idea about what a responsive image is right now. I need to do some research later.

Creating Grid

Here is Twitter Bootstrap Gird System.

  • The grid system uses ‘row-column’ pattern to control the layout, and the maximum number of rows is 12.
  • Rows must be placed within a .container.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

Using Table

Two classes ‘table’ and ‘table-bordered’ are used which are default form Bootstrap’s original css file.

Using Form

  • class="form-horizontal" places the form controls horizontally.
  • role="form" added for accessibility. This is a new feature of version 3.0.0.