Twitter Bootstrap — Making a Professionaly Looking Site

Twitter Bootstrap (shortly, Bootstrap) is a popular CSS framework allowing to make your web site professionally looking and visually appealing, even if you don’t have advanced designer skills. The latest version of Bootstrap is v.3.0.

Overview of Bootstrap Files

The source code of Bootstrap framework’s components is spread across many CSS files. It is known that downloading multiple small files is typically slower than downloading a single large file. For this reason, Bootstrap CSS stylesheets are “concatenated” with the special tool and distributed in a form of a single file named bootstrap.css.

However, this bootstrap.css file has a disadvantage: it contains many characters (white space characters, new line characters, comments, etc.) unneeded for code execution, wasting network bandwidth when downloading the file, thus increasing page load time. To fix this problem, the minification is used.

The minification is the process of removing all unnecessary characters from the source code without changing its functionality. The minified Bootstrap file is called bootstrap.min.css.

Grid System

In most web sites, content is required to be organized in a table-like structure having rows and columns. In figure below, you can see an example layout of a typical web site: it has the header block with a logo, the sidebar at the left, page content area in the middle, the ads bar at the right, and the footer at the bottom of the page. These blocks are arranged in a grid, although grid cells have unequal width (some cells can span several columns).

typical_grid

Bootstrap provides a simple layout grid system to make it easy to arrange content on your pages in rows and columns.

Each row consists of up to 12 columns (see figure below). Column width is flexible
and depends on the width of the grid container element. Column height may vary
depending on the height of the content of the cell. The space between columns is 30 pixels (15 pixels padding at both sides of the column).

bootstrap_grid

Columns can be spanned, so a single cell takes the space of several columns. For example, in figure above, the upper grid row consists of 12 columns, and each cell spans a single column. In the bottom row, the first cell spans 2 columns, the second and the third ones span 4 columns each, and the fourth cell spans 2 columns (in total we have 12 columns).

Defining the Grid

To arrange elements in a grid on your web page, you start from defining the
container by adding a <div> element having the .container CSS class. To add a new row to the grid, use a <div> element having the .row CSS class, as shown in the example below:

<div class="container">
  <div class="row">
  ...
  </div>
</div>

To add columns, you use <div> elements with CSS class names varying from .col-md-1 to .col-md-12. The number in the class name specifies how many columns each grid cell will span:

<div class="container">
  <div class="row">
    <div class="col-md-1">Cell 1</div>
    <div class="col-md-5">Cell 2</div>
    <div class="col-md-6">Cell 3</div>  
  </div>
</div>

In the example above, we have three cells. The first cell has a width of 1 (it uses the .col-md-1 class), the second cell spans 5 grid columns (class .col-md-5) and the third cell spans 6 columns (class .col-md-6).

Bootstrap’s Interface Components

Additionally to layout grid, Twitter Bootstrap provides many useful interface components. Here, we will consider two of them: navigation bar and dropdown menu.

Navigation Bar

Navigation bar is usually positioned on top of your web site and contains the links to main pages, like Home, Download, Support, About, etc. Twitter Bootstrap provides a nice visual style for the navbar (see figure below for example):

navbar

As you can see from the figure above, a navbar typically has the header (brand name
of your site can be placed here) and the links to main pages. To put a navbar on your page, you use the following HTML code:

<nav class="navbar navbar-default" role="navigation">  
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Hello World</a>    
  </div>
  <ul class="nav navbar-nav">      
    <li><a href="#">Home</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">About</a></li>
  </ul>    
</nav>

In line 1 above, we used the nav element, which contains all the navigation
bar information. The associated CSS class .navbar is defined by Bootstrap and
provides the base navigation bar’s appearance. The .navbar-default CSS class
specifies the “default” theme for the navigation bar.

The optional role attribute is an HTML
attribute allowing to annotate the page elements with machine-extractable
semantic information about the purpose of an element. In this example, the attribute tells that the nav element is used for navigation.

In lines 2-4, we define the navbar header area, which contains the Hello World
hyperlink. The brand hyperlink typically points to the main page of your site. The hyperlink has the .navbar-brand class that visually enhances the text.

In lines 5-10, we specify the navigation links for the Home, Download, Support and About pages. These links are organized inside an <ul> unordered list element. The element has CSS classes .nav and .navbar-nav that place list items in line and provide the hover item state.

Dropdown Menu

With Bootstrap navigation bar, it is possible to use the dropdown menu as a navigation item. For example, if the Support section of your site can be subdivided into Documentation and Help pages, these can be implemented as a dropdown menu (see figure below).

navbar_with_dropdown

You define the dropdown menu by replacing the Support list item from the previous example in the following way:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     Support <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Help</a></li>          
  </ul>
</li>

In the code above, we use the <li> element with CSS class .dropdown that indicates the dropdown menu (line 1). In lines 2-4, the <a> element defines the hyperlink to show when the menu is hidden (the Support text is shown followed by the triangle caret).

When the site user clicks the hyperlink, the dropdown menu (lines 5-8) appears. The <ul> unordered list element with class .dropdown-menu defines its visual appearance. The dropdown menu contains two items: the Documentation and Help hyperlinks.

Note: this post is an excerpt from my book Using Zend Framework 2

Advertisements

I am a software developer currently living in Tomsk, Russia. I received a PhD degree in Computer Science from Tomsk Polytechnic University in 2010. I have been professionally developing C/C++ and PHP software since 2005. I like contributing to open-source and writing programming articles for popular web resources, like CodeProject. Besides writing, I love skiing and watching Formula-1.

Tagged with: , ,
Posted in Zend Framework 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow ValuableThing on WordPress.com
%d bloggers like this: