in English

Theming Bootstrap

Sinthani Mwamakonda Anu Bootstrap 4 ndi zosintha zathu zatsopano za Sass pazokonda zapadziko lonse lapansi kuti mukhale ndi mitu yosavuta komanso kusintha magawo.

Mawu Oyamba

Mu Bootstrap 3, mitu idayendetsedwa makamaka ndi kupitilira mu LESS, CSS yodziwika bwino, ndi pepala lamutu losiyana lomwe tidaphatikiza distm'mafayilo athu. Ndi khama, wina atha kukonzanso mawonekedwe a Bootstrap 3 osakhudza mafayilo oyambira. Bootstrap 4 imapereka njira yodziwika bwino, koma yosiyana pang'ono.

Tsopano, mitu imakwaniritsidwa ndi mitundu ya Sass, mamapu a Sass, ndi CSS yokhazikika. Palibenso pepala lodzipatulira lamutu; m'malo mwake, mutha kuloleza mutu womwe wamangidwa kuti uwonjezere ma gradients, mithunzi, ndi zina zambiri.

Sass

Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pazosintha, mamapu, zosakaniza, ndi zina zambiri popanga Sass pogwiritsa ntchito payipi yanu.

Mapangidwe a fayilo

Ngati n'kotheka, pewani kusintha mafayilo amtundu wa Bootstrap. Kwa Sass, izi zikutanthauza kupanga zolemba zanu zomwe zimalowetsa Bootstrap kuti mutha kusintha ndikuwonjezera. Pongoganiza kuti mukugwiritsa ntchito phukusi loyang'anira ngati npm, mudzakhala ndi fayilo yomwe imawoneka motere:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ngati mwatsitsa mafayilo athu oyambira ndipo simukugwiritsa ntchito woyang'anira phukusi, mudzafuna kukhazikitsa pamanja china chofanana ndi mawonekedwewo, kusunga mafayilo amtundu wa Bootstrap kukhala osiyana ndi anu.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Kuitanitsa

M'mafayilo anu custom.scss, mudzalowetsa mafayilo a Sass a Bootstrap. Muli ndi njira ziwiri: kuphatikiza zonse za Bootstrap, kapena sankhani magawo omwe mukufuna. Timalimbikitsa omalizawa, ngakhale dziwani kuti pali zofunika zina ndi zodalira pazigawo zathu zonse. Muyeneranso kuphatikiza JavaScript yamapulagini athu.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Ndi kukhazikitsa komweko, mutha kuyamba kusintha zosintha zilizonse za Sass ndi mamapu anu custom.scss. Mutha kuyambanso kuwonjezera magawo a Bootstrap pansi // Optionalpagawo ngati pakufunika. Tikukulangizani kuti mugwiritse ntchito stack yonse kuchokera mufayilo yathu bootstrap.scssngati poyambira.

Zosintha zosinthika

Kusintha kulikonse kwa Sass mu Bootstrap kumaphatikizapo !defaultmbendera yomwe imakulolani kuti mupitirire mtengo wosasinthika wa Sass yanu popanda kusintha code source ya Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani makonda awo, ndikuchotsa !defaultmbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi mikhalidwe yokhazikika mu Bootstrap.

Mupeza mndandanda wathunthu wazosintha za Bootstrap mu scss/_variables.scss. Zosintha zina zimayikidwa ku null, zosinthazi sizitulutsa katundu pokhapokha zitatsitsidwa pamasinthidwe anu.

Zosintha zosinthika ziyenera kubwera pambuyo poti ntchito zathu, zosinthika, ndi zosakaniza zatumizidwa kunja, koma zina zonse zisanachitike.

Nachi chitsanzo chomwe chimasintha background-colorndi potumiza colorndikulemba <body>Bootstrap kudzera npm:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Bwerezani ngati kuli kofunikira pakusintha kulikonse mu Bootstrap, kuphatikiza zosankha zapadziko lonse lapansi pansipa.

Yambani ndi Bootstrap kudzera npm ndi polojekiti yathu yoyambira! Mutu ku twbs/bootstrap-npm-starter template repository kuti muwone momwe mungamangire ndikusintha Bootstrap mu polojekiti yanu ya npm. Zimaphatikizapo Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ndi Zithunzi za Bootstrap.

Mapu ndi malupu

Bootstrap 4 imaphatikizapo mamapu ochepa a Sass, awiriawiri ofunika kwambiri omwe amapangitsa kuti zikhale zosavuta kupanga mabanja a CSS yogwirizana. Timagwiritsa ntchito mamapu a Sass pamitundu yathu, mapulaneti a gridi, ndi zina zambiri. Monga zosinthika za Sass, mamapu onse a Sass amaphatikiza !defaultmbendera ndipo amatha kuchotsedwa ndikukulitsidwa.

