Thursday, December 20, 2012

First contact with Bootstrap

Insprired by Thomas Glaser and Jan Pfitzner, I thought it could be a good idea to get in contact with Twitter's Bootstrap framework. So here a simple skeleton page which uses Bootstrap components to reflect a simple web site. jQuery is used to interact with menu and the content area.

Here the result:

And finally the code:

<!-- (0) Create an empty HTML page -->
<!DOCTYPE html>
    <!-- (1) Some basic header info -->
        <meta charset="utf-8">
            <title>Basic web site</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">

        <!-- (2) Import the provided CSS file -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">   
         <!-- (3) Import jQuery and Bootstrap -->
        <script src="js/jquery-latest.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!-- (5) At last add some JavaScript (jQuery) here to fill the page with life -->
           $("#header-home").click(function() {
            $('').html('<p>Home ...</p>');

          $("#header-contact").click(function() {
            $('').html('<p>Contact ...</p>');

          $("#header-about").click(function() {
            $('').html('<p>About ...</p>');

          $("#header-contact").click(function() {
            $('').html('<p>Contact ...</p>');


        <!-- (4) Bootstrap decorated HTML here -->
        <div id="container">

           <!-- A navigation header bar which is fixed to the top -->
           <div class="navbar navbar-fixed-top navbar-inverse">
                   <div class="navbar-inner">
                       <a class="brand" href="#"> Basic web site</a>
                       <ul id="header" class="nav">
                           <li class="active"><a href="#" id="header-home">Home</a></li>
                        <li><a href="#about" id="header-about">About</a></li>
                        <li><a href="#contact" id="header-contact">Contact</a></li>
             <!-- (4.1) A simple web site header -->       
           <div class="hero-unit">
                <h1>Basic web site</h1>
                <p>This site explains the Twitter Bootstrap a little bit.</p>

           <!-- (4.2) A HTML grid with 12 columns, in this case we -->
             <div class="row">
            <!-- 4 columns are used for the left hand side navigation bar -->
                <div class="span4 bs-docs-sidebar">
                <ul class="nav nav-list bs-docs-sidenav">
                     <li><a href="#Marker1"><i class="icon-chevron-right"></i> Marker 1</a></li>
                     <li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 2</a></li>
                     <li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 3</a></li>
            <!-- (4.3) 8 columns are used for the right hand side content area -->
            <div class="span8">
                <!-- (4.4) The content area which can be decorated by own css -->
                <div class="my-content">
                      <p> Home ...</p>

No comments:

Post a Comment