Theming Bootstrap

Ku beddel Bootstrap 4 oo leh doorsoomayaal Sass-ku-dhismay oo cusub oo loogu talagalay doorbidyada qaabka caalamiga ah ee isbeddellada fudud ee mawduucyada iyo qaybaha.

Hordhac

Bootstrap 3, mawduuca waxaa si weyn u dhaqaajiyay isbeddellada isbeddelka ee LESS, CSS caadada ah, iyo xaashi mawduuc gaar ah oo aan ku darnay distfaylalkayaga. Dadaalka qaar, mid ayaa gabi ahaanba dib u habeyn kara muuqaalka Bootstrap 3 isaga oo aan taaban faylasha asaasiga ah. Bootstrap 4 wuxuu bixiyaa hab la yaqaan, laakiin wax yar ka duwan.

Hadda, mawduuca waxa lagu dhammeeyaa doorsoomayaasha Sass, maabka Sass, iyo CSS caadada ah. Ma jiro xaashi mawduuceed dheeraad ah oo go'an; bedelkeeda, waxaad awood u siin kartaa dulucda ku dhex jirta inay ku darto gradients, hadh, iyo in ka badan.

Sass

Ka faa'iidayso ishayada faylasha Sass si aad uga faa'iidaysato doorsoomayaasha, khariidado, isku darka, iyo in ka badan markaad ururinayso Sass adigoo isticmaalaya dhuumaha hantidaada.

Qaab dhismeedka faylka

Mar kasta oo ay suurtagal tahay, iska ilaali inaad wax ka beddesho Bootstrap's faylasha xudunta u ah. Dhanka Sass, taasi waxay la macno tahay abuurista xaashida qaabkaaga oo soo dejisa Bootstrap si aad wax uga beddesho oo aad u kordhiso. Haddii aad u malaynayso inaad isticmaalayso maareeyaha xirmada sida npm, waxaad yeelan doontaa qaab dhismeedka faylka oo sidan u eg:

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

Haddii aad soo dejisay faylalkayaga isha oo aanad isticmaalayn maareeyaha xirmada, waxaad u baahan doontaa inaad gacanta ku dejiso wax la mid ah qaab-dhismeedkaas, adigoo ka ilaalinaya faylalka isha Bootstrap ee ka duwan kuwaaga.

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

Soo dejinta

Gudahaaga custom.scss, waxaad ku soo dejisan doontaa isha Bootstrap ee faylasha Sass. Waxaad haysataa laba ikhtiyaar: ku dar dhammaan Bootstrap, ama dooro qaybaha aad u baahan tahay. Waxaan dhiirigelineynaa kuwa dambe, inkastoo la soco inay jiraan shuruudo iyo ku-tiirsanaanta qaybahayada. Waxa kale oo aad u baahan doontaa inaad ku darto qaar ka mid ah JavaScript ee pluginsyadayada.

// 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";

Iyada oo habayntaas meesha taal, waxaad bilaabi kartaa inaad wax ka beddesho doorsoomayaasha Sass iyo maabka kaaga custom.scss. Waxa kale oo aad bilaabi kartaa in aad ku darto qaybo ka mid ah Bootstrap // Optionalqaybta hoos timaada hadba sida loogu baahdo. Waxaan kugula talineynaa inaad isticmaasho xirmada soo dejinta ee buuxa ee galkayaga si ay uga bootstrap.scssnoqoto bartaada.

Dedaal la'aan kala duwan

Doorsoome kasta oo Sass ah oo ku jira Bootstrap waxaa ku jira !defaultcalanka kuu oggolaanaya inaad ka gudubto doorsoomaha qiimahiisa caadiga ah ee Sass-kaaga adiga oo aan wax ka beddelin koodhka isha Bootstrap. Nuqul oo dheji doorsoomayaasha hadba sida loo baahdo, wax ka beddel qiyamkooda, oo ka saar !defaultcalanka. Haddii doorsoome hore loo qoondeeyay, markaa dib looma meelayn doono qiyamka caadiga ah ee Bootstrap.

Waxaad ka heli doontaa liiska dhamaystiran ee doorsoomayaasha Bootstrap scss/_variables.scss. Doorsoomayaasha qaar ayaa loo dejiyay null, doorsoomayaashani ma soo saaraan hantida ilaa ay ku xad gudbaan qaabayntaada.

