in English

Bootstrap mai jigo

Keɓance Bootstrap 4 tare da sabon ginanniyar masu canji na Sass don zaɓin salon duniya don sauƙin jigo da canje-canjen ɓangaren.

Gabatarwa

A cikin Bootstrap 3, jigogi ya kasance yana motsa shi ta hanyar sauye-sauye masu canzawa a cikin LESS, CSS na al'ada, da wani keɓaɓɓen salo na jigo wanda muka haɗa a cikin distfayilolinmu. Tare da ɗan ƙoƙari, mutum zai iya sake fasalin fasalin Bootstrap 3 gaba ɗaya ba tare da taɓa ainihin fayilolin ba. Bootstrap 4 yana ba da sabani, amma ɗan bambanta hanya.

Yanzu, ana aiwatar da jigo ta masu canjin Sass, taswirorin Sass, da CSS na al'ada. Babu sauran takaddun salo na jigo; maimakon haka, zaku iya kunna jigon ginannen don ƙara gradients, inuwa, da ƙari.

Sass

Yi amfani da fayilolin Sass tushen mu don cin gajiyar sauye-sauye, taswirori, abubuwan haɗin gwiwa, da ƙari yayin tattara Sass ta amfani da bututun kadari na ku.

Tsarin fayil

A duk lokacin da zai yiwu, guje wa gyara manyan fayilolin Bootstrap. Don Sass, wannan yana nufin ƙirƙirar takaddun salon ku wanda ke shigo da Bootstrap don ku iya gyarawa da tsawaita shi. Tsammanin kuna amfani da mai sarrafa fakiti kamar npm, zaku sami tsarin fayil mai kama da wannan:

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

Idan kun zazzage fayilolin tushen mu kuma ba ku amfani da mai sarrafa fakiti, kuna son saita wani abu mai kama da wannan tsarin da hannu, kiyaye fayilolin tushen Bootstrap daban da naku.

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

Ana shigo da shi

A cikin custom.scss, za ku shigo da fayilolin Sass tushen Bootstrap. Kuna da zaɓuɓɓuka biyu: haɗa duk Bootstrap, ko zaɓi sassan da kuke buƙata. Muna ƙarfafa na ƙarshe, ko da yake ku sani akwai wasu buƙatu da abin dogaro a cikin abubuwan da muka haɗa. Hakanan kuna buƙatar haɗa wasu JavaScript don plugins ɗin mu.

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

Tare da wannan saitin a wurin, zaku iya fara canza kowane saƙon Sass da taswira a cikin custom.scss. Hakanan zaka iya fara ƙara sassan Bootstrap a ƙarƙashin // Optionalsashin kamar yadda ake buƙata. Muna ba da shawarar amfani da cikakken tarin shigo da kaya daga bootstrap.scssfayil ɗin mu azaman wurin farawa.

Matsaloli masu canzawa

Kowane Sass m a cikin Bootstrap ya haɗa da !defaulttuta da ke ba ku damar ƙetare ƙimar tsohowar mai canjin a cikin Sass ɗin ku ba tare da canza lambar tushen Bootstrap ba. Kwafi da liƙa masu canji kamar yadda ake buƙata, gyara ƙimar su, sannan cire !defaulttuta. Idan an riga an sanya maɓalli, to, ba za a sake sanya shi ta tsoffin dabi'u a Bootstrap ba.

Za ku sami cikakken jerin masu canji na Bootstrap a cikin scss/_variables.scss. An saita wasu masu canji zuwa null, waɗannan masu canji ba sa fitar da kayan sai dai idan an soke su a cikin tsarin ku.

Dole ne masu canji masu canzawa su zo bayan an shigo da ayyukanmu, masu canji, da mixins, amma kafin sauran abubuwan shigo da su.

Anan ga misalin da ke canza da background-colorkuma colorlokacin <body>sayo da haɗa Bootstrap ta 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

Maimaita kamar yadda ya cancanta ga kowane mai canzawa a cikin Bootstrap, gami da zaɓuɓɓukan duniya da ke ƙasa.

Fara da Bootstrap ta hanyar npm tare da aikin farawa! Shugaban zuwa wurin ajiyar samfuri na twbs/bootstrap-npm-starter don ganin yadda ake ginawa da keɓance Bootstrap a cikin aikin npm naku. Ya haɗa da mai tara Sass, Autoprefixer, Stylelint, PurgeCSS, da Gumakan Bootstrap.

Taswirori da madaukai

