in English

Theming Bootstrap

Kohandage Bootstrap 4 meie uute sisseehitatud Sassi muutujatega globaalsete stiilieelistuste jaoks, et hõlpsasti teemasid ja komponente muuta.

Sissejuhatus

Bootstrap 3-s ajendasid temaatilisust suuresti muutujate alistamised rakenduses LESS, kohandatud CSS ja eraldi teemalaaditabel, mille lisasime oma distfailidesse. Mõne pingutusega saaks Bootstrap 3 välimuse täielikult ümber kujundada ilma põhifaile puudutamata. Bootstrap 4 pakub tuttavat, kuid veidi teistsugust lähenemist.

Nüüd on teemade kujundamine saavutatud Sassi muutujate, Sassi kaartide ja kohandatud CSS-i abil. Pole enam pühendatud teema stiilitabelit; selle asemel saate sisseehitatud teemal lubada gradiente, varje ja muud.

Sass

Kasutage meie Sassi lähtefaile, et kasutada ära muutujaid, kaarte, mixine ja palju muud, kui kompileerite Sassi oma varade konveieri abil.

Faili struktuur

Võimaluse korral vältige Bootstrapi põhifailide muutmist. Sassi jaoks tähendab see oma stiilitabeli loomist, mis impordib Bootstrapi, et saaksite seda muuta ja laiendada. Eeldades, et kasutate paketihaldurit nagu npm, on teil failistruktuur, mis näeb välja järgmine:

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

Kui olete alla laadinud meie lähtefailid ja ei kasuta paketihaldurit, soovite käsitsi seadistada midagi sarnast selle struktuuriga, hoides Bootstrapi lähtefailid enda omadest eraldi.

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

Importimine

Saate custom.scssimportida Bootstrapi Sassi lähtefailid. Teil on kaks võimalust: kaasata kogu Bootstrap või valida vajalikud osad. Soovitame viimast, kuigi pidage meeles, et meie komponentidel on teatud nõuded ja sõltuvused. Samuti peate meie pistikprogrammide jaoks lisama JavaScripti.

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

Kui see seadistus on paigas, saate hakata muutma mis tahes Sassi muutujaid ja kaarte oma custom.scss. // OptionalVajadusel saate jaotise alla hakata lisama ka Bootstrapi osi . Soovitame bootstrap.scsslähtepunktina kasutada meie faili täielikku impordivirna.

Muutuvad vaikesätted

Iga Bootstrapi Sassi muutuja sisaldab !defaultlippu, mis võimaldab teil alistada muutuja vaikeväärtuse oma Sassis ilma Bootstrapi lähtekoodi muutmata. Vajadusel kopeerige ja kleepige muutujad, muutke nende väärtusi ja eemaldage !defaultlipp. Kui muutuja on juba määratud, ei määrata seda Bootstrapi vaikeväärtuste alusel uuesti.

Bootstrapi muutujate täieliku loendi leiate scss/_variables.scss. Mõned muutujad on seatud väärtusele null, need muutujad ei väljasta atribuuti, välja arvatud juhul, kui need on teie konfiguratsioonis alistatud.

Muutujate alistamised peavad tulema pärast meie funktsioonide, muutujate ja segude importimist, kuid enne ülejäänud importimist.

Siin on näide, mis muudab Bootstrapi importimisel background-colorja kompileerimisel npm-i kaudu ja colorjaoks :<body>

@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

Korrake seda vastavalt vajadusele mis tahes Bootstrapi muutuja puhul, sealhulgas allolevate globaalsete valikute puhul.

Alustage Bootstrapiga npm-i kaudu meie stardiprojektiga! Minge mallide hoidlasse twbs/bootstrap-npm-starter , et näha, kuidas Bootstrapi oma npm-projektis luua ja kohandada. Sisaldab Sassi kompilaatorit, Autoprefixerit, Stylelinti, PurgeCSS-i ja Bootstrapi ikoone.

Kaardid ja silmused

