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:bootstrap|< Bootsrap]]

====== Színek ======

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

===== Szövegszínek =====

Szöveg színezése:
  * text-muted
  * text-primary
  * text-success
  * text-info
  * text-warning
  * text-danger
  * text-secondary
  * text-white
  * text-dark
  * text-body
  * text-light

===== Háttérszín =====

Lehetséges beállítások:
  * bg-primary
  * bg-success
  * bg-info
  * bg-warning
  * bg-danger
  * bg-secondary
  * bg-dark
  * bg-light

===== Színek Sass változókkal =====

<code scss scss/style.scss>
@import "../node_modules/bootstrap/scss/bootstrap";
body {
    background-color: $blue-300;
}
</code>


Vagy:
<code scss scss/style.scss>
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

body {
    background-color: $blue-300;
}
</code>

Forodítás:
  sass style.scss style.css





===== Módosítás Sass-sal =====

NodeJS projekt kezdése:

<code>
mkdir app01
cd app01
npm init -y
npm install bootstrap
</code>


<code>
app01/
  |-node_modules/
  |  `-bootstrap/
  |-scss/
  |  `-custom.css
  |-packages.json
  |-custom.css
  `-custom.css.map
</code>



<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="custom.css">
</head>
<body>
    <h1 class="bg-primary">aaa</h1>
</body>
</html>
</code>


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

$theme-colors: (
  "primary":    yellow
);

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

</code>


Fordítás a gyökérkönyvtárban:

  sass scss/custom.scss custom.css

==== Egyéni ====
Így is lehet:
<code css>
$primary: #0070d0;
$danger: #ff4033;
</code>

==== Egyéb ====


Egész weboldal háttér és előtérszíne:
<code css>
$body-bg: #000088;
$body-color: #fff;
</code>

Teljes kód:

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

$body-bg: #000088;
$body-color: #fff;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

</code>