Egyedi megjelenés

A Bootstrap-nek módosíthatjuk a beállításait, így tudunk egyedi megjelenést biztosítani a felhasználói felületeknek, a számos lehetőség közül például használhatunk egyedi színeket, betűtípust, vagy módosíthatjuk a modulháló beállításait.
Stílus forrásállományok fordítása
Ahhoz hogy érvényesíteni tudjuk a beállításainkat, a Bootstrap stílusait a Sass forrás állományaiból kell fordítanunk, ezt rendeszerint egy fejlesztői keretrendszerrel végezzük, de lehetőség van erre a Visual Studio Code szövegszerkesztőben is egy bővítmény segítségével. Ehhez töltsük le a Live Sass Compiler bővítményt:
Telepítéshez nyissuk meg a Visual Studio Code bővítmény kezelőjét (Extensions), és a keresőbe írjuk be a bővítmény nevét (Live Sass Compiler ).
A találati listában a bővítmény neve mellett nyomjuk meg az Install gombot. Telepítés után a következő elem jelenik meg a Visual Studio Code láblécén:
Erre a gombra kattintva a Visual Studio Code le fogja fordítani CSS állományra az Sass forrás állományokat (ezeknek a kiterjesztése .scss).
A Sass a CSS nyelvi lehetőségeit bővíti ki dinamikus funkciókkal, amik jellemzően programozási nyelvekben találhatóak meg, például változók, ciklusok, adat struktúrák. Bővebben erről az eszközről a Sass honlapján olvashatunk: https://sass-lang.com​
Bootstrap forrás állományok bekötése
A forrás állományokat a Bootstrap letöltés oldalán találjuk:
Kattintsunk a Download Source gombra:
Egy tömörített zip állomány fog letöltődni, amit tömörítsünk ki. Csak az scss almappára és teljes tartalmára van szükségünk, ezt helyezzük el a HTML állomány mellett, amiben alkalmazni akarjuk:
Hozzunk létre egy style.scss nevű állományt, amibe behívjuk a Bootstrap forrását (az scss mappában található bootstrap.scss állományt kell hivatkozni):
style.scss
1
@import 'scss/bootstrap.scss';
Copied!
Ha elmentettük az állományt, és megnyomjuk a Watch Sass gombot, a Visual Studio Code legyártja a CSS állományunkat:
Végül be kell kötnünk a HTML állományba a legyártott CSS állományt, egy szokásos link segítségével, amit helyezzünk el a HTML állomány fejlécében:
1
<link rel="stylesheet" href="style.css">
Copied!
Ha mindent jól csináltunk, és megnyitjuk az állományunkat egy böngészőben, a Bootstrap komponensei megkapják az alapértelmezett Bootstrap stílusokat. A  gomb elem például a következő képpen fog kinézni:
1
<a class="btn btn-primary" href="#" role="button">Gomb</a>
Copied!
Egyedi beállítások alkalmazása
A Bootstrap beállításait az scss mappában a _variables.scss állományban találjuk, ezt direkt módon nem módosítjuk, mert fölül tudjuk írni a beállításait a saját style.scss állományunkban, a @import előtt. Például megváltoztathatjuk az elsődleges (primary) színt:
style.scss
1
$primary: red !default;
2
​
3
@import './scss/bootstrap.scss';
Copied!
Fordítás után ez megváltoztatja többek között a gombunk színét is a korábbi kékről vörösre:
Minden beállítás változókban van tárolva ezek mindíg $ jellel kezdődnek az scss állományokban, az új érték után el kell helyezni egy !default kapcsolót ez felülírja a később bekötött Bootstrap beállítás értékét. 
Példák további beállításokra
Alapértelmezett betűtípus felülírása 
Ebben a példában egy Google betűkészlettel írjuk felül az alapértelmezett fontot:
CSS
HTML
style.scss
1
$font-family-base: 'Open Sans', sans-serif !default;
2
​
3
@import './scss/bootstrap.scss';
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Bootstrap - Open Sans</title>
7
    <link
8
        href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
9
        rel="stylesheet">
10
    <link rel="stylesheet" href="style.css">
11
</head>
12
<body>
13
  <a class="btn btn-primary m-5" href="#" role="button">Gomb</a>
14
</body>
15
</html>
Copied!
Ahhoz, hogy a font betöltődjön be kell kötni a HTML állományba.
Modulháló beállításainak módosítása
A következő példában a Bootstrap modulháló oszlopainak a számát 12-ről 16-ra módosítjuk, az oszlopok közötti csatornák (gutter) szélességét 30 pixelről 20 pixelre csökkentjük:
1
$grid-columns:                16 !default;
2
$grid-gutter-width:           20px !default;
3
​
4
@import './scss/bootstrap.scss';
Copied!
Példa állományok
Az alábbi linken a fenti példa HTML és SCSS állományok letölthetőek:
bootstrap-scss.zip
83KB
Binary