The Complete Magazine on Open Source

BOOTSTRAP: Building an Interactive Tourism Web Page

SHARE
and / 321 0

intractive tourism page template

A well designed, interactive Web page offers satisfaction to the client, user and, above all, to the developer. The authors of this tutorial present an interactive tourism Web page that was created using Bootstrap. The whole process is explained lucidly and the code is all there, so that enthusiasts can wade into it straight away!

Bootstrap is a free and open source HTML5, JS and CSS framework for building well designed, responsive, mobile first websites and Web applications, at very short notice. Besides, the Twitter Bootstrap framework provides a standard and consistent way to render Web pages across browsers and devices (from phones and tablets to desktops). In this article, we explore the fundamentals of this very handy tool, and demonstrate how to create a simple yet interactive tourism Web page using Bootstrap as one of the templates.

Get started with Bootstrap
To get started, one can download the latest Bootstrap version from http://getbootstrap.com, copy it in a folder of your choice or include it from CDN. For the example below, we are going to use CDN, as many users have already downloaded Bootstrap from MaxCDN when visiting other websites. It will be loaded from the cache when they visit our website, resulting in faster website access.

Designing the first page using Bootstrap
The first thing any Web developer needs to do is to create a design for the Web page. Bootstrap provides some predefined website templates, which can be extended, or websites can be built from scratch. The templates or examples can be found in http://getbootstrap.com/getting-started/#examples. Our Web page is divided into four sections using the marketing template provided by Bootstrap:

  1. Navigation bar
  2. Navigation tab and slide show
  3. Content section
  4. Footer

To get started, add HTML5 DOCTYPE. Bootstrap uses HTML5 elements and CSS properties, which require HTML5 DOCTYPE at the beginning of the page.

<!DOCTYPE html>
<html lang=”en”>
Defining <head>:

To build a responsive, mobile first Web page and to ensure proper rendering in any device, add the following line:

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

The next step is to add relevant style sheets and JavaScript files to the head section, as follows:

<link href=”https://maxcdn.bootstrap.com/bootstrap/3.3.2/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” type=”text/css” href=”CSS/custom.css”>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css”>
<link href=”https://maxcdn.bootstrap.com/bootstrap/3.3.2/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script>

Let’s begin with the <Body> section.
We need to first define a fixed navigation bar at the top of the Web page:

<nav class=”navbar navbar-default”> <!—This will be fixed at the top -->
<div class =”container”> <!—see everything as container-->
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span></button>
<a class=”navbar-brand” href=”#Home” style=”margin-top: 0”> <h4><em><strong>Leisurely Getaways</strong></em></h4></a>
</div>
<div id=”navbar” class=”navbar-collapse collapse”>
<form class=”navbar-form navbar-right”>
<div class=”form-group”>
<input type=”text” placeholder=”Email” class=”form-control”></div>
<div class=”form-group”>
<input type=”password” placeholder=”Password” class=”form-control”></div>
<button type=”submit” class=”btn btn-success”>Sign in</button>
<button type=”submit” class=”btn btn-success”>Register</button>
</form>
</div><!--/.navbar-collapse -->
</div> <!-- container closed-->

Adding the navbar-brand class gives the Web page’s name. Following that, there is the form-group div containing the placeholder for the username and password, followed by two form elements—-Sign In and Register, which can be used to navigate to the required pages.

Now, let us add a slide show of pictures as the background for our Web page. The Bootstrap carousel is an interactive slider that is both responsive and flexible enough to contain not just pictures but videos, divs, frames, etc. The code for the carousel is divided into three parts. The first part, which is the ‘DOT indicators’, aims at displaying simple dots in the bottom centre of the images or the content to be displayed. These are meant for manual sliding across the different slides. The second part contains the actual content in the form of div elements. In our case, we have collected a few images that will be shifting around in the background. The last part contains the controls in the form of left and right arrows, also meant for the user to slide across the content.

<div id=”myCarousel” class=”carousel container slide”>
<ol class=”carousel-indicators”> <!-- Dot Indicators -->
<li data-target=”#myCarousel” data-slide-to=”0”></li>
<li data-target=”#myCarousel” data-slide-to=”1” class=”active”></li>
<li data-target=”#myCarousel” data-slide-to=”2”></li></ol>
<div class=”carousel-inner”> <!-- slides -->
<div class=”item”><img src=”images/pic1.jpg” alt=”” /></div>
<div class=” active item”><img src=”images/pic2.jpg” alt=”” /></div>
<div class=”item”><img src=”images/pic3.jpg” alt=”” /></div></div>
<!—Slide Navigation -->
<a class=”left carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span></a>
<a class=”right carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span></a></div>

Bootstrap offers multiple ways of customising the way the carousel is rendered on the browser.
The small JavaScript code snippet shown below makes the carousel more interactive:

<!-- Java Script to set interval timing for images-->
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.carousel’).carousel({interval: 4000});
});
</script>

Apart from this, the carousel plugin also offers several options like intervals, pauses and wraps to showcase your content, which makes the Web page even more dynamic, in terms of features.

Closing with the footer
The last section in our Web page, the footer, is going to contain Help and Terms and Conditions, with text aligned to the centre and the right side:

<footer class=”footer”>
<div class=”span4 text-center”>
<p> <a href=”#”>Help</a> &nbsp <a href=”#”> Terms & Conditions</a> &nbsp © Leisurely Getaways 2014</p>
</div></footer>
<div class=”span4 text-right”>
<p> Powered by Twitter Bootstrap 3.3.2</p></div>

You can download the entire source code of this Web page from https://github.com/VinayPatkar/Tourist_Bootstrap.git. It contains custom.css and index.html files.
As we are done creating a basic Web page using Bootstrap, it’s time to now dive deeper into it and explore its more advanced features. For more learning, refer to the links given under ‘References’.

References
[1] http://getbootstrap.com/examples/carousel/
[2] http://getbootstrap.com/components/#dropdowns
[3] https://wrapbootstrap.com/