Burburinta isbedbedelka badan waa in ay timaadaa ka dib marka shaqadayada, doorsoomayaasha, iyo isku darka la soo dejiyo, laakiin ka hor inta kale ee soo dejinta.

Waa kan tusaale beddela kan iyo background-colormarka la soo dejinayo oo la ururinayo Bootstrap iyada oo la adeegsanayo npm:color<body>

@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

Ku celi hadba sida lagama maarmaanka u ah doorsoome kasta oo ku jira Bootstrap, oo ay ku jiraan xulashooyinka caalamiga ah ee hoose.

Khariidado iyo wareegyo

Bootstrap 4 waxa ku jira sacab muggeed oo khariidado Sass ah, lamaane qiimo leh oo fududeeya in la soo saaro qoysaska CSS ee la xidhiidha. Waxaan u isticmaalnaa khariidadaha Sass midabadayada, meelaha jajaban ee xariiqda, iyo in ka badan. Sida doorsoomayaasha Sass, dhammaan khariidadaha Sass waxaa ku jira !defaultcalanka waana la dhaafi karaa oo la dheerayn karaa.

Qaar ka mid ah khariidadahayada Sass waxay ku milmeen kuwo madhan si caadi ah. Tan waxa loo sameeyaa si loogu oggolaado balaadhinta fudud ee khariidadda Sass ee la bixiyay, laakiin waxay ku timaadaa kharashka samaynta ka saarista walxaha khariidadda waxyar ka sii adag.

Wax ka beddel khariidada

Si aad wax uga bedesho midabka jira ee $theme-colorskhariidaddayada, ku dar kuwan soo socda faylkaaga Sass ee caadiga ah:

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

Kudar khariidada

Si loogu daro midab cusub $theme-colors, ku dar furaha cusub iyo qiimaha:

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

Ka saar khariidada

Si aad midabada uga saarto $theme-colors, ama khariidad kasta, isticmaal map-remove. La soco waa inaad gelisaa inta u dhaxaysa shuruudahayaga iyo ikhtiyaarradayada:

// 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";
...

Furayaasha loo baahan yahay

Bootstrap waxay u malaynaysaa joogitaanka qaar ka mid ah furayaasha gaarka ah ee ku jira khariidadaha Sass sidaan u isticmaalnay oo aan u kordhinay nafteena. Markaad habaynayso khariidadaha ku jira, waxaa laga yaabaa inaad la kulanto khaladaad halka furaha khariidadda Sass gaar ah la isticmaalayo.

Tusaale ahaan, waxaan u isticmaalnaa furayaasha primary, success, iyo dangerfurayaasha laga soo bilaabo $theme-colorsxiriirinta, badhamada, iyo qaabka foomka. Beddelka qiyamka furayaashan waa in aanay soo bandhigin wax arrimo ah, laakiin ka saaristooda waxa ay sababi kartaa arrimo la xidhiidha ururinta Sass. Xaaladahan, waxaad u baahan doontaa inaad wax ka bedesho koodka Sass ee isticmaalaya qiyamkaas.

Hawlaha

Bootstrap waxay isticmaashaa dhowr hawlood oo Sass ah, laakiin qayb-hoosaad kaliya ayaa lagu dabaqi karaa dulucda guud. Waxaan ku soo darnay saddex hawlood oo lagu heli karo qiyamka khariidadaha midabka:

@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);
}

Kuwani waxay kuu oggolaanayaan inaad hal midab ka soo qaadato khariidadda Sass si la mid ah sida aad u isticmaali lahayd doorsoomiyaha midabka v3.

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

Waxa kale oo aanu haynaa shaqo kale oo ah in aan ka helno heer midab gaar ah $theme-colorskhariidada. Qiimaha heerka taban ayaa iftiimin doona midabka, halka heerarka sare ay madoobaan doonaan.

@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);
}

Ficil ahaan, waxaad wici lahayd shaqada oo aad ku gudbi lahayd laba cabbir: magaca midabka $theme-colors(tusaale, aasaasiga ama khatarta) iyo heerka tirada.

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

Hawlaha dheeraadka ah ayaa lagu dari karaa mustaqbalka ama caadadaada Sass si aad u abuurto hawlo heer ah khariidadaha Sass dheeraad ah, ama xitaa mid guud haddii aad rabto inaad noqoto mid hadal badan.

Kala duwanaanshaha midabka

