Source

Temo Bootstrap

Agordu Bootstrap 4 per niaj novaj enkonstruitaj Sass-variabloj por tutmondaj stilaj preferoj por facila temo kaj komponaj ŝanĝoj.

Enkonduko

En Bootstrap 3, temado estis plejparte pelita de variaj anstataŭigoj en LESS, kutima CSS, kaj aparta temo stilfolio, kiun ni inkludis en niaj distdosieroj. Kun iom da peno, oni povus tute restrukturi la aspekton de Bootstrap 3 sen tuŝi la kernajn dosierojn. Bootstrap 4 provizas konatan, sed iomete malsaman aliron.

Nun, temado estas plenumita per Sass-variabloj, Sass-mapoj kaj kutima CSS. Ne plu estas dediĉita etsa stilfolio; anstataŭe, vi povas ebligi la enkonstruitan temon por aldoni gradientojn, ombrojn kaj pli.

Sass

Uzu niajn fontajn Sass-dosierojn por utiligi variablojn, mapojn, miksaĵojn kaj pli.

Dosiera strukturo

Kiam ajn eblas, evitu modifi la kernajn dosierojn de Bootstrap. Por Sass, tio signifas krei vian propran stilfolion, kiu importas Bootstrap, por ke vi povu modifi kaj etendi ĝin. Supozante, ke vi uzas pakaĵadministrilon kiel npm, vi havos dosierstrukturon kiu aspektas jene:

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

Se vi elŝutis niajn fontdosierojn kaj ne uzas pakaĵadministrilon, vi volos mane agordi ion similan al tiu strukturo, konservante la fontdosierojn de Bootstrap apartaj de la viaj propraj.

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

Importado

En via custom.scss, vi importos la fontajn Sass-dosierojn de Bootstrap. Vi havas du eblojn: inkluzivi ĉion el Bootstrap, aŭ elektu la partojn, kiujn vi bezonas. Ni kuraĝigas ĉi-lastan, kvankam konsciu, ke ekzistas iuj postuloj kaj dependecoj tra niaj komponantoj. Vi ankaŭ devos inkluzivi iom da JavaScript por niaj kromaĵoj.

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

Kun tiu aranĝo, vi povas komenci modifi iun ajn el la Sass-variabloj kaj mapoj en via custom.scss. Vi ankaŭ povas komenci aldoni partojn de Bootstrap sub la // Optionalsekcio laŭbezone. Ni sugestas uzi la plenan importan stakon de nia bootstrap.scssdosiero kiel via deirpunkto.

Variaj defaŭltoj

Ĉiu Sass-variablo en Bootstrap 4 inkluzivas la !defaultflagon ebligante vin superregi la defaŭltan valoron de la variablo en via propra Sass sen modifi la fontkodon de Bootstrap. Kopiu kaj algluu variablojn laŭbezone, modifi iliajn valorojn kaj forigu la !defaultflagon. Se variablo jam estis asignita, tiam ĝi ne estos reasignita per la defaŭltaj valoroj en Bootstrap.

Variaj anstataŭaĵoj ene de la sama Sass-dosiero povas veni antaŭ aŭ post la defaŭltaj variabloj. Tamen, kiam vi anstataŭas trans Sass-dosierojn, viaj anstataŭoj devas okazi antaŭ ol vi importas la Sass-dosierojn de Bootstrap.

Jen ekzemplo, kiu ŝanĝas la background-colorkaj colorpor la <body>dum importado kaj kompilado de Bootstrap per npm:

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

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

Ripetu laŭbezone por iu ajn variablo en Bootstrap, inkluzive de la tutmondaj elektoj sube.

Mapoj kaj bukloj

Bootstrap 4 inkluzivas kelkajn Sass-mapojn, ŝlosilajn valorparojn, kiuj faciligas generi familiojn de rilataj CSS. Ni uzas Sass-mapojn por niaj koloroj, kradaj rompopunktoj kaj pli. Same kiel Sass-variabloj, ĉiuj Sass-mapoj inkluzivas la !defaultflagon kaj povas esti anstataŭitaj kaj etenditaj.

Kelkaj el niaj Sass-mapoj estas kunfanditaj en malplenajn defaŭlte. Ĉi tio estas farita por permesi facilan vastiĝon de antaŭfiksita Sass-mapo, sed kostas fari forigi erojn de mapo iomete pli malfacila.

Modifi mapon

Por modifi ekzistantan koloron en nia $theme-colorsmapo, aldonu la jenon al via kutima Sass-dosiero:

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

Aldoni al mapo

Por aldoni novan koloron al $theme-colors, aldonu la novajn ŝlosilon kaj valoron:

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

Forigi de mapo

Por forigi kolorojn de $theme-colors, aŭ ajna alia mapo, uzu map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Bezonataj ŝlosiloj

