> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/bootstrap/egyedi-megjelenes-temak.md).

# 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:

{% embed url="<https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass>" %}

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* ).

![](/files/-M1Hc2kesg2hxKHYhZME)

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:

![](/files/-M1HKpJuAfUD6DKZbz7J)

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).

{% hint style="info" %}
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](https://sass-lang.com/)
{% endhint %}

## Bootstrap forrás állományok bekötése

A forrás állományokat a Bootstrap letöltés oldalán találjuk:

{% embed url="<https://getbootstrap.com/docs/4.4/getting-started/download/>" %}

Kattintsunk a *Download Source* gombra:

![](/files/-M1HPnrBJLF2VlUnoiZ-)

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:

![](/files/-M1HR9n5ueI902TGmQOW)

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):

{% code title="style.scss" %}

```css
@import 'scss/bootstrap.scss';
```

{% endcode %}

Ha elmentettük az állományt, és megnyomjuk a *Watch Sass* gombot, a Visual Studio Code legyártja a CSS állományunkat:

![](/files/-M1HSM0FxkhwJ1QX3RTd)

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:

```markup
<link rel="stylesheet" href="style.css">
```

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:

```markup
<a class="btn btn-primary" href="#" role="button">Gomb</a>
```

![](/files/-M1HTIcnZ4FzWl0VFn0E)

## 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:

{% code title="style.scss" %}

```css
$primary: red !default;

@import './scss/bootstrap.scss';
```

{% endcode %}

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:

![](/files/-M1HVygQGlNXnlA3YzDd)

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.&#x20;

### Példák további beállításokra

#### Alapértelmezett betűtípus felülírása&#x20;

Ebben a példában egy Google betűkészlettel írjuk felül az alapértelmezett fontot:

{% tabs %}
{% tab title="CSS" %}
{% code title="style.scss" %}

```css
$font-family-base: 'Open Sans', sans-serif !default;

@import './scss/bootstrap.scss';
```

{% endcode %}
{% endtab %}

{% tab title="HTML" %}

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap - Open Sans</title>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="btn btn-primary m-5" href="#" role="button">Gomb</a>
</body>
</html>
```

{% endtab %}
{% endtabs %}

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:

```css
$grid-columns:                16 !default;
$grid-gutter-width:           20px !default;

@import './scss/bootstrap.scss';
```

## Példa állományok

Az alábbi linken a fenti példa HTML és SCSS állományok letölthetőek:

{% file src="/files/-M1HasqFcLe1psf134YF" %}