The best Bootstrap installation environment Tutorial In 2024, In this tutorial you can learn Download Bootstrap,File Structure,HTML Templates,Examples,Examples,Bootstrap CDN Recommended,
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.
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:
You'll see two buttons:
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).
When you download a compiled version of Bootstrap, unzip the ZIP file, you will see the following file / directory 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 if you download the source code, the file structure is as follows:
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.w3write.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.
Now let's try to use the Bootstrap output "Hello, world!":
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.w3write.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --> <script src="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.static.w3write.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>