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 fautuaina le faʻaaogaina o le faʻaputu 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.
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 $theme-colors
, po'o so'o se isi fa'afanua, fa'aoga map-remove
:
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 faaopoopo matou te aofia ai i Bootstrap o le lanu faʻatusatusa galuega, 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 su'eina ma fa'avasega nei fesuiaiga mo filifiliga autu o le lalolagi i la matou _variables.scss
faila.
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 fa'avasegaina i vaega eseese. |
$enable-shadows |
true po'o false (fa'aletonu) |
Fa'aagaaga box-shadow sitaili 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'aagaoioi 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 Bootstrap 4, o loʻo avanoa e pei o Sass fesuiaiga ma se faʻafanua Sass i la matou 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 fo'i vasega fa'aoga lanu mo le fa'atulagaina 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 la matou scss/_variables.scss
faila.
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 _variables.scss
, e te maua ai a matou lanu lanu ma 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'aogaina i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaogaina 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 pe tusa ma le lua taseni CSS meatotino aganu'u (suiga) i totonu o le CSS tuufaatasia. O nei mea e maua ai le avanoa faigofie i tulaga fa'aoga masani e pei o tatou lanu autu, fa'amaufa'ailoga autu, ma fa'aputuga vaitusi muamua pe a galue i lau su'esu'ega Asiasi, 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.
O fesuiaiga o le CSS e ofoina atu le fetuutuunai tutusa 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 setiina le vai papatisoga ma sitaili feso'ota'iga ma suiga CSS.
E mafai fo'i ona e fa'aogaina a matou va'aiga va'aiga i au fa'asalalauga fa'asalalauga: