Scribd
Upload
29 views

Web Technologies Week 05-06 (Bootstrap and JavaScript)

This document provides an introduction to Bootstrap and JavaScript for a university course. It includes: 1) A recap of previous lessons on CSS. 2) An overview of what Bootstrap is, its advantages like responsive design and consistent styles, and how to add Bootstrap to a project. 3) A review of basic Bootstrap features like margin, padding, color, background, and border classes to style elements. 4) An introduction to JavaScript and how it works with web pages.

Uploaded by

Imran Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Web Technologies Week 05-06 (Bootstrap and JavaScript)

This document provides an introduction to Bootstrap and JavaScript for a university course. It includes: 1) A recap of previous lessons on CSS. 2) An overview of what Bootstrap is, its advantages like responsive design and consistent styles, and how to add Bootstrap to a project. 3) A review of basic Bootstrap features like margin, padding, color, background, and border classes to style elements. 4) An introduction to JavaScript and how it works with web pages.

Uploaded by

Imran Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 47

Web Technologies (CSC336)

Week 05-06
Introduction to Bootstrap & JavaScript

MIAN MUHAMMAD TALHA


LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH
CAMPUS
Layout
01 Recap of Week 03-04

02 What is Bootstrap?

03 Basic Features of Bootstrap


04 Self Learning Task (Lab)
05 What is JavaScript?

06 How JavaScript works with Web Structure?


07 Self Learning Task (Lab)

Prepared by Mian Muhammad Talha 2


01.

Recap of
Week
03-04
Prepared by Mian Muhammad Talha 3
Previous Week

• CSS, is a simple design language intended to simplify the process of


making web pages presentable. A style rule is made of three parts −
selector { property: value }

• Types of Selectors, Universal, ID, Class, Grouping …….

• Inline , Internal and External CSS

• CSS Comments, Div, Flexbox, Grid ……

Prepared by Mian Muhammad Talha 4


What is
Bootstrap?

Prepared by Mian Muhammad Talha 5


What is Bootstrap?

• Bootstrap is a powerful front-end framework for faster and easier


web development.

• Bootstrap gives you ability to create flexible and responsive web


layouts with much less efforts.

• Due to the complexities of CSS, developers introduced Bootstrap as a


solution for streamlined and efficient front-end development.

Prepared by Mian Muhammad Talha 6


Advantages of Bootstrap?
• Responsive features — Using Bootstrap you can easily create responsive
websites that appear more appropriately on different devices and screen
resolutions without any change in markup.

• Consistent design — All Bootstrap components share the same design


templates and styles through a central library, so the design and layout of
your web pages will be consistent.

• Compatible with browsers — Bootstrap is created with modern web


browsers in mind and it is compatible with all modern browsers such as
Chrome, Firefox, Safari, Internet Explorer, etc.

• Open Source — And the best part is, it is completely free to download
and use.
Prepared by Mian Muhammad Talha 7
How to Add Bootstrap?
You can use Bootstrap without downloading it by utilizing a content delivery
network (CDN). A CDN hosts the Bootstrap files on their servers, allowing
you to include them in your HTML directly from the CDN.

Link Bootstrap Files:


Add the following code to the <head> section of your HTML document.
Place these links before your custom CSS or JavaScript files.
<!-- Link to Bootstrap CSS via CDN -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Optional: Link to Bootstrap JavaScript and jQuery via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Prepared by Mian Muhammad Talha 8
Prepared by Mian Muhammad Talha 9
Basic
Features of
Bootstrap

Prepared by Mian Muhammad Talha 10


Bootstrap Helper Classes
Margin
Classes
This is a Bootstrap utility class that sets margin spacing on an element.
The m stands for "margin," and the # represents a specific spacing value.
In this case, m-4 applies a margin spacing of medium size (4 units) to
the element.
m-0 has no margin (0 units).
m-1 applies a small margin (0.25rem or about 4 pixels).
m-2 applies a medium margin (0.5rem or about 8 pixels).
m-3 applies a large margin (1rem or about 16 pixels).
m-4 applies an extra-large margin (1.5rem or about 24
pixels).
m-5 applies a huge margin (3rem or about 48 pixels).

Prepared by Mian Muhammad Talha 11


Bootstrap Helper Classes
Padding
Classes
Padding is the space between the content of an element and its borders.
Similar to margin classes, Bootstrap's padding classes are designed to
provide consistent and easily applicable spacing to your elements.

p-0: No padding.
p-1: Small padding (0.25rem or about 4 pixels).
p-2: Medium padding (0.5rem or about 8 pixels).
p-3: Large padding (1rem or about 16 pixels).
p-4: Extra-large padding (1.5rem or about 24 pixels).
p-5: Huge padding (3rem or about 48 pixels).

Prepared by Mian Muhammad Talha 12


Margin & Padding Classes

