Latest web development tutorials

Bootstrap installation environment

Bootstrap is very easy to install. This chapter explains how to download and install Bootstrap, Bootstrap discuss file structure, and through an example to demonstrate its use.

Download Bootstrap

You can choose from http://getbootstrap.com/ download the latest version of Bootstrap on. When you click the link, you'll see the page shown below:

Bootstrap Download

You'll see two buttons:

  • Download Bootstrap:Download Bootstrap. Click on this button, you can download the Bootstrap CSS, compressed version of the pre-compiled JavaScript and fonts. It does not contain the original documents and source code files.
  • Download Source:download the source code. Click on this button, you can get the latest Bootstrap LESS and JavaScript source code directly from the from.

If you are using a non-compiled source code, you need to compile LESS files to generate reusable CSS file. For compile LESS files, Bootstrap officially supports only Recess , which is based on Twitter less.js of CSS tips.

In order to better understand and more convenient to use, we will use the pre-compiled version of Bootstrap in this tutorial.

Since the file is compiled and compressed, in a separate development function, you do not always include these separate files.

Time of this writing, using the latest version (Bootstrap 3).

File Structure

Precompiled Bootstrap

When you download a compiled version of Bootstrap, unzip the ZIP file, you will see the following file / directory structure:

Compiled Bootstrap file structure

As shown above, you can see the compiled CSS and JS (bootstrap. *), And compiled compressed CSS and JS (bootstrap.min. *). Also contains Glyphicons font, which is an optional Bootstrap theme.

Bootstrap source code

Bootstrap if you download the source code, the file structure is as follows:

Bootstrap source code structure
  • less/, js / andfonts /under document are Bootstrap CSS, JS and icon font source code.
  • dist /folder contains files and precompiled download section above listed folders.
  • docs-assets/, examples / and all the* .htmlfile is Bootstrap documentation.

HTML Templates

Using a basic HTML template Bootstrap is as follows: 

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" 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"></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 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Here you can see containsjquery.js, bootstrap.min.jsandbootstrap.min.cssfile, used to allow a regular HTML document into using Bootstrap template.

For details on the above snippet of each element will be Bootstrap CSS overview chapters explain in detail.

Examples

Now let's try to use the Bootstrap output "Hello, world!":

Examples

<H1> Hello, world! </ H1>

try it"

Bootstrap CDN Recommended

Examples of this site is used Bootstrap resources Baidu static resource library.

Baidu static repository of CDN services, access to faster, more effective acceleration, speed, and no bandwidth limitations, permanently free, in code as follows: 

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>