Bootstrap installation is very easy. This article is a summary of my studies, which is convenient for future inquiries and learning. At the same time, I hope to help you.
1. Download Bootstrap
You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link, you will see a web page like this:
You will see two buttons:
Download Bootstrap: Download Bootstrap. Click this button and you can download precompiled compressed versions of Bootstrap CSS, JavaScript, and fonts. Docs and original source code files are not included.
Download Source: Download the source code. Click this button and 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 reusable CSS files. For compiling LESS files, Bootstrap only supports Recess, which is Twitter's less.js-based CSS prompt.
For better understanding and easier use, we will use a precompiled version of Bootstrap in this tutorial.
Since files are compiled and compressed, you don't have to include these independent files every time in independent functional development.
This study note is the latest version (Bootstrap 3).
2. File structure
1. 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 above image, you can see the compiled CSS and JS (bootstrap.*), as well as the compiled compressed CSS and JS (bootstrap.min.*). It also includes the font of Glyphicons, an optional Bootstrap theme.
2. Bootstrap source code
If you downloaded the Bootstrap source code, the file structure will look like this:
The files under less/, js/ and fonts/ are the source codes of 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 *.html files are Bootstrap documents.
3. HTML template
A basic HTML template using Bootstrap looks like this:
<!DOCTYPE html><html> <head> <title>Bootstrap template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Introducing Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js are used to enable IE8 to support HTML5 elements and media queries --> <!-- Note: If you introduce Respond.js via file:// file, then the file cannot have effect --> <!--[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 (Bootstrap's JavaScript plugin needs to introduce jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Includes all compiled plugins --> <script src="js/bootstrap.min.js"></script> </body></html>
Here you can see jquery.js, bootstrap.min.js and bootstrap.min.css files that are used to make a regular HTML file a template that uses Bootstrap.
IV. Examples
Now let's try to output "Hello, world!" using Bootstrap:
<!DOCTYPE html><html><head> <title>Try Bootstrap instance online</title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body> <h1>Hello, world!</h1> </body></html>
<!-- New Bootstrap core CSS file --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- Optional Bootstrap theme file (not generally used) --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script><!-- jQuery file. Be sure to introduce --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"><!-- The latest Bootstrap core JavaScript file --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and to correctly build the Bootstrap installation environment.