Bootstrap 4 ya haɗa da ɗimbin taswirar Sass, maɓalli masu ƙima waɗanda ke sauƙaƙa samar da iyalai na CSS masu alaƙa. Muna amfani da taswirorin Sass don launukanmu, wuraren karyewar grid, da ƙari. Kamar masu canji na Sass, duk taswirorin Sass sun haɗa da !defaulttuta kuma ana iya ƙetare su da tsawaita.

Wasu taswirorin mu na Sass an haɗa su zuwa marasa komai ta tsohuwa. Ana yin wannan don ba da damar fadada taswirar Sass da aka bayar cikin sauƙi, amma ya zo da tsadar cire abubuwa daga taswira da ɗan wahala.

Gyara taswira

Don canza launin da ke cikin $theme-colorstaswirar mu, ƙara mai zuwa zuwa fayil ɗin Sass na al'ada:

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

Ƙara zuwa taswira

Don ƙara sabon launi zuwa $theme-colors, ƙara sabon maɓalli da ƙima:

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

Cire daga taswira

Don cire launuka daga $theme-colors, ko kowane taswira, yi amfani da map-remove. Ku sani dole ne ku saka shi tsakanin buƙatunmu da zaɓuɓɓukanmu:

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

Maɓallan da ake buƙata

Bootstrap yana ɗaukar kasancewar wasu takamaiman maɓalli a cikin taswirar Sass kamar yadda muka yi amfani da su kuma muka faɗaɗa waɗannan kanmu. Yayin da kuke keɓance taswirorin da aka haɗa, zaku iya fuskantar kurakurai inda ake amfani da takamaiman taswirar taswirar Sass.

Misali, muna amfani da primary, success, da dangermaɓallai daga $theme-colorsdon hanyoyin haɗin gwiwa, maɓallai, da jihohin tsari. Maye gurbin ƙimar waɗannan maɓallan bai kamata ya gabatar da wata matsala ba, amma cire su na iya haifar da al'amuran haɗar Sass. A cikin waɗannan lokuta, kuna buƙatar canza lambar Sass wanda ke amfani da waɗannan ƙimar.

Ayyuka

Bootstrap yana amfani da ayyukan Sass da yawa, amma juzu'i ne kawai ake amfani da jigo na gaba ɗaya. Mun haɗa ayyuka guda uku don samun ƙima daga taswirar launi:

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

Waɗannan suna ba ku damar zaɓar launi ɗaya daga taswirar Sass kamar yadda zaku yi amfani da canjin launi daga v3.

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

Hakanan muna da wani aiki don samun takamaiman matakin launi daga $theme-colorstaswira. Matsayi mara kyau zai haskaka launi, yayin da manyan matakan za su yi duhu.

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

A aikace, zaku kira aikin kuma ku wuce cikin sigogi biyu: sunan launi daga $theme-colors(misali, firamare ko haɗari) da matakin lamba.

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

Za'a iya ƙara ƙarin ayyuka a nan gaba ko Sass na al'ada don ƙirƙirar ayyukan matakin don ƙarin taswirorin Sass, ko ma na yau da kullun idan kuna son zama ƙarin magana.

Bambancin launi