Shaqo dheeraad ah oo aan ku darno Bootstrap waa shaqada isbarbardhigga midabka, color-yiq. Waxay isticmaashaa booska midabka YIQ si ay si toos ah ugu soo celiso iftiinka ( #fff) ama mugdiga ( #111) midabka ka duwan ee ku salaysan midabka salka la cayimay. Shaqadani waxay si gaar ah faa'iido u leedahay isku-dhafka ama wareegyada halkaasoo aad ka soo saarayso fasallo badan.

Tusaale ahaan, si aan khariidadeena uga soo saarno $theme-colorssawiro midab leh:

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

Waxa kale oo loo isticmaali karaa baahiyaha isbarbardhiga hal mar:

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

Waxa kale oo aad qeexi kartaa midabka salka leh hawlahayaga khariidada midabka:

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

Ka baxso SVG

Waxaan u isticmaalnaa escape-svgshaqada si aan uga baxsadno <, >iyo #jilayaasha sawirada asalka ah ee SVG. Jilayaashan waxay u baahan yihiin in la baxsado si si sax ah loogu sameeyo sawirada gadaasha ee IE. Marka la isticmaalayo escape-svgshaqada, xogta URIs waa in la soo xigtay.

Ku dar oo kala jar hawlaha

Waxaan isticmaalnaa addiyo subtracthawlaha si aan ugu duubno calcshaqada CSS. Ujeedada ugu muhiimsan ee hawlahan waa in laga fogaado khaladaadka marka 0qiimaha "mid la'aanta" loo gudbiyo calctibaaxaha. Odhaahyada sida calc(10px - 0)waxay ku soo celin doonaan khaladka dhammaan daalacashada, inkastoo ay xisaab ahaan sax yihiin.

Tusaale halka calcku ansax yahay:

$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);
}

Tusaale halka calcku aanu shaqaynayn:

$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);
}

Doorashooyinka Sass

Ku beddel Bootstrap 4 oo leh faylkayada doorsoomayaal caadadii ku dhex dhisan oo si fudud ugu beddel dookhyada CSS ee caalamiga ah $enable-*doorsoomayaal Sass cusub ah. Burburi qiimaha doorsoomaha oo ku celi npm run testsida loo baahdo.

Waxaad ka heli kartaa oo aad u habayn kartaa doorsoomayaashan xulashooyinka caalamiga ah ee muhiimka ah scss/_variables.scssfaylka Bootstrap.

Midabka

Qaar badan oo ka mid ah qaybaha kala duwan ee Bootstrap iyo adeegyada waxaa lagu dhisay midabyo taxane ah oo lagu qeexay khariidadda Sass. Khariidaddan waxa lagu xidhi karaa Sass si loo soo saaro xeerar taxane ah.

Dhammaan midabada

Dhammaan midabada laga heli karo Bootstrap 4, waxay diyaar u yihiin doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scssfaylka. Tan waxaa lagu balaadhin doonaa siideynnada yaryar ee soo socda si loogu daro habab dheeraad ah, si la mid ah palette -cawlan ee aan ku darnay.

Waa kuwan sida aad kuwan ugu isticmaali karto Sass-kaaga:

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

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

Fasallada utility midabka ayaa sidoo kale diyaar u ah dejinta coloriyobackground-color .

Midabada mawduuca

Waxaan isticmaalnaa qayb ka mid ah dhammaan midabada si aan u abuurno palette midab yar si loo soo saaro nidaamyada midabka, sidoo kale loo heli karo doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scssfaylka Bootstrap.

Grays

Qayb ballaadhan oo doorsoomayaal cawl ah iyo khariidad Sass ah oo scss/_variables.scssloogu talagalay hadhyo cawl oo joogto ah dhammaan mashruucaaga. Ogsoonow in kuwani ay yihiin "cawlan qabow", kuwaas oo u janjeera dhanka midab buluug ah oo khafiif ah, halkii ay ka ahaan lahaayeen cawl dhexdhexaad ah.

Gudaha scss/_variables.scss, waxaad ka heli doontaa doorsoomayaasha midabka Bootstrap iyo khariidadda Sass. Waa kuwan tusaale $colorskhariidadda 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;

