Kann ich die Haltepunkte von Bootstrap 4 ohne Neukompilierung anpassen?

Anpassen der Haltepunkte von Bootstrap 4

Bootstrap 4 verwendet ein Rastersystem, um die Positionierung von Elementen auf der Seite zu erleichtern. Die Haltepunkte in diesem Rastersystem bestimmen, wann Elemente das Layout ändern. Allerdings ist der standardmäßige XL-Haltepunkt von 1200 Pixel möglicherweise nicht für bestimmte Anwendungen geeignet.

Können Bootstraps Haltepunkte global geändert werden, ohne die Quelldateien neu zu kompilieren?

Ja, das ist es Es ist möglich, die Haltepunkte von Bootstrap global zu ändern, ohne auf eine Neukompilierung zurückgreifen zu müssen.

So überschreiben Sie die Haltepunkte von Bootstrap:

Um die Standard-Haltepunkte von Bootstrap zu überschreiben, müssen Sie Folgendes tun:

1. Setzen Sie die Variable $grid-breakpoints:

   • Definieren Sie eine neue Sass-Map ($grid-breakpoints), die die gewünschten Haltepunkte angibt.

   • Zum Beispiel:

     <code class="sass">$grid-breakpoints: (
       xs: 0,
       sm: 576px,
       md: 768px,
       lg: 992px,
       xl: 1280px
     );</code>

2. Legen Sie die Variable $container-max-widths fest:

   • Definieren Sie eine neue Sass-Map ($container-max-widths), die die maximale Breite von Containern an jedem Haltepunkt angibt.
   • Dadurch wird sichergestellt, dass Container innerhalb der gewünschten Haltepunkte bleiben.

3. Bootstrap-Quellen mit Overrides importieren:

   • Importieren Sie die Bootstrap-Quellen, nachdem Sie die Override-Variablen definiert haben.
   • Dadurch werden Ihre benutzerdefinierten Haltepunkte global angewendet.

Beispiel:

Unten finden Sie ein Beispiel dafür, wie Sie den xl-Haltepunkt in Bootstrap überschreiben mit Sass:

<code class="sass">// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";</code>

Indem Sie diese Schritte befolgen, können Sie die Haltepunkte von Bootstrap an die Anforderungen Ihrer spezifischen Anwendung anpassen, ohne die Quelldateien neu kompilieren zu müssen.

Das obige ist der detaillierte Inhalt vonKann ich die Haltepunkte von Bootstrap 4 ohne Neukompilierung anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!