Est-ce que bootstrap possède des classes de remplissage et de marge intégrées?
Bootstrap a-t-il des classes de remplissage et de marge intégrées comme pad-10, mar-left-10 ou dois-je ajouter mes propres classes personnalisées? Par exemple, semblable à ceux ici aux onglets de remplissage et de marge.
Il existe des classes intégrées, à savoir:
.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }
.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }
.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }
.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }
.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }
.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }
.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }
.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }
.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }
.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }
.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }
.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }
.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }
.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }
Bootstrap 4 a une nouvelle notation pour les classes de marge et de remplissage. Reportez-vous à Documentation Bootstrap 4.0 - Espacement .
De la documentation:
Notation
Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de
xsàxl, ont aucune abréviation de point d'arrêt en eux. C'est parce que ces classes sont appliqué à partir demin-width: 0et plus, et ne sont donc pas liés par un média question. Les points d'arrêt restants incluent toutefois un point d'arrêt abréviation.Les classes sont nommées en utilisant le format
{property}{sides}-{size}pourxset{property}{sides}-{breakpoint}-{size}poursm,md,lgetxl.Exemples
.mt-0 { margin-top: 0 !important; }
.p-3 { padding: $spacer !important; }
J'ajoute ce code à mon projet Bootstrap3.3 avec les mêmes points d'arrêt de colonnes de la grille, basés sur la réponse @guest. Avant d’utiliser le matelasseur et l’assistance pour les marges de Bootstrap 4, c’est un choix judicieux.
/*Margin and Padding helpers*/
/*xs*/
.p-xs { padding: .25em; }
.p-x-xs { padding: 0 .25em; }
.p-y-xs { padding: .25em 0 ; }
.p-t-xs { padding-top: .25em; }
.p-r-xs { padding-right: .25em; }
.p-b-xs { padding-bottom: .25em; }
.p-l-xs { padding-left: .25em; }
.m-xs { margin: .25em; }
.m-x-xs { margin: 0 .25em; }
.m-y-xs { margin: .25em 0 ; }
.m-r-xs { margin-right: .25em; }
.m-l-xs { margin-left: .25em; }
.m-t-xs { margin-top: .25em; }
.m-b-xs { margin-bottom: .25em; }
/*sm*/
@media (min-width:768px){
/*sm*/
.p-sm { padding: .5em; }
.p-x-sm { padding: 0 .5em; }
.p-y-sm { padding: .5em 0 ; }
.p-t-sm { padding-top: .5em; }
.p-r-sm { padding-right: .5em; }
.p-b-sm { padding-bottom: .5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { margin: .5em; }
.m-x-sm { margin: 0 .5em; }
.m-y-sm { margin: .5em 0 ; }
.m-t-sm { margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { margin-bottom: .5em; }
.m-l-sm { margin-left: .5em; }
}
/*md*/
@media (min-width: 992px){
.p-md { padding: 1em; }
.p-x-md { padding: 0 1em; }
.p-y-md { padding: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { margin: 1em; }
.m-x-md { margin: 0 1em; }
.m-y-md { margin: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { margin-bottom: 1em; }
.m-l-md { margin-left: 1em; }
}
/*lg*/
@media (min-width: 1200px){
.p-lg { padding: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { padding: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { margin: 1.5em; }
.m-x-lg { margin: 0 1.5em; }
.m-y-lg { margin: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { margin-bottom: 1.5em; }
.m-l-lg { margin-left: 1.5em; }
}
/*xl*/
.p-xl { padding: 3em; }
.p-x-xl { padding: 0 3em; }
.p-y-xl { padding: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl { margin: 3em; }
.m-x-xl { margin: 0 3em; }
.m-y-xl { margin: 3em 0; }
.m-t-xl { margin-top: 3em; }
.m-r-xl { margin-right: 3em; }
.m-b-xl { margin-bottom: 3em; }
.m-l-xl { margin-left: 3em; }``
Je pense que ce que vous demandez, c'est comment créer un espacement réactif entre les classes rows et col-xx-xx.
Vous pouvez certainement le faire avec la classe col-xx-offset-xx:
<div class="col-xs-4">
</div>
<div class="col-xs-7 col-xs-offset-1">
</div>
En ce qui concerne l'ajout de margin ou padding directement aux éléments, il existe des moyens simples de le faire en fonction de votre élément. Vous pouvez utiliser btn-lg ou label-lg ou well-lg. Si vous vous demandez, comment puis-je donner à ce rembourrage un peu. Essayez d’ajouter le class name + lg ou sm ou md primaire en fonction de vos besoins en taille:
<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button>
Ceci est tiré de la documentation et cela fonctionne très bien.Voici le lien
- m - pour les classes qui définissent la marge
- p - pour les classes qui définissent le remplissage
Où les côtés sont l'un des:
- t - pour les classes qui définissent margin-top ou padding-top
- b - pour les classes qui définissent margin-bottom ou padding-bottom
- l - pour les classes qui définissent margin-left ou padding-left
- r - pour les classes qui définissent margin-right ou padding-right
si vous voulez donner une marge à gauche, utilisez mt-x où x représente [1,2,3,4,5]
idem pour le rembourrage
par exemple être comme
<div class = "mt-5"></div>
<div class = "pt-5"></div>
Utilisez uniquement p-x ou m-x pour obtenir le remplissage et la marge de x de tous les côtés.
Pour bootstrap 4, nous avons de nouvelles classes nommées avec la notation suivante
m - for classes that set margin
p - for classes that set padding
Spécifiez Haut, bas, gauche, droite, gauche et droite, haut et bas à l'aide des lettres ci-dessous
t - for classes that set margin-top (mt) or padding-top (pt)
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
Spécifiez la taille en utilisant les nombres suivants
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
Exemples
.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;
}
Utilisation
Donc, quand vous avez besoin de rembourrage, ajoutez une classe de pl-0 à pl-5 en fonction de vos besoins.
Si vous avez besoin de marge, ajoutez simplement une classe de mt-0 à mt-5 en fonction de vos besoins.
Je voudrais donner un exemple que j'ai essayé en comprenant la documentation ci-dessus et qui fonctionne correctement . Si vous souhaitez appliquer une marge de 25% de remplissage sur les côtés gauche et droit d'une taille d'écran moyenne, veuillez utiliser px-md-1 ..__ fonctionne comme vous le souhaitez et peut également suivre pour d'autres tailles d'écran. :)