Bootstrap Environment Setup

Bootstrap Environment Setup

In this section we will explain that how bootstrap can be setup

In this section we will explain that how bootstrap can be setup. To start with bootstrap is easier; we can download the latest version of bootstrap from the following link: http://getbootstrap.com/

This link when is opened will look like the following:

b

Now click on the “Download Bootstrap�? button, this will take to another page which looks the following:

getting started

It can be seen in the above image that we have three buttons to download bootstrap that are bootstrap, source code and Sass.

  1. When you click on the Download Bootstrap button, the precompiled and minified versions of the bootstrap and CSS and JavaScript will be downloaded. But in this download the source code or the documentation files etc. are not included.
  2. When you click on the Download source button, the latest bootstrap which needs LESS compiler along with the source code will be downloaded. This download will be down from GitHub directly.
  3. When you click on the Download Sass button, the Bootstrap less to Sass will be downloaded.

While working with the uncompiled source code of Bootstrap, the less files should be compiled so that CSS files can be generated. You should use and download the precompiled version of bootstrap. This is because the files are already compiled and the user doesn’t have to worry about including separate files for every function.

File Structure:

After downloading bootstrap, you have to extract the zip file. There will be three files that are CSS, font, and JS. Now we have compiled and mined CSS and JS both bootstrap. *andbootstrap. min. *. The fonts are included from the Glyphicons, this is because fonts are optional theme of bootstrap.

Bootstrap source code:

If the source code of bootstrap is downloaded then we have the following files that will be included: less/, JS/, fonts/, dist/, docs. assets/, examples/, and *.html.

It should be noted here that the files under less/ are the source code for Bootstrap CSS and the files under JS/ are the source code for JS and the files under fonts/ file are considered as the source code for fonts.

The precompiled download section is included in the folder named dist/; assets/, examples/, and *.html are the documents of bootstrap.

HTML Template:

Consider the following example in which we have HTML template which is using bootstrap:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> HTML Template using Bootstrap </title>

<linkhref = “css/bootstrap.min.css” rel = “stylesheet”>

<scriptsrc = https://oss.maxcdn. com/ libs / html5shiv /3.7.0/ html5shiv.js ></script>

<scriptsrc = “https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js”></script>

</head>

<body>

<h1> First Bootstrap Template </h1>

<scriptsrc = “https://code.jquery.com/jquery.js”></script>

</body>

</html>

When this code is run it will create the following page:

First Bootstrap Template

In the above example we have included the file jquery.js, bootstrap. min. js, and bootstrap.min.css. These files are included to create an HTML page which will have the template of bootstrap. It should be noted here that when you are including the bootstrap template you should include jQuery library.

Next: Bootstrap Grid System