Présentation de Bootstrap 4 Cheatsheet
La feuille de triche Bootstrap 4 a incorporé une refonte majeure de Bootstrap 3. De nombreux changements sont intervenus sur la plupart des composants qui incluent les tableaux, les formulaires, les listes déroulantes, les grilles, les barres de navigation, etc. Les principaux avantages des frameworks comme Bootstrap sont qu'ils peuvent accélérer temps de développement même en maintenant la qualité et la cohérence de l'application à travers le site. La feuille de triche Bootstrap 4 fonctionne sur tous les navigateurs modernes au-dessus d'Internet Explorer 9.
Bootstrap 4
Bootstrap 4 est la version la plus récente et la plus avancée de bootstrap. C'est le cadre le plus populaire pour HTML, CSS et JavaScript utilisé pour développer des applications réactives et mobiles. Bootstrap 4 comme les versions antérieures est gratuit et open-source. Nous n'avons plus besoin de réécrire et de tout repenser à partir de zéro pour les différents ensembles d'appareils. De plus, nous n'avons pas besoin de perdre du temps plusieurs heures à essayer de tout réparer et à nous assurer qu'il ressemble et fonctionne sur différents navigateurs, plates-formes uniques et appareils.
Commandes et description sur la triche Bootstrap 4
Certaines commandes importantes de Bootstrap 4 et leur description sont fournies ci-dessous: -
| Commandes | La description |
| Conteneur fixe | Un conteneur fixe a une largeur fixe. Lorsque le navigateur est redimensionné, sa largeur reste la même jusqu'à ce que le point d'arrêt soit trouvé. |
| Récipient de fluide | Un conteneur de fluide s'étend sur toute la largeur de la fenêtre disponible. Il se dilate et se contracte de manière fluide, ce qui signifie qu'il change à mesure que le navigateur est redimensionné. |
| .Col- | C'est pour les très petits appareils - la largeur de l'écran est inférieure à 576px |
| .Col-sm- | C'est pour les petits appareils - la largeur de l'écran reste égale ou supérieure à 576px |
| .Col-md- | C'est pour les appareils moyens - la largeur de l'écran reste égale ou supérieure à 768px |
| .Col-lg- | C'est pour les gros appareils - la largeur de l'écran est égale ou supérieure à 992px |
| .Col-xl- | C'est pour les appareils xlarge - la largeur de l'écran est égale ou supérieure à 1200px |
- | h1 En-tête de taille Bootstrap avec 2.5rem = 40px h2 Taille de l'en-tête Bootstrap avec 2rem = 32px h3 Bootstrap taille en-tête avec 1, 75rem = 28px h4 Bootstrap taille en-tête avec 1.5rem = 24px h5 Bootstrap taille en-tête avec 1, 25rem = 20px h6 En-tête taille bootstrap avec 1rem = 16px |
| Cet élément de balise HTML fournit une couleur de fond jaune avec un rembourrage | |
| Cet élément de balise HTML fournit un bas de bordure en pointillé. | |
|
| La classe add avec
est utilisé pour citer des blocs de contenu provenant de la source et provenant de l'extérieur. |
| .font-weight-bold | Pour le texte en gras |
| .font-italic | Pour le texte en italique |
| .font-weight-light | Pour un texte léger |
| .font-weight-normal | Pour le texte normal |
| .conduire | Il fait ressortir un paragraphe visiblement |
| .petit | Il indique un texte plus petit, c'est-à-dire qu'il réduit la taille de la police à 85% de la taille de son parent. |
| .text-left | Il indique que le texte doit être aligné à gauche. |
| .text - * - gauche | Il indique que le texte est aligné à gauche sur tous les écrans de taille |
| .text-center | Il indique pour le texte aligné au centre |
| .text - * - centre | Il indique le texte aligné au centre sur tous les écrans de taille |
| .text-right | Il indique pour le texte aligné à droite |
| .text - * - droite | Il indique un texte aligné à droite sur tous les écrans de taille |
| .text-justification | Il indique un texte justifié |
| .text-monospace | Il a un texte à espacement fixe |
| .text-nowrap | Il indique pour aucun texte d'habillage |
| .text-minuscule | Il indique pour le texte en minuscule |
| .text-majuscule | Il indique pour le texte en majuscule |
| .text-capitalize | Il indique pour le texte en majuscule |
| .initialism | Il affiche le texte à l'intérieur d'un élément de balise HTML dans une police de plus petite taille. Il supprime le style de liste par défaut disponible et la marge gauche sur les éléments de liste listes imbriquées |
| .table | La classe ajoute un style de base à la table. |
| .table à rayures | La classe ajoute des rayures zébrées à la table. |
| bordé de table | La classe ajoute des bordures de tous les côtés d'un tableau et des cellules. |
| .table-hover | La classe ajoute un effet de survol, c'est-à-dire une couleur d'arrière-plan grise sur les lignes de tableau disponibles. |
| .table-sombre | La classe ajoute un fond noir à une table. |
Trucs et astuces gratuits pour utiliser Bootstrap 4 Cheat Sheet: -
Quelques trucs et astuces sympas pour pirater rapidement les fonctionnalités de la feuille de triche bootstrap 4 et créer une application incroyable sur mobile sont mentionnés dans cette section: -
- A l'usage. col- (point d'arrêt) -push- (nombre) ou lors de l'utilisation. col- (breakpoint) -pull- (number) classes aux colonnes, la séquence des colonnes spécifiées peut être modifiée.
- Pour masquer rapidement et facilement un élément uniquement sur les appareils xs, il existe un. classe hidden-xs, cela peut être utilisé pour se cacher.
- . La classe hidden- (breakpoint) peut également être utilisée pour le reste des points d'arrêt et lorsqu'elle est combinée, la portée cachée mentionnée ci-dessus peut être obtenue. Ex: - classes .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap est livré avec 5 styles de boutons disponibles par défaut, ce sont les styles par défaut, principal, succès et danger. Lorsqu'un bouton doit être modifié pour diminuer son rayon de bordure ou son rembourrage, la meilleure façon d'y parvenir est d'écraser le .btn
- Pour désactiver les radios et les cases à cocher, il faut ajouter une classe désactivée à un élément parent .checkboxor to.radio. puis ajoutez l'attribut désactivé à l'entrée spécifique
- Pour désactiver les boutons, ajoutez un attribut désactivé aux boutons de la balise HTML
Ou la même chose peut être faite en ajoutant une classe .disabled aux boutons.
- Pour centrer facilement un élément de bloc horizontalement, l'ajout d'une classe de bloc central doit être fait, comme dans.
- Si le contenu en ligne doit être centré rapidement ou que des éléments en bloc à l'intérieur d'une div doivent être effectués, ajoutez la classe .text-center à son élément parent.
- On peut également intégrer facilement des vidéos YouTube à l'aide de la classe sensible à l'intégration de Bootstrap, qui est une aide, des classes. la classe embed-responsive-16by9 ou embed-responsive-4by3 doit être choisie en fonction du rapport hauteur / largeur de la vidéo
Aide-mémoire Bootstrap 4 - conclusion
Au-dessus de la feuille de triche bootstrap 4 donne un aperçu de ce qui est possible avec le bootstrap 4. Mais il existe un guide plus complet disponible avec des milliers d'autres paramètres et balises. Il est évident que les informations concernant tout ne peuvent pas être fournies dans un seul article ou qu'un développeur doit se souvenir de toutes les balises et classes pour faire du développement. L'approche la meilleure et la plus recommandée consiste à garder ces feuilles de triche à portée de main et l'utilisateur doit s'y référer chaque fois qu'un besoin se fait sentir. Cela garantira que tout le travail est effectué au moment où cela est nécessaire et améliorera la compréhension et la connaissance de Bootstrap 4 par l'utilisateur sur une période.
Article recommandé
Ceci a été un guide pour la feuille de triche Bootstrap 4 ici, nous avons discuté du contenu et des commandes ainsi que des trucs et astuces gratuits de la feuille de triche Bootstrap 4, vous pouvez également consulter l'article suivant pour en savoir plus -
- Cheat Sheet CSS
- Différences entre Bootstrap et Jquery
- Guide simple et utile pour tricher SQL
- Aide-mémoire ultime pour le langage de programmation C ++ (notions de base)