Web Application Development
Bootstrap
Outline
• Concepts of Bootstrap
• Installing Bootstrap
• Using Bootstrap
• Developing Websites with Bootstrap
2
Introduction
• Bootstrap is a front-end framework for
fast and easy web development
• Bootstrap is currently the most popular
HTML/CSS/JavaScript framework for
developing responsive websites
• Bootstrap is compatible with all modern
web browsers such as Chrome, Firefox,
Safari, Internet Explorer, and Opera
3
Installing Bootstrap
• Bootstrap can be installed using off-line method
or on-line method
• In off-line method, bootstrap is downloaded
from [Link] and is added to the
HTML <link> and <script> tags:
<head>
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
<script src="[Link]"></script>
</head>
• In on-line method, bootstrap is included from a
Content Delivery Network (CDN)
4
Installing Bootstrap
• Example of bootstrap provided by MaxCDN:
<head>
<link rel=“stylesheet”
href=“[Link]
css/[Link]">
</link>
<script src="[Link]
3.3.7/js/[Link]">
</script>
</head>
5
Using Bootstrap
• Bootstrap is used on top of HTML/CSS/
JavaScript/jQuery
• Bootstrap functions and styling are called by
declaring the appropriate “Bootstrap class” to
the HTML element. The syntax is similar to CSS
syntax
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>Some text here</p>
</div>
6
Using Bootstrap
<div class="jumbotron text-center"> <div class="container">
<h1> <div class="row">
My First Bootstrap Page <div class="col-sm-4">
</h1> <h3>Column 1</h3>
<p> <p>Some text here</p>
My First Bootstrap Page </div>
</p> <div class="col-sm-4">
</div> <h3>Column 2</h3>
<p>Some text here</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Some text here</p>
</div>
</div>
</div>
7
Using Bootstrap
8
Developing Websites with Bootstrap
• Step 1: identify type of website and
understand required functions of the
website
• Step 2: choose and download a bootstrap
theme from existing repositories. For
example:
• [Link]
• [Link]
• Step 3: customize downloaded bootstrap
theme to meet the required functions of the
website
9
Demonstrating Example
• Topic: design and develop a personal
website for freelancer
• Step 1: type of website: personal blog
• Core information:
• Personal information
• Working experiences
• Skills
• Languages
10
Demonstrating Example
• Step 2: choose and download bootstrap
theme from [Link]
• Example of a downloaded theme link:
[Link]
startbootstrap-freelancer/
11
Demonstrating Example
Example of a downloaded bootstrap theme
12
Demonstrating Example
• Step 3: customize downloaded theme using
HTML/CSS/JavaScript/jQuery/Bootstrap
• Examples of customizable parts:
• Modify navigation bar
• Modify the header
• Modify the body sections
• Modify the footer
• etc.
13
Demonstrating Example
Example of customized navigation bar and header
14
Demonstrating Example
• Examples of customized navigation bar:
• From “START BOOTSTRAP” to “HELEN COOPER”
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top
navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i
class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Helen Cooper</
a>
</div>
15
Demonstrating Example
• Examples of customized header:
• The change of profile image and job information
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive img-circle" src="img/
[Link]" alt="">
<div class="intro-text">
<h1>Helen Cooper</h1>
<hr class="star-light">
<span class="skills">Web Developer and Web
Designer</span>
16
17
