search

Home >Web Front-end >JS Tutorial >How to introduce bootstrap

How to introduce bootstrap

藏色散人
藏色散人Original
2019-06-01 10:13:587631browse

How to introduce bootstrap

There are generally two ways to use Bootstrap:

Refer to the online Bootstrap style,

Download Bootstrap to Reference locally.

Online citation

The basic template is as follows: 

<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap引入</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->  
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
</head>

Advantages: No need to install Bootstrap locally, and no need to consider the path problem when quoting

Disadvantages: Once the online style is down, it will affect the rendering of the entire page style

Local reference

Download Bootstrap locally.

Directly access the 3 URLs in the above code to get the code

Go to Bootstrap’s official website http://v3.bootcss.com/ and JQuery

’s official website http: //jquery.com/ Download the corresponding files

Place the required files under the project for easy reference

The directory structure of bootstrap is as follows:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

The most commonly used ones are css/bootstrap.min.css, js/bootstrap.min.js

jquery.min.js can be downloaded from the JQuery official website

Finally, just introduce it in the corresponding file.

Advantages: Ensure that the page style can still be displayed normally even if the network condition is poor

Disadvantages: It needs to be installed or downloaded in advance, and path issues must be considered when referencing.

The above is the detailed content of How to introduce bootstrap. For more information, please follow other related articles on the PHP Chinese website!

jquery css bootstrap JS http
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Why is json commonly used?Next article：Why is json commonly used?

Related articles

See more