Comment référencer bootstrap en HTML-Tutoriel d'amorçage-php.cn

Comment référencer bootstrap en HTML

藏色散人

Libérer： 2020-11-18 10:28:09

original

7485 Les gens l'ont consulté

Comment référencer bootstrap en html : 1. Utilisez la méthode "link rel" pour référencer bootstrap en ligne ; 2. Téléchargez Bootstrap localement, placez les fichiers requis sous le projet, puis introduisez-le dans le fichier correspondant. .

Comment référencer bootstrap en HTML

Recommandé : "Tutoriel vidéo bootstrap"

Introduction à Bootstrap

Il existe généralement deux façons d'utiliser Bootstrap :

en faisant référence au style Bootstrap en ligne,

en téléchargeant Bootstrap localement pour référence.

Citation en ligne

Le modèle de base est le suivant :

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

Copier après la connexion

Avantages : Il n'est pas nécessaire d'installer Bootstrap localement, et il n'est pas nécessaire prendre en compte le problème de chemin lors de la citation

Inconvénients : Une fois le style en ligne baissé, cela affectera le rendu du style de la page entière

Référence locale

Téléchargez Bootstrap localement.

Accédez directement aux 3 URL dans le code ci-dessus pour obtenir le code

Allez sur le site officiel de Bootstrap http://v3.bootcss.com/ et celui de JQuery

site officiel http://jquery.com/ Téléchargez les fichiers correspondants

Placez les fichiers requis sous le projet pour une référence facile

La structure des répertoires de bootstrap est la suivante :

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

Copier après la connexion

Les plus couramment utilisés sont css/bootstrap.min.css, js/bootstrap.min.js

jquery.min.js peut être téléchargé depuis le site officiel de JQuery

Enfin, il suffit de l'introduire dans le fichier correspondant.

Avantages : assurez-vous que le style de page peut toujours être affiché normalement même si l'état du réseau est mauvais

Inconvénients : il doit être installé ou téléchargé à l'avance, et les problèmes de chemin doivent être pris en compte lors référencement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!