A Brief Introduction to bootstrap and how to download and use it

Download Bootstrap

Bootstrap provides several methods to help you get started quickly. Each method is applicable to developers with different skill levels and different use cases. Continue to read the following content to see which method is suitable for your needs.

Compiled CSS, JS, and font files

The fastest way to get Bootstrap is to download compiled and compressed CSS and JavaScript files, and also include font files. But does not contain documents or source code files.

Download source code from additional download Channels

You can download the less and JavaScript source code of the latest Bootstrap version from GitHub.

Clone or fork via GitHub

Visit our GitHub source code library. You can clone the entire project or fork the entire project to your own account.

Install using the bower Tool

You can use bower to install and manage Bootstrap styles, JavaScript files, and documents.

bash$ bower install bootstrap

Use the CDN acceleration service provided by bootstrap Chinese Network

The bootstrap Chinese Network builds its own CDN acceleration service for bootstrap and uses CDN services from cloud vendors in China. The service provides faster access speed, more effective acceleration, no speed and bandwidth restrictions, and is permanently free of charge. The bootstrap Chinese network also provides CDN services for a large number of open-source tool libraries. Go to the open CDN homepage to view more available tool libraries.

<! -- Latest Bootstrap core CSS file --> <LINK rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <LINK rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> <! -- Jquery file. Be sure to introduce it before Bootstrap. Min. JS --> <SCRIPT src = "http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </SCRIPT> <! -- The latest Bootstrap core Javascript file --> <SCRIPT src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"> </SCRIPT>

Foreign CDN acceleration service

Maxcdn provides a free CDN acceleration service for bootstrap. You can use the link provided by bootstrap CDN to introduce the bootstrap file.

<! -- Latest Bootstrap core CSS file --> <LINK rel = "stylesheet" href = "// netdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <LINK rel = "stylesheet" href = "// netdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <! -- The latest Bootstrap core Javascript file --> <SCRIPT src = "// netdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </SCRIPT>

Compile the less source code file of Bootstrap

If you download the source code file, you need to compile the less source code of Bootstrap into usable CSS code. Currently, bootstrap only supports the recess compilation tool, this is based on less. JS build compilation and code detection tools.

Files contained

Bootstrap provides two types of compressed packages. You can see the following directories and files in the downloaded packages. These files are stored in different directories by category, it also provides two versions: Compressed and uncompressed.

Bootstrap depends on jquery

Please note that,All JavaScript plug-ins depend on jquery, so jquery must be introduced before BootstrapAs shown in the basic template. Inbower.jsonThe file lists the jquery versions supported by bootstrap.

Pre-compiled Bootstrap version

After downloading the compressed package, decompress it to any directory to see the following directory structure:

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

This is the most basic form of Bootstrap organization: uncompressed files can be directly used in any web project. We provide (bootstrap.min.*) And uncompressed (bootstrap.*. The font icon file is from glyphicons.

Bootstrap source code

The bootstrap source code contains pre-compiled CSS, JavaScript, and Icon font files, as well as the less, JavaScript, and document source code. Specifically, the main file structure is as follows:

bootstrap/├── less/├── js/├── fonts/├── dist/│   ├── css/│   ├── js/│   └── fonts/├── docs-assets/├── examples/└── *.html

less/,js/Andfonts/Contains the source code of CSS, JS, and font icons.dist/The directory contains all the files in the pre-compiled Bootstrap package mentioned above.docs-assets/,examples/And all*.htmlFile is the source code file of the document. In addition to the files mentioned above, they also contain package definition files, license files, and so on.

Basic Template

Use the simple HTML template provided below, or modify these cases. We strongly recommend that you modify these cases as needed, instead of simply copying and pasting them.

Copy and paste the following HTML code. This is the simplest Bootstrap page.

<!DOCTYPE html>