Kaupapa Bootstrap

Whakaritehia a Bootstrap 4 me a maatau taurangi Sass hou i hangaia mo nga manakohanga ahua o te ao mo nga kaupapa ngawari me nga huringa waahanga.

Kupu Whakataki

I roto i te Bootstrap 3, ko te nuinga o te kaupapa i peia e nga huringa rereke i roto i te LESS, ritenga CSS, me tetahi pepa ahua kaupapa motuhake i whakauruhia e matou ki o maatau distkonae. Ma te kaha, ka taea e tetahi te whakarereke i te ahua o Bootstrap 3 me te kore e pa ki nga konae matua. Ko te Bootstrap 4 e whakarato ana i tetahi huarahi mohio, engari he rereke rereke.

Inaianei, ka whakatutukihia te kaupapa e nga taurangi Sass, mapi Sass, me te CSS ritenga. Karekau he pepa ahua kaupapa whakatapua; engari, ka taea e koe te whakauru i te kaupapa whakauru ki te taapiri i nga rōnaki, atarangi, me etahi atu.

Sass

Whakamahia a maatau punaa konae Sass ki te whakamahi i nga taurangi, mapi, whakaranu, me etahi atu i te wa e whakahiato ana i a Sass ma te whakamahi i to ake paipa rawa.

Hanganga kōnae

Ka taea, karohia te whakarereke i nga konae matua a Bootstrap. Mo Sass, ko te tikanga ko te hanga i taau ake pepa ahua e kawemai ana i a Bootstrap kia taea ai e koe te whakarereke me te whakaroa. Ki te whakaaro koe kei te whakamahi koe i te kaiwhakahaere kete penei i te npm, ka whiwhi koe i tetahi hanganga konae penei:

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

Mena kua tikiakehia e koe o maatau konae puna me te kore e whakamahi i te kaiwhakahaere kete, ka hiahia koe ki te tatū-a-ringa i tetahi mea e rite ana ki tera hanganga, kia wehea nga konae puna a Bootstrap mai i a koe ake.

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

Kei te kawemai

I roto i to custom.scss, ka kawemai koe i nga konae Sass puna a Bootstrap. E rua nga whiringa: whakauruhia nga Bootstrap katoa, kowhiria ranei nga waahanga e hiahia ana koe. Ka akiaki matou i nga mea o muri, ahakoa kia mohio kei reira etahi whakaritenga me nga whakawhirinakitanga puta noa i o maatau waahanga. Me whakauru ano e koe etahi JavaScript mo a maatau mono.

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

I runga i taua tatūnga, ka taea e koe te timata ki te whakarereke i tetahi o nga taurangi Sass me nga mapi i roto i to custom.scss. Ka taea hoki te tiimata ki te taapiri i nga waahanga o Bootstrap i raro i te // Optionalwaahanga ka hiahiatia. Ka whakaaro matou kia whakamahia te kohinga kawemai katoa mai i ta maatau bootstrap.scsskonae hei timatanga.

Taunoa taurangi

Kei roto i ia taurangi Sass i Bootstrap te !defaulthaki ka taea e koe te whakakore i te uara taunoa o te taurangi i roto i to ake Sass me te kore e whakarereke i te waehere puna a Bootstrap. Tārua me te whakapiri i nga taurangi ka hiahiatia, whakarereke i o raatau uara, ka tango i te !defaulthaki. Mēnā kua tautapa kētia tētahi taurangi, karekau e tautapahia e ngā uara taunoa kei Bootstrap.

Ka kitea e koe te rarangi katoa o nga taurangi a Bootstrap i scss/_variables.scss. Kua tautuhia etahi taurangi ki te null, karekau enei taurangi e whakaputa i te taonga mena ka whakakorehia i to whirihoranga.

Me tae mai nga huringa taurangi i muri i te kawemai i o maatau mahi, taurangi, me nga ranunga, engari i mua i era atu o nga kawemai.

Anei tetahi tauira ka huri i te background-colorme colorte mo te <body>wa e kawemai ana me te whakahiato Bootstrap ma te 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

Whakahokia ano e tika ana mo tetahi taurangi i Bootstrap, tae atu ki nga whiringa o te ao kei raro nei.

Mahere me nga koropiko

Kei roto i te Bootstrap 4 etahi mapi Sass, nga takirua uara matua e ngawari ake ai te whakaputa whanau o te CSS e pa ana. Ka whakamahi matou i nga mapi Sass mo o matou tae, nga waahi wehenga matiti, me etahi atu. He rite tonu ki nga taurangi Sass, ko nga mapi Sass katoa kei roto te !defaulthaki ka taea te whakakore me te whakaroa.

Ko etahi o a maatau mapi Sass kua hanumi ki nga mapi kau ma te taunoa. Ka mahia tenei kia ngawari te horahanga o tetahi mapi Sass, engari he utu mo te tango i nga taonga mai i te mapi he uaua ake.

Whakakē mapi

Hei whakarereke i tetahi tae o to maatau $theme-colorsmapi, taapirihia nga mea e whai ake nei ki to konae Sass ritenga:

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

