was developed by Mark Otto and Jacob Thornton at Twitter.
1. Bootstrap is a free front-end framework for faster and easier web development
2. 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.
3. Bootstrap also gives you the ability to easily create responsive designs.
Advantages of bootstrap:
1. Easy to Use.
2. Responsive features.
3. Mobile-first approach.
4.Browser compatibility.
Two way to start BOOTSTRAP on our own website
1. Download Bootstrap from get bootstap.com
2. Include Bootstrap from a CDN
Basic Structure of a Bootstrap Grid
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
example 1:
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary">HOME</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Serivice </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Hosting</a></li>
</ul>
<button type="button" class="btn btn-primary">ABOUT</button>
<button type="button" class="btn btn-primary">BLOG</button>
<button type="button" class="btn btn-primary">CONTACT</button>
</div>
</div>
</div>
</body>
</html>
example 2:
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="danger">
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="default">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="success">
<td>3</td>
<td>sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Comments
Post a Comment