Bootstrap installation

May 04, 2021 Bootstrap

In this tutorial, we'll learn how to create a basic Bootstrap template using the compiled version of Twitter Bootstrap v3.0.

Download the boot file

Bootstrap has two versions available for download, compiled Bootstrap and Bootstrap source files.

Compile and download icons that contain compiled and scaled-down versions of CSS and JavaScript files, as well as font formats, for faster Web development

The source version contains all the original source files for CSS and JavaScript, as well as a local copy of the document.

We'll use the compiled Bootstrap file. Here is the download link.

http://getbootstrap.com/

The file structure

Once the compiled Bootstrap is downloaded, unzip the compressed folder. You will find the following file structure and content.

bootstrap/
    +-- css/
    |   +-- bootstrap.css
    |   |-- bootstrap.min.css
    |   |-- bootstrap-theme.css
    |   |-- bootstrap-theme.min.css
    +-- js/
    |   |-- bootstrap.js
    |   |-- bootstrap.min.js
    +-- fonts/
        |-- glyphicons-halflings-regular.eot
        |-- glyphicons-halflings-regular.svg
        |-- glyphicons-halflings-regular.ttf
        |-- glyphicons-halflings-regular.woff

The compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.com), as well as compiled and scaled down CSS and JS (bootstrap.min.).

There are four font files in the fonts folder (glyphicons-halflings-regular.). These font files include 200 icons from the Glyphicon Halflings set.

Note that all JavaScript plug-ins need to include jQuery.

Create a Web page with Bootstrap

Open the code editor and create a new HTML file, as follows.

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, world! W3Cschool !</h1>
</body>
</html>

For this HTML file to become a Bootstrap template, you need to include the appropriate Bootstrap CSS and JS files.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world! W3Cschool !</h1>    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

We include JavaScript files at the bottom of the page - to improve the performance of the page before closing the hashtags.
Notice the relative path between css and Javascript.

Staticfile CDN recommended

The library on the Staticfile CDN is recommended in China:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" rel="external nofollow" ></script>

International recommended use: https://cdnjs.com/

Bootstrap installation

Table of contents

Download the boot file

The file structure

Create a Web page with Bootstrap

Staticfile CDN recommended

Cookie Consent