Tāpiri ki te mapi

Hei tāpiri tae hōu ki $theme-colors, tāpirihia te kī hōu me te uara:

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

Tango mai i te mapi

Hei tango i nga tae mai i $theme-colors, i tetahi atu mapi ranei, whakamahia map-remove. Kia mohio koe me whakauru e koe ki waenga i a maatau whakaritenga me nga whiringa:

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

Kī e hiahiatia ana

Ka mau a Bootstrap i etahi taviri motuhake i roto i nga mapi Sass i a maatau e whakamahi ana me te whakawhānui ake i enei. I a koe e whakarite ana i nga mapi kua whakauruhia, ka tupono pea koe ki nga hapa kei te whakamahia tetahi mapi mapi o Sass.

Hei tauira, ka whakamahia e matou te primary, success, me dangernga taviri mai i $theme-colorsnga hononga, patene, me nga ahua ahua. Ko te whakakapi i nga uara o enei taviri kia kore he take, engari ma te tango i aua taviri ka raru pea te kohinga Sass. I enei wa, me whakarereke e koe te waehere Sass e whakamahi ana i aua uara.

Nga Mahi

He maha nga mahi a Bootstrap e whakamahi ana i nga mahi Sass, engari he waahanga iti noa e pa ana ki te kaupapa whanui. Kua whakauruhia e matou nga mahi e toru mo te tiki uara mai i nga mapi tae:

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

Ma enei ka taea e koe te kowhiri i tetahi tae mai i te mapi Sass penei me pehea koe e whakamahi ai i te taurangi tae mai i te v3.

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

He mahi ano ta matou mo te tiki i tetahi taumata tae mai i te $theme-colorsmapi. Ko nga uara taumata kino ka whakamarama i te tae, ko nga taumata teitei ake ka pouri.

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

I roto i te mahi, ka karanga koe i te mahi ka paahi i roto i nga tawhā e rua: te ingoa o te tae mai i $theme-colors(hei tauira, tuatahi, morearea ranei) me te taumata tau.

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

Ka taea te taapiri i etahi atu mahi a muri ake nei, i a koe ake Sass ritenga ranei hei hanga i nga mahi taumata mo etahi atu mapi Sass, he mapi whanui ranei ki te hiahia koe kia nui ake te korero.

He rereke te tae

