< Bootsrap 5

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

@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

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