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 column and 4 different window size, thet is fro mobile, tablet, laptop and desktop. Click on the title to learn 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 same in cross browser. learn bootstrap typogtaphy by clicking the title.
Image and its placement is a very important part of a site, as if a 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 sometime 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 headding to learn about bootstrap image.
Tables are mainly used to show tabuler data like perchases details or order details, and its become difficult sometime, to show a table in a responsive manner, and also its 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.
Bootstrap jumbotron is a big box for calling extra attention to some special content or information of user. It is a gray box with rounded corner. The Bootstrap jumbotron have a little bigger font sizes 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 other. To read in details click on the title.
It is very needfull to show some alert to a site user like as while submitting a form should give some success or failed or worning alert, or if user goint to hit some restricted area then need to show the user a alert etc and bootstrap made the design process of alert box easy. click on the title and lets learn in detail.
Bootstrap provides classes for verious rypes of buttons like in size or color, also can be made disabled or enabled a button by using bootstrap class. Vlick on the headding link to learn details.
Bootstrap Button Group is used to include some buttons inside a div or contener and give it to classname .btn-group , normaly its a horizontal button group. the above title link will describe that in details.
Many times we need to attach a icon to make user understood the purpose of the portion, and for that bootstrap heve given lots of classes for a large numbers of 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 order have been submitted.
The Labels are the character or text indicator of a heading or a text , it is rounded borderd area.
to read in details from this tutorial click on the above heading.
Progress Bars are predefined attractive element of bootstrap, A progress bar is mainly used to show a how much present of a task is completed graphically.
click on the title to read in details
In this bootstrap tutorial we will learn about paginations, Pagination are used to navigate or linked a page. suppose you have a lots of posts in your blog and you want to show few of them in one page and next few in second page and so on then there is needed a navigation to linked the pages and a 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 use to show a single post some time we need two button on the buttom position to show the previous and next post.
click on the title to read in details.
A list group is used to display a unordered or a div in a list view, the list view mainly used in sidemenu or display some list of content.
now read in detail by clicking on the above link.
Bootstrap 3 Panels lets us to place the content in a better presentation. Bootstrap 3 Panels have a border with some padding and devided into header and footer and body, for heading and related text.
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 proper page according to its link . In this bootstrap tutorial we will learn bootstrap nav bar with two color.
Responsive Form is a very useful html components which is used for send the data to server via get or post method. Now a days 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 take 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.
Bootstrap media object is used to make left or right allign media like video or image amd the media object is mainly used in water fall struntion comments or testimonuials.
A slider is a comon component of a website and make fully responsive slider is become very easy with help of bootstrap 3 and in bootstrap slider you can use caption or text also.
Bootstrap modal window the a popup window to show some content inside it and can be customised the design of the popup window using bootstrap classes and css.
Click the above headding to learn in details.
A tooltip is a instructiona box with small instruction which described about the functions of the tools. and bootstrap provides a beutiful looks of the tooltips. learn in details how to make a tooltips usig bootstrap by clicking on the heading link.
Popover is similar to tooltip , bootstrap provided us a very nice popover and today we willgoing 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.