Install Bootstrap Process
Download the Bootstrap 3 Files
There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap files from https://getbootstrap.com/getting-started/.
File Structure of Bootstrap
Unzip the compressed downloaded compiled Bootstrap folder to see the structure. You’ll find the following file structure.
| |—— bootstrap.css
| |—— bootstrap.min.css
| |—— bootstrap-theme.css
| |—— bootstrap-theme.min.css
| |—— bootstrap.js
| |—— bootstrap.min.js
| |—— glyphicons-halflings-regular.eot
| |—— glyphicons-halflings-regular.svg
| |—— glyphicons-halflings-regular.ttf
| |—— glyphicons-halflings-regular.woff
Now Making the first template with bootstrap
Please place the unzip folder inside your theme folder and create an index.html file and make a basic HTML structure. Now create link for the CSS and js and save
the sample code is :
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <!-- used for the character set used --> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Basic Bootstrap</title> <link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”> <link rel=”stylesheet” href=”css/bootstrap-theme.min.css”> </head> <body> <h1>Hello World!</h1> <script src=”js/jquery-1.11.3.min.js”></script> <script src=”js/bootstrap.min.js”></script> </body> </html>
Now the topics we will cover in this twitter bootstrap tutorial seris are:
Grid system is the key to divide a page into many parts, Bootstrap 3 grid system is the container or container fluid and row and column system, to make a mobile responsive website using bootstrap the grid system is the first need to make the structure and in this tutorial, we will learn how to make the structure of a website using bootstrap grid system. and the grid is divided into 12 columns and 4 different window sizes, that is fro mobile, tablet, laptop and desktop. Click on the title to learn the bootstrap grid system.
The bootstrap typography is the text style defined by bootstrap and it is a little bit different from browser default to make the text browser compatible
and as it could look like, the design nearly the same in cross-browser. learn bootstrap typography by clicking the title.
Image and its placement is a very important part of a site as if an image size is over the size of the container it does not look good, or while have to show as a thumbnail gallery then the design of the image is different, also sometimes needed the image to show as rounded corner and also fully round image, bootstrap have provided some classes to handle all this. in this bootstrap tutorial click the heading to learn about bootstrap image.
Tables are mainly used to show tabular data like purchase details or order details, and its become difficult sometimes, to show a table in a responsive manner, and also it is needed to show a table as zebra style, or bordered or have to give a hover effect and bootstrap have made the all problem solved and user just need to add the specific bootstrap predefined classes, want to learn bootstrap responsive table from this bootstrap tutorial? just click on the title.
A bootstrap jumbotron is a big box for calling extra attention to some special content or information of the user. It is a gray box with a rounded corner. The Bootstrap jumbotron has a little bigger font size of the text inside it. it can be used inside container or container fluid and outside container or container fluid also. for more details click on the title.
Bootstrap well use to add a rounded gray border around a box with a gray background and a little padding, it provides a quick way to apply a simple effect to an element. It is used to make a little portion highlight or different from others. To read in details click on the title.
It is very needful to show some alert to a site user like as while submitting a form should give some success or failure or warning alert, or if user going to hit some restricted area then need to show the user an alert, etc and bootstrap made the design process of the alert box easy. Click on the title and let’s learn in detail.
Bootstrap provides classes for various types of buttons like in size or color, also can be made disabled or enabled a button by using bootstrap class. Click on the heading link to learn details.
Bootstrap Button Group is used to include some buttons inside a div or container and give it to class name .btn-group, normally its a horizontal button group. the above title link will describe that in detail.
Many times we need to attach an icon to make the user understood the purpose of the portion, and for that bootstrap have given lots of classes for a large number of the icon and in case of bootstrap its called glyphicons. Click on the title for more details.
The Badges are the number indicator of a button or text, it is mainly used to show how many messages or orders have been submitted.
The Labels are the character or text indicator of a heading or a text, it is a rounded bordered area.
to read in detail from this tutorial click on the above heading.
Progress Bars are the predefined attractive element of bootstrap, A progress bar is mainly used to show how many presents of a task is completed graphically.
Click on the title to read in details
In this bootstrap tutorial, we will learn about paginations, Pagination is used to navigate or linked a page. suppose you have a lot of posts in your blog and you want to show a few of them in one page and next few in the second page and so on then there is needed navigation to linked the pages and an indicator of page number
read in details by clicking on the title.
A pager is also one king of pagination, it provides the next and prev button, When we are used to showing a single post some time we need two buttons on the bottom position to show the previous and next post.
Click on the title to read in detail.
A list group is used to display an unordered or a div in a list view, the list view mainly used inside the menu or display some list of content.
now read in detail by clicking on the above link.
Bootstrap 3 Panels lets us place the content in a better presentation. Bootstrap 3 Panels have a border with some padding and divided into header and footer and body, for heading and related text.
Dropdowns are mainly used in the navigation menu to make the dropdown menu, But sometimes it is used in button and div also for scripting.
A collapse and accordion is a hide panel or portion which is opened on click on a button or link with scrolling effect.
Bootstrap 3 Navigation Bar used to navigate to the proper page according to its link. In this bootstrap tutorial, we will learn a bootstrap navbar with two-color.
Responsive Form is a very useful HTML component that is used to send the data to the server via get or post method. Nowadays so many users are using mobile for internet browsing so we have to make a form easy to fillup from mobile also
In bootstrap, the form inputs are taken some property inside class .form-control and the form fields are text, password, DateTime, DateTime-local, date, month, time, week, number, email, URL, search, tel, and color.
The bootstrap media object is used to make left or right align media like video or image and the media object is mainly used in waterfall instruction comments or testimonials.
A slider is a common component of a website and makes a fully responsive slider has become very easy with the help of bootstrap 3 and in the bootstrap slider, you can use caption or text also.
Bootstrap modal window the popup window to show some content inside it and can be customized to the design of the popup window using bootstrap classes and CSS.
Click the above heading to learn in detail.
A tooltip is an instructional box with small instruction that described the functions of the tools. and bootstrap provides a beautiful look at the tooltips. learn in detail how to make tooltips using bootstrap by clicking on the heading link.
A popover is similar to the tooltip , bootstrap provided us a very nice popover and today we will going to learn how to make a popover.
Click the title link to learn how to make a bootstrap popover.
in this Bootstrap 3 tutorials we have gone through the installation process and structure and the topics we are going to cover.
Thanks for reading and please provide your valuable comment to make the website better and more usable.