Home >Web Front-end >Bootstrap Tutorial >How to reference bootstrap in html

How to reference bootstrap in html

藏色散人Original: 2020-11-18 10:28:097541browse

htmlHow to reference bootstrap: 1. Use the "link rel" method to reference bootstrap online; 2. Download Bootstrap locally, place the required files under the project, and then introduce it in the corresponding file. .

Recommendation: "bootstrap video tutorial"

Introduction to Bootstrap

Bootstrap is generally used in two ways:

Refer to the online Bootstrap style,

Download Bootstrap to the local for reference.

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 reference bootstrap in html. For more information, please follow other related articles on the PHP Chinese website!

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：What should I do if the bootstrap icon does not display?Next article：What should I do if the bootstrap icon does not display?

See more

How to reference bootstrap in html

Related articles