Welcome to Findnerd. Bootstrap is a most popular front-end framework. Frontend framework works in client side such as HTML,CSS and JS development.Bootstrap is an open source client side
framework.Bootstrap is also known as Twitter Blurprint. Mark Otto and Jacob Thornton develop it at twitter as a framwork. Current version of bootstrap is v3.3.6
which is compatible with different working browsers like chrome,firefox, IE and safari etc.
You can download the latest version of bootstrap from this website http://getbootstrap.com/. There are three types of versions available one is compiled bootstrap,
other is bootstap source and last one is saas bootstrap. You have to use the minified version of bootstrap. In downloaded folder, you can see the css,js and font
files in folders.
If we take a very basic example then we need to create a simple html page. Please have a look.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template On Findnerd</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Findnerd</h1>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In above we added two js script files and one minified css file as well. Bootstrap provides different predefined classes to perform the different operations for
different types of devices like tablets, smart mobiles etc. Lets take a example of layout.
<div class="container">
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3"><!--Column left--></div>
<div class="col-sm-9"><!--Column right--></div>
</div>
</div>
Kindly put above code in body section in previously created file and it will build two column layout on the webpage. Here we are using classes col-sm-3 and col-sm-9
to build the left and right columns. There are other classes for layout building in different sizes devices such as .col-sm- for small device like tablets,
.col-md- for medium size device like desktops(>=992), .col-lg- for large devices(>=1200px.)
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
In above code we set the code for both types of devices like medium as well as small devices. There are many other features available in bootstrap to design the
webpage. We will discuss these points in later blogs so stay with us.
0 Comment(s)