Bootstrap environment installation
May 04, 2021 Bootstrap
Table of contents
Bootstrap environment installation
Bootstrap installation is very easy. This chapter explains how to download and install Bootstrap, discusses the Bootstrap file structure, and demonstrates its use with an example.
Download Bootstrap
You can download http://getbootstrap.com/ version of Bootstrap from the website. When you click on this link, you'll see a page like this:
You'll see two buttons:
- Download Bootstrap: Download Bootstrap. B y clicking this button, you can download precompiled compressed versions of Bootstrap CSS, JavaScript, and fonts. Does not contain documents and original source code files.
- Source: Download the source code. By clicking this button, you can get the latest Bootstrap LESS and JavaScript source code directly from from.
If you are using uncompiled source code, you need to compile the LESS file to generate a reusable CSS file. Bootstrap officially only supports Recess for compiling LESS files, a CSS .js on The Less.
For a better understanding and ease of use, we'll use a precompiled version of Bootstrap in this tutorial.
Because files are compiled and compressed, you don't have to include them every time in stand-alone feature development.
This tutorial was written using Bootstrap 3.
The file structure
Precompiled Bootstrap
When you download the compiled version of Bootstrap and unzip the ZIP file, you will see the following file/directory structure:
As shown in the figure above, you can see the compiled CSS and JS (bootstrap.) and the compiled compressed CSS and JS (bootstrap.min.). It also includes the font of Glyphicons, an optional Bootstrap theme.
Bootstrap source code
If you download the Bootstrap source code, the file structure will look like this:
- The files under less/, js/and fonts/are the source code for Bootstrap CSS, JS, and icon fonts, respectively.
- The dist/folder contains the files and folders listed in the precompiled download section above.
- Docs-assets/, examples/and all of the .html files are Bootstrap documents.
HTML template
A basic HTML template that uses Bootstrap looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow" ></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow" ></script> <![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js" rel="external nofollow" ></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Here you can see files that contain jquery.js, bootstrap.min.js and bootstrap.min.css to make a regular HTML file a template that uses Bootstrap.
Details about each of the elements in the snippp code above are detailed in the Bootstrap CSS Overview section.
Now let's try using Bootstrap to output "Hello, world!" ：
Bootstrap CDN recommended
The library on BootCDN is recommended in China:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" ></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" rel="external nofollow" ></script>In addition, you can use the following CDN services:
- Domestic recommended use: https://www.staticfile.org/
- International recommended use: https://cdnjs.com/
Related reference: Bootstrap4 Download Installation