Bootstrap
Objective(s):
To understand and learn how to make responsive web page using bootstrap.
To understand how to work bootstrap classes.
Tool(s) used:
For example: Brackets, Notepade++.
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.
Bootstrap CDN:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="[Link]
[Link]>
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
[Link]"></script>
Basic Example:
Syntax:
<div class="row">
<div class="col-md-1"> 1 </div>
<div class="col-md-1"> 2 </div>
<div class="col-md-1"> 3 </div>
<div class="col-md-1"> 4 </div>
<div class="col-md-1"> 5 </div>
<div class="col-md-1"> 6 </div>
<div class="col-md-1"> 7 </div>
<div class="col-md-1"> 8 </div>
<div class="col-md-1"> 9 </div>
<div class="col-md-1"> 10 </div>
<div class="col-md-1"> 11 </div>
<div class="col-md-1"> 12 </div>
Get Started: Classes:
xs (used for phone screen).
Sm (small) used for tablet.
md(medium) used for desktop.
Lg(large) used for large desktop.
Bootstrap table
Striped Rows
Bordered Table
Hover Rows
Condensed Table
Contextual Classes
Responsive Tables
Tasks:
Task 01. Time: 30 Minutes
Create this example using bootstrap classes.
Figure 08-1
Task 02. Time: 30 Minutes
Write bootstrap code given below screenshot.
Figure 08-2
Task 03. Time: 30 Minutes
Using given below bootstrap table classes, create table to your own choice.
Bootstrap Basic Table
Striped Rows
Bordered Table
Hover Rows
Condensed Table
Contextual Classes
Responsive Tables
Task 04. Time: 30 Minutes
Using given below bootstrap classes for images.
Rounded Corners
Circle
Thumbnail
Responsive Images.
