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 amfani da fa'idar masu canji, taswirori, mixins, da ƙari.

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

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

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

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

// Optional
@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 4 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.

Canje-canje masu canzawa a cikin fayil ɗin Sass iri ɗaya na iya zuwa kafin ko bayan tsoffin masu canji. Duk da haka, lokacin da aka soke duk fayilolin Sass, dole ne sokewar ku ta zo kafin shigo da fayilolin Sass na Bootstrap.

Anan ga misalin da ke canza da background-colorkuma colorlokacin <body>sayo da haɗa Bootstrap ta npm:

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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`
}

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) ko`false`	Yana ba da damar tsararren salo `border-radius`akan sassa daban-daban.
`$enable-shadows`	`true`ko `false`(default)	Yana ba da damar tsararren salo `box-shadow`akan sassa daban-daban.
`$enable-gradients`	`true`ko `false`(default)	Yana ba da damar ƙayyadaddun gradients ta hanyar `background-image`salo akan sassa daban-daban.
`$enable-transitions`	`true`(default) ko`false`	Yana ba da damar ƙayyadaddun `transition`s akan sassa daban-daban.
`$enable-hover-media-query`	`true`ko `false`(default)	Ya ƙare
`$enable-grid-classes`	`true`(default) ko`false`	Yana ba da damar tsara azuzuwan CSS don tsarin grid (misali, `.container`, `.row`, `.col-md-1`, da sauransu).
`$enable-caret`	`true`(default) ko`false`	Yana ba da damar kula da ɓarna a kan `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) ko`false`	Yana ba da damar salo don inganta bugu.

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

Indigo

Purple

ruwan hoda

Lemu

Yellow

Kore

Teal

Cyan

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 Sass masu canji da taswirar Sass a cikin scss/_variables.scssfayil ɗin Bootstraps.

Firamare

Sakandare

Nasara

hadari

Gargadi

Bayani

Haske

Duhu

Greys

Faɗin fa'ida na masu canjin launin toka da taswirar Sass scss/_variables.scssdon daidaitattun inuwar launin toka a cikin aikinku.

100

200

300

400

500

600

700

800

900

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 lokacin 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}