<div>
<div class="border border-dark m-0">m-0</div>
<div class="border border-dark p-1">p-1</div>
<div class="border border-dark m-2">m-2</div>
<div class="border border-dark p-3">p-3</div>
<div class="border border-dark m-4">m-4</div>
<div class="border border-dark m-5 p-5">m-5
p-5</div>
<div class="border border-dark m-3 p-4">
This is a content block with medium padding.
</div>
</div>

Prepared by Mian Muhammad Talha 13


Bootstrap Helper Classes
Color Classes
You can use the contextual color classes to emphasize the text and
convey meaning through color. Here's the complete list of available
contextual color classes.
<div class="m-4">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
</div>
Prepared by Mian Muhammad Talha 14
Color Classes

Prepared by Mian Muhammad Talha 15


Bootstrap Helper Classes
Background Color
Classes
Similar to the contextual color classes, you can use the contextual
background color classes to set the background-color of an element to
apply extra emphasis on them.
<div class="m-4">
<div class="p-3 mb-2 bg-primary
text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-
secondary</div>
<div class="p-3 mb-2 bg-success
text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger
text-white">.bg-danger</div>
Prepared by Mian Muhammad Talha <div class="p-3 mb-2 bg-warning 16
Background Color Classes

Prepared by Mian Muhammad Talha 17


Bootstrap Helper Classes
Border Classes
You can use the border utility classes to quickly style the border and
border-radius of an element. They are very useful for images, buttons, or
any other element.
<div class="bs-example">
<span class="border
border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border
border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
Prepared by Mian Muhammad Talha 18
Border Classes

Prepared by Mian Muhammad Talha 19


Bootstrap Helper Classes
Text Alignment Classes
You can use these text alignment classes to align and format your text
content.
<div class="m-4">
<h2>Text alignment</h2>
<p class="text-start">Left aligned text on all viewport
sizes.</p>
<p class="text-center">Center aligned text on all viewport
sizes.</p>
<p class="text-right">Right aligned text on all viewport
sizes.</p> </div>

Prepared by Mian Muhammad Talha 20


Text Alignment Classes

Prepared by Mian Muhammad Talha 21


Bootstrap Helper Classes

Spacing Classes
You can use the spacing utility classes to quickly adjust the margin and
padding of an element.

The # character in the classes .mt-#, .pt-#, etc. represents the size of the
margin or padding. The value of the size can be an integer from 0 to 5,
or auto.
<div class="bs-example">
<div class="mt-0">.mt-0</div>
<div class="mt-1">.mt-1</div>
<div class="mt-2">.mt-2</div>
<div class="mt-3">.mt-3</div>
<div class="mt-4">.mt-4</div>
</div>
Prepared by Mian Muhammad Talha 22
Spacing Classes

Prepared by Mian Muhammad Talha 23


Containers with Bootstrap

Containers are the most basic layout element in Bootstrap and are required
when using the grid system. Containers are basically used to wrap content
with some padding. They are also used to align the content horizontally
center on the page in case of fixed width layout.

Bootstrap provides three different types containers:

• .container, which has a max-width at each responsive breakpoint.


• .container-fluid, which has 100% width at all breakpoints.
• .container-{breakpoint}, which has 100% width until the specified
breakpoint.

Prepared by Mian Muhammad Talha 24


Containers with Bootstrap

Prepared by Mian Muhammad Talha 25


Bootstrap Grid System

• Bootstrap grid system provides an easy and powerful way to create


responsive layouts of all shapes and sizes.
• It is built with flexbox with mobile-first approach.
• It is fully responsive and uses twelve column system (12 columns
available per row) and six default responsive tiers.

Prepared by Mian Muhammad Talha 26


Bootstrap Grid System

Prepared by Mian Muhammad Talha 27


Self
Learning
Task (Lab)
Prepared by Mian Muhammad Talha 28
Self Learning Task (Lab)

Explore Bootstrap
Bootstrap is an extensive framework.
While we've touched on its fundamental
concepts so far, there's a wealth of other
features to discover. I encourage you to
delve into additional components like
tables, forms, buttons, and navigation
bars.

Prepared by Mian Muhammad Talha 29


What is
JavaScript?

Prepared by Mian Muhammad Talha 30


What is JavaScript?

• High-level, versatile scripting language.

• Used for web development and interactivity.

• Runs in browser, enhances user experience.

• Dynamic typing, supports both front-end, back-end.

• Manipulates HTML, CSS for responsive design.

Prepared by Mian Muhammad Talha 31


What is JavaScript?

• While HTML is responsible for structuring the content and CSS


for styling, JavaScript enhances user experience by making
websites responsive, interactive, and functional.

• A basic JavaScript program consists of lines of code that are


executed sequentially. Here's an example of a simple "Hello,
World!" program in JavaScript:

console.log( “Hello, World!” );

Prepared by Mian Muhammad Talha 32


Variables and Data Types
Declaring
•
Variables
var: used to declare variables globally or within a function scope.
It has some peculiar behaviors that can lead to unintended results,
so it's less commonly used nowadays.

• let: Introduced in modern JavaScript, it allows you to declare


