Source

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, miksine ja palju muud.

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

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

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

Muutujate alistamised samas Sass-failis võivad olla enne või pärast vaikemuutujaid. Sassi-failide alistamise korral peavad teie alistamised toimuma enne Bootstrapi Sassi-failide importimist.

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

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

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

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

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 mis tahes muult kaardilt kasutage map-remove:

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

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

Üks lisafunktsioon, 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`
}

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 meie _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õi`false`	Lubab `border-radius`erinevate komponentide eelmääratletud stiilid.
`$enable-shadows`	`true`või `false`(vaikimisi)	Lubab `box-shadow`erinevate komponentide eelmääratletud stiilid.
`$enable-gradients`	`true`või `false`(vaikimisi)	`background-image`Lubab erinevate komponentide stiilide kaudu eelmääratletud gradiente .
`$enable-transitions`	`true`(vaikimisi) või`false`	Lubab eelmääratletud `transition`s erinevatel komponentidel.
`$enable-hover-media-query`	`true`või `false`(vaikimisi)	Aegunud
`$enable-grid-classes`	`true`(vaikimisi) või`false`	Võimaldab ruudustikusüsteemi jaoks CSS-klasside genereerimist (nt , `.container`, `.row`, `.col-md-1`jne).
`$enable-caret`	`true`(vaikimisi) või`false`	Lubab pseudoelemendi caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(vaikimisi) või`false`	Lubab stiilid printimise optimeerimiseks.

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

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

Sinine

Indigo

Lilla

Roosa

Punane

Oranž

Kollane

Roheline

Sinine

Tsüaan

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 meie scss/_variables.scssfailis saadaval ka Sassi muutujate ja Sassi kaardina.

Esmane

Teisene

Edu

Oht

Hoiatus

Info

Valgus

Tume

Hallid

Laialdane hallide muutujate komplekt ja Sassi kaart, mis scss/_variables.scsstagab teie projektis ühtsed halli varjundid.

100

200

300

400

500

600

700

800

900

Piirkonnast _variables.scssleiate meie 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Saate oma meediapäringutes kasutada ka meie murdepunkti muutujaid:

.content-secondary {
  display: none;
}

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