Ena mwa mamapu athu a Sass amaphatikizidwa kukhala opanda kanthu mwachisawawa. Izi zimachitika kuti zilole kukulitsa kosavuta kwa mapu a Sass, koma zimabwera pamtengo wopangitsa kuchotsa zinthu pamapu kukhala kovuta kwambiri.

Sinthani mapu

Kuti musinthe mtundu womwe ulipo $theme-colorspamapu athu, onjezani zotsatirazi pafayilo yanu yamtundu wa Sass:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Onjezani ku mapu

Kuti muwonjezere mtundu watsopano ku $theme-colors, onjezani kiyi yatsopano ndi mtengo:

$theme-colors: (
  "custom-color": #900
);

Chotsani pamapu

Kuti muchotse mitundu pa $theme-colors, kapena mapu ena aliwonse, gwiritsani ntchito map-remove. Dziwani kuti muyenera kuyiyika pakati pa zomwe tikufuna ndi zomwe mungasankhe:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Makiyi ofunikira

Bootstrap imatengera kukhalapo kwa makiyi ena mkati mwa mamapu a Sass momwe timagwiritsira ntchito ndikuwonjezera tokha. Mukakonza mamapu omwe akuphatikizidwa, mutha kukumana ndi zolakwika pomwe kiyi ya mapu a Sass ikugwiritsidwa ntchito.

Mwachitsanzo, timagwiritsa ntchito primary, success, ndi dangermakiyi ochokera $theme-colorsku maulalo, mabatani, ndi mawonekedwe a fomu. Kusintha makiyi a makiyiwa sikuyenera kubweretsa zovuta, koma kuwachotsa kungayambitse nkhani za Sass. Muzochitika izi, muyenera kusintha nambala ya Sass yomwe imagwiritsa ntchito mfundozo.

Ntchito

Bootstrap imagwiritsa ntchito ntchito zingapo za Sass, koma kagawo kakang'ono kokha kamene kamagwira ntchito pamutu wamba. Taphatikiza ntchito zitatu zopezera makonda kuchokera pamapu amitundu:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Izi zimakupatsani mwayi wosankha mtundu umodzi pamapu a Sass monga momwe mungagwiritsire ntchito mtundu wa v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Tilinso ndi ntchito ina yopezera mulingo winawake wamtundu pamapu$theme-colors . Miyezo yolakwika idzachepetsa mtunduwo, pomwe milingo yayikulu idzadetsedwa.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Pochita, mumatcha ntchitoyi ndikudutsa magawo awiri: dzina la mtundu kuchokera $theme-colors(mwachitsanzo, choyambirira kapena chowopsa) ndi kuchuluka kwa manambala.

.custom-element {
  color: theme-color-level(primary, -10);
}

Ntchito zowonjezera zitha kuwonjezedwa mtsogolomo kapena makonda anu a Sass kuti mupange magwiridwe antchito a mamapu owonjezera a Sass, kapenanso yachidule ngati mukufuna kukhala olankhula kwambiri.

Kusiyana kwamitundu

