How to install Bootstrap
Take your first steps with the web interface-oriented framework. Good sheets from the book "Bootstrap 3 The framework 100% Web Design" published by Eyrolles.
This article is from the book "Bootstrap 3 The framework 100% Web Design" published by Editions Eyrolles
Copyright: © Groupe Eyrolles 2015
Download Bootstrap
There is nothing complicated in the installation of Bootstrap. The first thing to do is of course to visit the official website of the framework. Once we are on the site's start page, there are three download options available to us.
- The first download option includes a "compiled and minimized version" of Bootstrap. Let's understand that this file is a lite version that will go to the largest number of projects, offering the main files necessary for the proper functioning of the framework.
- The second option offers, conversely, a complete version containing the basic elements necessary for the use of LESS CSS, or the Bootstrap documentation.
- Finally, the third and last option is a port from Bootstrap to SASS that simplifies the integration of projects into Rails, Compass or those based only on SASS. This last option is rarely used by web designers and front-end integrators, who prefer to choose between the two previous ones.
To finalize this first phase of contact with Bootstrap, it is recommended to download the compiled file of the first option.
Bootstrap official website
http://www.getbootstrap.com
Owner's tour
Now that we have downloaded Bootstrap, let's look at its structure. First of all, we can observe that the framework comes down to very few files (only ten in its compiled version). The file is separated into three classic subparts:
- css (style files);
- js (JavaScript files);
- fonts (the icons proposed by Bootstrap, which we will find a little later in our learning).
Compiled Format of Bootstrap
Inside the css folder, we find the bootstrap.css file which is the compiled CSS and JavaScript version, as well as the bootstrap.min.css file which, in addition, is minimized. We also find the bootstrap-theme file in both versions; it is used to apply the
graphic style of the Bootstrap 2 version in a less flat style.
Example of the bootstrap-theme style
http://getbootstrap.com/examples/theme
In the folder js are placed the two versions (compiled and minimized) of the JavaScript file of Bootstrap.
Finally, in the fonts folder, these are not fonts, but icons proposed by Bootstrap and called "Glyphicons". Bootstrap mentions on its site that they are not normally free but that their creator has generously made them available for the framework.
Get the Glyphicons
http://glyphicons.com
When creating, we can use the compiled "source" file just as compiled and minimized. However, when going into production, I strongly recommend using the compiled and minimized version for reasons of speed.
Bootstrap source format
In the Bootstrap source format, there are several folders missing from the compiled format. The less file appears, including all Bootstrap CSS source files. In the dist file (which means "remote"), we find the compiled and minimized files of our first download option. Finally, the docs folder includes the Bootstrap documentation.
This article is from the book "Bootstrap 3 The framework 100% Web Design" published by Editions Eyrolles
Copyright: © Groupe Eyrolles 2015
AT read also: