Bootstrap 3 Tutorial (Part 2)

How to create a website using Bootstrap 3

The following information is based on the Sitepoint tutorial located here:
http://www.sitepoint.com/understanding-twitter-bootstrap-3/

The Layout


Step 1: Setting up files

Download the Bootstrap 3 files here:

http://getbootstrap.com/getting-started/#download


Step 2: Adding the basic Bootstrap template

http://getbootstrap.com/getting-started

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Notes regarding the basic template:

We have set the initial content-width to the width of the device and scaled it one time only.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 3: Menu Section: adding Navigation

Refer to navbar components outlined here: http://getbootstrap.com/components/#navbar

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
</nav>

navbar-wrapper class is the wrapper to the menu items.
navbar-default gives the background color to the menu and also applies a border to it.
navbar-fixed-top helps to make the menu bar fixed at the top of the page even if we are scrolling. If you don’t want a fixed top menu, then you can remove that class.

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Vacation Rentals</a>
          </div>
 </div>
</nav>

The navbar is divided into two sections:

  1. Navbar header
  2. Navbar content

The container div makes sure that your content is aligned and is also centered on the browser screen.
The navbar-header contains the website branding and hidden triple bars which display only when the webpage is viewed on smaller devices. There’s a link with the class navbar-brand to display the name of the website. The text Toggle navigation is also important for screen reader devices.

Basic navigation using the unordered list tags

<!-- Add the nav links, forms, and other content for toggling -->

          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Top Destinations</a></li>
              <li><a href="#">About Us</a>
                <ul>
                  <li><a href="#">Company Details</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </li>
            </ul>
            <form>
               <input type="text">
               <button type="submit">Submit</button>
            </form>
            <ul>
              <li><a href="#">Book Tickets</a></li>
              <li><a href="#">Reservation</a>
                <ul>
                  <li><a href="#">Cancel</a></li>
                  <li><a href="#">Confirm</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->

navbar-collapse is applied to make the menu touch-compatible and also to change its form for smaller devices.

Add Glyphicons

http://getbootstrap.com/components/#glyphicons

<span class="glyphicon glyphicon-home"></span>

Add class to dropdown (About us and Reservations)

<li class="dropdown">

Add class to dropdown menus (About us and Reservations)

dropdown-menu to place a drop down menu inside the navigation.

<ul class="dropdown-menu">

Add toggle

class="dropdown-toggle" data-toggle="dropdown"

Add caret

<b class="caret"></b>

Move navbar to right (Book Tickets)

navbar-right for pulling it to the right of the navigation bar.

<ul class="nav navbar-nav navbar-right">

Add form elements

<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-default">Submit</button>
            </form>

Code below includes all of elements above

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Vacation Rentals</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Company Details</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </li>
            </ul>
            <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-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> Book Tickets</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Reservation<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Cancel</a></li>
                  <li><a href="#">Confirm</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div>
        </nav>

Step 4: Adding the Header

http://getbootstrap.com/components/#jumbotron

   <div class="container-fluid">
<div class="jumbotron">
    <h1>Best Vacation Rentals</h1>
    <p>Sed placerat fringilla quam et.</p>
    <a class="btn btn-primary btn-lg">Start Now!</a>
</div>
</div>

 Step 5: Adding Content

http://getbootstrap.com/css/#grid-intro

Bootstrap 3 is a grid system with 12 columns and with four different levels of ”responsiveness.” Here’s the grid system documentation, but here’s the breakdown:

  • .col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Use this only when you have a very specific reason to maintain columns on mobile devices.
  • .col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
  • .col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column.
  • .col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.
<div class="container">
          <div class="row">
            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat1.jpg"></a>
              <h3 class="text-center">Type 1</h3>
              <p>Dummy Text..</p>
              <a href="#" class="btn btn-success">Book Now @ $599</a>
            </div>

            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat2.jpg"></a>
              <h3 class="text-center">Type 2</h3>
              <p>Dummy Text..</p>
              <a href="#" class="btn btn-danger">Book Now @ $899</a>
            </div>

            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat3.jpg"></a>
              <h3 class="text-center">Type 3</h3>
              <p>Dummy Text ...</p>
              <a href="#" class="btn btn-info">Book Now @ $699</a>
            </div>
          </div>
        </div>

 Responsive images

http://getbootstrap.com/css/#images

<img class="img-responsive img-circle" src="..."> </a>

Buttons

http://getbootstrap.com/css/#buttons

<class="btn btn-info">

Step 6: Adding the Footer

<footer>
        <div class="container">
        <div class="row">
          <div class="col-md-4">&copy; 2013</div>
          <div class="col-md-4">
            <ul class="nav nav-pills">
              <li class="active"><a href="#">About Us</a></li>
              <li><a href="#">Support 24x7</a></li>
              <li><a href="#">Privacy Policy</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <h3 class="text-right">Vacation Rentals</h3>
          </div>
        </div>
        </div>
      </footer>

nav-pills

http://getbootstrap.com/components/#nav

<ul class="nav nav-pills">

 text-right

class="text-right"

Step 7: Adding Custom CSS

.jumbotron{
	margin-top: 40px;
	background: url("../images/featured.jpg") bottom center no-repeat;
	background-size: cover;
	color: #FFFFFF;
}

.jumbotron h1{
	color: #FFFFFF;
	text-shadow: 0px 0px 5px #888888;
}

footer{
	border-top: 1px dashed #CCCCCC;
	margin: 40px 0px;
	padding: 20px 0px;
}

 

Leave a Reply

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