Bootstrap 4 sisaldab käputäis Sassi kaarte, võtmeväärtuste paare, mis hõlbustavad seotud CSS-i perekondade loomist. Kasutame oma värvide, ruudustiku murdepunktide ja muu jaoks Sassi kaarte. Nii nagu Sassi muutujad, sisaldavad kõik Sassi kaardid !defaultlippu ning neid saab tühistada ja laiendada.

Mõned meie Sassi kaardid liidetakse vaikimisi tühjaks. Seda tehakse selleks, et võimaldada antud Sassi kaarti hõlpsasti laiendada, kuid see muudab üksuste kaardilt eemaldamise pisut keerulisemaks.

Muuda kaarti

Meie $theme-colorskaardil olemasoleva värvi muutmiseks lisage oma kohandatud Sassi failile järgmine:

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

Lisa kaardile

Uue värvi $theme-colorslisamiseks lisage uus võti ja väärtus:

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

Eemalda kaardilt

Värvide eemaldamiseks $theme-colorskaardilt või muult kaardilt kasutage map-remove. Pidage meeles, et peate selle sisestama meie nõuete ja valikute vahele:

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

Vajalikud võtmed

Bootstrap eeldab teatud võtmete olemasolu Sassi kaartides, nagu me neid ise kasutasime ja laiendasime. Kaasasolevate kaartide kohandamisel võite ilmneda tõrkeid, kui kasutatakse konkreetset Sassi kaardi võtit.

Näiteks kasutame linkide primary, nuppude successja vormi olekute jaoks klahve , ja danger. $theme-colorsNende võtmete väärtuste asendamine ei tohiks probleeme tekitada, kuid nende eemaldamine võib põhjustada Sassi kompileerimise probleeme. Sellistel juhtudel peate muutma neid väärtusi kasutavat Sassi koodi.

Funktsioonid

Bootstrap kasutab mitut Sassi funktsiooni, kuid ainult alamhulk on rakendatav üldisele teemale. Värvikaartidelt väärtuste hankimiseks oleme lisanud kolm funktsiooni:

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

Need võimaldavad teil valida Sassi kaardilt ühe värvi sarnaselt sellega, kuidas kasutaksite v3 värvimuutujat.

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

Meil on ka teine ​​funktsioon teatud värvitaseme saamiseks $theme-colorskaardilt. Negatiivse taseme väärtused muudavad värvi heledamaks, kõrgemad tasemed aga tumedamaks.

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

Praktikas kutsuksite funktsiooni välja ja sisestaksite kaks parameetrit: värvi nimetus $theme-colors(nt esmane või oht) ja numbriline tase.

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

Tulevikus saab lisada täiendavaid funktsioone või oma kohandatud Sassi, et luua täiendavate Sassi kaartide jaoks tasemefunktsioone või isegi üldiseid funktsioone, kui soovite olla üksikasjalikum.

Värvi kontrast

