in English

Bootstrap ya Mandhari

Geuza kukufaa Bootstrap 4 ukitumia vigeu vyetu vipya vya Sass vilivyojengewa ndani kwa mapendeleo ya mtindo wa kimataifa kwa mada rahisi na mabadiliko ya vipengele.

Utangulizi

Katika Bootstrap 3, mandhari yaliendeshwa kwa kiasi kikubwa na ubatilishaji tofauti katika LESS, CSS maalum, na laha ya mtindo tofauti ya mandhari ambayo tulijumuisha kwenye distfaili zetu. Kwa juhudi fulani, mtu anaweza kuunda upya kabisa mwonekano wa Bootstrap 3 bila kugusa faili za msingi. Bootstrap 4 hutoa mbinu inayojulikana, lakini tofauti kidogo.

Sasa, mandhari inakamilishwa na vigeu vya Sass, ramani za Sass, na CSS maalum. Hakuna laha ya mitindo ya mandhari iliyojitolea zaidi; badala yake, unaweza kuwezesha mandhari iliyojengewa ndani ili kuongeza gradient, vivuli, na zaidi.

Sass

Tumia chanzo chetu cha faili za Sass ili kunufaika na vigeu, ramani, michanganyiko, na zaidi wakati wa kuandaa Sass kwa kutumia bomba la kipengee chako.

Muundo wa faili

Inapowezekana, epuka kurekebisha faili za msingi za Bootstrap. Kwa Sass, hiyo inamaanisha kuunda laha yako mwenyewe ya mtindo inayoingiza Bootstrap ili uweze kuirekebisha na kuipanua. Kwa kudhani unatumia meneja wa kifurushi kama npm, utakuwa na muundo wa faili ambao unaonekana kama hii:

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

Ikiwa umepakua faili zetu asili na hutumii kidhibiti kifurushi, utataka kusanidi wewe mwenyewe kitu sawa na muundo huo, ukitenganisha faili za chanzo za Bootstrap na zako.

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

Inaingiza

Katika custom.scss, utaleta faili za Sass chanzo cha Bootstrap. Una chaguo mbili: ni pamoja na Bootstrap yote, au chagua sehemu unazohitaji. Tunahimiza hii ya mwisho, ingawa fahamu kuwa kuna mahitaji na tegemezi katika vipengele vyetu. Pia utahitaji kujumuisha JavaScript kwa programu-jalizi zetu.

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

Usanidi huo ukiwa umekamilika, unaweza kuanza kurekebisha vigeuzo vyovyote vya Sass na ramani katika custom.scss. Unaweza pia kuanza kuongeza sehemu za Bootstrap chini ya // Optionalsehemu kama inahitajika. Tunapendekeza utumie mrundikano kamili wa kuingiza kutoka kwenye bootstrap.scssfaili yetu kama sehemu yako ya kuanzia.

Chaguo-msingi zinazobadilika

Kila kigezo cha Sass katika Bootstrap kinajumuisha !defaultbendera inayokuruhusu kubatilisha thamani chaguo-msingi ya kibadilishaji katika Sass yako bila kurekebisha msimbo wa chanzo wa Bootstrap. Nakili na ubandike vigeu vinavyohitajika, rekebisha thamani zao, na uondoe !defaultbendera. Ikiwa kibadilishaji tayari kimepewa, basi hakitakabidhiwa tena na maadili chaguo-msingi katika Bootstrap.

Utapata orodha kamili ya anuwai za Bootstrap katika scss/_variables.scss. Vigezo vingine vimewekwa kuwa null, vigeu hivi havitoi mali isipokuwa vimebatilishwa katika usanidi wako.

Ubatilishaji unaobadilika lazima uje baada ya utendakazi, vigeuzi na vichanganyiko vyetu kuletwa, lakini kabla ya uagizaji wengine.

Hapa kuna mfano ambao unabadilisha background-colorna colorkwa <body>wakati wa kuingiza na kuunda Bootstrap kupitia 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

Rudia inavyohitajika kwa utofauti wowote katika Bootstrap, ikijumuisha chaguzi za kimataifa zilizo hapa chini.

Anza na Bootstrap kupitia npm na mradi wetu wa kuanzisha! Nenda kwenye hazina ya kiolezo cha twbs/bootstrap-npm-starter ili kuona jinsi ya kuunda na kubinafsisha Bootstrap katika mradi wako wa npm. Inajumuisha mkusanyaji wa Sass, Kiambishi Kiotomatiki, Stylelint, PurgeCSS, na Aikoni za Bootstrap.

Ramani na vitanzi

