Bootstrap4 Installation et utilisation
Nous pouvons installer Bootstrap4 des deux manières suivantes :
CDN Bootstrap 4
Il est recommandé aux utilisateurs en Chine d'utiliser la bibliothèque publique de ressources statiques de ByteDance :
CDN Bootstrap4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
Il est recommandé aux utilisateurs en Chine d'utiliser les bibliothèques du CDN Staticfile :
CDN Bootstrap4
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
Remarque :popper.min.js est utilisé pour les popups, les infobulles et les menus déroulants. Actuellement, bootstrap.bundle.min.js l'inclut déjà.popper.min.js。
De plus, vous pouvez également utiliser les services CDN suivants :
Télécharger Bootstrap 4
Vous pouvez vous rendre sur le site officielhttps://getbootstrap.com/pour télécharger la bibliothèque de ressources Bootstrap4.
Remarque :De plus, vous pouvez également l'installer à l'aide d'outils de gestion de paquets tels que npm, gem, composer, etc. :
npm install [email protected]
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2
Créez votre première page Bootstrap 4
1. Ajoutez le doctype HTML5
Bootstrap nécessite l'utilisation d'un type de document HTML5, vous devez donc ajouter la déclaration du doctype HTML5.
Le doctype HTML5 est déclaré dans l'en-tête du document, et l'encodage correspondant est défini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
Mobile First
Pour rendre les sites web développés avec Bootstrap adaptés aux mobiles, en assurant un rendu correct et le zoom tactile, vous devez ajouter une balise meta viewport dans l'en-tête de la page web, comme indiqué ci-dessous :
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-widthIndique que la largeur est la largeur de l'écran de l'appareil.
initial-scale=1Indique l'échelle de zoom initiale.
shrink-to-fit=no s'adapte automatiquement à la largeur de l'écran du téléphone.
Classes de conteneur
Bootstrap 4 nécessite un élément conteneur pour envelopper le contenu du site web.
Nous pouvons utiliser les deux classes de conteneur suivantes :
- La classe .container est utilisée pour un conteneur à largeur fixe qui prend en charge les mises en page responsives.
- La classe .container-fluid est utilisée pour un conteneur de 100% de largeur qui occupe toute la fenêtre d'affichage.
Deux pages Bootstrap 4
Exemple Bootstrap4 .container
<div class="container">
<h1>Ma première page Bootstrap</h1>
<p>Ceci est un texte.</p>
</div>
Essayez-le »
L'exemple suivant montre un conteneur qui occupe toute la fenêtre d'affichage.
Exemple Bootstrap4 .container-fluid
<div class="container-fluid">
<h1>Ma première page Bootstrap</h1>
<p>Utilisé .container-fluid, largeur 100%, un conteneur qui occupe toute la fenêtre d'affichage.</p>
</div>
Essayez-le »
Utilisation de Bootstrap dans Cloud Studio
Ci-dessous, nous vous montrerons comment installer et utiliser Bootstrap4 dans Cloud Studio :
étape 1 : Visitez Tencent Cloud Developer Platform et inscrivez-vous/connectez-vous à votre compte.
étape 2 : Dans le menu de l'environnement d'exécution à droite, sélectionnez : "ubuntu"
étape 3 : Dans le répertoire de code à gauche, créez un répertoire html et écrivez votre code HTML, tel que index.html
étape 4 : Collez le code suivant dans le fichier index.html pour importer Bootstrap4 (vous pouvez également télécharger la bibliothèque de ressources Bootstrap4 depuis le site officiel https://getbootstrap.com/) :
<!-- Nouveau fichier CSS central de Bootstrap4 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<!-- Le fichier jQuery doit être importé avant bootstrap.min.js -->
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js utilisé pour les fenêtres contextuelles, les infobulles, le menu déroulant -->
<script src="https://cdn.staticfile.net/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- Dernier fichier JavaScript central de Bootstrap4 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
étape 5 : Saisissez la commande sudo vim /etc/nginx/sites-enabled/default dans le terminal. Modifiez la partie encadrée en rouge du fichier de configuration comme indiqué dans la figure ci-dessous, puis saisissez la commande : sudo nginx restart pour redémarrer le service nginx (après l'installation et le démarrage de nginx, il écoute sur le port 80 par défaut. Nous devons remplacer le répertoire du site nginx et le port d'écoute par ceux dont nous avons besoin).
étape 6 : Cliquez sur l'onglet [Access Link] à l'extrême droite. Dans le panneau du lien d'accès, saisissez le numéro de port : 8080 (cohérent avec le numéro de port du fichier de configuration nginx précédent), cliquez sur Create Link, puis vous pouvez cliquer sur le lien généré pour accéder au code que nous venons d'écrire et voir l'effet des composants Bootstrap4.
CODING organise actuellement un [My Favorite Cloud Studio Plugin Contest] basé sur les espaces de travail Cloud Studio. Visitez le site officiel de l'événement : https://studio.qcloud.coding.net/campaign/favorite-plugins/index pour en savoir plus sur l'événement.
Autres extensions
