Utilità di bordo Bootstrap 4

Credo che questo dovrebbe essere ovvio per trovare, ma non ho inventato nulla. Bootstrap 4 ha una class di utilità per aggiungere e rimuovere un bordo, ma esiste un supporto per definire la larghezza del bordo o lo stile come solido o tratteggiato?

     

Ci sono alcune classi che modificano i margini e il padding come mr-3 e pt-2 .

Forse ho solo bisogno di definirli da solo?

No, non ci sono classi in Bootstrap 4 per larghezza o stile del bordo.

Puoi semplicemente aggiungere qualcosa come:

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

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

NOTA !important in questo caso è necessario perché Bootstrap usa anche! Important in molte delle classi di utilità come border-* .

Si prega di consultare la documentazione di bordo di Bootstrap.

Sono disponibili set di classi di stile di base (simili agli insiemi btn-default, btn-warning) e al raggio del bordo. Ma qualsiasi altro stile dovrebbe essere fatto da soli.

La ragione di ciò potrebbe essere che non c’è abbastanza richiesta di Bootstrap per aggiungere questo in modo nativo nel loro framework, ci sono troppe opzioni per definire in modo efficiente, o quanto sia semplice scriverle nelle proprie classi.

Nel bootstrap 4 per i bordi puoi usare solo:

  • Bordi: aggiungi i bordi di rimozione
  • Colore del bordo
  • Raggio di confine
  • Galleggiante
  • Galleggianti reattivi
  • Centro allinea
  • Larghezza
  • Altezza
  • Spaziatura

Puoi creare le tue classi, qualcosa come:

 .border-dotted{ border-style: dotted; } .border-10{ border-style:solid; border-width: 10px; } 
 

Hi

Hi!

Se hai libreria bootstrap npm e se guardi _variable.scss troverai $ border-width: 1px! Default;

È ansible sovrascriverlo creando un nuovo file scss in cui è ansible importare i moduli di bootstrap.

 $myborder-width : 3px; $border-width:$myborder-width; @import "../node_modules/bootstrap/scss/bootstrap";(you can include only the required modules here) 

puoi convertire questo file main.scss in css e usare questo css invece di bootstrap.css nel tuo html.