Bootstrap supozas la ĉeeston de iuj specifaj ŝlosiloj ene de Sass-mapoj dum ni mem uzis kaj etendas ĉi tiujn. Dum vi agordas la inkluzivitajn mapojn, vi povas renkonti erarojn kie specifa Sass-mapo ŝlosilo estas uzata.

Ekzemple, ni uzas la klavojn primary, success, kaj de por ligiloj, butonoj kaj formoŝtatoj. Anstataŭigi la valorojn de ĉi tiuj ŝlosiloj ne devus prezenti problemojn, sed forigi ilin povas kaŭzi problemojn pri kompilo de Sass. En ĉi tiuj kazoj, vi devos modifi la Sass-kodon, kiu uzas tiujn valorojn.danger$theme-colors

Funkcioj

Bootstrap utiligas plurajn Sass-funkciojn, sed nur subaro aplikeblas al ĝenerala temo. Ni inkludis tri funkciojn por akiri valorojn de la kolormapoj:

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

Ĉi tiuj permesas elekti unu koloron el Sass-mapo tre kiel vi uzus kolorvariablon de v3.

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

Ni ankaŭ havas alian funkcion por ricevi apartan nivelon de koloro de la $theme-colorsmapo. Negativaj nivelaj valoroj malpezigos la koloron, dum pli altaj niveloj mallumiĝos.

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

En praktiko, vi vokus la funkcion kaj enigus du parametrojn: la nomo de la koloro de $theme-colors(ekz., primara aŭ danĝero) kaj nombra nivelo.

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

Pliaj funkcioj povus esti aldonitaj estonte aŭ vian propran Sass por krei nivelajn funkciojn por pliaj Sass-mapoj, aŭ eĉ ĝeneralan, se vi volis esti pli vorta.

Kolora kontrasto

Unu plia funkcio, kiun ni inkluzivas en Bootstrap, estas la kolorkontrasta funkcio, color-yiq. Ĝi utiligas la YIQ-kolorspacon por aŭtomate resendi helan ( #fff) aŭ malhelan ( #111) kontrastan koloron bazitan sur la specifita baza koloro. Ĉi tiu funkcio estas precipe utila por miksaĵoj aŭ bukloj, kie vi generas plurajn klasojn.

Ekzemple, por generi kolorajn specimenojn de nia $theme-colorsmapo:

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

Ĝi ankaŭ povas esti uzata por unufojaj kontrastaj bezonoj:

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

Vi ankaŭ povas specifi bazan koloron per niaj kolormapaj funkcioj:

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

Sass-opcioj

Agordu Bootstrap 4 per nia enkonstruita kutima variablo-dosiero kaj facile ŝanĝi tutmondajn CSS-preferojn per novaj $enable-*Sass-variabloj. Anstataŭigi la valoron de variablo kaj rekompilu npm run testlaŭbezone.

Vi povas trovi kaj personecigi ĉi tiujn variablojn por ŝlosilaj tutmondaj opcioj en nia _variables.scssdosiero.

Variablo	Valoroj	Priskribo
`$spacer`	`1rem`(defaŭlte), aŭ ajna valoro > 0	Specifas la defaŭltan interspacan valoron por programe generi niajn interspacigajn ilojn .
`$enable-rounded`	`true`(defaŭlte) aŭ`false`	Ebligas antaŭdifinitajn `border-radius`stilojn sur diversaj komponantoj.
`$enable-shadows`	`true`aŭ `false`(defaŭlte)	Ebligas antaŭdifinitajn `box-shadow`stilojn sur diversaj komponantoj.
`$enable-gradients`	`true`aŭ `false`(defaŭlte)	Ebligas antaŭdifinitajn gradientojn per `background-image`stiloj sur diversaj komponantoj.
`$enable-transitions`	`true`(defaŭlte) aŭ`false`	Ebligas antaŭdifinitajn `transition`s sur diversaj komponantoj.
`$enable-hover-media-query`	`true`aŭ `false`(defaŭlte)	Malrekomendita
`$enable-grid-classes`	`true`(defaŭlte) aŭ`false`	Ebligas la generacion de CSS-klasoj por la kradsistemo (ekz., `.container`, `.row`, `.col-md-1`, ktp.).
`$enable-caret`	`true`(defaŭlte) aŭ`false`	Ebligas pseŭdoelementan signon sur `.dropdown-toggle`.
`$enable-print-styles`	`true`(defaŭlte) aŭ`false`	Ebligas stilojn por optimumigi presadon.

Koloro

Multaj el la diversaj komponentoj kaj utilecoj de Bootstrap estas konstruitaj per serio de koloroj difinitaj en Sass-mapo. Ĉi tiu mapo povas esti cirkulita en Sass por rapide generi serion de reguloj.

Ĉiuj koloroj

Ĉiuj koloroj haveblaj en Bootstrap 4, estas haveblaj kiel Sass-variabloj kaj Sass-mapo en nia scss/_variables.scssdosiero. Ĉi tio estos pligrandigita en postaj etaj eldonoj por aldoni pliajn nuancojn, tre kiel la grizskala paletro , kiun ni jam inkluzivas.

Blua

Indigo

Purpuro

Rozkolora

Ruĝa

Oranĝo

Flava

Verda

Kreko

Cejana

Jen kiel vi povas uzi ĉi tiujn en via Sass:

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

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

Koloraj utilecaj klasoj ankaŭ haveblas por agordi colorkaj background-color.

En la estonteco, ni celos provizi Sass-mapojn kaj variablojn por nuancoj de ĉiu koloro kiel ni faris kun la grizskalaj koloroj sube.

Temaj koloroj

Ni uzas subaron de ĉiuj koloroj por krei pli malgrandan kolorpaletron por generi kolorskemojn, ankaŭ haveblajn kiel Sass-variablojn kaj Sass-mapon en nia scss/_variables.scssdosiero.

Primaraj

Sekundara

Sukceso

Danĝero

Averto

Info

Lumo

Mallumo

Grizoj

Vasta aro de grizaj variabloj kaj Sass-mapo scss/_variables.scsspor konsekvencaj grizaj nuancoj tra via projekto.

100

200

300

400

500

600

700

800

900

Ene _variables.scssde , vi trovos niajn kolorajn variablojn kaj Sass-mapon. Jen ekzemplo de la $colorsSass-mapo:

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

Aldonu, forigu aŭ modifi valorojn en la mapo por ĝisdatigi kiel ili estas uzataj en multaj aliaj komponantoj. Bedaŭrinde nuntempe, ne ĉiuj komponantoj uzas ĉi tiun Sass-mapon. Estontaj ĝisdatigoj klopodos plibonigi ĉi tion. Ĝis tiam, planu uzi la ${color}variablojn kaj ĉi tiun Sass-mapon.

Komponentoj

Multaj el la komponantoj kaj utilecoj de Bootstrap estas konstruitaj per @eachbukloj, kiuj ripetas sur Sass-mapo. Ĉi tio estas precipe utila por generi variantojn de komponanto per nia $theme-colorskaj krei respondemajn variantojn por ĉiu rompopunkto. Dum vi agordas ĉi tiujn Sass-mapojn kaj rekompilas, vi aŭtomate vidos viajn ŝanĝojn reflektitajn en ĉi tiuj bukloj.

Modifiloj

Multaj el la komponentoj de Bootstrap estas konstruitaj kun baz-modifila klasaliro. Ĉi tio signifas, ke la plejparto de la stilado estas enhavita al bazklaso (ekz, .btn) dum stilvarioj estas limigitaj al modifklasoj (ekz, .btn-danger). Ĉi tiuj modifklasoj estas konstruitaj el la $theme-colorsmapo por agordi la nombron kaj nomon de niaj modifilaj klasoj.

Jen du ekzemploj de kiel ni cirklas super la $theme-colorsmapo por generi modifilojn al la .alertkomponanto kaj ĉiuj niaj .bg-*fonaj utilecoj.

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

Respondema

Ĉi tiuj Sass-bukloj ankaŭ ne estas limigitaj al kolormapoj. Vi ankaŭ povas generi respondemajn variaĵojn de viaj komponantoj aŭ utilecoj. Prenu ekzemple niajn respondemajn tekstajn vicigilojn, kie ni miksas @eachbuklon por la $grid-breakpointsSass-mapo kun amaskomunikila demando inkluzivas.

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

Se vi bezonas modifi vian $grid-breakpoints, viaj ŝanĝoj aplikiĝos al ĉiuj bukloj ripetantaj sur tiu mapo.

CSS-variabloj

Bootstrap 4 inkluzivas ĉirkaŭ du dekduojn de CSS kutimaj propraĵoj (variabloj) en ĝia kompilita CSS. Ĉi tiuj havigas facilan aliron al kutime uzataj valoroj kiel niaj etoskoloroj, rompopunktoj kaj primaraj tiparaj stakoj kiam vi laboras en la Inspektisto de via retumilo, koda sablokesto aŭ ĝenerala prototipado.

Disponeblaj variabloj

Jen la variabloj, kiujn ni inkluzivas (notu, ke la :rootestas bezonata). Ili troviĝas en nia _root.scssdosiero.

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

Ekzemploj

CSS-variabloj ofertas similan flekseblecon al la variabloj de Sass, sed sen la bezono de kompilo antaŭ esti servataj al la retumilo. Ekzemple, ĉi tie ni restarigas la tiparon kaj ligilstilojn de nia paĝo kun CSS-variabloj.

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

Vi ankaŭ povas uzi niajn interrompajn variablojn en viaj amaskomunikilaj demandoj:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}