web-dev-qa-db-fra.com

Bootstrap 4 utilitaires de bordure

Je pense que cela devrait être évident à trouver mais je n’ai rien proposé. Bootstrap 4 a une classe d’utilitaires pour l’ajout et la suppression d’une bordure, mais existe-t-il un support pour définir la largeur ou le style de la bordure comme solide ou en pointillé?

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Certaines classes modifient les marges et les marges comme mr-3 et pt-2.

Peut-être ai-je juste besoin de les définir moi-même?

htmlcsstwitter-bootstrapbootstrap-4
7
user9266304

Non, il n'y a pas de classes dans Bootstrap 4 pour la largeur ou le style de la bordure.

Vous pouvez simplement ajouter quelque chose comme:

.border-3 {
    border-width:3px !important;
}

https://www.codeply.com/go/ktnEeWExvh

REMARQUE: !important est nécessaire dans ce cas car Bootstrap utilise également! important dans beaucoup de classes d’utilitaires comme border-*.

20
Zim

Dans bootstrap 4 pour les bordures, vous ne pouvez utiliser que:

  • Borders - ajouter supprimer des bordures
  • Couleur de la bordure
  • Rayon de la frontière
  • Float
  • Flotteurs réactifs
  • Centre Aligner
  • Largeur
  • La taille
  • Espacement

Vous pouvez créer vos propres classes, quelque chose comme:

.border-dotted{
 border-style: dotted;
}
.border-10{
border-style:solid;
 border-width: 10px;
}
<h1 class="border-dotted">Hi</h1>
<h1 class="border-10">Hi!</h1>
2
Teshtek

Si vous avez bootstrap la bibliothèque npm et si vous regardez _variable.scss, vous trouverez $ border-width: 1px! Default;

Vous pouvez le remplacer en créant un nouveau fichier scss dans lequel vous pourrez importer des modules bootstrap).

$myborder-width : 3px;

$border-width:$myborder-width;

@import "../node_modules/bootstrap/scss/bootstrap";(you can include only the required modules here)

vous pouvez convertir ce fichier main.scss en css et utiliser ce css à la place de bootstrap.css dans votre code HTML.

1
Akash Singh

S'il vous plaît voir Documentation Border de Bootstrap.

Il existe des classes de style de base définies (similaires aux jeux btn-default, btn-warning) et au rayon de la bordure. Mais tout autre style devra être fait vous-même.

La raison en est qu’il n’existe pas suffisamment de demande pour Bootstrap pour l’ajouter de manière native dans leur cadre de travail, il y a trop d’options pour définir efficacement, ou comme il est simple de les écrire vos propres cours.

0
David Picksley

Propose d’ajouter une extension bootstrap).

/* _border-width-customs.scss */
$border-width-custom-1: 1px !default;
$border-width-custom-2: 2px !default;
$border-width-custom-3: 3px !default;
$border-width-custom-4: 4px !default;
$border-width-custom-5: 5px !default;
$border-width-custom-6: 6px !default;
$border-width-custom-7: 7px !default;
$border-width-custom-8: 8px !default;

$border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);

@each $name, $size in $border-width-customs {
    @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
        .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
    }
}
0
CisSasGot