There is a thin line between front-end web development and back-end development which is often overlooked. Web developers often struggle when it comes to designing and front end development tasks. Keeping in view the struggle through which developers have to go through, several front-end web development frameworks have been introduced. These frameworks contain built-in capabilities for performing common front-end development tasks. Foundation, W3CSS and Bootstrap are some of the most popular front-end development frameworks.This series of articles provides brief bootstrap introduction and explains how to perform different front-end tasks via bootstrap framework.
The following code contains a complete Bootstrap. The webpage contains two buttons. One is a simple button with out any styling while the other is button styled by bootstrap css classes. Take a look at the code.
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <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.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <button>Welcome to Knowledge Hills</button> <button class="btn btn-primary">Welcome to Knowledge Hills</button> </body> </html>
When you run the above page, you should see a simple button with some message. You should also see another button with blue color. If you look at the code, the first button has no class while the second button has “btn btn-primary” class. The “btn” and “btn-primary” are bootstrap classes for styling buttons. If you have to style the button in this way, yourself using CSS from scratch, you will have to write quite a bit of code. But, you can see how Bootsrap has helps us style elements easily.
This tutorial just provides a brief bootstrap introduction. In the upcoming tutorials we shall how different front-end functionalities are performed with bootstrap. Keep visiting the site!