Felhasználói eszközök
oktatas:web:front-end_framework:bootstrap_5:szinek
Tartalomjegyzék
Színek
- Szerző: Sallai András
- Copyright © Sallai András, 2021, 2022
- 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";
oktatas/web/front-end_framework/bootstrap_5/szinek.txt · Utolsó módosítás: 2022/12/14 14:28 szerkesztette: admin
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
