Theming Bootstrap
Fa'apitoa le Bootstrap 4 ma a tatou suiga fou Sass fa'apipi'iina mo le fa'avasegaina o sitaili fa'alelalolagi mo le fa'afaigofieina o autu ma suiga o vaega.
I le Bootstrap 3, o le autu na tele lava ina fa'auluina e suiga fesuisuiai i LESS, CSS masani, ma se isi sitaili autu na matou fa'aofiina i totonu oa matou dist
faila. Faatasi ai ma se taumafaiga, e mafai e se tasi ona toe faʻafouina le foliga o Bootstrap 3 e aunoa ma le paʻi i faila autu. O le Bootstrap 4 o loʻo tuʻuina mai ai se masani, ae fai sina eseʻese auala.
Ole taimi nei, ole autu e ausia e Sass fesuiaiga, faʻafanua Sass, ma CSS masani. E leai se isi sitaili autu fa'apitoa; nai lo lena, e mafai ona e fa'atagaina le autu fausia e fa'aopoopo gradients, ata lafoia, ma isi mea.
Fa'aaoga a matou faila faila Sass e fa'aoga lelei ai fesuiaiga, fa'afanua, fa'afefiloi, ma isi mea.
Soo se taimi e mafai ai, aloese mai le suia o faila autu a Bootstrap. Mo Sass, o lona uiga o le fatuina o lau lava sitaili e aumai ai le Bootstrap ina ia mafai ona e suia ma faʻalautele. Faʻapea o loʻo e faʻaaogaina se pule o pusa e pei o le npm, o le ai ai sau faila faila e pei o lenei:
Afai na e siiina mai a matou faila faila ma e te le o faʻaaogaina se pule o pusa, e te manaʻo e setiina ma le lima se mea e tutusa ma lena fausaga, faʻapipiʻi ese faila a Bootstrap mai oe lava.
I lau custom.scss
, e te fa'aulufaleina mai faila Sass puna a Bootstrap. E lua au filifiliga: aofia uma Bootstrap, pe filifili vaega e te manaʻomia. Matou te faʻamalosia le mulimuli, e ui ina ia nofouta e iai nisi o manaʻoga ma faʻalagolago i a matou vaega. E te manaʻomia foʻi le faʻaofiina o nisi JavaScript mo a matou plugins.
Faatasi ai ma lena seti i le nofoaga, e mafai ona e amata suia soʻo se suiga o Sass ma faʻafanua i lau custom.scss
. E mafai foi ona e amata faʻaopoopo vaega o Bootstrap i lalo o le // Optional
vaega pe a manaʻomia. Matou te fautua atu e fa'aaoga le fa'aputuga fa'aulufale atoa mai la matou bootstrap.scss
faila e fai ma ou amataga.
O fesuiaiga uma o Sass i Bootstrap 4 e aofia ai le !default
fuʻa e mafai ai ona e faʻamalo le tau le aoga o le fesuiaiga i lau lava Sass e aunoa ma le suia o le code source a Bootstrap. Kopi ma faapipii fesuiaiga pe a manaʻomia, sui o latou tau, ma aveese le !default
fuʻa. Afai ua uma ona tuʻuina atu se fesuiaiga, o le a le toe tuʻuina atu e le tau faʻaletonu i Bootstrap.
O le ae mauaina le lisi atoa o fesuiaiga a Bootstrap i scss/_variables.scss
.
E mafai ona o'o mai suiga fa'aletonu i totonu o le faila Sass e tasi i luma po'o le mae'a fo'i o suiga fa'aletonu. Ae peita'i, pe a fa'asili i faila Sass, e tatau ona o'o mai au fa'asili ae e te le'i fa'aulufale mai faila Sass a Bootstrap.
O se faʻataʻitaʻiga lea e suia ai le background-color
ma color
mo le <body>
taimi e faʻaulu mai ai ma tuʻufaʻatasia Bootstrap e ala ile npm:
Toe fai pe a manaʻomia mo soʻo se fesuiaiga i Bootstrap, e aofia ai le lalolagi filifiliga o loʻo i lalo.
Bootstrap 4 o lo'o aofia ai nai fa'afanua Sass, pa'aga taua e fa'afaigofie ai ona fa'atupuina aiga o le CSS fa'atatau. Matou te fa'aogaina fa'afanua Sass mo a matou lanu, fa'asologa fa'asologa, ma isi mea. E pei lava o suiga a Sass, o fa'afanua Sass uma e aofia ai le !default
fu'a ma e mafai ona fa'asili ma fa'alautele.
O nisi o matou fa'afanua Sass ua tu'ufa'atasia i fa'afanua gaogao ona o le fa'aletonu. E faia lea mea ina ia fa'afaigofie ai le fa'alauteleina o se fa'afanua Sass ua tu'uina atu, ae e sau i le tau o le aveesea o mea mai se fa'afanua e fai si faigata.
Ina ia suia se lanu o loʻo i ai i la matou $theme-colors
faʻafanua, faʻaopoopo mea nei i lau faila masani Sass:
Ina ia fa'aopoopo se lanu fou i le $theme-colors
, fa'aopoopo le ki fou ma le tau:
Ina ia aveese lanu mai le $theme-colors
, poʻo soʻo se isi faʻafanua, faʻaaoga map-remove
. Ia nofouta e tatau ona e tuʻuina i le va o matou manaʻoga ma filifiliga:
Bootstrap o loʻo faʻapea o loʻo iai ni ki faʻapitoa i totonu o faʻafanua Sass aʻo matou faʻaogaina ma faʻalauteleina i matou lava. A'o e fa'avasegaina fa'afanua o lo'o aofia ai, e te ono tula'i mai ni mea sese o lo'o fa'aogaina ai se ki fa'afanua patino a Sass.
Mo se fa'ata'ita'iga, matou te fa'aogaina le primary
, success
, ma danger
ki mai $theme-colors
mo so'oga, fa'amau, ma fomu. O le suia o tulaga taua o nei ki e le tatau ona i ai ni faʻafitauli, ae o le aveeseina e ono mafua ai faʻafitauli Sass tuʻufaʻatasia. I nei tulaga, e te manaʻomia le suia o le Sass code e faʻaogaina ai na tulaga taua.
E fa'aogaina e Bootstrap le tele o galuega a Sass, ae na'o se vaega itiiti e fa'aoga i le autu lautele. Ua matou aofia ai ni galuega se tolu mo le mauaina o tau mai fa'afanua lanu:
O nei mea e mafai ai ona e filifilia se lanu e tasi mai le faafanua Sass e pei o le auala e te faʻaogaina ai se lanu lanu mai le v3.
E iai fo'i se isi a matou galuega mo le mauaina o se tulaga fa'apitoa o lanu mai le $theme-colors
fa'afanua. O tulaga le lelei o le a faʻamalamalamaina le lanu, ae o le maualuga maualuga o le a pogisa.
I le fa'ata'ita'iga, e te vala'au le galuega ma pasi i ni ta'iala se lua: o le igoa o le lanu mai $theme-colors
(fa'ata'ita'iga, muamua po'o le lamatiaga) ma le numera numera.
E mafai ona fa'aopoopo galuega fa'aopoopo i le lumana'i po'o lau lava Sass masani e fa'atupu ai ni galuega fa'aopoopo mo fa'afanua Sass fa'aopoopo, po'o se fa'afanua lautele pe a e mana'o e fa'asili atu lau tautala.
O le tasi galuega fa'aopoopo matou te fa'aaofia i totonu o Bootstrap o le fa'atusatusaga o lanu, color-yiq
. E fa'aogaina le avanoa lanu YIQ e otometi ai ona toe fa'afo'i mai se moli ( #fff
) po'o le pogisa ( #111
) fa'atusatusa lanu e fa'atatau i le lanu fa'avae ua fa'amaonia. O lenei galuega e sili ona aoga mo faʻafefiloi poʻo faʻamau e te faʻatupuina ai le tele o vasega.
Mo se faʻataʻitaʻiga, ia faʻatupuina suʻega lanu mai la matou $theme-colors
faʻafanua:
E mafai foʻi ona faʻaaogaina mo manaʻoga faʻatusatusa tasi:
E mafai foi ona e faʻamaonia se lanu faʻavae i la matou faʻafanua lanu galuega:
Fa'asinomaga Bootstrap 4 i la matou faila fa'aleaganu'u fa'aleaganu'u ma faigofie ona fesuia'i mana'oga CSS lalolagi ma suiga fou $enable-*
Sass. Aveese le tau o se fesuiaiga ma toe tuufaatasia npm run test
pe a manaʻomia.
E mafai ona e mauaina ma fa'avasega nei fesuiaiga mo filifiliga autu o le lalolagi i le scss/_variables.scss
faila a Bootstrap.
Fesuia'i | Tulaga taua | Fa'amatalaga |
---|---|---|
$spacer |
1rem (valea), poʻo soʻo se tau> 0 |
Fa'amaoti mai le tau fa'aletonu e va'aia e fa'apolokalame ai a tatou mea fa'aoga spacer . |
$enable-rounded |
true (valea) pefalse |
Fa'aagaaga border-radius sitaili mua'i fa'avasegaina i vaega eseese. |
$enable-shadows |
true po'o false (fa'aletonu) |
Fa'aagaaga box-shadow sitaili mua'i fa'avasegaina i vaega eseese. |
$enable-gradients |
true po'o false (fa'aletonu) |
Fa'aagaaga gradients fa'avasegaina e ala i background-image sitaili i vaega eseese. |
$enable-transitions |
true (valea) pefalse |
Fa'aagaioi transition s fa'avasegaina i vaega eseese. |
$enable-hover-media-query |
true po'o false (fa'aletonu) |
Ua le toe faaaogaina |
$enable-grid-classes |
true (valea) pefalse |
Fa'aagaaga le fa'atupuina o vasega CSS mo le fa'atonuga (fa'ata'ita'iga, .container , .row , .col-md-1 , etc.). |
$enable-caret |
true (valea) pefalse |
Fa'aagaoioiga pseudo element caret on .dropdown-toggle . |
$enable-print-styles |
true (valea) pefalse |
Fa'atagaina sitaili mo le fa'asilisiliina o le lomitusi. |
O le tele o vaega eseese a Bootstrap ma mea aoga e fausia e ala i se faasologa o lanu o loʻo faʻamatalaina i se faʻafanua Sass. O lenei fa'afanua e mafai ona fa'apipi'iina i Sass e fa'atupu vave ai se faasologa o tulafono.
O lanu uma o loʻo maua i le Bootstrap 4, o loʻo avanoa e pei o Sass fesuiaiga ma se faʻafanua Sass i scss/_variables.scss
faila. O lenei mea o le a faʻalauteleina i luga o faʻasalalauga laiti mulimuli ane e faʻaopoopo ai ata faʻaopoopo, e pei o le paleti grayscale ua uma ona matou faʻaofiina.
O le auala lenei e mafai ai ona e faʻaogaina nei mea i lau Sass:
E avanoa foi vasega aoga lanu mo le seti color
ma background-color
.
I le lumana'i, matou te fa'amoemoe e tu'uina atu fa'afanua Sass ma fesuiaiga mo paolo o lanu ta'itasi e pei ona matou faia i lanu efuefu i lalo.
Matou te fa'aogaina se vaega o lanu uma e fai ai se pa'u lanu la'ititi mo le fa'atupuina o ata lanu, o lo'o avanoa fo'i e fai ma suiga Sass ma se fa'afanua Sass i le scss/_variables.scss
faila a Bootstraps.
O se seti lautele o fesuiaiga lanu efuefu ma se faafanua Sass i totonu scss/_variables.scss
mo lanu efuefu faifai pea i lau galuega faatino.
I totonu scss/_variables.scss
, o le ae mauaina suiga lanu a Bootstrap ma le faafanua Sass. O se fa'ata'ita'iga lea o le $colors
fa'afanua Sass:
Fa'aopoopo, ave'ese, pe sui fa'atatau i totonu o le fa'afanua e fa'afou ai pe fa'apefea ona fa'aoga i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaaogaina lenei faʻafanua Sass. O faʻamatalaga i le lumanaʻi o le a taumafai e faʻaleleia lenei mea. Seia o'o i lena taimi, fuafua i le fa'aogaina o ${color}
fesuiaiga ma lenei fa'afanua Sass.
O le tele o vaega a Bootstrap ma mea aoga e fausia i @each
fa'amaufa'ailoga e fa'asolosolo 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.
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 e 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
vaega ma a tatou .bg-*
mea aoga uma.
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 po'o mea fa'aoga. Fai se fa'ata'ita'iga a matou fa'aoga feso'ota'iga o tusitusiga e fa'afefiloi ai se @each
matasele mo le $grid-breakpoints
fa'afanua Sass ma se fa'asalalauga fa'asalalau e aofia ai.
Afai e te manaʻomia le suia o lau $grid-breakpoints
, o au suiga o le a faʻaoga i matasele uma o loʻo faʻasolosolo i luga o lena faafanua.
Bootstrap 4 e aofia ai le tusa ma le lua taseni CSS meatotino masani (suia) i lana CSS tuufaatasia. O nei mea e maua ai le avanoa faigofie i tulaga fa'aoga masani e pei o lanu o tatou autu, fa'amaufa'ailoga, ma fa'aputuga vaitusi muamua pe a galue i le Su'esu'ega a lau su'esu'ega, se pusa oneone, po'o le fa'ata'ita'iga lautele.
O fesuiaiga nei matou te aofia ai (matau e :root
manaʻomia le). O lo'o iai i la matou _root.scss
faila.
CSS fesuiaiga e ofoina atu tutusa fetuutuunai i fesuiaiga a Sass, ae aunoa ma le manaʻomia mo le tuʻufaʻatasia aʻo leʻi tuʻuina atu i le suʻega. Mo se fa'ata'ita'iga, o lo'o matou toe fa'afo'i le vai papatisoga ma sitaili feso'ota'iga ma fesuiaiga CSS.
A'o matou fa'auluina fa'amata'u i totonu o la matou fesuiaiga CSS (fa'ata'ita'iga, --breakpoint-md
), e le'o lagolagoina i fesili fa'asalalau , ae e mafai lava ona fa'aoga i totonu o tulafono i fa'asalalauga fesili. O nei va'aiga va'aiga e tumau pea i le CSS tu'ufa'atasia mo feso'ota'iga i tua ona e mafai ona fa'aogaina e le JavaScript. Aoao atili i le spec.
O se fa'ata'ita'iga lea o mea e le'o lagolagoina:
Ma o se faʻataʻitaʻiga lea o mea e lagolagoina: