Source

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 hei whakamahi i nga taurangi, mapi, whakauru, me etahi atu.

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

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

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

Ko nga taurangi Sass katoa kei Bootstrap 4 kei roto ko 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.

Ka taea te huri i nga taurangi i roto i te konae Sass i mua, i muri ranei i nga taurangi taunoa. Heoi, i te wa e huri ana i nga konae Sass, me tae mai o whakakorenga i mua i to kawemai i nga konae Sass a Bootstrap.

Anei tetahi tauira ka huri i te background-colorme colorte mo te <body>wa e kawemai ana me te whakahiato Bootstrap ma te npm:

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

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

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

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.

Taurangi Uara Whakaahuatanga
$spacer 1rem(taunoa), he uara ranei > 0 Ka tautuhi i te uara mokowhiti taunoa hei whakaputa i a maatau taputapu mokowā .
$enable-rounded true(taunoa) raneifalse Whakahohe i nga border-radiusmomo kua tautuhia i runga i nga momo waahanga.
$enable-shadows trueranei false(taunoa) Whakahohe i nga box-shadowmomo kua tautuhia i runga i nga momo waahanga.
$enable-gradients trueranei false(taunoa) Whakahohe rōnaki kua tautuhia kē mā background-imagengā kāhua i runga i ngā momo wae.
$enable-transitions true(taunoa) raneifalse Whakahohe transitions kua tautuhia i runga i nga momo waahanga.
$enable-hover-media-query trueranei false(taunoa) Kua whakakorehia
$enable-grid-classes true(taunoa) raneifalse Whakahohe ai i te whakatipuranga o nga akomanga CSS mo te punaha matiti (hei tauira, .container, .row, .col-md-1, etc.).
$enable-caret true(taunoa) raneifalse Whakahohea te tiaki huānga pseudo i runga .dropdown-toggle.
$enable-print-styles true(taunoa) raneifalse Whakahohe i nga momo mo te arotau i te taa.

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.

Kahurangi
Indigo
Waiporoporo
Māwhero
Whero
Karaka
Kōwhai
Kakariki
Tii
Cyan

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.

Hei nga ra kei mua, ka whai matou ki te whakarato mapi Sass me nga taurangi mo nga atarangi o ia tae pera i ta matou i mahi ki nga tae kirikiri i raro nei.

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 hei taurangi Sass me te mapi Sass i te scss/_variables.scsskonae a Bootstraps.

Paraimere
Tuarua
Angitu
mōrearea
Whakatupato
Nga korero
Maama
pouri

Kerei

He huinga whanui o nga taurangi hina me te mapi Sass scss/_variables.scssmo nga atarangi hina o to kaupapa.

100
200
300
400
500
600
700
800
900

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 whakaahua kei roto i te karaehe turanga (hei tauira, .btn) engari ko nga momo rerekee 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 @eachkowiri 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}