in English

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 dum kompilado de Sass per via propra valoraĵo.

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

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

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 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.

Vi trovos la kompletan liston de la variabloj de Bootstrap en scss/_variables.scss. Iuj variabloj estas agordita al null, ĉi tiuj variabloj ne eligas la posedaĵon krom se ili estas anstataŭitaj en via agordo.

Variaj anstataŭoj devas veni post kiam niaj funkcioj, variabloj kaj miksaĵoj estas importitaj, sed antaŭ la resto de la importoj.

Jen ekzemplo, kiu ŝanĝas la background-colorkaj colorpor la <body>dum importado kaj kompilado de Bootstrap per 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

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

Komencu kun Bootstrap per npm kun nia komenca projekto! Iru al la twbs/bootstrap-npm-starter- ŝablona deponejo por vidi kiel konstrui kaj personecigi Bootstrap en via propra npm-projekto. Inkluzivas Sass-kompililon, Autoprefixer, Stylelint, PurgeCSS kaj Bootstrap-Ikonojn.

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. Atentu, ke vi devas enmeti ĝin inter niaj postuloj kaj opcioj:

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

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

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

Eskapu SVG

Ni uzas la escape-svgfunkcion por eskapi la <, >kaj #signojn por SVG-fonbildoj. Ĉi tiuj signoj devas esti eskapataj por taŭge bildigi la fonbildojn en IE. Dum uzado de la escape-svgfunkcio, datumoj URI-oj devas esti cititaj.

Aldonu kaj Subtrahi funkciojn

Ni uzas la funkciojn addkaj subtractpor envolvi la CSS- calcfunkcion. La ĉefa celo de ĉi tiuj funkcioj estas eviti erarojn kiam "senunuo" 0valoro estas transdonita en calcesprimon. Esprimoj kiel calc(10px - 0)resendos eraron en ĉiuj retumiloj, malgraŭ esti matematike ĝustaj.

Ekzemplo kie la kalkulo validas:

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

Ekzemplo kie la kalkulo estas nevalida:

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

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.

scss/_variables.scssVi povas trovi kaj personecigi ĉi tiujn variablojn por ŝlosilaj tutmondaj opcioj en la dosiero de Bootstrap .

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-radiusstilojn sur diversaj komponantoj.
$enable-shadows trueaŭ false(defaŭlte) Ebligas antaŭdifinitajn ornamajn box-shadowstilojn sur diversaj komponantoj. Ne influas box-shadows uzataj por fokusaj statoj.
$enable-gradients trueaŭ false(defaŭlte) Ebligas antaŭdifinitajn gradientojn per background-imagestiloj sur diversaj komponantoj.
$enable-transitions true(defaŭlte) aŭfalse Ebligas antaŭdifinitajn transitions sur diversaj komponantoj.
$enable-prefers-reduced-motion-media-query true(defaŭlte) aŭfalse Ebligas la prefers-reduced-motionamaskomunikila demandon , kiu subpremas certajn kuraĝigojn/transirojn bazitajn sur la preferoj de la retumilo/operaciumo de la uzantoj.
$enable-hover-media-query trueaŭ 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-pointer-cursor-for-buttons true(defaŭlte) aŭfalse Aldonu "manan" kursoron al ne-malŝaltitaj butonelementoj.
$enable-print-styles true(defaŭlte) aŭfalse Ebligas stilojn por optimumigi presadon.
$enable-responsive-font-sizes trueaŭ false(defaŭlte) Ebligas respondajn tipargrandojn .
$enable-validation-icons true(defaŭlte) aŭfalse Ebligas background-imageikonojn en tekstaj enigaĵoj kaj iujn kutimajn formojn por validigaj statoj.
$enable-deprecation-messages true(defaŭlte) aŭfalse Agordu al falsepor kaŝi avertojn kiam vi uzas iun el la malrekomenditaj miksaĵoj kaj funkcioj kiuj estas planitaj por esti forigitaj en v5.

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 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 #007bff
$indigo #6610f2
$purpuro #6f42c1
$rozkolora #e83e8c
$ruĝa #dc3545
$oranĝo #fd7e14
$flava #ffc107
$verda #28a745
$teal #20c997
$ciano #17a2b8

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 la scss/_variables.scssdosiero de Bootstrap.

$primaraj #007bff
$sekundara #6c757d
$sukceso #28a745
$danĝero #dc3545
$averto #ffc107
$info #17a2b8
$lumo #f8f9fa
$mallumo #343a40

Grizoj

Vasta aro de grizaj variabloj kaj Sass-mapo scss/_variables.scsspor konsekvencaj grizaj nuancoj tra via projekto. Notu, ke ĉi tiuj estas "malvarmaj grizoj", kiuj tendencas al subtila blua tono, prefere ol neŭtralaj grizoj.

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

Ene scss/_variables.scssde , vi trovos la kolorajn variablojn de Bootstrap 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 sia 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, "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;
}

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

Romppunkto variabloj

Kvankam ni origine inkluzivis rompopunktojn en niaj CSS-variabloj (ekz. --breakpoint-md), ĉi tiuj ne estas subtenataj en amaskomunikilaj demandoj , sed ili ankoraŭ povas esti uzataj ene de reguloj en amaskomunikilaj demandoj. Ĉi tiuj interrompaj variabloj restas en la kompilita CSS por retrokongruo, ĉar ili povas esti uzataj de JavaScript. Lernu pli en la spec .

Jen ekzemplo de tio, kio ne estas subtenata:

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

Kaj jen ekzemplo de tio, kio estas subtenata:

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