szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!

[[oktatas:web:front-end_framework:bootstrap 5|< Bootsrap 5]]

====== Bootstrap testreszabás ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Könyvtárszerkezet =====

<code>
app01/
  |-app/
  |  |-css/
  |  |  `-app.css
  |  |-scss/
  |  |  `-app.scss
  |  `-index.html
  |-node_modules/
  |  `-...
  |-bs-config.json
  |-package.json
  `-yarn.lock
</code>

===== Weblap =====

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>App01</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div class="container-fluid bg-primary">
        <h1>Első alkalmazás</h1>
    </div>
</body>
</html>
</code>


===== Saját Scss =====

Feltételezzük, hogy a Bootstrap telepítve lett az npm vagy a yarn paranccsal a node_modules könyvtárba.

A példa kedvéért változtassuk meg a primary színét:

<code sass app.scss>
$primary: red;

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

</code>

===== Fordítás =====


<code>
sass --watch app/sass:app/css
</code>


===== Függelék =====

<code sass>
$theme-colors: (
    "primary": navy,
    "secondary": gold
);

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