Document

[[oktatas:web:front-end_framework:bootstrap 5|< Bootsrap 5]] ====== 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 =====


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

Vagy:


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

body {
    background-color: $blue-300;
}

Forodítás: sass style.scss style.css ===== Módosítás Sass-sal ===== NodeJS projekt kezdése:


mkdir app01
cd app01
npm init -y
npm install bootstrap


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





    
    
    Document
    
    


    aaa


@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";

Fordítás a gyökérkönyvtárban: sass scss/custom.scss custom.css ==== Egyéni ==== Így is lehet:


$primary: #0070d0;
$danger: #ff4033;

==== Egyéb ==== Egész weboldal háttér és előtérszíne:


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

Teljes kód:


@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";