Scribd
Upload
2 views

Section 2_Unit 1 Bootstrap

Responsive web design allows websites to adapt to various devices, and Bootstrap is a popular free framework that facilitates this process. It provides design templates and components for creating responsive layouts, including grid systems and buttons. Users can either download Bootstrap or include it via a CDN to start building their web pages.

Uploaded by

harmitkachhadiya210
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
2 views

Section 2_Unit 1 Bootstrap

Responsive web design allows websites to adapt to various devices, and Bootstrap is a popular free framework that facilitates this process. It provides design templates and components for creating responsive layouts, including grid systems and buttons. Users can either download Bootstrap or include it via a CDN to start building their web pages.

Uploaded by

harmitkachhadiya210
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/ 55

What is Responsive Web Design?

• Responsive web design is about creating web sites which


automatically adjust themselves to look good on all devices, from
small phones to large desktops.
• Bootstrap is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites.
• Bootstrap is completely free to download and use!
What is Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web
development
• Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs
Where to Get Bootstrap?
• There are two ways to start using Bootstrap on your own web site.

• Download Bootstrap from getbootstrap.com


• If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.

• Include Bootstrap from a CDN


• If you don't want to download and host Bootstrap yourself, you can
include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript.
You must also include jQuery.
Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scr
ipt>
Create First Web Page With Bootstrap
1. Add the HTML5 doctype
• Bootstrap uses HTML elements and CSS properties that require
the HTML5 doctype.
• Always include the HTML5 doctype at the beginning of the
page, along with the lang attribute and the correct character
set:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
• Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles
are part of the core framework.
• To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:

❑<meta name="viewport" content="width=device-width,


initial-scale=1">

• The width=device-width part sets the width of the page to follow the screen-
width of the device (which will vary depending on the device).

• The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.
3. Containers

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

The .container class provides a responsive fixed width container

The .container-fluid class provides a full width container, spanning the entire
width of the viewport
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Grid Classes
❑The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)


• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px
wide)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:grey;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:pink;">.col-sm-4</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:pink;">.col-sm-8</div>
</div>
</div>
</body>
</html>
Bootstrap Tables
Buttons
• There are different types of buttons:
• Black-level Button:
<body>
<div class="container">
<h2>Button</h2>
<button type="button" class="btn btn-info btn-block">Block-level Button</button>
</div>
</body>
<body>
• Nav:
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Bootstrap Themes
• Bootstrap themes are fully designed products that use custom CSS to
create a uniquely styled end product.

• With themes, we’ve made most, if not all, of the design decisions
upfront, so the product is ready to modify with your own content and
publish.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.bg-1 {
background-color: #1abc9c;
color: #ffffff;
}
</style>
</head>
<body>
<div class="bg-1">
<div class="container text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird" width="350" height="350">
<h3>I'm an adventurer</h3>
</div>
</div>
</body>
</html>
Bootstrap CSS
• The most popular CSS framework for developing responsive and
mobile-first websites is Bootstrap.
• There are different types of CSS:
• Typography
• Button
• Form
• Images
• Tables
• Dropdown
• NAVs
Typography
• Bootstrap's global default font-size is 14px, with a line-height of 1.428.
• The classes below is used to style the elements further.
1) <h1> - <h6>: h1-h6 Heading
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>h1 Bootstrap heading <small>(36px)</small></h1>
<h2>h2 Bootstrap heading <small>(30px)</small></h2>
<h3>h3 Bootstrap heading <small>(24px)</small></h3>
<h4>h4 Bootstrap heading <small>(18px)</small></h4>
<h5>h5 Bootstrap heading <small>(14px)</small></h5>
<h6>h6 Bootstrap heading <small>(12px)</small></h6>
</div>
</body>
</html>
2) .lead: Makes a text stand out: Stand out text
<body>
<div class="container">
<h2>Typography</h2>
<p>Use the .lead class to make a paragraph "stand out":</p>
<p class="lead">This paragraph stands out.</p>
<p>This is a regular paragraph.</p>
</div>
</body>
2) <mark> or .mark : Highlights text: Highlighted text
• Form:
• Individual form controls automatically receive some global styling with
Bootstrap.
• All textual <input>, <textarea>, and <select> elements with class="form-
control" are set to width: 100%; by default. (Make responsive)
• Standard rules for all three form layouts:
• Wrap labels and form controls in <div class="form-group"> (needed for
optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, <select> elements.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy