< Bootsrap 5

Bootstrap testreszabás

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Könyvtárszerkezet

app01/
|-app/
| |-css/
| | `-app.css
| |-scss/
| | `-app.scss
| `-index.html
|-node_modules/
| `-...
|-bs-config.json
|-package.json
`-yarn.lock

Weblap

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>App01</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <div class="container-fluid bg-primary"> <h1>Első alkalmazás</h1> </div> </body> </html>

Saját Scss

Feltételezzük, hogy a Bootstrap telepítve lett az npm vagy a yarn paranccsal a node_modules könyvtárba.

A példa kedvéért változtassuk meg a primary színét:

$primary: red; @import '../../node_modules/bootstrap/scss/bootstrap';

Fordítás

sass --watch app/sass:app/css

Függelék

$theme-colors: ( "primary": navy, "secondary": gold ); @import "../node_modules/bootstrap/scss/bootstrap";