Vaega
A'oa'o pe fa'afefea ma pe aisea tatou te fausia ai toetoe o a tatou vaega uma i le tali lelei ma fa'atasi ma vasega fa'avae ma suiga.
Vasega faavae
O vaega a Bootstrap e tele lava ina fausia i se fa'aigoa fa'avae-fa'aliliu. Matou te fa'avasegaina le tele o meatotino fefa'asoaa'i pe a mafai i totonu o se vasega fa'avae, pei o .btn
, ona fa'avasega lea o sitaili ta'ito'atasi mo suiga ta'itasi i vasega fa'aopoopo, pei .btn-primary
po'o .btn-success
.
Ina ia fausia a matou vasega fa'aleleia, matou te fa'aogaina @each
fa'amaufa'ailoga a Sass e fa'asino i luga o se fa'afanua Sass. E aoga tele lenei mea mo le fa'atupuina o fesuiaiga o se vaega e ala ia tatou $theme-colors
ma le faia o suiga tali mo vaega ta'itasi. A'o e fa'avasegaina fa'afanua Sass ma toe tu'ufa'atasia, e otometi lava ona e va'ai i au suiga o lo'o atagia mai i nei fa'agasolo.
Siaki a matou fa'afanua Sass ma fa'amaufa'ailoga docs mo le fa'avasegaina o nei matasele ma fa'alautele le fa'aogaina o le fa'avae-modifier a Bootstrap i lau lava code.
Suiga
O le tele o vaega a Bootstrap e fausia i se faiga fa'avae-modifier vasega. O lona uiga o le tele o le sitaili o lo'o i totonu o se vasega fa'avae (fa'ata'ita'iga, .btn
) a'o fesuiaiga o sitaili e fa'atapula'a i vasega fa'aliliu (fa'ata'ita'iga, .btn-danger
). O nei vasega suiga ua fausia mai le $theme-colors
faafanua e fai ai le fa'avasegaina o le numera ma le igoa oa tatou vasega fa'aliliu.
O faʻataʻitaʻiga nei e lua o le auala tatou te faʻaogaina i luga o le $theme-colors
faʻafanua e faʻaleleia ai suiga i le .alert
ma .list-group
vaega.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
Talia
O nei fa'ailoga Sass e le gata i fa'afanua lanu, pe. E mafai fo'i ona e fa'atupuina suiga tali o au vaega. Fai se fa'ata'ita'iga o la matou fa'aogaina o le pa'u i lalo lea matou te fa'afefiloi ai se @each
matasele mo le $grid-breakpoints
fa'afanua Sass ma se fa'asalalauga e aofia ai.
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
Afai e te suia lau $grid-breakpoints
, o au suiga o le a faʻaoga i matasele uma o loʻo faʻasolosolo i luga o lena faafanua.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Mo nisi faʻamatalaga ma faʻataʻitaʻiga i le auala e sui ai a matou faʻafanua Sass ma fesuiaiga, faʻamolemole vaʻai i le vaega Sass o le Grid pepa .
Fausia o oe lava
Matou te fa'amalosia oe e fa'aaoga nei ta'iala pe a fau ma Bootstrap e fai ai au lava vaega. Ua matou fa'alauteleina lenei faiga i matou lava i vaega fa'ale-aganu'u i a matou fa'amaumauga ma fa'ata'ita'iga. O vaega e pei o a tatou valaau e fausia e pei lava o a tatou vaega tu'uina atu ma vasega fa'avae ma fa'avasega.
<div class="callout">...</div>
I lau CSS, e iai sau mea e pei o le mea o loʻo mulimuli mai e fai ai le tele o le sitaili e ala i le .callout
. Ona, o sitaili tulaga ese i le va o fesuiaiga taitasi e pulea e ala i le vasega modifier.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Mo fa'ailoga, o lena sitaili tulaga ese ua na'o se border-left-color
. A e tuʻufaʻatasia lena vasega faʻavae ma se tasi o na vasega faʻaleleia, e te maua lou aiga atoa: