Bootstrap installation Environment configuration tutorial Sharing _javascript Tips

Bootstrap installation is very easy. This article is my study summary, easy to query after learning, but also hope to bring help to everyone.

First, download Bootstrap
You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link, you will see the following page:

You will see two buttons:

Download Bootstrap: download Bootstrap. Click this button to download a precompiled version of Bootstrap CSS, JavaScript, and fonts. does not contain documents and original source code files.
Download Source: download sources. By clicking on this button, you can get the latest Bootstrap less and JavaScript source code directly from the from.
If you are using a source code that is not compiled, you need to compile the less file to generate a reusable CSS file. For compiling less files, Bootstrap officially supports only recess, which is a Twitter based less.js CSS hint.

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

Because files are compiled and compressed, you do not have to include these separate files each time in stand-alone feature development.

This learning note uses the latest edition (Bootstrap 3).

II. Structure of documents
1. Pre-compiled Bootstrap
When you download the compiled version of Bootstrap, 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.*), as well as the compiled compressed CSS and JS (bootstrap.min.*). It also contains the Glyphicons font, which is an optional Bootstrap theme.

2, Bootstrap source code
If you download the Bootstrap source code, the file structure looks like this:

The files under less/, js/, and fonts/are the source codes for Bootstrap CSS, JS, and icon fonts, respectively.
The dist/folder contains the files and folders listed in the pre-compiled downloads section above.
docs-assets/, examples/, and all *.html files are Bootstrap documents.

Three, HTML template
A basic HTML template using Bootstrap is shown below:

<! DOCTYPE html>  

Here you can see the jquery.js, Bootstrap.min.js , and bootstrap.min.css files that are used to make a regular HTML file into a template that uses bootstrap.

Iv. examples
now let's try to use the bootstrap output "Hello, world!" ：

<! DOCTYPE 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 files (generally not used)--> <script "src=
" 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" before Bootstrap.min.js > </script>

<!--the latest Bootstrap core JavaScript files-->
<script src= "http://apps.bdimg.com/libs/ Bootstrap/3.3.0/js/bootstrap.min.js "></script>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, properly set up bootstrap installation environment.