Step by Step Bootstrap Tutorial for Beginners
By this Bootstrap tutorial you will know following:- Download or Include Bootstrap
- Write Basic HTML Code
- Include Bootstrap CSS
- Include jQuery Library
- Include Bootstrap JavaScript
- Add IE8 support for HTML5 and media queries
- Add a Navigation Bar
- Add Page Content Container.
- Add a Heading
- Add a Table
- Add a Form Inside a Table
- Add a Bootstrap Button with Glyphicon
- Add a Good Looking Message Box
- Final Code and Live Demo
- Online Resources
Step: 1. Download or Include Bootstrap:
Two ways to use Bootstrap in a webpage.
First one way is to use a CDN or Content delivery network. Using bootstrap CDN means that we will not download and store the bootstrap files in our server or local machine. We will just include the bootstrap CSS and JavaScript links to our page.
Second way is downloading and storing a copy Bootstrap files in our web server or local machine. You can download bootstrap here.
I will show you how to use both in sections 3 to 5 of the following below.
Step: 2. Write Basic HTML Code:
You create a notepad file and named index.html
( Follow earlier article to create index.html )
Our basic HTML code will have the following. We name our file index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Live Demo of Bootstrap Tutorial for Beginners</title></head><body></body></html>
Step: 3. Include Bootstrap CSS:
It will be inside the ‘head’ tag and under ‘title’ tag.
If you want to use the Bootstrap CDN:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
If you want to use your own copy of Bootstrap:Make sure you have downloaded bootstrap and put it in the same directory as your index.html, you have named your folder as “bootstrap-3.3.6” folder. Step:4 : Include jQuery Library:
Include the jQuery library before the ending ‘body’ tag.If you want to use the jQuery CDN
<script src="jquery-3.0.0.min.js"></script> |
Make sure you downloaded jQuery and put it in the same directory as your index.html, named the jQuery filename as “jquery-3.0.0.min.js”.
Step:5 : Include Bootstrap JavaScript:
Bootstrap has JavaScript source code for some reasons like animation and other functions for a better user experience.If you want to use the Bootstrap CDN:
If you want to use your own copy of Bootstrap:
<script src="bootstrap-3.3.6/js/bootstrap.min.js"></script> |
Step:6 :Add IE8 support for HTML5 and media queries
Bootstrap 3 is also a framework that is highly concerned with the mobile arena. It is responsive to different devices and screen sizes.<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--> |
Step: 7 :a Navigation Bar
Navigation bars are so cool and can let your users know they won’t get lost on your website. It is also used for easy access of functions or commonly used pages and buttons.<div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">All</a> </li> <li> <a href="#">Demo</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div><!--/.nav-collapse --> </div></div> |
Step: 8 : Add Page Content Container.
This ‘div’ will contain and hold our web site content. It is important because it defines the width of our content page so it won’t scatter the content when the user has large screen size.under navigation
<div class="container"></div> |
Step: 9 : Add a Heading:
The heading is important since it tells the user what page he was in and what is it for.<div class="page-header"> <h1>Bootstrap Sample Page with Form</h1></div> |
Step: 10 : Add a Table:
In this example, we have a table that will hold form elements like a text box later. The bootstrap table looks good, has hover effect and is also responsive.<table class='table table-hover table-responsive table-bordered'> <tr> <td>Name</td> <td></td> </tr> <tr> <td>Contact Number</td> <td></td> </tr> <tr> <td>Address</td> <td></td> </tr> <tr> <td>List</td> <td> </td> </tr> <tr> <td></td> <td> </td> </tr></table> |
Step: 11 : Add a Form Inside a Table:
This is what I was talking about at section 10.0, our form example includes few text boxes, a text area and select drop-down list.<form action='http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/' method='post'> <table class='table table-hover table-responsive table-bordered'> <tr> <td>Name</td> <td><input type='text' name='name' class='form-control' required></td> </tr> <tr> <td>Contact Number</td> <td><input type='text' name='contact_number' class='form-control' required></td> </tr> <tr> <td>Address</td> <td><textarea name='address' class='form-control'></textarea></td> </tr> <tr> <td>List</td> <td> <select name='list_id' class='form-control'> <option value='1'>List One</option> <option value='2'>List Two</option> <option value='3'>List Three</option> </select> </td> </tr> <tr> <td></td> <td> </td> </tr> </table></form> |
Step: 12 : Add a Bootstrap Button with Glyphicon:
Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.Buttons with icons look cute. Well, at least for me. It also signals the user what the button is for. Button icon and color can easily tell what the button does in your web app.
<button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"></span> Create New Record</button> |
Step: 13 : Add a Good Looking Message Box:
You can also add some notes in a nice way using bootstrap.<div class="alert alert-info"> <strong>Heads up!</strong> This bootstrap page example is from Mike Dalisay of <a href="http://codeofaninja.com/">codeofaninja.com</a>!</div> |
Step: 14 : Download Source Code
If you download the source code, aside from the complete source code of the tutorial above, you will get the following as well.Item | Description |
| index-cdn.html | Makes use of Bootstrap framework in CDN. Will work if your computer is online only. |
| index-local.html | Makes use of a Downloaded Bootstrap framework (no CDN). Works on your localhost. Will work even if your computer is offline. |
The source code of this tutorial is part of our 30+ useful jQuery and PHP source code package. Each item in the package has its own tutorial like the one above.
If you are just starting out to learn web programming and serious about learning more, this is the right package for you. Click green button below to see the what is included in the package and download it there.
If you are just starting out to learn web programming and serious about learning more, this is the right package for you. Click green button below to see the what is included in the package and download it there.
Step: 15 : Bootstrap Online Resources:
- The Bootstrap official website.
- Live websites built with bootstrap.
- Choose your Bootstrap themes.
- Yes, there are also Bootstrap plugins.
- Admin or dashboard themes will give you the ability to focus on developing the core functions of your web application. You can find Bootstrap dashboard themes here.
- If you decide to study more source codes about bootstrap and want to build a website using it, you can find Bootstrap website templates here.
- https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
No comments:
Post a Comment