Színek

Szerző: Sallai András
Copyright © Sallai András, 2021, 2022
Licenc: 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

scss/style.scss

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

Vagy:

scss/style.scss

@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

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>

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

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:

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