Wednesday, 4 September 2013

Twitter Bootstrap 3: Create Web Page with logo and navigation bar

Today we are going to see how to create an header section of an HTML5 webpage that contains Logo, Search Box and Navaigation Menu using Twitter Bootstrap framework.  Below you will find the final output followed by HTML Code


HTML5 Code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
       <script src="js/html5shiv.js"></script>
       <script src="js/respond.min.js"></script>
<![endif]-->
  </head>
  <body>

<div class="container">

      <div class="row" style="margin-top:10px;">
        <div class="col-md-6">
          <h3>Company Logo</h3>
        </div>
        <div class="col-md-6">
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-info">Search</button>
          </form>
        </div>
      </div>

      <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">PHP</a>
            </li>
            <li>
              <a href="#">Sencha Touch</a>
            </li>
            <li>
              <a href="#">JQuery Mobile</a>
            </li>
            <li>
              <a href="#">Titanium Mobile</a>
            </li>
            <li>
              <a href="#">Phone Gap</a>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                More<b class="caret"></b></a>

              <ul class="dropdown-menu">
                <li>
                  <a href="#"></a>
                </li>
                <li>
                  <a href="#">Android</a>
                </li>
                <li>
                  <a href="#">IOS</a>
                </li>
                <li>
                  <a href="#">Windows Phone 8</a>
                </li>
              </ul>
            </li>
          </ul>

        </nav>
      </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

Explanation:

Twitter Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout configuration, as well as powerful mixins for generating more semantic layouts.
Following are the classes that used in the above HTML5 code
Container: It is used to group html elements in the web page
Row:  It is similar to the table <tr> tag. start a new row
cols-xs-*: It applies to the device width (<768px) for mobile phone
cols-sm-*: It applies to the device width (≥768px) for tablets
cols-md-*: It applies to the device width (≥992px) for desktops
cols-lg-*: It applies to the device width (≥1200px) for large device desktops

First, i am dividing the screen width by half (50% each) using cols-md-6 (12 columns grid is equals to the maximum device width). First half of the screen will be occupied by the logo element and the another half will be occupied by the Search Box.

Now, in the second row, we will be displaying Navigation bar using html5 <nav> element and class name as 'navbar'. Menu will be added in the <ul> element with class name as 'nav navbar-nav' and menu items (PHP, Sencha Touch, JQuery Mobile etc) will be added in <li> tags. 

We also need to add a dropdown for a menu item (More), for that you need to add class name as 'dropdown' and dropdown menu items (Android, IOS) will be defined inside the class name 'dropdown-menu'. For more detailed information regarding Navbar components, please refer here.

Hope, you enjoyed this post.

1 comment:

  1. Thanks for the code, but that navbar is not fully responsive in the Bootstrap 3 style. There is a chunk of code missing that forms the collapsible mobile menu. When shrunk down to phone-width it creates the button that you click to expand the javascript vertical mobile menu.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...