πŸ΄β€β˜ οΈ
Башка β˜•
Blog  Tags 
πŸ’€ πŸ”΅ πŸ”΄

🟩 ΠŸΠ΅Ρ€Π΅ΡΠ±ΠΎΡ€ΠΊΠ° Bootstrap Ρ€Π°Π΄ΠΈ Π·Π°ΠΌΠ΅Π½Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ²

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ: 1 июля 2022 Π³.

На страницС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Customize/Color написано, Ρ‡Ρ‚ΠΎ Bootstrap ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму ΠΈ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚:

Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

Π¦Π²Π΅Ρ‚Π° Ρ‚Π΅ΠΌΡ‹ (Primary, Success, Dark, Light) Π»Π΅ΠΆΠ°Ρ‚ Π² Ρ„Π°ΠΉΠ»Π΅ scss/_variables.scss, пСрСмСнная $theme-colors.

All these colors are available as a Sass map, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ΠŸΠΎΠ΄Π³ΠΎΡ‚Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Bootstrap

ΠšΠ»ΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ

git clone --depth 1 --branch v5.1.3 https://github.com/twbs/bootstrap.git bootstrap-color/

Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°Π΅ΠΌ зависимости Node.js, это Π·Π°ΠΉΠΌΡ‘Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя:

npm update

ΠŸΡ€Π°Π²ΠΊΠ° Ρ†Π²Π΅Ρ‚ΠΎΠ²

ИзмСняСм "primary": $primary, на "primary": #2fb658,.

ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡ ΠΈ минификация

ВыполняСм ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ npm run css для сборки css ΠΈ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ.

npm run css

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ просто ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ css, выполняСм npm run css

npm run css-compile

ДоТидаСмся окончания… Π“ΠΎΡ‚ΠΎΠ²ΠΎ.

Π€Π°ΠΉΠ»Ρ‹ Π»Π΅ΠΆΠ°Ρ‚ Π² Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ dist/.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ CSS измСнились, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ состояния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Git рСпозитория.

git status

Π£Π²ΠΈΠ΄ΠΈΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅

$ git st
Not currently on any branch.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   dist/css/bootstrap-grid.css
        modified:   dist/css/bootstrap-grid.css.map
        modified:   dist/css/bootstrap-grid.min.css
        ...
        modified:   dist/css/bootstrap.css
        modified:   dist/css/bootstrap.css.map
        modified:   package-lock.json
        modified:   scss/_variables.scss