Bootstrap 4 inajumuisha ramani chache za Sass, jozi muhimu za thamani ambazo hurahisisha kutengeneza familia za CSS zinazohusiana. Tunatumia ramani za Sass kwa rangi zetu, vituo vya kuvunja gridi na zaidi. Kama vile vigeu vya Sass, ramani zote za Sass zinajumuisha !defaultbendera na zinaweza kubatilishwa na kupanuliwa.

Baadhi ya ramani zetu za Sass zimeunganishwa kuwa tupu kwa chaguomsingi. Hii inafanywa ili kuruhusu upanuzi rahisi wa ramani fulani ya Sass, lakini inakuja kwa gharama ya kufanya kuondoa vitu kutoka kwa ramani kuwa vigumu zaidi.

Rekebisha ramani

Ili kurekebisha rangi iliyopo kwenye $theme-colorsramani yetu, ongeza yafuatayo kwenye faili yako maalum ya Sass:

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

Ongeza kwenye ramani

Ili kuongeza rangi mpya kwa $theme-colors, ongeza ufunguo mpya na thamani:

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

Ondoa kwenye ramani

Ili kuondoa rangi kutoka $theme-colors, au ramani nyingine yoyote, tumia map-remove. Fahamu ni lazima uiweke kati ya mahitaji yetu na chaguo:

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

Vifunguo vinavyohitajika

Bootstrap huchukulia kuwepo kwa baadhi ya funguo mahususi ndani ya ramani za Sass kama tulivyotumia na kuzipanua sisi wenyewe. Unapoweka mapendeleo kwenye ramani zilizojumuishwa, unaweza kukutana na hitilafu ambapo ufunguo mahususi wa ramani ya Sass unatumika.

Kwa mfano, tunatumia primary, success, na dangervitufe kutoka $theme-colorskwa viungo, vitufe, na hali za fomu. Kubadilisha thamani za funguo hizi hakupaswi kuwasilisha masuala yoyote, lakini kuziondoa kunaweza kusababisha masuala ya ujumuishaji wa Sass. Katika matukio haya, utahitaji kurekebisha msimbo wa Sass unaotumia maadili hayo.

Kazi

Bootstrap hutumia vitendaji kadhaa vya Sass, lakini sehemu ndogo pekee ndiyo inatumika kwa mada ya jumla. Tumejumuisha vipengele vitatu vya kupata thamani kutoka kwa ramani za rangi:

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

Hizi hukuruhusu kuchagua rangi moja kutoka kwa ramani ya Sass kama vile unavyoweza kutumia utofauti wa rangi kutoka v3.

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

Pia tunayo kazi nyingine ya kupata kiwango fulani cha rangi kutoka kwenye $theme-colorsramani. Maadili ya kiwango hasi yatapunguza rangi, wakati viwango vya juu vitafanya giza.

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

Kwa mazoezi, ungeita kitendakazi na kupita katika vigezo viwili: jina la rangi kutoka $theme-colors(kwa mfano, msingi au hatari) na kiwango cha nambari.

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

Vitendaji vya ziada vinaweza kuongezwa katika siku zijazo au Sass yako maalum ili kuunda utendaji wa kiwango cha ramani za ziada za Sass, au hata moja ya jumla ikiwa ungetaka kuwa na kitenzi zaidi.

Tofauti ya rangi

