Bootstrap
Check the updated DevOps Course.
Course Registration link:
Course Link:
YouTube link:
Bootstrap(bunch of pre-defined css style)is a very common framework(defines the rule we need to follow)used for Front-End Development, It saves lot of our time while dealing with CSS manually.
Download http://getbootstrap.com/getting-started/#download
Now let’s look at some pre-defined Bootstrap Classes
Container Class: What container class will do is to align your code towards center
<div class=”container”>
<h1>First Bootstrap Code</h1>
</div>
Buttons: Basically allow us to add button
Now to make a success button
<button type=”button” class=”btn btn-success”>Success</button>
Now to make this button look large just add class btn-lg
<button type=”button” class=”btn btn-success btn-lg”>Success</button>OR to make this button look disabled just add disabled=”disabled”
<button type=”button” class=”btn btn-success btn-lg” disabled=”disabled”>Success</button>Jumbotron: We can think of it like a landing page
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
It’s always a good idea to place Jumbotron inside container so that it will not take the full space
<div class=”container”>
<div class=”jumbotron”>
<h1>Hello, world!</h1>
<p>…</p>
<p><a class=”btn btn-primary btn-lg” href=”#” role=”button”>Learn more</a></p>
</div>Complete Code so far https://github.com/lakhera2016/bootstrap/blob/master/introduction.html
<div class=”container”>
<div class=”jumbotron”>
<h1>Hello, world!</h1>
<p>…</p>
<p><a class=”btn btn-primary btn-lg” href=”#” role=”button”>Learn more</a></p>
</div>
</div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootStrap Introduction</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>BootStrap Introduction</h1>
<div class="container">
<h1>First Bootstrap Code</h1>
<button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