Ko tetahi atu mahi ka whakauruhia e matou ki Bootstrap ko te mahi rereke tae, color-yiq. Ka whakamahia e ia te mokowā tae YIQ ki te whakahoki aunoa i te marama ( #fff) te pouri ranei ( #111) te rereke o te tae i runga i te tae turanga kua tohua. He tino whaihua tenei mahi mo nga whakaranu, nga koropiko ranei kei te whakaputa koe i nga karaehe maha.

Hei tauira, ki te whakaputa i nga tohu tae mai i to maatau $theme-colorsmapi:

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

Ka taea hoki te whakamahi mo nga hiahia rereke kotahi:

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

Ka taea hoki e koe te tautuhi i tetahi tae turanga me o maatau mahinga mahere tae:

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

Mawhiti SVG

Ka whakamahia e matou te escape-svgmahi ki te mawhiti i te <, >me #nga tohu mo nga whakaahua papamuri SVG. Me mawhiti enei kiripuaki ki te whakaputa tika i nga whakaahua papamuri ki IE. I te wa e whakamahi ana i te escape-svgmahi, me whakahuahia nga URI raraunga.

Tāpiri me te tango i nga mahi

Ka whakamahia e matou te addme nga subtractmahi ki te takai i te calcmahi CSS. 0Ko te kaupapa tuatahi o enei mahi ko te karo i nga hapa ka tukuna he uara "koe kore" ki roto ki te calcwhakapuaki. Ko nga korero penei calc(10px - 0)ka whakahoki he hapa ki nga kaitirotiro katoa, ahakoa he tika te pangarau.

Tauira kei te whai mana te taima:

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

Tauira kei te muhu te taima:

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

Kōwhiringa Sass

Whakaritehia a Bootstrap 4 me a maatau konae rerekee ritenga me te ngawari ki te takahuri i nga manakohanga CSS o te ao me nga $enable-*taurangi Sass hou. Whakakorehia te uara o te taurangi ka whakahiato ano npm run testina hiahiatia.

Ka taea e koe te kimi me te whakarite i enei taurangi mo nga whiringa matua o te ao i roto i te scss/_variables.scsskonae a Bootstrap.

Tae

He maha nga momo waahanga me nga taputapu a Bootstrap i hangaia ma te raupapa o nga tae kua tautuhia ki te mapi Sass. Ka taea te kopikopiko tenei mapi ki Sass kia tere ai te whakaputa i nga raupapa ture.

Katoa nga tae

Ko nga tae katoa e waatea ana i Bootstrap 4, e waatea ana hei taurangi Sass me te mahere Sass kei roto i scss/_variables.scsste konae. Ka whakawhänuihia tenei i roto i nga tukunga iti ka whai ake ki te taapiri i etahi atu atarangi, penei i te papatae kirikiri kua whakauruhia e matou.

Anei me pehea e taea ai e koe te whakamahi i enei i roto i to Sass:

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

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

Kei te waatea hoki nga karaehe whaipainga taecolor mo te whakatakoto me te background-color.

Tae kaupapa

Ka whakamahia e matou he waahanga o nga tae katoa hei hanga i tetahi papatae tae iti ake mo te whakaputa kaupapa tae, e waatea ana ano hei taurangi Sass me te mapi Sass i te scss/_variables.scsskonae a Bootstrap.

Kerei

He huinga maha o nga taurangi hina me te mapi Sass scss/_variables.scssmo nga atarangi hina o to kaupapa. Kia maumahara ko enei "he hina tino pai", e anga ana ki te oro kikorangi kikorangi, kaua ki nga hina kore.

I roto scss/_variables.scss, ka kitea e koe nga taurangi tae o Bootstrap me te mapi Sass. Anei tetahi tauira o te $colorsmapi 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;

Tāpiri, tango, whakakē ranei i nga uara i roto i te mapi hei whakahōu me pehea te whakamahi i roto i te maha atu o nga waahanga. Engari i tenei wa, kaore nga waahanga katoa e whakamahi ana i tenei mahere Sass. Ko nga whakahoutanga a meake nei ka ngana ki te whakapai ake i tenei. Kia tae ra ano, whakamaherehia te whakamahi i nga ${color}taurangi me tenei mahere Sass.

Waehanga

Ko te maha o nga waahanga me nga taputapu a Bootstrap he mea hanga ki @eachnga koropiko ka huri ki runga i te mapi Sass. He tino awhina tenei mo te whakaputa rereke o tetahi waahanga ma o maatau $theme-colorsme te hanga rereke urupare mo ia waahi pakaru. I a koe e whakarite ana i enei mapi Sass me te whakahiato ano, ka kite koe i o huringa ka kitea i roto i enei koropiko.

Whakarerekē

He maha nga waahanga o Bootstrap i hangaia me te huarahi akomanga-whakarereke. Ko te tikanga ko te nuinga o te ahua kei roto i te karaehe turanga (hei tauira, .btn) engari ko nga rereketanga o te momo ka herea ki nga karaehe whakarereke (hei tauira, .btn-danger). Ko enei karaehe whakarereke i hangaia mai i te $theme-colorsmapi hei whakarite i te nama me te ingoa o a maatau akomanga whakarereke.

Anei nga tauira e rua mo te hurihanga i runga i te $theme-colorsmapi ki te whakaputa whakarereke ki te .alertwaahanga me o maatau .bg-*taputapu papamuri katoa.

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

Whakautu

Ko enei koropiko Sass ehara i te mea iti ki nga mapi tae. Ka taea hoki e koe te whakaputa i nga rereketanga urupare o o waahanga, taputapu ranei. Hei tauira, ko o maatau taputapu whakatika kupu whakautu ka whakakotahihia e matou he @eachkopae mo te $grid-breakpointsmapi Sass me tetahi patai pāpāho kei roto.

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

Mena ka hiahia koe ki te whakarereke i to $grid-breakpoints, ka pa nga huringa ki nga koropiko katoa e huri haere ana i runga i taua mapi.

Taurangi CSS

Kei roto i te Bootstrap 4 nga ahuatanga ritenga CSS e rua tekau ma rua (taurangi) i roto i tana CSS whakahiato. Ka whai waahi ngawari enei ki nga uara e whakamahia nuitia ana penei i o maatau kaupapa tae, waahi pakaru, me nga taapu momotuhi tuatahi i te wa e mahi ana i roto i te Kaitirotiro o to kaitirotiro, he pouaka kirikiri, he tauira tauira whanui ranei.

Taurangi wātea

Anei nga taurangi ka whakauruhia e matou (kia mahara ko te :rootmea e hiahiatia ana). Kei roto i ta maatau _root.scsskonae.

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

Tauira

Ko nga taurangi CSS he rite tonu te ngawari ki nga taurangi a Sass, engari kaore he hiahia mo te whakahiato i mua i te tuku ki te tirotiro. Hei tauira, i konei kei te tautuhi ano i te momotuhi o te wharangi me nga momo hono ki nga taurangi CSS.

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

Taurangi wehenga

Ahakoa i whakauruhia e matou nga waahi pakaru i roto i a maatau taurangi CSS (hei tauira, --breakpoint-md), kaore enei i te tautokohia i roto i nga patai pāpāho , engari ka taea tonu te whakamahi i roto i nga rarangi ture i roto i nga uiui pāpāho. Ka noho tonu enei taurangi wehenga i roto i te CSS kua whakahiato mo te hototahi whakamuri i te mea ka taea e JavaScript te whakamahi. Ako atu i roto i te spec .

Anei tetahi tauira o nga mea kaore i te tautokona:

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

Anei tetahi tauira o nga mea e tautokohia ana:

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