English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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.
You can https://getbootstrap.com/docs/3.4/ Download the latest version of Bootstrap from
Click the "Download Bootstrap" link, and enter the following page:
You will see two buttons:
Download Bootstrap：Download Bootstrap. Click this button, you can download the precompiled and compressed version of Bootstrap CSS, JavaScript, and fonts. It does not include documentation and the original source code files.
Download Source：Download source code. Click this button, and you can directly get the latest Bootstrap LESS and JavaScript source code from the from.
If you are using uncompiled source code, you need to compile the LESS files to generate reusable CSS files. For compiling LESS files, Bootstrap officially supports Recess, which is based on less.js CSS hints.
For better understanding and easier use, we will use the precompiled version of Bootstrap in this tutorial.
Since the files are compiled and compressed, in independent feature development, you do not need to include these independent files every time.
This tutorial is written using the latest version (Bootstrap 3）.
When you download the compiled version of Bootstrap, unzip the ZIP file, you will see the following files/Directory structure:
As shown in the figure above, you can see the compiled CSS and JS (bootstrap.*）as well as the compiled and compressed CSS and JS (bootstrap.min.*）It also includes the Glyphicons font, which is an optional Bootstrap theme.
If you have downloaded the Bootstrap source code, the file structure will be as follows:
less/jquery.jsjs/ bootstrap.min.js fonts/ The files under are the source code of Bootstrap CSS, JS, and icon fonts.
dist/ folders contain the files and folders listed in the precompiled download section above.
docs-assets/jquery.jsexamples/ and all the *.html The file is the Bootstrap documentation.
The basic HTML template using Bootstrap is as follows:
<!DOCTYPE html> <html> <head>/<title>Bootstrap template< title>-<meta name="viewport" content="width=device-width, initial1scale= <!-- .0"> --"> The new Bootstrap core CSS file//Include Bootstrap/bootstrap/3.3.7/<link href="https:/css <!-- maxcdn.bootstrapcdn.com5 HTML8 Shiv and Respond.js are used to make IE5support HTML --"> <!-- elements and media queries// Note: If accessed through file: --"> <!--Include the Respond.js file, then this file will not take effect 9[if lt IE <script src="https://shiv.js">/oss.maxcdn.com/shiv5]>/3.7respond.js/shiv5html/script> <script src="https://shiv.js">/oss.maxcdn.com/libs/1.3respond.js/.0/script> respond.min.js">--"> body>/<![endif] <head> Example1<h/>Hello, world!</1"> <!-- <body> --"> <script src="https://jQuery (Bootstrap's JavaScript plugins require jQuery to be included)/code.jquery.com/script> <!-- jquery.js">< --"> Including all compiled plugins/bootstrap.min.js"></script> body>/<script src="js body>/<
html> Here, you can see that it includesjquery.js, bootstrap.min.js and bootstrap.min.css
file, used to turn a regular HTML file into a Bootstrap template. Details of each element in the above code block will be Overview of Bootstrap CSS
Online example
Example1<h/>Hello, world!</1">
Staticfile CDN recommendation
<!-- Recommended to use the library on Staticfile CDN in China: --"> The new Bootstrap core CSS file//cdn.staticfile.org/twitter-bootstrap/3.3.7/<link href="https:/css <!-- bootstrap.min.css" rel="stylesheet"> --"> <script src="https://cdn.staticfile.org/jQuery file. It must be included before bootstrap.min.js/2.1.1/jquery.min.js">/script> <!-- The latest Bootstrap core JavaScript file --"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
In addition, you can also use the following CDN services:
International Recommended Use:https://cdnjs.com/