Comment rendre le bootstrap réactif-Tutoriel d'amorçage-php.cn

Comment rendre le bootstrap réactif

爱喝马黛茶的安东尼

Libérer： 2019-07-23 13:50:41

original

3165 Les gens l'ont consulté

Comment rendre le bootstrap réactif

Cette fois, j'utilise bootstrap3.4 pour en créer une version responsive. J'ai expliqué en détail la sélection de la version bootstrap dans l'article précédent. La méthode est relativement simple, avec des captures d'écran de la. les étapes et les instructions qui l'accompagnent, devraient tous comprendre. Téléchargez d'abord le code source d'amorçage, décompressez-le et copiez les 3 dossiers du dossier dist dans votre projet (ou le dossier modèle, veuillez noter que ces 3 dossiers doivent être placés ensemble et ne peuvent pas être séparés).

Comment rendre le bootstrap réactif

Ajouter des méta responsives

Les pages Web doivent être écrites en HTML5, et mettre ces 3 balises méta dans l'en-tête en haut début Après les balises, les trois balises suivantes 4 à 6 doivent être placées à l'avant et ne peuvent pas être placées dans d'autres positions et doivent être présentes pour obtenir de la réactivité.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上面4~6的3个meta标签必须要添加且放在最前面-->

Copier après la connexion

Citer les fichiers CSS

Citer les fichiers CSS bootstrap en html :

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

Copier après la connexion

Expliquez séparément les CSS et JS fournis dans le dossier bootstrap, bootstrap .css et bootstrap.js sont des fichiers sources non compressés qui peuvent continuer à être écrits et modifiés. Le volume sera légèrement plus grand et adapté aux modifications ; les fichiers js et css avec min sont compressés. cdn pour charger la référence, vous choisissez généralement le fichier avec min. Il suffit de les comprendre.

Comment rendre le bootstrap réactif

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Citer des fichiers js

Citant le fichier js de bootstrap : bootstrap.js, il faut noter que bootstrap s'appuie sur le plug-in jQuery, donc le fichier jQuery doit être introduit ensemble ; la version jQuery supportée par bootstrap3.4 ne peut pas dépasser la jquery-1.12. 4 et versions ultérieures, jQuery ne prend pas en charge bootstrap3.4. S'il s'agit de bootstrap4 ou supérieur, il peut prendre en charge la dernière version de jQuery. Il est également important de noter que le fichier jQuery.js doit être placé devant le dossier bootstrap.js. Selon l'expérience, si la position est à l'envers, le chargement de la page sera parfois très lent~

<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap.js">
</script>

Copier après la connexion

<🎜. >

Pour résoudre le problème de compatibilité avec les navigateurs inférieurs à IE9

Pour que bootstrap3.4 s'affiche normalement sur les navigateurs inférieurs à IE9, vous devez ajouter le code suivant devant le < /head> pour introduire html5shiv.min.js et respond.min Ces deux fichiers js, .js, sont compatibles avec les navigateurs inférieurs à IE9 en raison du code ci-dessous, alors ne l'oubliez pas.

<!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]-->

Copier après la connexion

Le code complet est le suivant. Veuillez noter que la balise méta responsive doit être placée à l'avant. Le fichier CSS bootstrap doit également être placé devant les autres CSS. Le fichier bootstrap js peut être placé à l'intérieur de la balise head ou chargé dans le pied de page, mais le fichier jQuery doit être introduit en même temps. Pour obtenir la compatibilité avec les navigateurs inférieurs à IE8, vous devez ajouter des js compatibles.

Comment rendre le bootstrap réactif