Chaguo za ziada tunazojumuisha kwenye Bootstrap ni chaguo za kukokotoa za utofautishaji wa rangi, color-yiq. Inatumia nafasi ya rangi ya YIQ kurudisha kiotomatiki mwanga ( #fff) au giza ( #111) rangi ya utofautishaji kulingana na rangi ya msingi iliyobainishwa. Chaguo hili la kukokotoa ni muhimu sana kwa michanganyiko au vitanzi ambapo unazalisha madarasa mengi.

Kwa mfano, kutengeneza alama za rangi kutoka kwa $theme-colorsramani yetu:

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

Inaweza pia kutumika kwa mahitaji ya tofauti ya mara moja:

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

Unaweza pia kubainisha rangi ya msingi na vipengele vyetu vya ramani ya rangi:

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

Escape SVG

Tunatumia chaguo la escape-svgkukokotoa ili kuepuka <, >na #vibambo vya picha za mandharinyuma za SVG. Herufi hizi zinahitaji kuepukwa ili kutoa picha za usuli ipasavyo katika IE. Wakati wa kutumia chaguo za escape-svgkukokotoa, URI za data lazima zinukuliwe.

Ongeza na Ondoa vitendaji

Tunatumia addna subtractvitendakazi kufunga chaguo za kukokotoa za CSS calc. Madhumuni ya msingi ya chaguo hizi za kukokotoa ni kuepuka makosa wakati thamani ya "unit" 0inapitishwa kwenye calcusemi. Maneno kama calc(10px - 0)hayo yatarudisha hitilafu katika vivinjari vyote, licha ya kuwa sahihi kihisabati.

Mfano ambapo hesabu ni halali:

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

Mfano ambapo hesabu si sahihi:

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

Chaguzi za Sass

Geuza kukufaa Bootstrap 4 ukitumia faili yetu ya vibadilishio maalum iliyojengewa ndani na ubadilishe kwa urahisi mapendeleo ya kimataifa ya CSS kwa vigeu vipya vya $enable-*Sass. Batilisha thamani ya kibadilishaji na ujumuishe na npm run testinavyohitajika.

Unaweza kupata na kubinafsisha anuwai hizi kwa chaguo muhimu za kimataifa katika scss/_variables.scssfaili ya Bootstrap.

Inaweza kubadilika Maadili Maelezo
$spacer 1rem(chaguo-msingi), au thamani yoyote > 0 Hubainisha thamani chaguo-msingi ya spacer ili kutengeneza kiprogramu huduma zetu za spacer .
$enable-rounded true(chaguo-msingi) aufalse Huwasha border-radiusmitindo iliyoainishwa awali kwenye vipengele mbalimbali.
$enable-shadows trueau false(chaguo-msingi) Huwasha box-shadowmitindo ya mapambo iliyoainishwa awali kwenye vipengele mbalimbali. Haiathiri box-shadows kutumika kwa hali ya kuzingatia.
$enable-gradients trueau false(chaguo-msingi) Huwasha mikunjo iliyofafanuliwa awali kupitia background-imagemitindo kwenye vipengele mbalimbali.
$enable-transitions true(chaguo-msingi) aufalse Huwasha transitions zilizofafanuliwa awali kwenye vipengele mbalimbali.
$enable-prefers-reduced-motion-media-query true(chaguo-msingi) aufalse Huwasha prefers-reduced-motionhoja ya midia , ambayo hukandamiza uhuishaji/mipito fulani kulingana na mapendeleo ya kivinjari/mfumo wa uendeshaji.
$enable-hover-media-query trueau false(chaguo-msingi) Imeacha kutumika
$enable-grid-classes true(chaguo-msingi) aufalse Huwasha uzalishaji wa madarasa ya CSS kwa mfumo wa gridi ya taifa (km, .container, .row, .col-md-1, nk.).
$enable-caret true(chaguo-msingi) aufalse Huwasha utunzaji wa kipengele bandia kwenye .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(chaguo-msingi) aufalse Ongeza kishale cha "mkono" kwenye vipengee vya vitufe ambavyo havijazimwa.
$enable-print-styles true(chaguo-msingi) aufalse Huwasha mitindo ya kuboresha uchapishaji.
$enable-responsive-font-sizes trueau false(chaguo-msingi) Huwasha saizi za fonti zinazojibu .
$enable-validation-icons true(chaguo-msingi) aufalse Huwasha background-imageaikoni ndani ya ingizo za maandishi na baadhi ya fomu maalum za hali za uthibitishaji.
$enable-deprecation-messages true(chaguo-msingi) aufalse Weka ili falsekuficha maonyo unapotumia michanganyiko iliyoacha kutumika na vitendakazi ambavyo vimepangwa kuondolewa katika v5.

Rangi

Vipengee vingi na huduma mbalimbali za Bootstrap hujengwa kupitia safu ya rangi iliyofafanuliwa kwenye ramani ya Sass. Ramani hii inaweza kuunganishwa katika Sass ili kuzalisha kwa haraka mfululizo wa kanuni.

Rangi zote

Rangi zote zinazopatikana katika Bootstrap 4, zinapatikana kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scssfaili. Hii itapanuliwa katika matoleo madogo yajayo ili kuongeza vivuli vya ziada, kama vile rangi ya kijivu ambayo tayari tumejumuisha.

$ bluu #007bff
$indigo #6610f2
$ zambarau #6f42c1
$ pink #e83e8c
$nyekundu #dc3545
$ machungwa #fd7e14
$ njano #ffc107
$ kijani #28a745
$teal #20c997
$cyan #17a2b8

Hivi ndivyo unavyoweza kutumia hizi katika Sass yako:

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

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

Madarasa ya matumizi ya rangi yanapatikana pia kwa kuweka colorna background-color.

Katika siku zijazo, tutalenga kutoa ramani na vigeu vya Sass kwa vivuli vya kila rangi kama tulivyofanya na rangi za kijivu hapa chini.

Rangi za mandhari

Tunatumia kikundi kidogo cha rangi zote kuunda paji la rangi ndogo zaidi kwa ajili ya kutengeneza miundo ya rangi, inayopatikana pia kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scssfaili ya Bootstrap.

$msingi #007bff
$sekondari #6c757d
$mafanikio #28a745
$hatari #dc3545
$onyo #ffc107
Maelezo ya $ #17a2b8
$mwanga #f8f9fa
$ giza #343a40

Kijivu

Seti kubwa ya vigeu vya kijivu na ramani ya Sass scss/_variables.scsskwa vivuli thabiti vya kijivu kwenye mradi wako wote. Kumbuka kwamba hizi ni "kijivu cha baridi", ambacho kinaelekea kwenye tone la bluu la hila, badala ya kijivu cha neutral.

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

Ndani scss/_variables.scssya , utapata tofauti za rangi za Bootstrap na ramani ya Sass. Hapa kuna mfano wa $colorsramani ya 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;

Ongeza, ondoa, au urekebishe thamani ndani ya ramani ili kusasisha jinsi zinavyotumika katika vipengele vingine vingi. Kwa bahati mbaya kwa wakati huu, si kila sehemu inayotumia ramani hii ya Sass. Sasisho za siku zijazo zitajitahidi kuboresha juu ya hili. Hadi wakati huo, panga kutumia ${color}vigeuzo na ramani hii ya Sass.

Vipengele

Vipengee vingi na huduma za Bootstrap zimejengwa kwa @eachvitanzi ambavyo vinarudia juu ya ramani ya Sass. Hii inasaidia hasa kwa kuzalisha vibadala vya kijenzi kulingana na chetu $theme-colorsna kuunda vibadala vinavyoitikia kwa kila nukta. Unapoweka mapendeleo kwenye ramani hizi za Sass na kukusanya upya, utaona mabadiliko yako yakionyeshwa kiotomatiki katika misururu hii.

Virekebishaji

Vipengele vingi vya Bootstrap vimejengwa kwa mbinu ya darasa la kurekebisha-msingi. Hii inamaanisha kuwa wingi wa mtindo unapatikana kwa darasa la msingi (kwa mfano, .btn) wakati tofauti za mitindo zimefungwa kwa madarasa ya kurekebisha (kwa mfano, .btn-danger). Madarasa haya ya kurekebisha yameundwa kutoka kwenye $theme-colorsramani ili kufanya kubinafsisha nambari na jina la madarasa yetu ya kurekebisha.

Hapa kuna mifano miwili ya jinsi tunavyozunguka $theme-colorsramani ili kutengeneza virekebishaji kwa .alertkijenzi na .bg-*huduma zetu zote za usuli.

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

Msikivu

Vitanzi hivi vya Sass havikomei kwenye ramani za rangi pia. Unaweza pia kuzalisha tofauti za kuitikia za vipengele au huduma zako. Chukua kwa mfano huduma zetu za upatanishi wa maandishi ambapo tunachanganya @eachkitanzi cha $grid-breakpointsramani ya Sass na hoja ya midia ikijumuisha.

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

Iwapo utahitaji kurekebisha yako $grid-breakpoints, mabadiliko yako yatatumika kwa vitanzi vyote vinavyorudia kwenye ramani hiyo.

Vigezo vya CSS

Bootstrap 4 inajumuisha takriban dazeni mbili za sifa maalum za CSS (vigeu) katika CSS yake iliyokusanywa. Hizi hutoa ufikiaji rahisi wa thamani zinazotumiwa na watu wengi kama vile rangi zetu za mandhari, sehemu za kukiuka, na mlundikano wa fonti msingi unapofanya kazi katika Kikaguzi cha kivinjari chako, kisanduku cha msimbo, au uchapaji wa jumla wa protoksi.

Vigezo vinavyopatikana

Hapa kuna anuwai tunayojumuisha (kumbuka kuwa :rootinahitajika). Zinapatikana katika _root.scssfaili yetu.

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

Mifano

Vigezo vya CSS vinatoa unyumbufu sawa na vigeu vya Sass, lakini bila hitaji la mkusanyiko kabla ya kuhudumiwa kwa kivinjari. Kwa mfano, hapa tunaweka upya fonti na mitindo ya kiunganishi ya ukurasa wetu na viambajengo vya CSS.

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

Vigezo vya Breakpoint

Ingawa awali tulijumuisha sehemu za kukiuka katika vigeu vyetu vya CSS (kwa mfano, --breakpoint-md), hizi hazitumiki katika hoja za maudhui , lakini bado zinaweza kutumika ndani ya mipangilio ya kanuni katika hoja za midia. Vigezo hivi vya utatuzi husalia katika CSS iliyokusanywa kwa uoanifu wa nyuma ikizingatiwa kuwa vinaweza kutumiwa na JavaScript. Jifunze zaidi katika spec .

Huu hapa ni mfano wa kile ambacho hakitumiki:

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

Na hapa kuna mfano wa kile kinachoungwa mkono:

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