AdWeb Module5 Programs

Module 5 [18MCA42] Advanced Web Programming
Module – 5 Programs
Introduction to Bootstrap
Example 1 : blockquote.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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million
globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
</body>
</html>
Output:
ROOPA.H.M, DeptofMCA, RNSIT Page 1

Example 2 : Container.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Set Background and Borders to Bootstrap 4 Containers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container bg-dark text-white border py-3 my-3">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>


<div class="container bg-light py-3 my-3">
</div>


<div class="container border py-3 my-3">
</div>
<p class="m-3"><strong>Note:</strong> The classes ".py-3", and ".my-3" are <a href="/twitter-bootstrap-
tutorial/bootstrap-helper-classes.php" target="_top">spacing utility classes</a> to add padding, and margin of 1rem
to the top and bottom sides of the element, respectively.</p>
</body>
</html>

Example 3: code.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Instead of always using divs, in HTML5, you can use new elements like
<code><section></code>, <code><header></code>, and
<code><footer></code>. The html should look something like this:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
</div>
</body>
</html>

Example 4: emphasis_classs.html
<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
crossorigin="anonymous">


<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-
aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</head>
<body>
<p class="muted">This content is muted</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-error">This content carries an error class</p>
<p class="text-info">This content carries an info class</p>
<p class="text-success">This content carries a success class</p>
<p>This content has <em>emphasis</em>, and can be <strong>bold</strong></p>
<abbr title="Real Simple Syndication">RSS</abbr>
</div>
</body>
</html>

Example 5: heading.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<p>When is applied to <em>body text</em>, <small> the font shrinks to 85% of
its original size.</small></p>
</div>
</body>
</html>

Example 6: Inline_form.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form>
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn btn-primary ">Sign in</button>
<textarea rows="8"></textarea>
<input type="text" placeholder="Text input" class="text-active">
</form>
</body>
</html>

Example 7: lead.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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 <strong>regular paragraph.</strong></p>
</div>
</body>
</html>

Example 7: table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Simple Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<table class=" table table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

AdWeb Module5 Programs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AdWeb Module5 Programs

Uploaded by

Copyright:

Available Formats

Module 5 [18MCA42] Advanced Web Programming

ROOPA.H.M, DeptofMCA, RNSIT Page 1

ROOPA.H.M, DeptofMCA, RNSIT Page 2

ROOPA.H.M, DeptofMCA, RNSIT Page 3

ROOPA.H.M, DeptofMCA, RNSIT Page 4

ROOPA.H.M, DeptofMCA, RNSIT Page 5

ROOPA.H.M, DeptofMCA, RNSIT Page 6

ROOPA.H.M, DeptofMCA, RNSIT Page 7

ROOPA.H.M, DeptofMCA, RNSIT Page 8

ROOPA.H.M, DeptofMCA, RNSIT Page 9

You might also like