❮ Bootstrap Labels Bootstrap V2 Intro ❯

Bootstrap Environment Setup

Bootstrap installation is very easy. This chapter will explain how to download and install Bootstrap, discuss the Bootstrap file structure, and demonstrate its usage with an example.

Download Bootstrap

You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link, you will see a webpage as shown below:

You will see two buttons:

Download Bootstrap: Downloads Bootstrap. Clicking this button will download the precompiled and minified versions of Bootstrap's CSS, JavaScript, and fonts. Does not include documentation or the original source files.
Download Source: Downloads the source code. Clicking this button will directly get you the latest Bootstrap LESS and JavaScript source code from the repository.

If you are using the uncompiled source code, you need to compile the LESS files to generate reusable CSS files. For compiling LESS files, Bootstrap officially supports only Recess, which is Twitter's CSS hinter based on less.js.

For better understanding and ease of use, we will use the precompiled version of Bootstrap in this tutorial.

Since the files are compiled and minified, you don't need to include the individual files from the compiled directory on your own.

This tutorial is written using the latest version (Bootstrap 3).

File Structure

Precompiled Bootstrap

When you download the compiled version of Bootstrap, unzip the ZIP file, and you will see the following file/directory structure:

As shown above, you can see the compiled CSS and JS (bootstrap.), as well as the compiled and minified CSS and JS (bootstrap.min.). Also included are the Glyphicons fonts, which are an optional Bootstrap theme.

Bootstrap Source Code

If you download the Bootstrap source code, the file structure will look like this:

Files under less/, js/, and fonts/ are the source code for Bootstrap's CSS, JS, and icon fonts.
The dist/ folder contains everything listed in the precompiled download section above.
docs-assets/, examples/, and all .html files are Bootstrap documentation.

HTML Template

A basic HTML template using Bootstrap looks like this:

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      &lt;!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

</html>

Here, you can see that the files jquery.js, bootstrap.min.js, and bootstrap.min.css are included to transform a regular HTML file into a Bootstrap-enabled template.

Details about each element in the above code snippet will be explained in detail in the Bootstrap CSS Overview section.

Example

Now, let's try to output "Hello, world!" using Bootstrap:

Example

<h1>Hello, world!</h1>

Recommended Staticfile CDN

For users in China, it is recommended to use the libraries from Staticfile CDN:

<!-- New Bootstrap core CSS file -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery file. Make sure to include it before bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest Bootstrap core JavaScript file -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Additionally, you can also use the following CDN services:

International recommendation: https://cdnjs.com/

❮ Bootstrap Labels Bootstrap V2 Intro ❯