What is Web framework: Web framework is collection of CSS and javascript function , used to simplify a particular module. Bootstrap is the same, it consist of various pre-defined funtions and CSS for creating a responsive layout.
Need For Framework: When you are working for any project , there is a time limit of course and building a website completely from scratch might be a time consuming and somewhat challenging. The layout of most of the web based project are almost similar. For instance a website always has a header, sidebar, footer and a place for content. So framework allows you to quickly use the pre-defined javascript functions for a particular component of a website like a meta slider or a navigation bar. Now based on the needs of a particular user you could use which of the framework available on the internet are required for your project. Like you could use a grid based framework for designing just the grid layout or you could use more advance features for a particular website, then you need a more robust framework.
Why Bootstrap : Bootstrap allows you to add and modify the elements of the webpage quickly and effectively. It not only saves a lot of time but also provide you professional website interface. The components are also Responsive i.e. they changes their size dyanamically according to various platforms like for mobile devices, you smaller buttons and slider images but for 2k and 4k displays the components are automatically adjusted. Bootstrap also provide full support for different current versions of web browsers available. It allows you to quickly use either a grid layout feature or more rich features based on your need.
Getting Started : Download
• The fastest way to get Bootstrap is to download the precompiled and ‘minified’ versions of its CSS, JavaScript and fonts.
• Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source LESS, JavaScript and documentation.
• You can also choose which of the components you will be using in your development process and download for the same from Bootstrap official website.
Your Hierarchy of project should look like the image below:-
Now before jumping to our next development section. Make a default HTML page with links to stylesheet and javascript to your bootstrap frameworks as follows:
<head>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap-theme.min.css” media=”screen” />
</head>
and at the end of closing of body tag just include jquery script and bootstrap javascript as follows:
<script src=”http://code.jquery.com/jquery-2.1.0.min.js”></script>
<!-- You can also download jquery minified version and link to it -->
<script src=”js/bootstrap.min.js”></script>
</body>
Navigation Bar:
The most important component is the nav bar in any website. It allows you to quickly navigate throught the pages.
Now lets look at the code above. We have used navbar parent class with other classes called 'navbar-inverse' used for black background theme of navbar. Another class used navbar-fixed-top that essentially fix your navbar on top even if you scroll down. Now the <button> tag is used for generating the togglable menu button as shown in mobile view.
Now navigation brand name can be used for displaying header inside nav bar. You can also customize the navbar settings by importing a new css file to your project and add properties under .navbar class.
You can also use class dropdown for displaying nice sliding dropdown effect. "data-toggle" is used for allowing property of dropdown, collapsing, etc. inside any HTML tag. Dropdown-menu is defined under the class name dropdown-menu. Another important advantage of using bootstrap is that it provides a glyphicon (small image as bellow) which can be used as class=”gyphicon glyphicon-glass” for glass glyphicon.
For more glyphicon you can refer to bootstrap website.
Carousel Slides:
This is one of the mostly used components of the web sites these days. Bootstrap provides a nice carousel slides for your web sites. Lets start coding.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"><div class="container">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<!--You can write anything here -->
</div>
<div class="item">
<!--You can write anything here -->
</div>
<div class="item">
<!--You can write anything here -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
We have declared an id of "myCarousel" to target its element when needed. The class "carousel" puts the slider with slide properties. Data-ride is used to to auto-cycle the slide when its finished one round. Ordered list item is used to show the dots to switch between the slides. You can also customize these dots to adjust it according to background.
Finally anchor tag for pre and next slides is used to refer carousel id "myCarousel" with data-slide tag to call next or pre slide
Grid System:
Grid system is the most powerful and useful component for aligning different section to a paticular position. Bootstrap does it nicely and add a responsive layout for the same.
<div class="row">
<div class="col-sm-2"><p>This is section area 1</p></div>
<div class="col-sm-4"><p>This is section area 2</p></div>
<div class="col-sm-6"><p>This is section area 3</p> </div></div>
Class col-sm is divided into 12 equal parts. You can define the different area for different columns in a row. For equal length use class="col-sm-6", that clearly divide the layout into 2 parts.
Button Customization:
Bootstrap provides a tons of button class to use your own customized buttons on your website . Lets discuss some basic button classes.
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
You can use class "btn-primary" for different style of buttons in button group.
span with caret class is used to create an arrow after the name Action. Class dropdown-toggle has been used for drop down. Now we have to create a dropdown menu for showing it up.You can also use a divider with this option.
There is more you can do with Bootstrap like setting Jumbotron, Modal popup in the same window, setting thumbnails,progress bar,etc. You can refer to documentation @
http://getbootstrap.com/components and See its javascript components with example @
