This setup is very easy and starts using Bootstrap. This article will guide you to how to download and use Bootstrap. We will discuss here the file structure of Bootstrap and also demonstrate usage of Bootstrap with multiple examples.
Latest version of Bootstrap you can download from here http://getbootstrap.com/. When you visit on this link, you will get to see a screen as below:
Here you can see three buttons:
Sass: by Clicking on this Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
If you are working with Bootstrap’s uncompiled source code, you have to need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, Bootstrap officially supports only Recess , which is Twitter’s CSS hinter based on less.js.
For better knowledge and simplicity of use, we will use precompiled version of Bootstrap throughout the tutorial. As the Bootstrap files are complied and minified so you do not have to difficulty every time including separate files for individual functionality. We will download latest version (Bootstrap 3) for writing these tutorials.
One time the compiled version Bootstrap is downloaded, extract that ZIP file and you will find the following file/directory structure:
| |—— bootstrap.css
| |—— bootstrap.min.css
| |—— bootstrap-theme.css
| |—— bootstrap-theme.min.css
| |—— bootstrap.js
| |—— bootstrap.min.js
The same as you can see some compiled CSS and JS (bootstrap.*) are there, as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts are included from Glyphicons, as is the optional Bootstrap theme.
Bootstrap Source Code
If you have download source code of Bootstrap then the file structure would be like as follows:
| |—— css/
| |—— js/
| |—— fonts/
- The files below less/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and icon fonts (respectively).
- The dist/ folder include everything listed in the precompiled download section above.
- The docs-assets/, examples/, and all *.html files are Bootstrap documentation.
Start with this basic HTML template using Bootstrap would look like as this:
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media
<!-- WARNING: Respond.js doesn't work if you view the page
via file:// -->
<!--[if lt IE 9]>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
Here you can see some file like jquery.js and bootstrap.min.js and bootstrap.min.css are included to making a normal HTM file to Bootstrapped Template.
For more details regarding each of the elements in this above piece of code we will discussed in the article Bootstrap CSS Overview.
In all the following articles we have used dummy text from the site http://www.lipsum.com/.