Ku dar, ka saar, ama wax ka beddel qiyamka khariidada dhexdeeda si aad u cusboonaysiiso sida loogu isticmaalo qaybo kale oo badan. Nasiib darro wakhtigan, ma aha qayb kasta oo ka faa'iidaysata khariidadan Sass. Cusboonaysiinta mustaqbalka waxay ku dadaali doontaa inay horumariso tan. Ilaa markaas, qorshee isticmaalka ${color}doorsoomayaasha iyo khariidadan Sass.

Qaybaha

Qaar badan oo ka mid ah qaybaha Bootstrap iyo yutiilitida waxaa lagu dhisay @eachwareegyo kuwaas oo ku celcelinaya khariidadda Sass. Tani waxay si gaar ah waxtar u leedahay soo saarista kala duwanaanshiyaha qayb inaga $theme-colorsiyo abuurista kala duwanaansho jawaab celin ah goob kasta oo jaban. Markaad habayso khariidadahan Sass oo aad dib u ururiso, waxaad si toos ah u arki doontaa isbeddeladaada oo ka muuqda wareegyadan.

Wax ka beddelayaasha

Qaybo badan oo ka mid ah Bootstrap ayaa lagu dhisay hab fasalka wax ka beddelka ah. Tani waxay ka dhigan tahay in inta badan habaynta ay ka kooban tahay fasalka aasaasiga ah (tusaale, .btn) halka kala duwanaanshaha qaabku uu ku kooban yahay fasallada wax ka beddelka (tusaale, .btn-danger). Fasaladan wax ka beddelka ah waxa laga dhisay $theme-colorskhariidada si ay u habeeyaan tirada iyo magaca fasallada wax ka beddelka.

Waa kuwan laba tusaale oo ku saabsan sida aan u dulmarno $theme-colorskhariidada si aan u soo saarno wax ka beddelka .alertqaybta iyo dhammaan .bg-*adeegyadayada asalka ah.

// 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);
}

Ka jawaaba

Siddooyinkan Sass kuma koobna khariidadaha midabka, sidoo kale. Waxa kale oo aad abuuri kartaa kala duwanaansho jawaab celin ah oo ka mid ah qaybahaaga ama tamartaada. U soo qaado tusaale ahaan agabka toosinta qoraalka ee ka jawaabaya meesha aan ku dhex darno @eachloop-ka $grid-breakpointskhariidadda Sass oo ay ku jirto su'aal warbaahineed.

@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; }
  }
}

Haddii aad u baahan tahay inaad wax ka beddesho kaaga $grid-breakpoints, isbeddelladaadu waxay khuseeyaan dhammaan wareegyada ku celcelinaya khariidadaas.

doorsoomayaasha CSS

Bootstrap 4 waxaa ku jira ku dhawaad ​​laba darsin oo CSS ah oo guryaha gaarka loo leeyahay (kala duwanaansho) oo ku jira CSS-ta la soo uruuriyay. Kuwani waxay si fudud u helaan qiyamka sida caadiga ah loo isticmaalo sida midabada mawduucayada, meelaha goynta, iyo xidhmooyinka farta aasaasiga ah marka aad ka shaqaynayso Kormeeraha browserkaaga, sanduuqa koodka, ama wax-soo-saarka guud.

Doorsoomayaasha la heli karo

Waa kuwan doorsoomayaasha aan ku darno (ogow in :rootloo baahan yahay). Waxay ku yaalaan _root.scssgalkeena

: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;
}

Tusaalooyinka

Doorsoomayaasha CSS waxay bixiyaan dabacsanaan la mid ah doorsoomayaasha Sass, laakiin iyada oo aan loo baahnayn isku-dubarid ka hor inta aan loo gudbin browserka. Tusaale ahaan, halkan waxaan dib u dajinaynaa farta boggayaga iyo qaababka isku xidhka doorsoomayaasha CSS.

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

Doorsoomayaasha Breakpoint

In kasta oo aan markii hore ku soo darnay qodobbada goynta doorsoomayaashayada CSS (tusaale, --breakpoint-md), kuwan laguma taageero su'aalaha warbaahinta , laakiin weli waxa loo isticmaali karaa xeer hoosaadyada su'aalaha warbaahinta. Doorsoomayaashan barta jabintu waxay ku sii jiraan CSS-ta la soo ururiyey si ay dib ugu waafaqaan marka loo eego inay isticmaali karaan JavaScript. Wax badan ka baro faahfaahinta

Waa kuwan tusaale waxa aan la taageerin:

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

Oo halkan waa tusaale waxa la taageeray:

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