Täiendav funktsioon, mille lisame Bootstrapi, on värvide kontrasti funktsioon color-yiq. See kasutab YIQ värviruumi , et automaatselt tagastada heleda ( #fff) või tumeda ( #111) kontrastvärviga, mis põhineb määratud põhivärvil. See funktsioon on eriti kasulik mixinide või tsüklite puhul, kus genereerite mitu klassi.

Näiteks meie $theme-colorskaardilt värvinäidiste genereerimiseks tehke järgmist.

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

Seda saab kasutada ka ühekordseks kontrastivajaduseks:

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

Põhivärvi saate määrata ka meie värvikaardi funktsioonidega:

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

Põgenemine SVG-st

SVG-taustapiltide jaoks kasutame escape-svgfunktsiooni <, >ja märkide vältimiseks. #Taustapiltide õigeks renderdamiseks IE-s tuleb need märgid kasutada. Funktsiooni kasutamisel escape-svgtuleb andme-URI-sid tsiteerida.

Lisa- ja lahutamisfunktsioonid

Kasutame CSS-i funktsiooni mähistamiseks funktsioone addja . Nende funktsioonide peamine eesmärk on vältida vigu, kui avaldisesse edastatakse ühikuta väärtus . Väljendid nagu tagastavad veateate kõigis brauserites, hoolimata sellest, et need on matemaatiliselt õiged.subtractcalc0calccalc(10px - 0)

Näide, kus arvutus kehtib:

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

Näide, kus arvutus on vale:

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

Sassi valikud

Kohandage Bootstrap 4 meie sisseehitatud kohandatud muutujate failiga ja vahetage hõlpsalt globaalseid CSS-i eelistusi uute $enable-*Sassi muutujatega. Muutuja väärtuse tühistamine ja npm run testvajaduse korral uuesti kompileerimine.

Saate neid muutujaid Bootstrapi scss/_variables.scssfailist peamiste globaalsete valikute jaoks leida ja kohandada.

Muutuv Väärtused Kirjeldus
$spacer 1rem(vaikimisi) või mis tahes väärtus > 0 Määrab vahetüki vaikeväärtuse meie spaceri utiliitide programmiliseks genereerimiseks .
$enable-rounded true(vaikimisi) võifalse Lubab border-radiuserinevate komponentide eelmääratletud stiilid.
$enable-shadows truevõi false(vaikimisi) Lubab box-shadowerinevate komponentide eelmääratletud dekoratiivstiile. Ei mõjuta box-shadowfookusolekutes kasutatavat s.
$enable-gradients truevõi false(vaikimisi) background-imageLubab erinevate komponentide stiilide kaudu eelmääratletud gradiente .
$enable-transitions true(vaikimisi) võifalse Lubab eelmääratletud transitions erinevatel komponentidel.
$enable-prefers-reduced-motion-media-query true(vaikimisi) võifalse Lubab prefers-reduced-motionmeediumipäringu , mis blokeerib kasutaja brauseri/operatsioonisüsteemi eelistuste põhjal teatud animatsioonid/üleminekud.
$enable-hover-media-query truevõi false(vaikimisi) Aegunud
$enable-grid-classes true(vaikimisi) võifalse Võimaldab ruudustikusüsteemi jaoks CSS-klasside genereerimist (nt , .container, .row, .col-md-1jne).
$enable-caret true(vaikimisi) võifalse Lubab pseudoelemendi caret on .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(vaikimisi) võifalse Lisage "käsi" kursor mittekeelatud nupuelementidele.
$enable-print-styles true(vaikimisi) võifalse Lubab stiilid printimise optimeerimiseks.
$enable-responsive-font-sizes truevõi false(vaikimisi) Lubab reageerivad fondisuurused .
$enable-validation-icons true(vaikimisi) võifalse Lubab background-imageikoonid tekstisisendites ja mõnedes kohandatud vormides valideerimisolekute jaoks.
$enable-deprecation-messages true(vaikimisi) võifalse Seadistage olekusse, falseet peita hoiatused, kui kasutate mõnda aegunud miksini ja funktsiooni, mis on plaanis rakenduses eemaldada v5.

Värv

Paljud Bootstrapi erinevad komponendid ja utiliidid on üles ehitatud Sassi kaardil määratletud värvide seeria kaudu. Seda kaarti saab Sassis üle vaadata, et luua kiiresti reeglistiku seeria.

Kõik värvid

Kõik Bootstrap 4-s saadaolevad värvid on saadaval Sassi muutujatena ja scss/_variables.scssfailis Sassi kaardina. Seda laiendatakse järgmistes väiksemates väljaannetes, et lisada täiendavaid toone, sarnaselt juba kaasatud halltoonide palettiga .

$sinine #007bff
$indigo #6610f2
$lilla # 6f42c1
$ roosa #e83e8c
$punane #dc3545
$oranž #fd7e14
$kollane #ffc107
$roheline #28a745
$sinine #20c997
$tsüaan #17a2b8

Saate neid oma Sassis kasutada järgmiselt.

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

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

Värvi kasulikkuse klassid on saadaval ka seadistamiseks colorja background-color.

Tulevikus püüame pakkuda Sassi kaarte ja muutujaid iga värvi varjundite jaoks, nagu oleme teinud allolevate halltoonide värvidega.

Teema värvid

Väiksema värvipaleti loomiseks värviskeemide loomiseks kasutame kõigi värvide alamhulka, mis on saadaval ka Sassi muutujatena ja Sassi kaardina Bootstrapi scss/_variables.scssfailis.

$esmane #007bff
$teisejärguline #6c757d
$edu #28a745
$oht #dc3545
$hoiatus #ffc107
$info #17a2b8
$valgus #f8f9fa
$ tume #343a40

Hallid

Laialdane hallide muutujate komplekt ja Sassi kaart, mis scss/_variables.scsstagab teie projektis ühtsed halli varjundid. Pange tähele, et need on "jahedad hallid", mis kalduvad pigem õrna sinise tooni poole, mitte neutraalsete hallide poole.

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

Seest scss/_variables.scssleiate Bootstrapi värvimuutujad ja Sassi kaardi. Siin on näide $colorsSassi kaardist:

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

Lisage, eemaldage või muutke kaardil väärtusi, et värskendada nende kasutamist paljudes teistes komponentides. Kahjuks ei kasuta praegu kõik komponendid seda Sassi kaarti. Tulevased värskendused püüavad seda parandada. Kuni selle ajani ${color}plaanige muutujaid ja seda Sassi kaarti kasutada.

Komponendid

Paljud Bootstrapi komponendid ja utiliidid on üles ehitatud @eachsilmustega, mis korduvad Sassi kaardi kaudu. See on eriti kasulik meie poolt komponendi variantide genereerimiseks $theme-colorsja iga katkestuspunkti jaoks tundlike variantide loomiseks. Kui kohandate neid Sassi kaarte ja kompileerite uuesti, näete nendes tsüklites automaatselt oma muudatusi.

Modifikaatorid

Paljud Bootstrapi komponendid on ehitatud baasmodifikaatori klassi lähenemisviisiga. See tähendab, et suurem osa stiilist sisaldub põhiklassis (nt .btn), samas kui stiilivariatsioonid on piiratud modifikaatoriklassidega (nt .btn-danger). Need modifikaatoriklassid on koostatud $theme-colorskaardist, et saaksime kohandada meie modifikaatoriklasside arvu ja nimesid.

Siin on kaks näidet selle kohta, kuidas me teeme $theme-colorskaarti, et genereerida .alertkomponendi ja kõigi meie taustautiliitide modifikaatorid .bg-*.

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

Vastutulelik

Need Sassi silmused ei piirdu ka värvikaartidega. Samuti saate luua oma komponentidest või utiliitidest reageerivaid variatsioone. Võtke näiteks meie reageerivad teksti joondamise utiliidid, kus segame Sassi kaardi @eachsilmuse $grid-breakpointsmeediumipäringuga.

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

Kui teil on vaja oma kaarti muuta $grid-breakpoints, rakenduvad teie muudatused kõikidele sellel kaardil korduvatele silmustele.

CSS-i muutujad

Bootstrap 4 sisaldab oma kompileeritud CSS-is umbes kahte tosinat CSS-i kohandatud atribuuti (muutujat) . Need pakuvad lihtsat juurdepääsu sageli kasutatavatele väärtustele, nagu meie teemavärvid, katkestuspunktid ja peamised fondivirnad, kui töötate brauseri inspektoris, koodi liivakastis või üldises prototüüpimises.

Saadaolevad muutujad

Siin on muutujad, mida me kaasame (pange tähele, et see :rooton kohustuslik). Need asuvad meie _root.scssfailis.

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

Näited

CSS-i muutujad pakuvad samasugust paindlikkust kui Sassi muutujad, kuid ilma brauserile esitamise vajaduseta kompileerimine. Näiteks lähtestame siin oma lehe fondi ja lingi stiilid CSS-i muutujatega.

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

Katkestuspunkti muutujad

Kuigi algselt kaasasime oma CSS-i muutujatesse (nt --breakpoint-md) katkestuspunkte, ei toetata neid meediumipäringute puhul, kuid neid saab siiski kasutada meediumipäringute reeglistiku sees . Need murdepunkti muutujad jäävad kompileeritud CSS-i tagasiühilduvuse tagamiseks, kuna JavaScript saab neid kasutada. Lisateavet leiate spetsifikatsioonist .

Siin on näide sellest, mida ei toetata:

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

Ja siin on näide sellest, mida toetatakse:

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