Wani ƙarin aikin da muka haɗa a cikin Bootstrap shine aikin bambancin launi, color-yiq. Yana amfani da sararin launi na YIQ don dawo da haske ta atomatik ( #fff) ko duhu ( #111) launi dabam dangane da ƙayyadadden launi na tushe. Wannan aikin yana da amfani musamman ga mixins ko madaukai inda kuke samar da azuzuwan da yawa.

Misali, don samar da swatches launi daga $theme-colorstaswirar mu:

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

Hakanan za'a iya amfani dashi don buƙatun banbance-banbance na kashe-kashe:

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

Hakanan zaka iya ƙayyade launin tushe tare da ayyukan taswirar launi:

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

Gudun SVG

Muna amfani da escape-svgaikin don tserewa <, >da #haruffa don hotunan bangon SVG. Waɗannan haruffan suna buƙatar tserewa don yin daidaitattun hotunan bango a cikin IE. Lokacin amfani da escape-svgaikin, dole ne a nakalto bayanan URIs.

Ƙara da Rage ayyuka

Muna amfani da ayyuka addda subtractayyuka don kunsa aikin CSS calc. Babban manufar waɗannan ayyuka shine a guje wa kurakurai lokacin da aka ƙaddamar da ƙimar "marasa ɗaya" 0cikin calcmagana. Kalmomi kamar calc(10px - 0)za su dawo da kuskure a cikin duk masu bincike, duk da kasancewar su daidai ta hanyar lissafi.

Misali inda calc yake aiki:

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

Misali inda calc ɗin ba ya aiki:

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

Zaɓuɓɓukan Sass

Keɓance Bootstrap 4 tare da ginanniyar fayil ɗin masu canji na al'ada kuma cikin sauƙin sauya zaɓin CSS na duniya tare da sabbin $enable-*masu canjin Sass. Soke ƙimar maɓalli kuma a sake haɗawa da npm run testyadda ake buƙata.

Kuna iya nemo ku keɓance waɗannan masu canji don maɓalli na zaɓuɓɓukan duniya a cikin scss/_variables.scssfayil ɗin Bootstrap.

Mai canzawa Darajoji Bayani
$spacer 1rem(tsoho), ko kowace ƙima> 0 Yana ƙayyadad da tsohowar ƙimar sarari don samar da kayan aikin sararin samaniya ta hanyar tsari .
$enable-rounded true(default) kofalse Yana ba da damar tsararren salo border-radiusakan sassa daban-daban.
$enable-shadows trueko false(default) Yana ba da damar tsayayyen salo na ado box-shadowakan sassa daban-daban. Ba ya shafar box-shadows amfani da jihohin mayar da hankali.
$enable-gradients trueko false(default) Yana ba da damar ƙayyadaddun gradients ta hanyar background-imagesalo akan sassa daban-daban.
$enable-transitions true(default) kofalse Yana ba da damar ƙayyadaddun transitions akan sassa daban-daban.
$enable-prefers-reduced-motion-media-query true(default) kofalse Yana ba da damar prefers-reduced-motiontambayar mai jarida , wanda ke danne wasu raye-raye/sauye-sauye dangane da abubuwan da masu amfani suka zaɓa na burauza/tsarin aiki.
$enable-hover-media-query trueko false(default) Ya ƙare
$enable-grid-classes true(default) kofalse Yana ba da damar tsara azuzuwan CSS don tsarin grid (misali, .container, .row, .col-md-1, da sauransu).
$enable-caret true(default) kofalse Yana ba da damar kula da ɓarna a kan .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(default) kofalse Ƙara siginan "hannu" zuwa abubuwan maɓalli marasa nakasa.
$enable-print-styles true(default) kofalse Yana ba da damar salo don inganta bugu.
$enable-responsive-font-sizes trueko false(default) Yana ba da damar girman rubutu masu amsawa .
$enable-validation-icons true(default) kofalse Yana ba da damar background-imagegumaka a cikin abubuwan shigar da rubutu da wasu siffofin na al'ada don tabbatarwa jihohin.
$enable-deprecation-messages true(default) kofalse Saita don falseɓoye faɗakarwa lokacin amfani da kowane mahaɗan da aka yanke da ayyukan da aka shirya cirewa a cikin v5.

Launi

Yawancin abubuwan haɗin Bootstrap da kayan aiki an gina su ta hanyar jerin launuka da aka ayyana a taswirar Sass. Ana iya madauki wannan taswira a cikin Sass don samar da jerin ƙa'idodi da sauri.

Duk launuka

Duk launukan da ake samu a cikin Bootstrap 4, ana samun su azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil. Za a faɗaɗa wannan a cikin ƙananan sakewa na gaba don ƙara ƙarin inuwa, kamar palette mai launin toka wanda muka riga mun haɗa.

$ blue #007bf
$indigo #6610f2
$m #6f42c1
$ ruwan hoda #e83e8c
$ ja #dc3545
$ orange #fd7e14
$ rawaya #ffc107
$ kore #28a745
$ shayi #20c997
$cin #17a2b8

Ga yadda zaku iya amfani da waɗannan a cikin Sass ɗin ku:

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

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

Hakanan ana samun azuzuwan amfanin launicolor don saiti da background-color.

A nan gaba, za mu yi nufin samar da taswirori na Sass da masu canji don inuwar kowane launi kamar yadda muka yi da launin toka a ƙasa.

Launukan jigo

Muna amfani da juzu'in duk launuka don ƙirƙirar ƙaramin palette mai launi don ƙirƙirar tsarin launi, kuma ana samun su azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil ɗin Bootstrap.

$primary #007bf
$sakandare #6c757d
$ nasara #28a745
$hadari #dc3545
$gargadi #ffc107
$bayanai #17a2b8
$haske #f8f9fa
$ duhu #343a40

Greys

Faɗin fa'ida na masu canjin launin toka da taswirar Sass scss/_variables.scssdon daidaitattun inuwar launin toka a cikin aikinku. Yi la'akari da cewa waɗannan "sanyi launin toka ne", waɗanda ke karkata zuwa sautin shuɗi mai dabara, maimakon launin toka mai tsaka tsaki.

$ launin toka-100 #f8f9fa
$ launin toka-200 #e9ecef
$ launin toka-300 #da2e6
$ launin toka-400 #ced4da
$ launin toka-500 #adb5bd
$ launin toka - 600 #6c757d
launin toka-700 #495057
launin toka-800 #343a40
launin toka-900 #212529

A ciki scss/_variables.scss, zaku sami masu canjin launi na Bootstrap da taswirar Sass. Ga misalin $colorstaswirar 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;

Ƙara, cire, ko gyara ƙima a cikin taswira don sabunta yadda ake amfani da su a cikin sauran abubuwa da yawa. Abin baƙin ciki a wannan lokacin, ba kowane sashi ke amfani da wannan taswirar Sass ba. Sabuntawa na gaba za su yi ƙoƙarin ingantawa akan wannan. Har sai lokacin, yi shirin yin amfani da masu ${color}canji da wannan taswirar Sass.

Abubuwan da aka gyara

Yawancin abubuwan haɗin Bootstrap da abubuwan amfani an gina su tare da @eachmadaukai waɗanda ke jujjuya taswirar Sass. Wannan yana da taimako musamman don samar da bambance-bambancen wani bangare ta hanyar mu $theme-colorsda ƙirƙirar bambance-bambancen amsa ga kowane wurin hutu. Yayin da kuke keɓance waɗannan taswirorin Sass kuma ku sake tarawa, zaku ga canje-canjen ku ta atomatik a cikin waɗannan madaukai.

Masu gyarawa

Yawancin abubuwan haɗin Bootstrap an gina su tare da tsarin aji mai gyara tushe. Wannan yana nufin yawancin salon yana ƙunshe ne zuwa ajin tushe (misali, .btn) yayin da bambancin salo ke iyakance ga azuzuwan masu gyara (misali, .btn-danger). Waɗannan azuzuwan masu gyara an gina su daga $theme-colorstaswira don yin gyare-gyaren lamba da sunan azuzuwan mu gyara.

Anan akwai misalai guda biyu na yadda muke yin madauki akan $theme-colorstaswira don samar da masu gyara ga .alertbangaren da duk abubuwan amfaninmu .bg-*na baya.

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

Mai amsawa

Waɗannan madaukai na Sass ba su iyakance ga taswirar launi ba, ko dai. Hakanan zaka iya ƙirƙirar bambance-bambancen abubuwan da aka haɗa ku ko abubuwan amfani. Dauki misali kayan aikin daidaita rubutun mu masu amsawa inda muke haɗa @eachmadauki don $grid-breakpointstaswirar Sass tare da tambayar mediya ta haɗa da.

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

Idan kuna buƙatar gyara naku $grid-breakpoints, canje-canjenku zai shafi duk madaukai da ke jujjuya taswirar.

CSS masu canji

Bootstrap 4 ya ƙunshi kusan dozin biyu kaddarorin al'ada na CSS (masu canzawa) a cikin CSS ɗin sa. Waɗannan suna ba da sauƙi ga dabi'un da aka saba amfani da su kamar launukan jigon mu, wuraren karyewa, da rijiyoyin rubutu na farko yayin aiki a cikin Inspector na burauzar ku, akwatin sandbox, ko ƙirar gabaɗaya.

Akwai masu canji

Anan ga masu canji da muka haɗa (lura cewa :rootana buƙatar). Suna cikin _root.scssfayil ɗin mu.

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

Misalai

Masu canjin CSS suna ba da sassauci iri ɗaya ga masu canjin Sass, amma ba tare da buƙatar haɗawa ba kafin a ba da su ga mai lilo. Misali, a nan muna sake saita font na shafinmu da tsarin haɗin kai tare da masu canjin CSS.

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

Matsalolin Breakpoint

Duk da yake mun fara haɗa wuraren karyawa a cikin masu canjin CSS ɗinmu (misali, --breakpoint-md), waɗannan ba su da tallafi a cikin tambayoyin kafofin watsa labarai , amma har yanzu ana iya amfani da su cikin ƙa'idodi a cikin tambayoyin kafofin watsa labarai. Waɗannan madaidaitan madaidaicin madaidaicin sun kasance a cikin CSS da aka haɗa don dacewa da baya da aka ba su JavaScript za su iya amfani da su. Ƙara koyo a cikin ƙayyadaddun bayanai .

Ga misalin abin da ba a tallafawa:

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

Kuma ga misalin abin da ake tallafawa:

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