-
Notifications
You must be signed in to change notification settings - Fork 0
/
Bootstrap.html
186 lines (136 loc) · 6.66 KB
/
Bootstrap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Stylesheet-->
<link rel="stylesheet" href="styles.css">
<title>Techopedia - Bootstrap</title>
</head>
<body>
<div class="container" style="width: auto;">
<!-- <div class="container" style="width:50%"></div>-->
<div class="mainDiv">
<nav class="navbar navbar-expand-md navbar-light">
<a class="logo" href="index.html">TECHOPEDIA</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="markdown.html">Markdown</a>
</li>
<li class="nav-item">
<a class="nav-link" href="nodejs.html">Node.JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jquery.html">jQuery</a>
</li>
</ul>
</div>
</div>
</nav>
<hr class="m5">
<div class="container">
<img class="topicLogo img-fluid" src="bootstrap.png" alt="bootstrap logo">
</div>
<hr class="m5">
<section>
<h4>What is Bootstrap?</h4>
<p>Bootstrap is the most popular CSS framework that is used for developing responsive
websites with its primary focus on mobile and tablet devices. In a world where mobile devices are
always in use, it is important to make sure that a web page is functional and has readable content
throughout. It is compatible also with all the relevant browsers such as Chrome, Firefox, Opera etc.
On this web page I will explain and give an example of how Bootstrap can make a website responsive
and what it can do.</p>
<hr class="m5">
<section>
<h4>What Can Bootstrap Do/Benefits?</h4>
<p>First of all Bootstrap is easy to set up, it is possible to be able to create a responsive website
within an hour. You do not need to know use HTML and CSS at a high level to use Bootstrap and comes
great documentation.</p>
<p>Some other useful of features are the responsive classes using that make a certain block of
content appear or hide only on devices based on the size of their screen, useful when you want to
hide some content based on screen size.</p>
<p>It can style HTML elements such as tables forms, buttons, images and icons.</p>
</section>
<hr class="m5">
<section>
<h4>Bootstrap Components</h4>
<p>Bootstrap comes with a useful list of components such as:
<ul>
<li>Dropdowns</li>
<li>Button groups</li>
<li>Navigation bar</li>
<li>Breadcrumbs</li>
<li>Labels and badges</li>
<li>Alerts</li>
<li>Progress bar</li>
</ul>
</p>
<p>Bootstrap can add components such as sliders, tabs, accordions etc. which not only improve the
functionality of your website but also improve the appearance.
</p>
</section>
<hr class="m5">
<section>
<h4>Responsiveness</h4>
<p>Bootstrap is built on responsive 12-column grids, layouts and components. As I said in the
previously, Bootstrap is know mainly for its responsiveness, here is an example
below:</p>
<img src="ResponsiveBootstrap.png" alt="Bootstrap example" class="d-none d-sm-block img-fluid">
<p> </p>
<p>When using the Bootstrap classes 'img-fluid' and the visibility functions the page is in mobile view
the menu condenses, the text starts to stack and the Bootstrap logo image disappears, this is done because Bootstrap CSS link and the container class that comes with that components
with it.
If the web page is manually condensed then the image smoothly adapts to the screen size.
</p>
</section>
<hr class="m5">
<section>
<h4>How It was Implemented in the Site</h4>
<p>
<ul>
<li>The used for this website it a Bootstrap component, it also minimizes collapses when the
screen is on mobile view.</li>
<li>The text on mobile and tablet view stacks so that all the content is readable.</li>
<li>The Bootstrap example image disappears when on mobile view.</li>
<li>I also added a Bootstrap CSS link in the head tags in the document to import their styles and responsiveness</li>
</ul>
</p>
</section>
<hr class="m-5">
<div class="divAside">
<aside>
FACT: Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most
popular front-end frameworks and open source projects in the world.
</aside>
</div>
</div>
</div>
<br/>
<hr>
<!-- Footer -->
<footer align="center">
<div class="container">© Design by: David, John, Steven and Shazna
</div>
</footer>
<!--Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>