How to reference bootstrap in html-Bootstrap Tutorial-php.cn

How to reference bootstrap in html

藏色散人

Release： 2020-11-18 10:28:09

Original

7542 people have browsed it

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. .

How to reference bootstrap in html

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>

Copy after login

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

Copy after login

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!