Récemment, j'ai découvert une bonne chose appelée bootstrap, le cadre CSS réactif le plus populaire de nos jours, qui priorise les appareils mobiles et peut rapidement s'adapter à différents appareils. Utilisez-le pour écrire des pages réactives rapidement et commodément et bloque les différences de navigateur. Avec Bootstrap, vous ne pouvez plus imaginer la vie tragique de l'écriture de pages Web dans le CSS original dans le passé.
Après avoir appris, j'ai trouvé que j'avais également la capacité de développer une page haut de gamme en quelques minutes. Cet article vous présentera Bootstrap et vous amènera à implémenter une page réactive ensemble.
Figure 1. Priorité mobile, adaptée à différents appareils
1. Installation
Le moyen le plus simple est de référencer directement le bootstrap fourni par le Contenu Distribution Network (CDN) dans la page Web. Lorsqu'un utilisateur accède à la page Web, il obtiendra des ressources du serveur voisin.
Listing 1. Obtenez un bootstrap du réseau de distribution de contenu
<! - Dernières CSS compilées et minifiées -> <link rel = "Stylesheet" href = "bootstrap / 3.3.4 / css / bootstrap.min.css"> <! - Thème facultatif -> <link Rel = "Stylesheet" href = "bootstrap / 3.3.4 / csss / bootstrap-theme.min.Min.css"> <! Javascript -> <script src = "bootstrap / 3.3.4 / js / bootstrap.min.js"> </ script>
Vous pouvez également choisir de télécharger Bootstrap pour déployer localement. Les utilisateurs peuvent télécharger le bootstrap complet sur la page, ou ils peuvent sélectionner les fonctions utilisées dans le projet en fonction des besoins du projet sur la page personnalisée, compiler et télécharger une version simplifiée de Bootstrap. Une fois le téléchargement terminé, un fichier zip est obtenu. La structure du répertoire décompressé est la suivante:
Listing 2. Structure du répertoire bootstrap
bootstrap /
├fiques CSS /
│ ├fique
│ ├fiques
│ ├fique
│ ├fiques
│ ├fique
│ └fique
├fiques
│ ├── bootstrap.js
│ └── bootstrap.min.js
└fiques les polices /
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
└fiques-Halphics-Halflings-Regular.woff2
Ici, nous nous concentrons principalement sur trois fichiers simplifiés: bootstrap.min.css est le composant principal de Bootstrap et contient un grand nombre de classes CSS à utiliser; Bootstrap-Theme.min.css contient des thèmes bootstrap en option; Bootstrap.min.js fournit quelques méthodes JavaScript. Il convient de noter que bootstrap dépend de jQuery, donc jQuery doit être introduit avant d'utiliser bootstrap.min.js. Comme utiliser des réseaux de distribution de contenu, nous utilisons des chemins relatifs pour introduire CSS et JavaScript correspondants dans nos pages. Dans le développement réel, nous utilisons souvent le modèle fourni par Bootstrap comme point de départ. Ce modèle présente les métadonnées et le bootstrap requis par les pages réactives. Les développeurs peuvent écrire leurs propres pages réactives sur cette base:
Listing 3. Modèle de base Bootstrap
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "Viewport" content = "width = device-width, initial-sched = 1"> <! Tout autre contenu de la tête doit venir * après * ces balises -> <itle> Template Bootstrap 101 </Title> <! - Bootstrap -> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <! - HTML5 Shim and Response.js pour la prise en charge de Html5 si. Vous affichez la page via le fichier: // -> <! - [Si lt ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <script> <script> <script> src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </ script> <! [endif] -> </ad> <body> <h1> Bonjour, monde! </h1> <! - JQUERY (nécessaire pour les plugrins javascript de Bootstrap) -> <! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </ script> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels selon les besoins -> Script> </ body> </ html>
2. CSS
Bootstrap est d'abord un cadre CSS, qui a prédéfini de nombreuses classes CSS. Les développeurs n'ont qu'à ajouter des classes CSS appropriées aux éléments HTML pour obtenir le style souhaité, qui peut compléter la mise en page, la mise en page et d'autres fonctions. Le CSS fourni par Bootstrap est extrêmement puissant. Cet article se concentrera sur le système de grille qu'il fournit. Pour d'autres fonctions, il ne sera mentionné que lors de l'application. Si vous voulez en savoir plus sur les fonctions, veuillez vous référer à la documentation officielle.
récipient
Lorsque vous utilisez la disposition de bootstrap, vous devez inclure des éléments HTML dans un conteneur (.Container). Bootstrap fournit deux conteneurs: .Container et .Container-fluid. Le premier centre le contenu avec une largeur fixe, tandis que le second permet au contenu de remplir horizontalement toute la fenêtre du navigateur, comme indiqué ci-dessous:
Listing 4. .Container et .Container-fluid
<div> <p> "Quand j'étais enfant, ma mère faisait une tasse de café pour moi chaque fois que j'étais malade. Elle a dit doucement:" Les étrangers boivent cela. "" J'avais toujours peur du café, et l'acidité et l'amertume étaient entrelacées. Maintenant, je ne trouve pas le goût que j'ai bu quand j'étais enfant quand j'étais enfant, jusqu'à ce jour, je buvais une tasse d'Isatis. "</p> </div> <v> <p>" Quand j'étais enfant, chaque fois que j'étais malade, ma mère faisait une tasse de café pour moi. Elle a dit doucement: "Les étrangers boivent cela." "Aussi jeune, j'avais toujours peur du café, et l'amère et l'amertume sont entrelacées. Maintenant, je ne trouve pas le goût que je buvais quand j'étais enfant quand j'étais enfant, jusqu'à ce jour, je buvais une tasse d'Isatis." </p> </div>
L'image suivante montre à quoi il ressemble dans le navigateur:
Figure 2. Répécteur
Système de grille
Comme le système de grille que nous avons conçu en écrivant la première page réactive, Bootstrap divise la page en lignes (.row), avec 12 colonnes par ligne (.col-md- *). Les lignes doivent être incluses dans le conteneur. Selon la taille de l'écran, les colonnes sont divisées en .col-xs-, .col-sm-, .col-md- et .col-lg-, respectivement, correspondant aux téléphones mobiles (<768px), aux tablettes (≥768px), à des ordinateurs à écran moyen (≥992px) et à des ordinateurs à écran grand (≥1200px). Ces pixels qui y apparaissent sont appelés points critiques. Chaque fois que la taille du navigateur ou la taille de l'écran atteint un autre point critique, la classe CSS correspondante fonctionnera et la disposition de la page changera. Voir le chiffre suivant pour plus de détails:
Figure 3. Système de grille
Comment comprenez-vous le tableau ci-dessus? Si vous avez besoin de creuser la page en trois colonnes lorsque vous parcourez une page sur un ordinateur, qui explique 1/4, 2/4 et 1/4 de la largeur de la ligne, vous pouvez écrire le code comme suit:
Listing 5. Une ligne est divisée en trois colonnes
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>>. Col-md-3 </div> </div>
Ouvrez le navigateur et vous pouvez voir qu'ils occupent chacun 3, 6 et 3 des 12 colonnes, ce qui représente exactement 12 colonnes. Si nous réduisons la fenêtre du navigateur jusqu'à ce qu'il soit inférieur à 970px, nous constatons qu'il est devenu trois lignes, empilées ensemble pour afficher. Sauf pour .col-xs-, d'autres classes CSS se comportent de la même manière. Lorsque la taille de l'écran est plus petite que son point critique, il sera affiché empilé. Il ne sera affiché dans les colonnes que lorsque la taille de l'écran est plus grande que son point critique, et .Col-Xs- s'affiche dans les colonnes dans tous les cas.
Les classes CSS correspondant à différentes tailles d'écran peuvent être utilisées de manière mitigée. Par exemple, si je veux qu'une page affiche 3 colonnes sur l'ordinateur et 2 colonnes sur le téléphone, je peux écrire le code comme suit. Au téléphone, la troisième colonne sera affichée sur la ligne suivante et occupera la moitié de la largeur de la ligne:
Listing 6. Afficher différents nombres de colonnes sur les ordinateurs et les téléphones
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>>. Col-md-3 </div> </div>
Si vous souhaitez afficher la même colonne sur tous les appareils, vous n'avez qu'à définir la taille minimale .COL-XS-, et la disposition s'étendra automatiquement à une taille plus grande, sinon elle ne tiendra pas:
Listing 7. Le même nombre de colonnes s'affiche sur tous les appareils
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
Vous pouvez également donner un certain décalage à la colonne, par exemple, la première colonne représente 1/4 de la largeur de la ligne, et nous voulons que la deuxième colonne compense 6 colonnes vers la droite, occupant 3 colonnes à la fin de la ligne:
Listing 8. décalage de la colonne
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
L'ordre des colonnes peut également être ajusté par .col-md-push- * et .col-md-pull- *. Leur signification est de pousser un élément vers l'arrière ou de tirer plusieurs colonnes vers l'avant. Les développeurs peuvent utiliser cette fonctionnalité pour extraire un contenu important vers l'avant lors de l'affichage sur le téléphone:
Listing 9. Colonne Push and Pull
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
Ce qui est encore plus excitant, c'est que ce système de maillage peut également être imbriqué, de sorte que diverses dispositions complexes peuvent être effectuées:
Listing 10. nidification
<div> <div> Niveau 1: .Col-Sm-9 <div> <div> Niveau 2: .Col-XS-8 .Col-SM-6 </div> <div> Niveau 2: .Col-Xs-4 .Col-SM-6 </div> </div> <div> Niveau 1: .Col-SM-3 </v> </v> </v>
Le code ci-dessus est généralement divisé en deux colonnes, et la première colonne a deux colonnes imbriquées.
La fonction de grille de Bootstrap offre diverses possibilités pour la mise en page des pages Web et est très simple à utiliser. Prenons un cas pour voir à quel point il est simple d'écrire une page réactive à l'aide de bootstrap.
3. Combat réel
Supposons que vous souhaitiez implémenter une page Web comme indiqué dans l'image suivante:
Figure 4. Conception Web
Tout d'abord, nous divisons les éléments de la page Web en lignes et colonnes correspondantes. La figure suivante montre la division de l'auteur:
Figure 5. Diviser la conception Web en lignes et colonnes
En conséquence, définissez notre structure HTML et ajoutez la classe CSS bootstrap appropriée:
Listing 11. Définition de la structure HTML
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Jane Doette </h1> <h3> Ninja frontal </h3> </div> <hr> <v> <div> <img src = "http://placehold.it/950x350"> </ div> <div> <div> <h2> Travail en vedette </h2> </ div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> Applify </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> SUNFLOWER </h2> <a href = "https://github.com/udacity/sunfllower"> https://github.com/udacity/sunflower </a> </ div> <div> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> <a href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </ div>
Il a fallu moins de 10 minutes à l'auteur pour écrire le code ci-dessus, et comme il n'y avait pas de photos, l'auteur a utilisé les photos des espaces réserves fournies en ligne. L'ouverture de cette page dans un navigateur est proche de la conception, mais la police, la majuscule, la majuscule et la police sont toujours incompatibles avec la conception. Ensuite, vous devez affiner et parcourir le document bootstrap pour découvrir les classes CSS connexes. L'effet final est illustré dans la figure ci-dessous:
Figure 6. Effet de réalisation
Ce qui est plus intéressant, c'est que lorsque vous affinerons la fenêtre du navigateur ou accédez à la page à partir de votre téléphone, vous constaterez qu'il s'agit déjà d'une page réactive simple, et nous n'avons ajouté aucun code supplémentaire! En regardant le temps, il a fallu moins de 20 minutes au total, et j'ai également tenu ma promesse d'écrire une page réactive en quelques minutes.