Ntchito yowonjezera yomwe timaphatikizapo mu Bootstrap ndi ntchito yosiyanitsa mitundu, color-yiq. Imagwiritsa ntchito malo amtundu wa YIQ kuti ibweretse kuwala ( #fff) kapena mdima ( #111) wosiyana wa mtundu kutengera mtundu womwe watchulidwa. Izi ndizofunikira makamaka pazosakaniza kapena malupu pomwe mukupanga makalasi angapo.

Mwachitsanzo, kupanga zosintha zamitundu $theme-colorspamapu athu:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Itha kugwiritsidwanso ntchito pazosowa zosiyanitsa kamodzi:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Mutha kutchulanso mtundu woyambira ndi mapu athu amitundu:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Kuthawa SVG

Timagwiritsa ntchito escape-svgntchitoyi kuthawa <, >ndi #zilembo zazithunzi zakumbuyo za SVG. Zilembozi ziyenera kuthawa kuti zipereke zithunzi zakumbuyo mu IE. Mukamagwiritsa ntchito escape-svgntchitoyi, ma URI a data ayenera kutchulidwa.

Onjezani ndi Kuchotsa ntchito

Timagwiritsa ntchito addndi subtractntchito kukulunga ntchito ya CSS calc. Cholinga chachikulu cha ntchitoyi ndikupewa zolakwika pamene mtengo wa "unitless" uperekedwa 0m'mawu calc. Mawu ngati calc(10px - 0)angabweretse cholakwika mu asakatuli onse, ngakhale ali olondola masamu.

Chitsanzo pomwe calc ili yoyenera:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Chitsanzo pomwe calc ndi yolakwika:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Zosankha za Sass

Sinthani Mwamakonda Anu Bootstrap 4 ndi fayilo yathu yosinthira makonda opangidwa ndikusintha mosavuta zokonda zapadziko lonse za CSS ndi $enable-*mitundu yatsopano ya Sass. Chotsani mtengo wosinthika ndikuwonjezeranso npm run testngati pakufunika.

Mutha kupeza ndikusintha masinthidwe awa pazosankha zazikulu zapadziko lonse lapansi mufayilo ya Bootstrap scss/_variables.scss.

Zosintha Makhalidwe Kufotokozera
$spacer 1rem(zosakhazikika), kapena mtengo uliwonse> 0 Imatchula mtengo wokhazikika wa spacer kuti apange zida zathu za spacer .
$enable-rounded true(zosasintha) kapenafalse Imathandizira border-radiusmasitayelo ofotokozedweratu pazinthu zosiyanasiyana.
$enable-shadows truekapena false(zosakhazikika) Imathandiza masitayelo okonzedweratu box-shadowpazigawo zosiyanasiyana. Izi sizimakhudza box-shadowzomwe zimagwiritsidwa ntchito pazowunikira.
$enable-gradients truekapena false(zosakhazikika) Imathandizira ma gradients ofotokozedwatu kudzera background-imagemasitayelo pazinthu zosiyanasiyana.
$enable-transitions true(zosasintha) kapenafalse Imathandiza predefined transitions pa zigawo zosiyanasiyana.
$enable-prefers-reduced-motion-media-query true(zosasintha) kapenafalse Imayatsa prefers-reduced-motionfunso pa media , zomwe zimapondereza makanema ojambula / zosinthika kutengera zomwe amakonda msakatuli / makina ogwiritsira ntchito.
$enable-hover-media-query truekapena false(zosakhazikika) Yasiyidwa
$enable-grid-classes true(zosasintha) kapenafalse Imathandizira kupanga makalasi a CSS pagululi (monga, .container, .row, .col-md-1, etc.).
$enable-caret true(zosasintha) kapenafalse Imayatsa pseudo element caret pa .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(zosasintha) kapenafalse Onjezani cholozera cha "dzanja" kuzinthu za batani zosalemala.
$enable-print-styles true(zosasintha) kapenafalse Imayatsa masitaelo kuti muwongolere kusindikiza.
$enable-responsive-font-sizes truekapena false(zosakhazikika) Imayatsa kukula kwa mafonti kuyankha .
$enable-validation-icons true(zosasintha) kapenafalse Imayatsa background-imagezithunzi mkati mwazolemba ndi mafomu ena ovomerezeka kuti atsimikizire.
$enable-deprecation-messages true(zosasintha) kapenafalse Khazikitsani falsekubisa machenjezo mukamagwiritsa ntchito zosakaniza zilizonse zomwe zatsitsidwa ndi ntchito zomwe zakonzedwa kuti zichotsedwe mu v5.

Mtundu

Zambiri mwazinthu zosiyanasiyana za Bootstrap ndi zofunikira zimamangidwa kudzera mumitundu ingapo yofotokozedwa pamapu a Sass. Mapuwa atha kuwongoleredwa ku Sass kuti apange madongosolo angapo.

Mitundu yonse

Mitundu yonse yomwe ilipo mu Bootstrap 4, imapezeka ngati mitundu ya Sass ndi mapu a Sass mufayilo scss/_variables.scss. Izi zidzawonjezedwa m'mabuku ang'onoang'ono otsatirawa kuti muwonjezere mithunzi yowonjezera, mofanana ndi palette ya grayscale yomwe timaphatikizapo kale.

$buluu #007bf
$indigo #6610f2
$ wofiirira #6f42c1
$pinki #e83e8c
$wofiira #dc3545
$orange #fd7e14
$chikasu #ffc107
$ wobiriwira #28a745
$tala #20c997
$zonse #17a2b8

Umu ndi momwe mungagwiritsire ntchito izi mu Sass yanu:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Makalasi opangira utoto amapezekanso kuti akhazikike colorndi background-color.

M'tsogolomu, tikhala ndi cholinga chopereka mamapu a Sass ndi zosintha zamitundu yamtundu uliwonse monga momwe tachitira ndi mitundu yotuwa pansipa.

Mitundu yamutu

Timagwiritsa ntchito kagawo kakang'ono kamitundu yonse kuti tipange utoto wocheperako popanga masikimu amitundu, omwe amapezekanso ngati mitundu ya Sass ndi mapu a Sass mufayilo ya Bootstrap scss/_variables.scss.

$ choyambirira #007bf
$ sekondale #6c757d
$kupambana #28a745
$ngozi #dc3545
chenjezo #ffc107
$zidziwitso #17a2b8
$kuwala #f8f9fa
$kuda #343a40

Imvi

Mitundu yokulirapo yamitundu yotuwa ndi mapu a Sass scss/_variables.scssamithunzi yotuwa mosasinthasintha pulojekiti yanu. Zindikirani kuti awa ndi "imvi yoziziritsa", yomwe imakonda kumveka bwino kwa buluu, m'malo mwa imvi yopanda ndale.

$ grey-100 #f8f9fa
$ imvi-200 #e9ef
$ imvi-300 #dee2e6
$ grey-400 #ced4da
$ imvi-500 #adb5bd
$ 600 #6c757d
$ 700 #495057
$ 800 #343a40
$ imvi-900 #212529

Mkati scss/_variables.scss, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colorsmapu a Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Onjezani, chotsani, kapena sinthani zinthu zomwe zili pamapu kuti zisinthe momwe zimagwiritsidwira ntchito m'zigawo zina zambiri. Tsoka ilo panthawiyi, sizinthu zonse zomwe zimagwiritsa ntchito mapu a Sass. Zosintha zamtsogolo zidzayesetsa kukonza izi. Mpaka pamenepo, konzekerani kugwiritsa ntchito ${color}zosinthika ndi mapu a Sass awa.

Zigawo

Zambiri mwazinthu ndi zofunikira za Bootstrap zimamangidwa ndi @eachmalupu omwe amayenda pamapu a Sass. Izi ndizothandiza kwambiri popanga mitundu yosiyanasiyana mwazinthu zathu $theme-colorsndikupanga mitundu yomvera pagawo lililonse. Mukakonza mamapu awa a Sass ndikuphatikizanso, mudzawona zosintha zanu zikuwonekera mu malupu awa.

Zosintha

Zambiri mwazinthu za Bootstrap zimamangidwa ndi njira yosinthira kalasi. Izi zikutanthauza kuti kuchuluka kwa makongoletsedwe kuli m'gulu loyambira (mwachitsanzo, .btn) pomwe masitayelo amangochitika m'makalasi osintha (mwachitsanzo, .btn-danger). Makalasi osinthira awa amapangidwa kuchokera $theme-colorspamapu kuti asinthe makonda a nambala ndi dzina la makalasi athu osintha.

Nazi zitsanzo ziwiri za momwe timayendera $theme-colorsmapu kuti tipange zosintha pagawo ndi .alertzida zathu zonse .bg-*zakumbuyo.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Womvera

Malupu a Sass awa samangokhala mamapu amitundu, mwina. Mukhozanso kupanga mitundu yosiyanasiyana yamagawo anu kapena zofunikira. Tengani mwachitsanzo zida zathu zoyankhulirana ndi mawu pomwe timaphatikiza @eachkuzungulira kwa $grid-breakpointsmapu a Sass ndi funso latolankhani.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Ngati mukufunika kusintha $grid-breakpoints, zosintha zanu zidzagwira ntchito pamalupu onse omwe akupitilira pamapuwo.

Zosintha za CSS

Bootstrap 4 imaphatikizapo pafupifupi magawo awiri a CSS makonda (zosinthika) mu CSS yake yopangidwa. Izi zimapereka mwayi wosavuta kuzinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu yathu yamutu, zodulira, ndi milu ya zilembo zoyambirira mukamagwira ntchito mu Inspector ya msakatuli wanu, bokosi la sandbox, kapena ma prototyping wamba.

Zosintha zomwe zilipo

Nazi zosintha zomwe timaphatikiza (zindikirani kuti :rootndizofunikira). Zili mufayilo yathu _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Zitsanzo

Zosintha za CSS zimapereka kusinthasintha kofanana ndi zosintha za Sass, koma popanda kufunika kophatikiza musanatumizidwe kwa osatsegula. Mwachitsanzo, apa tikukhazikitsanso mafonti atsamba lathu ndi masitayelo olumikizirana ndi CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Zosintha za Breakpoint

Ngakhale tidaphatikizirapo zodulira mumitundu yathu ya CSS (mwachitsanzo, --breakpoint-md), izi sizimathandizidwa pamafunso atolankhani , koma zitha kugwiritsidwabe ntchito mkati mwamalamulo pamafunso azama TV. Zosintha zosinthika izi zimakhalabe mu CSS yopangidwa kuti zigwirizane ndi kumbuyo chifukwa zitha kugwiritsidwa ntchito ndi JavaScript. Dziwani zambiri mu spec .

Nachi chitsanzo cha zomwe sizikuthandizidwa:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Ndipo nachi chitsanzo cha zomwe zimathandizidwa:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}