Lecture Notes Of Class 1:
Introduction to Bootstrap
Overview
of Bootstrap
Bootstrap
is a free, open-source front-end framework used to create responsive and
mobile-first websites. It provides ready-to-use components, such as buttons,
navigation bars, forms, and other UI elements, along with a grid system that
helps organize the layout of your webpage. The goal of Bootstrap is to make web
development easier and faster by providing a set of tools that are designed to
be easy to use, customizable, and responsive across different devices (phones,
tablets, desktops, etc.).
Bootstrap
was initially developed by Mark Otto and Jacob Thornton at Twitter in 2011 and
has since grown to be one of the most popular front-end frameworks.
Advantages
of Bootstrap
Here are
some key benefits of using Bootstrap:
1.
Responsiveness: Bootstrap’s grid system allows the layout of a webpage to
adjust automatically to fit different screen sizes. This makes it easy to build
websites that work well on desktops, tablets, and mobile devices.
2.
Pre-designed Components: Bootstrap provides a wide range of
pre-designed components, such as buttons, navigation bars, forms, modals,
tables, and alerts, which can be easily integrated into your webpage. This
saves a lot of time in development.
3.
Customizable: Although Bootstrap provides default styles and components,
it can be customized to fit the needs of your project. You can override default
styles using your custom CSS or change variables in the Bootstrap framework
itself.
4.
Cross-browser Compatibility: Bootstrap is designed to work
consistently across all modern web browsers, including Chrome, Firefox, Safari,
and Internet Explorer.
5.
Easy to Use: The framework is easy to use, and even beginners can start
building responsive websites quickly by including the necessary Bootstrap files
in their project.
6.
Consistent Design: With Bootstrap, all components follow a consistent design
pattern, which ensures that your webpage looks neat and professional.
Installation
Methods of Bootstrap
There are
two main ways to install Bootstrap in your project:
1. Using
CDN (Content Delivery Network)
A CDN is
an external service that hosts Bootstrap files on a server. Using a CDN for
Bootstrap installation is quick and easy because you don’t need to download or
host any files locally. You simply include links to the hosted files in your
HTML.
- Advantages of using CDN:
- No
need to download Bootstrap files.
- It
reduces the size of your project by not storing files locally.
- It
can improve loading speed if the user has already visited other websites
using the same CDN.
To use
Bootstrap via CDN, you just need to add a few <link>
and <script>
tags to your HTML file.
Example:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <!-- Link to Bootstrap CSS file from CDN --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head><body> <h1>Welcome to Bootstrap</h1> <!-- Include Bootstrap JavaScript file from CDN --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script></body></html>
In this
example, we use a link to Bootstrap's CSS file in the <head> section of
the HTML and a script tag to include the Bootstrap JavaScript file at the end
of the <body>
section.
2. Using
Local Files
You can
download the Bootstrap files and host them locally in your project. This method
gives you more control over the files and allows you to modify or customize
Bootstrap’s source code.
- Advantages of using local files:
- Full
control over the files.
- No
dependency on an internet connection.
- Can
customize or extend the framework without relying on external services.
To
install Bootstrap locally:
1.
Visit the Bootstrap official website
and download the latest version of Bootstrap.
2.
Extract the downloaded files and copy
the css and js folders into your project
directory.
3.
Link to the local files in your HTML
file:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <!-- Link to local Bootstrap CSS file --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head><body> <h1>Welcome to Bootstrap</h1> <!-- Include local Bootstrap JavaScript file --> <script src="js/bootstrap.bundle.min.js"></script></body></html>
In this
case, css/bootstrap.min.css
and js/bootstrap.bundle.min.js
are the local paths to the downloaded Bootstrap files.
Lab Tasks
Task 1:
Set up a basic HTML page with Bootstrap using a CDN
In this
task, you will create a basic HTML page and include Bootstrap from a CDN.
1.
Create a new HTML file:
o Open
your text editor and create a new file named index.html.
2.
Add the Bootstrap CDN links:
o Inside
the <head> section,
include the link to the Bootstrap CSS file from the CDN.
o Inside
the <body> section,
add the script tag to include the Bootstrap JavaScript file.
Example:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Introduction</title> <!-- Bootstrap CDN --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <h1>Bootstrap Page</h1> <!-- Bootstrap CDN for JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script></body></html>
3.
Save the file and open it in your browser:
o Save
the index.html file and
open it in your browser to see a page styled with Bootstrap.
Task 2:
Add a Simple Header with Bootstrap Styling
In this
task, you will add a styled header to your HTML page using Bootstrap
components.
1.
Add a Navigation Bar (Header):
o Inside
the <body> section
of your HTML, add the following Bootstrap code to create a simple navigation
bar (header):
html<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div></nav>
This code
creates a responsive navigation bar that collapses into a hamburger menu on
smaller screens. The navbar-light
bg-light classes style the navbar with a light background.
2.
Save and Check in Browser:
o After
adding the navbar code, save the index.html
file again and refresh the browser to see the updated page with the styled
header.
Summary
- Bootstrap
is a powerful front-end framework that helps in designing responsive,
mobile-first websites quickly and efficiently.
- You
can include Bootstrap in your project either by using a CDN
or by hosting it locally.
- Bootstrap
provides pre-designed components like buttons, forms, and
navigation bars to make it easier to create polished webpages.
- In
this class, you learned how to set up Bootstrap with a CDN and add a
simple header using Bootstrap's
navbarcomponent.
Homework/Practice
- Modify
the navigation bar to include more links and try customizing its
appearance using Bootstrap's utility classes.
- Experiment with other Bootstrap components such as buttons, cards, and alerts to get familiar with the framework.
No comments:
Post a Comment