variables with block scope (limited to the block of code where
they are defined). It's a better choice for most scenarios.

• const: Also has block scope like let, but it declares a variable that
cannot be reassigned after its initial value is assigned. It's used for
constants.
Prepared by Mian Muhammad Talha 33
Variables and Data Types
Data
•
Types
Strings: Used to represent text. Enclosed in single (' ') or
double (" ") quotes.

• Numbers: Used for numeric values. Can be integers or


decimals.

• Booleans: Represents either true or false values, used in


logical operations and comparisons.

Prepared by Mian Muhammad Talha 34


Type Coercion and Conversion
JavaScript automatically converts one type to another in certain
operations which is called Coercion.
let num = 10;
let str = "5";
console.log(num + str); // Output: "105" (coerced string)
To ensure correct operations, it's a good practice to explicitly
convert between types when needed:

let num = 10;


let str = "5";
let sum = num + Number(str); // Convert str to a number
console.log(sum); // Output: 15
Prepared by Mian Muhammad Talha 35
Common Programming Concepts

Operators and
Expressions Control Flow and Conditionals
let x = 10; let hour = 14;
let y = 5; if (hour < 12) {
console.log(x + y); // Output: 15 console.log("Good morning!");
console.log(`Sum: ${x + y}`); } else if (hour < 18) {
console.log("Good
Loops and Iteration afternoon!");
} else {
for (let i = 0; i < 5; i++) {
console.log("Good evening!");
console.log(`Iteration ${i}`);
}
}

Prepared by Mian Muhammad Talha 36


Common Programming Concepts

Functions Objects
function greet(name) { let person = {
return `Hello, ${name}!`; firstName: "Alice",
} lastName: "Johnson",
console.log(greet("Bob")); age: 30,
greet: function() {
Arrays return `Hello, $
{this.firstName}!`;
let colors = ["red", "green", "blue"];
}
colors.push("yellow");
};
console.log(colors);
console.log(person.greet());

Prepared by Mian Muhammad Talha 37


How JavaScript
works with Web
Structure?
Prepared by Mian Muhammad Talha 38
Where?

• In HTML, JavaScript code is inserted between <script> and


</script> tags.

• Scripts can be placed in the <body>, or in the <head> section


of an HTML page, or in both.

• Scripts can also be placed in external files:

Prepared by Mian Muhammad Talha 39


How ?
• To access an HTML element, JavaScript can use the
document.getElementById (id) method.

• The id attribute defines the HTML element. The innerHTML


property defines the HTML content

Prepared by Mian Muhammad Talha 40


Turn On the Bulb

Prepared by Mian Muhammad Talha 41


Common JavaScript Methods

Here's a table that lists some commonly used methods of


JavaScript in the context of HTML, CSS, and web development.
Method Name Syntax in JavaScript Purpose
innerHTML element.innerHTML = content Sets or retrieves the
HTML content within an
element.
document.write document.write(content)` Writes content directly to
the HTML document.
Used for testing and
simple demos
window.alert window.alert(message)` Displays an alert dialog
with a message to the user.
Prepared by Mian Muhammad Talha 42
Common JavaScript Methods

Method Syntax in JavaScript Purpose


Name
window.prom window.prompt(message, Displays a dialog box for
pt defaultValue) user input. Used for
simple input gathering.
window.confir window.confirm(message) Displays a confirmation
m dialog with OK and
Cancel buttons.
window.open window.open(url, windowName, Opens a new browser
features) window or tab with
specified URL and
options.
window.close window.close() Closes the current
browser window or tab (if
Prepared by Mian Muhammad Talha allowed). 43
Common JavaScript Methods

Method Name Syntax in JavaScript Purpose


window.scrollTo window.scrollTo(x, y) Scrolls the window to a
specific position on the
page.
window.location window.location.href = Manages the current URL
newURL and performs navigation.
String.prototype.leng “Hello".length Returns the length of a
th string.
String.prototype.inde "Hello".indexOf("lo") Returns the index of the
xOf first occurrence of a
substring.
String.prototype.slice "Hello".slice(1, 3)` Extracts a portion of a
string.
String.prototype.repl
Prepared by Mian Muhammad Talha "Hello".replace("H", "J") Replaces a substring with 44
Common JavaScript Methods

Method Name Syntax in Purpose


JavaScript
String.prototype.toUpper `"hello".toUpperCase Converts a string to
Case () uppercase.
String.prototype.toLower `"Hello".toLowerCas Converts a string to
Case e() lowercase.
String.prototype.trim “Hello".trim()` Removes whitespace from
the beginning and end of
a string.

Prepared by Mian Muhammad Talha 45


Self
Learning
Task (Lab)
Prepared by Mian Muhammad Talha 46
Self Learning Task (Lab)

Explore JavaScript
JavaScript offers many possibilities. We've
covered the basics, but there's a lot more
to learn. You might want to explore tasks
like changing colors, showing alerts,
making pop-up boxes, and updating
content when you click a button.

Prepared by Mian Muhammad Talha 47

You might also like