Aperçu

Récemment, je crée une façade avec Bootstrap. Voici un résumé des cours que j'ai utilisés jusqu'à présent comme mémoire pour moi-même.

référence Bootstrap (ver. 4.5) : https://getbootstrap.jp/

point d'arrêt

sm : 576px
md : 768px
lg : 992px
xl : 1200px

Disposition

container

Conteneur à largeur fixe
Changements de largeur maximum pour chaque point d'arrêt

row

Facteurs qui déterminent les lignes du système de grille
Démontrez la vraie valeur en ayant col dans l'enfant

col

Facteurs qui déterminent les colonnes du système de grille
Utilisé comme élément enfant de la ligne
col-sm-3
sm: verticalement inférieur à 576px
3: (3/12 = 25% largeur)

bouton

btn

Faire un bouton

btn-primary

Créer un bouton bleu
danger: base rouge
secondaire: base grise

padding, margin p, m

p : padding
m : margin

direction

t : top
b : bottom
l : left
r : right
x: gauche et droite (direction de l'axe x)
y: haut et bas (direction y)
(vide): 4 directions
Exemple): pt- ○: padding-top: ○;

Taille

Déterminé par le rapport à $ spacer. 1rem = 16px par défaut
0 : $spacer * 0 (=0)
1 : $spacer * 0.25 (=4px)
2 : $spacer * 0.50 (=8px)
3 : $spacer * 0.75 (=12px)
4 : $spacer * 1.00 (=16px)
5 : $spacer * 1.25 (=20px)
auto : margin: auto;
Exemple): pt-1: padding-top: 4px;

Voici des exemples typiques présentés dans la Référence officielle de Bootstrap .

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

En passant, si vous ajoutez **! Important, vous pouvez appliquer le style quel que soit l'ordre de lecture des fichiers CSS **.

Couleur

primaire: bleu
secondaire: gris clair
succès: vert
danger: rouge
avertissement: jaune
info: bleu clair
clair: gris assez clair
foncé: gris foncé

[RAILS] [Bootstrap] Résumé de la classe de base