OpenClassRooms : Prenez en main Bootstrap Flashcards
How many columns by default in the Bootstrap grid system ?
12
C’est quoi un normalize.css ?
Les navigateurs n’adoptent pas tous les mêmes valeurs par défaut pour les styles des éléments HTML. Cela peut générer quelques surprises au rendu des pages web selon le navigateur utilisé. D’autre part certains navigateurs présentent des défauts de prise en compte de certains éléments. Normalize est un petit fichier CSS qui établit des règles pour avoir un rendu identique quel que soit le navigateur utilisé. Au lieu d’agir brutalement comme les reset CSS qui remettent toutes les valeurs à zéro, normalize agit intelligemment en conservant ce qui est utile et en jouant finement sur les éléments
Que contiennent les fichiers dont le nom contient « min » ?
Les fichiers min (bootstrap.min.css, bootstrap.min.js et bootstrap-theme.min.css) contiennent le même code que leurs équivalents (bootstrap.css, bootstrap.js et bootstrap-theme.css) mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement.
À quoi servent les fichiers bootstrap-theme.css.map et bootstrap.css.map ?
Les fichiers bootstrap-theme.css.map et bootstrap.css.map permettent de retrouver l’emplacement original d’une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement de Bootstrap.
Quelle utilisation pour les fichiers de base et les fichiers compressés ?
Il faut distinguer deux situations :
- Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le code de Bootstrap, il faut donc mettre les fichiers non compressés.
- Lorsque votre site est en ligne, vous n’avez plus à vous inquiéter du code et seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions compressées (min).
Quel doctype faut-il déclarer dans nos pages HTML pour que Bootstrap fonctionne ?
Le Doctype d’HTML 5 :
Comment déclarer le fichier bootstrap.min.css dans le code HTML ?
Dans le cas où le dossier Bootstrap se trouve à la racine:
Est-ce que la librairie jQuery fait partie des fichiers Bootstrap ?
Non. Si vous utilisez des composants JavaScript, vous devez également référencer la librairie de Bootstrap ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit être récupérée indépendamment sur http://jquery.com/). Une fois téléchargée, on peut la mettre dans le dossier “js” de Bootstrap.
Comment déclarer les fichiers javascript de Bootstrap et de jQuery ?
À quoi sert le fichier thème ?
Ce fichier est un exemple d’amélioration de l’esthétique de Bootstrap, il n’est pas utile pour son fonctionnement. Si vous observez l’apparence des composants de Bootstrap, vous allez constater qu’ils sont « plats », sans aucun relief. Dans la version 2, ce n’était pas le cas. Pour des raisons de performances, il a été décidé d’offrir cette amélioration visuelle dans un fichier séparé. Si vous avez la curiosité de regarder ce fichier, vous verrez qu’il contient des définitions de dégradés et d’ombrages.
Y-a-t-il des inconvénients à l’utilisation de CDN ?
D’après certains, l’utilisation d’un CDN, qui impose une requête DNS supplémentaire, ne serait judicieuse que si l’on a beaucoup de librairies à charger. D’autre part si vous modifiez le fichier CSS de Bootstrap pour l’adapter à vos besoins, vous ne pourrez plus bénéficier des avantages d’un CDN. Mais si vous voulez profiter de cette possibilité pour Bootstrap, utilisez bootstrapcdn. Vous pouvez évidemment utiliser un CDN également pour jQuery, par exemple chez Google.
La déclaration de Bootstrap dans le HTML via CDN est-elle différente ?
Oui.
À quoi sert cette ligne :
Cette déclaration ne concerne que le navigateur Internet Explorer. Elle permet de s’assurer qu’il utilise la dernière version du moteur de rendu. Notez que cette ligne ne passe pas la validation W3C.
À quoi sert cette ligne :
Cette ligne concerne uniquement les mobiles. On demande que l’affichage occupe tout l’espace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez aller encore plus loin en interdisant le zoom ou en le limitant à certaines valeurs.
À quoi servent ces lignes ?
Le but de ces appels est de permettre aux navigateurs ne prenant pas en charge HTML5 et les Media Queries CSS3 de le faire ; ils visent essentiellement IE8. Méfiez-vous en particulier si vous utilisez un CDN pour charger vos styles CSS, parce que respond.js utilise AJAX et vous pouvez buter sur le problème d’accès à plusieurs domaines. Le but du fichier html5shiv est de créer les éléments (avec createElement) de type bloc du HTML 5 (header, section, aside…) qui sont ignorés par IE8.
À quoi correspondent ces lignes et où se trouvent-elles ?
En fin de page (pour ne pas ralentir le chargement) se trouvent les appels JavaScript (utiles si vous utilisez des plugins jQuery)
Résumé en image du code de base : où se trouvent les déclaration de CSS et de scripts js ?
Que signifie ceci :
@media (max-width: 767px) {…}
L’expression située entre parenthèses est évaluée, et si elle est « vraie », les règles situées dans le bloc sont prises en compte.Ici l’expression est (max-width: 767px), elle se comprend facilement. Elle est « vraie » si le support de visualisation de la page a une largeur d’affichage inférieure ou égale à 767px.
Quelle est la spécificité de la classe .row concernant les marges ?
Cette classe établit des marges négatives à droite et à gauche
Container et container-fluid ont des propriétés similaires. Quelles sont-elles ?
Bootstrap permet aussi de sauter des colonnes. Quel est le terme spécifique que contiennent les classes permettant ceci ?
offset
L’exemple en image va permettre de sauter 6 colonnes et occasionner une marge à gauche de 50%
Très logiquement, les colonnes s’affichent dans l’ordre du flux. Mais peut-on bouleverser cet ordre ?
Oui
