Skip to content

Commit de9c9bd

Browse files
sarwansinghsarwansingh
committed
update
1 parent b13583e commit de9c9bd

File tree

13 files changed

+516
-0
lines changed

13 files changed

+516
-0
lines changed

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/New Text Document.txt‎

Whitespace-only changes.

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/grid2-notequal_test.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Bootstrap 4 Two Column Grid Layouts for Tablets and Desktops</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12+
<style>
13+
/* Some custom styles to beautify this example */
14+
.demo-content{
15+
padding: 15px;
16+
font-size: 18px;
17+
background: #dbdfe5;
18+
margin-bottom: 15px;
19+
}
20+
.demo-content.bg-alt{
21+
background: #abb1b8;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
27+
<div class="text-center">Example of Bootstrap columns .</div>
28+
<div class="container mt-3">
29+
<!--Row with two equal columns-->
30+
<div class="row">
31+
<div class="col-md-6">
32+
<div class="demo-content">.col-md-6</div>
33+
</div>
34+
<div class="col-md-6">
35+
<div class="demo-content bg-alt">.col-md-6</div>
36+
</div>
37+
</div>
38+
39+
<!--Row with two columns divided in 1:2 ratio-->
40+
<div class="row">
41+
<div class="col-md-4">
42+
<div class="demo-content">.col-md-4</div>
43+
</div>
44+
<div class="col-md-8">
45+
<div class="demo-content bg-alt">.col-md-8</div>
46+
</div>
47+
</div>
48+
49+
<!--Row with two columns divided in 1:3 ratio-->
50+
<div class="row">
51+
<div class="col-md-3">
52+
<div class="demo-content">.col-md-3</div>
53+
</div>
54+
<div class="col-md-9">
55+
<div class="demo-content bg-alt">.col-md-9</div>
56+
</div>
57+
</div>
58+
59+
<div class="row">
60+
<div class="col-md-2">
61+
<div class="demo-content">.col-md-2</div>
62+
</div>
63+
<div class="col-md-5">
64+
<div class="demo-content bg-alt">.col-md-5</div>
65+
</div>
66+
<div class="col-md-5">
67+
<div class="demo-content">.col-md-5</div>
68+
</div>
69+
</div>
70+
</div>
71+
</body>
72+
</html>

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/layout-fixed.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Bootstrap 4 Fixed Layout Example</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12+
</head>
13+
<body>
14+
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
15+
<div class="container">
16+
<a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
17+
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarCollapse">
21+
<div class="navbar-nav">
22+
<a href="#" class="nav-item nav-link active">Home</a>
23+
<a href="#" class="nav-item nav-link">Services</a>
24+
<a href="#" class="nav-item nav-link">About</a>
25+
<a href="#" class="nav-item nav-link">Contact</a>
26+
</div>
27+
<div class="navbar-nav ml-auto">
28+
<a href="#" class="nav-item nav-link">Register</a>
29+
<a href="#" class="nav-item nav-link">Login</a>
30+
</div>
31+
</div>
32+
</div>
33+
</nav>
34+
<div class="container">
35+
<div class="jumbotron">
36+
<h1>Learn to Create Websites</h1>
37+
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
38+
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
39+
</div>
40+
<div class="row">
41+
<div class="col-md-4">
42+
<h2>HTML</h2>
43+
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
44+
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
45+
</div>
46+
<div class="col-md-4">
47+
<h2>CSS</h2>
48+
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
49+
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
50+
</div>
51+
<div class="col-md-4">
52+
<h2>Bootstrap</h2>
53+
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
54+
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
55+
</div>
56+
</div>
57+
<hr>
58+
<footer>
59+
<div class="row">
60+
<div class="col-md-6">
61+
<p>Copyright &copy; 2019 Tutorial Republic</p>
62+
</div>
63+
<div class="col-md-6 text-md-right">
64+
<a href="#" class="text-dark">Terms of Use</a>
65+
<span class="text-muted mx-2">|</span>
66+
<a href="#" class="text-dark">Privacy Policy</a>
67+
</div>
68+
</div>
69+
</footer>
70+
</div>
71+
</body>
72+
</html>

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/layout-fluid.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Bootstrap 4 Fluid Layout Example</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12+
</head>
13+
<body>
14+
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
15+
<div class="container-fluid">
16+
<a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
17+
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarCollapse">
21+
<div class="navbar-nav">
22+
<a href="#" class="nav-item nav-link active">Home</a>
23+
<a href="#" class="nav-item nav-link">Services</a>
24+
<a href="#" class="nav-item nav-link">About</a>
25+
<a href="#" class="nav-item nav-link">Contact</a>
26+
</div>
27+
<div class="navbar-nav ml-auto">
28+
<a href="#" class="nav-item nav-link">Register</a>
29+
<a href="#" class="nav-item nav-link">Login</a>
30+
</div>
31+
</div>
32+
</div>
33+
</nav>
34+
<div class="container-fluid">
35+
<div class="jumbotron">
36+
<h1>Learn to Create Websites</h1>
37+
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
38+
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
39+
</div>
40+
<div class="row">
41+
<div class="col-md-4">
42+
<h2>HTML</h2>
43+
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
44+
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
45+
</div>
46+
<div class="col-md-4">
47+
<h2>CSS</h2>
48+
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
49+
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
50+
</div>
51+
<div class="col-md-4">
52+
<h2>Bootstrap</h2>
53+
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
54+
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
55+
</div>
56+
</div>
57+
<hr>
58+
<footer>
59+
<div class="row">
60+
<div class="col-md-6">
61+
<p>Copyright &copy; 2019 Tutorial Republic</p>
62+
</div>
63+
<div class="col-md-6 text-md-right">
64+
<a href="#" class="text-dark">Terms of Use</a>
65+
<span class="text-muted mx-2">|</span>
66+
<a href="#" class="text-dark">Privacy Policy</a>
67+
</div>
68+
</div>
69+
</footer>
70+
</div>
71+
</body>
72+
</html>

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/layout-responsive.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Bootstrap 4 Responsive Layout Example</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12+
</head>
13+
<body>
14+
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
15+
<div class="container-fluid">
16+
<a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
17+
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarCollapse">
21+
<div class="navbar-nav">
22+
<a href="#" class="nav-item nav-link active">Home</a>
23+
<a href="#" class="nav-item nav-link">Services</a>
24+
<a href="#" class="nav-item nav-link">About</a>
25+
<a href="#" class="nav-item nav-link">Contact</a>
26+
</div>
27+
<div class="navbar-nav ml-auto">
28+
<a href="#" class="nav-item nav-link">Register</a>
29+
<a href="#" class="nav-item nav-link">Login</a>
30+
</div>
31+
</div>
32+
</div>
33+
</nav>
34+
<div class="container">
35+
<div class="jumbotron">
36+
<h1>Learn to Create Websites</h1>
37+
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
38+
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
39+
</div>
40+
<div class="row">
41+
<div class="col-md-6 col-lg-4 col-xl-3">
42+
<h2>HTML</h2>
43+
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own website.</p>
44+
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
45+
</div>
46+
<div class="col-md-6 col-lg-4 col-xl-3">
47+
<h2>CSS</h2>
48+
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
49+
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
50+
</div>
51+
<div class="col-md-6 col-lg-4 col-xl-3">
52+
<h2>JavaScript</h2>
53+
<p>JavaScript is the most popular and widely used client-side scripting language. Our JavaScript tutorials will provide in-depth knowledge of the JavaScript including ES6 features, so that you can create interactive websites.</p>
54+
<p><a href="https://www.tutorialrepublic.com/javascript-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
55+
</div>
56+
<div class="col-md-6 col-lg-4 col-xl-3">
57+
<h2>Bootstrap</h2>
58+
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
59+
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
60+
</div>
61+
<div class="col-md-6 col-lg-4 col-xl-3">
62+
<h2>PHP</h2>
63+
<p>PHP is the most popular server-side scripting language for creating dynamic web pages. Our PHP tutorials will help you to learn all the features of latest PHP7 scripting language so that you can easily create dynamic websites.</p>
64+
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
65+
</div>
66+
<div class="col-md-6 col-lg-4 col-xl-3">
67+
<h2>SQL</h2>
68+
<p>SQL is a standard language designed for managing data in relational database management system. Our SQL tutorials will help you to learn the fundamentals of the SQL language so that you can efficiently manage your databases.</p>
69+
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
70+
</div>
71+
72+
</div>
73+
<hr>
74+
<footer>
75+
<div class="row">
76+
<div class="col-md-6">
77+
<p>Copyright &copy; 2019 Tutorial Republic</p>
78+
</div>
79+
<div class="col-md-6 text-md-right">
80+
<a href="#" class="text-dark">Terms of Use</a>
81+
<span class="text-muted mx-2">|</span>
82+
<a href="#" class="text-dark">Privacy Policy</a>
83+
</div>
84+
</div>
85+
</footer>
86+
</div>
87+
</body>
88+
</html>

‎ClassExamples/PJ128_AIML6m_Jan21/bootstrap/layout1.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12+
<style>
13+
.row > div{
14+
margin-bottom: 15px;
15+
}
16+
.header{
17+
min-height: 90px;
18+
}
19+
.footer{
20+
min-height: 60px;
21+
}
22+
.header, .footer{
23+
background: #2f2f2f;
24+
}
25+
.sidebar{
26+
background: #dbdfe5;
27+
}
28+
.content{
29+
background: #b4bac0;
30+
}
31+
.sidebar, .content{
32+
min-height: 300px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
38+
<div class="container">
39+
<div class="row">
40+
<div class="col-md-12">
41+
<div class="header"> <h1 style="color:white;"> AIML Champs </h1></div>
42+
</div>
43+
</div>
44+
<div class="row">
45+
<div class="col-md-3">
46+
<div class="sidebar"> <a href=google.com> Google </a> </div>
47+
</div>
48+
<div class="col-md-9">
49+
<div class="content"> </div>
50+
</div>
51+
</div>
52+
<div class="row">
53+
<div class="col-md-12">
54+
<div class="footer"> <p style="color:blue;">@created by AIML heros</p></div>
55+
</div>
56+
</div>
57+
</div>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)