Scribd
Upload
49 views17 pages

Web Application Development: Bootstrap

Bootstrap is a front-end framework for developing responsive websites. It allows fast and easy development through predefined CSS and HTML classes. Bootstrap can be installed by directly linking files or via a content delivery network. Websites are developed with Bootstrap by applying appropriate classes to HTML elements. An example is provided of customizing a downloaded Bootstrap theme to build a personal website for a freelancer.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views17 pages

Web Application Development: Bootstrap

Bootstrap is a front-end framework for developing responsive websites. It allows fast and easy development through predefined CSS and HTML classes. Bootstrap can be installed by directly linking files or via a content delivery network. Websites are developed with Bootstrap by applying appropriate classes to HTML elements. An example is provided of customizing a downloaded Bootstrap theme to build a personal website for a freelancer.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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 getbootstrap.com and is added to the
HTML <link> and <script> tags:
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.1.0.min.js"></script>

<script src="bootstrap.min.js"></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=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css">
</link>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/bootstrap.min.js">
</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:
• https://startbootstrap.com
• https://www.bootstrapzero.com
• 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 https://startbootstrap.com

• Example of a downloaded theme link:


https://blackrockdigital.github.io/
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/
helen.jpg" alt="">
<div class="intro-text">
<h1>Helen Cooper</h1>
<hr class="star-light">
<span class="skills">Web Developer and Web
Designer</span>

16
17

You might also like