Bootstrap Utility

Pro použití Bootstrap Utility potřebujeme kompilátor Sass. Tato funkce spoléhá na dynamické generování map CSS pomocí Sass. Můžete použít rozšíření Live Sass Compiler pro Visual Studio Code. Po instalaci tohoto rozšíření potřebujeme importovat soubory Bootstrapu potřebné pro Utility. Jsou to:

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";

Po importu naší stránky provádíme potřebné definice utility. Po definicích je potřeba provést další importovací operaci na konci stránky.

@import "./node_modules/bootstrap/scss/bootstrap.scss";

Nyní můžeme provádět definice utility mezi těmito dvěma importovacími operacemi.

Pro využití funkce Bootstrap Utility musíme definovat dvě povinná pole: vlastnost a hodnoty. Podívejme se nyní na následující příklad:

$utilities: (
  "custom-width": (
    property: width,
    values: (
      10: 10%,
      20: 20%,
      30: 30%,
      40: 40%,
      50: 50%,
      60: 60%,
      70: 70%,
      80: 80%,
      90: 90%,
      100: 100%,
    ),
   ),
 );

Jak je vidět v tomto bloku kódu, Utility je inicializováno jako $utility:(). Poté definujeme název vytvořené třídy pro naše účely. Po definování jako "custom-width" specifikujeme v části vlastností, která CSS vlastnost bude tato třída ovlivňovat. V části hodnot provedeme naše definice ve formátu název:hodnota.

Po provedení našich definic Sass automaticky spustí a vygeneruje pro nás soubor CSS, jak je ukázáno níže:

.width-10 {
 width: 10% !important;
}
.width-20 {
 width: 20% !important;
}
.width-30 {
 width: 30% !important;
}
.width-40 {
 width: 40% !important;
}
.width-50 {
 width: 50% !important;
}
.width-60 {
 width: 60% !important;
}

Jak je vidět na příkladu, Bootstrap Utility nám umožňuje rychle generovat nové třídy pro naše vlastní téma. Nyní můžeme přistupovat k třídě týkající se šířky jako .width-"hodnota". Navíc, pokud si přejeme, můžeme přidat předponu k třídám pomocí vlastnosti class.

 "custom-border": (
       property: border,
       responsive: true,
       class:c-border,
       values: (
         slim: 3px solid #852929,
         medium: 5px solid #852929,
         bold: 7px solid #852929,
       ),
     ),

Pokud provedete definice tříd, jak je uvedeno v bloku kódu níže, můžete přistupovat a používat naše třídy tak, jak je ukázáno:

.c-border-slim {
 border: 3px solid #852929 !important;
}
.c-border-medium {
 border: 5px solid #852929 !important;
}
.c-border-bold {
 border: 7px solid #852929 !important;
}

Bootstrap Utility má skutečně volitelnou funkci nazvanou Responsive, která umožňuje snadné vytváření responzivních tříd. Výrok responsive: true v předchozím bloku kódu aktivuje tuto funkci. Spolu s třemi třídami uvedenými v předchozím bloku kódu se generuje dalších 15 tříd pro responzivní designy.

Zde jsou bloky kódu, které ukazují definice tříd vytvořených pro obrazovky responsive-md:

.c-border-md-slim {
   border: 3px solid #852929 !important;
 }
 .c-border-md-medium {
   border: 5px solid #852929 !important;
 }
 .c-border-md-bold {
   border: 7px solid #852929 !important;
 }

Jednou z užitečných funkcí, které s Utility přicházejí, je Rfs (Responsive Font Size), což znamená Responzivní velikost písma. S Rfs může Bootstrap automaticky vypočítat velikost písma pro mobilní zařízení.

 "font-size": (
   rfs: true,
   property: font-size,
   class: mfs,
   values: $font-size,
 ),

V uvedeném bloku kódu vidíme, že je provedena definice jako values: $font-sizes. Tato definice pochází z definice $font-sizes v dříve importovaném souboru _variables.scss. Tímto způsobem můžeme využít globální definice, které jsme připravili před zadáním konkrétních hodnot v části values.

.mfs-1 {
 font-size: calc(1.375rem + 1.5vw) !important;
}
.mfs-2 {
 font-size: calc(1.325rem + 0.9vw) !important;
}
.mfs-3 {
 font-size: calc(1.3rem + 0.6vw) !important;
}
.mfs-4 {
 font-size: calc(1.275rem + 0.3vw) !important;
}
.mfs-5 {
 font-size: 1.25rem !important;
}
.mfs-6 {
 font-size: 1rem !important;
}