Scribd
Upload
35 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

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
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