Web Development

Getting started and implementing Bootstrap

To create and build a website by hand is time consuming and demanding. Even though that this is enjoyable and existing but to accommodate all browser types and ensuring that a website is responsive can be challenging.

This is where Twitter Bootstrap comes in, which is a collection of web tools for creating a website or web application. It contains HTML; CSS design templates for typography, forms, buttons, navigation, tables, and images. Furthermore, it also makes use of CSS grid layouts for responsive design and JQuery or JavaScript extensions for user interactivity.

Design of a button

<button type="button">Click me!</button>

Additional button classes

<button type="button">Success</button>
<button type="button">Warning</button>
<button type="button">Danger</button>

Implementing our main navigation

<div class="navbar">
   <div class="navbar-inner">
      <div class="container">
         <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>

Jquery/CSS set-up

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>

Creating a dropdown menu

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
   <i class="icon-th-large"></i> Drop Down menu
   <b class="caret"></b>
   <ul class="dropdown-menu">
      <li><a href="#">Item1</a></li>
      <li><a href="#">Item2</a></li>
      <li><a href="#">Item3</a></li>

In conclusion, the above sample code mentioned is only the starting point and more robust examples can be found at the Twitter Bootstrap website http://getbootstrap.com/getting-started/ where you can also download Twitter Bootstrap. Have fun and happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *