Auala

E ui o itulau amata o loʻo tuʻuina atu ai se faʻasalalauga tomua o le poloketi ma mea e ofoina mai, o lenei pepa e taulaʻi i le mafuaʻaga tatou te faia ai mea tatou te faia i Bootstrap. O loʻo faʻamatalaina ai a tatou filosofia i le fausiaina i luga o le upega tafaʻilagi ina ia mafai ai e isi ona aʻoaʻoina mai ia i tatou, saofaga ma i tatou, ma fesoasoani ia i tatou e faʻaleleia atili.

Va'ai i se mea e le'o sa'o, pe atonu e sili atu ona lelei? Tatala se mataupu —matou te fiafia e talanoaina ma oe.

Aotelega

O le a tatou fa'asolo atu i nei mea ta'itasi i le taimi atoa, ae i se tulaga maualuga, o le mea lea e ta'ita'ia ai la tatou auala.

• O vaega e tatau ona tali atu ma feaveai-muamua
• O vaega e tatau ona fausia i se vasega faavae ma faʻalauteleina e ala i vasega faʻaleleia
• E tatau ona usita'i setete vaega ile fua fa'asino-z masani
• Soo se taimi lava e mafai ai, mana'omia se HTML ma CSS fa'atinoga nai lo le JavaScript
• Soo se taimi lava e mafai ai, fa'aoga mea fa'aoga i luga o sitaili masani
• Soo se taimi e mafai ai, aloese mai le faʻamalosia o manaʻoga HTML (tagata filifilia tamaiti)

Talia

O sitaili tali a Bootstrap ua fausia ina ia tali mai, o se auala e masani ona taʻua o le telefoni feaveaʻi . Matou te faʻaogaina lenei faaupuga i totonu o matou pepa ma e tele lava ina malilie i ai, ae o nisi taimi e mafai ona lautele tele. E ui e le o vaega uma e tatau ona tali atoatoa i Bootstrap, o lenei auala tali e uiga i le faʻaitiitia o le faʻaogaina o le CSS e ala i le tuleia oe e faʻaopoopo sitaili pe a faʻateleina le vaʻaiga.

I luga o le Bootstrap, o le a sili atu ona e vaʻaia lenei mea i a matou faʻasalalauga fesili. I le tele o tulaga, matou te fa'aogaina min-widthfesili e amata ona fa'aoga i se nofoaga fa'apitoa ma fa'asolo atu i luga ole va'aiga maualuga. Mo se faʻataʻitaʻiga, o le a .d-nonefaʻaaoga mai min-width: 0i le le gata. I le isi itu, a .d-md-nonee faʻaaoga mai le vaeluagalemu ma luga.

E i ai taimi tatou te fa'aaogaina max-widthpe a mana'omia e le lavelave fa'aletino o se vaega. I nisi o taimi, o nei fa'atonuga e sili atu ona manino le fa'atinoga ma le mafaufau e fa'atino ma lagolago nai lo le toe tusia o galuega autu mai a tatou vaega. Matou te taumafai e faʻatapulaʻa lenei auala, ae o le a faʻaaogaina mai lea taimi i lea taimi.

Vasega

E ese mai i la matou Toe Fa'afouina, o se sitaili masani o su'esu'ega, o matou sitaili uma e fa'amoemoe e fa'aoga vasega e fai ma filifiliga. O lona uiga o le fa'ata'ita'i ese o tagata filifilia ituaiga (fa'ata'ita'iga, input[type="text"]) ma vasega matua fa'aopoopo (fa'ata'ita'iga, .parent .child) e fa'amaoti ai sitaili e faigofie ai ona fa'asese.

O lea la, o vaega e tatau ona fausia i se vasega faavae o lo'o i ai fale masani, e le tatau ona fa'aseseina meatotino-taua pa'aga. Mo se faataitaiga, .btnma .btn-primary. Matou te fa'aogaina .btnmo sitaili masani uma e pei o display, padding, ma border-width. Ona matou faʻaogaina lea o suiga e pei .btn-primaryo le faʻaopoopoina o le lanu, lanu-lanu, lanu tuaoi, ma isi.

E na'o le fa'aaogaina o vasega fa'aliliu pe a tele mea totino po'o fa'atauga e tatau ona suia i le tele o fesuiaiga. E le o taimi uma e mana'omia ai suiga, o lea ia mautinoa o lo'o e fa'asaoina lelei laina o le code ma puipuia le fa'aogaina e le mana'omia pe a fatuina. O fa'ata'ita'iga lelei o suiga o la matou vasega lanu autu ma le tele o suiga.

fua fa'asino-z

E lua z-indexfua i le Bootstrap—elemene i totonu o se vaega ma faʻapipiʻi vaega.

Elemene vaega

• O nisi vaega i Bootstrap o loʻo fausia ma faʻapipiʻi elemene e puipuia ai tuaoi faʻalua e aunoa ma le suia o le bordermeatotino. Mo se faʻataʻitaʻiga, vaega faʻamau, vaega faʻapipiʻi, ma faʻailoga.
• O nei vaega e fa'asoa se fua z-indexfa'atatau o le 0ala 3.
• 0e faaletonu (muamua), 1is :hover, 2is :active/ .active, ma 3is :focus.
• O lenei faiga e fetaui ma o tatou fa'amoemoega o le fa'amuamua a tagata fa'aoga. Afai e taula'i se elemene, o lo'o va'aia ma i le fa'alogo a le tagata fa'aoga. O elemene gaogao e lona lua le maualuga aua latou te faʻaalia le tulaga. Fa'ae'e lona tolu maualuga ona o lo'o fa'ailoa mai ai le fa'amoemoega o tagata, ae toetoe lava o so'o se mea e mafai ona fa'ae'e.

Fa'apipi'i vaega

O le Bootstrap e aofia ai le tele o vaega o loʻo galue o se faʻapipiʻi o se ituaiga. E aofia ai, i le fa'asologa o le maualuga z-index, fa'alalo, fa'amau ma pipii navbars, modals, tooltips, ma popovers. O nei vaega e iai a latou lava z-indexfua e amata ile 1000. O lenei numera amata na filifilia fa'afuase'i ma avea o se pa'u la'ititi i le va o matou sitaili ma sitaili masani a lau poloketi.

O vaega fa'apipi'i ta'itasi e fa'asili z-indexteisi lona tau i se auala e fa'ataga ai e ta'iala masani a le UI e fa'ataga ai le fa'aogaina o mea fa'aoga po'o le fa'afefeteina e tumau pea i le va'aiga i taimi uma. Mo se fa'ata'ita'iga, o le fa'ata'ita'iga o le polokaina o pepa (fa'ata'ita'iga, e le mafai ona e faia se isi gaioiga se'i vagana le gaioiga a le modal), o lea matou te tu'u ai i luga a'e o matou navbars.

A'oa'o atili e uiga i lenei mea ile matou z-indexitulau fa'atulagaina .

HTML ma CSS i luga ole JS

Soo se taimi e mafai ai, matou te manaʻo e tusi HTML ma CSS i luga o le JavaScript. I se tulaga lautele, o le HTML ma le CSS e sili atu ona lelei ma mafai ona maua e le tele o tagata o tulaga eseese o poto masani. O le HTML ma le CSS e sili atu le saoasaoa i lau suʻesuʻega nai lo le JavaScript, ma o lau suʻega e masani ona maua ai le tele o galuega mo oe.

O lenei mataupu faavae o le matou vasega muamua JavaScript API faʻaaogaina datauiga. E te le manaʻomia le tusiaina o soʻo se Javascript e faʻaoga ai matou JavaScript plugins; ae, tusi HTML. Faitau atili e uiga i lenei mea i la matou itulau lautele o le JavaScript .

Ma le mea mulimuli, o matou sitaili e faʻavae i luga o amioga faʻavae o elemene masani i luga ole laiga. Soo se taimi e mafai ai, matou te manaʻo e faʻaoga mea o loʻo tuʻuina mai e le browser. Mo se faʻataʻitaʻiga, e mafai ona e tuʻuina se .btnvasega i luga o le toetoe o soʻo se elemene, ae o le tele o elemene e le maua ai soʻo se aoga faʻaoga poʻo se suʻesuʻega. Ae nai lo lena, matou te faʻaaogaina <button>le s ma <a>le s.

E faapena foi mo vaega e sili atu ona lavelave. E ui e mafai ona matou tusia a matou lava pepa faʻamaonia faʻapipiʻi e faʻaopoopo ai vasega i se matua elemene e faʻavae i luga o le tulaga o mea e tuʻuina atu, ma faʻatagaina ai i matou e faʻapipiʻi le tusitusiga e fai mai mumu, matou te manaʻo e faʻaaoga le :valid/ :invalidpseudo-elements e maua e suʻesuʻega uma ia i matou.

Utilities

Vasega fa'aoga-na avea muamua ma fesoasoani i le Bootstrap 3-o se fesoasoani malosi i le faʻafefeina o le CSS bloat ma le leaga o le faʻatinoga o itulau. O se vasega aoga e masani lava o se tasi, e le mafai ona suia mea totino-taua paiga o loʻo faʻaalia o se vasega (faʻataʻitaʻiga, .d-blockfaʻatusa display: block;). O la latou talosaga muamua o le saoasaoa o le faʻaoga aʻo tusia le HTML ma faʻatapulaʻaina le aofaʻi o le CSS masani e tatau ona e tusia.

Aemaise lava e uiga i CSS masani, e mafai ona fesoasoani mea aoga e faʻafefe ai le faʻateleina o faila e ala i le faʻaitiitia o au paʻaga faʻatau-taua e masani ona fai i vasega tasi. E mafai ona i ai se aafiaga mata'utia i le fua i au galuega faatino.

HTML fetuutuunai

E ui e le o taimi uma e mafai ai, matou te taumafai e aloese mai le soona faʻalogo i a matou manaʻoga HTML mo vaega. O lea, matou te taulaʻi atu i vasega taʻitasi i la matou CSS filifilia ma taumafai e aloese mai tamaiti filifilia vave ( >). E maua ai e oe le tele o fetuutuuna'i i lau fa'atinoga ma fesoasoani e fa'afaigofie ai a matou CSS ma fa'aitiitia fa'apitoa.

Feagaiga tulafono

Code Guide (mai Bootstrap co-creator, @mdo) fa'amaumauga pe fa'apefea ona matou tusia a matou HTML ma CSS i luga o Bootstrap. O lo'o fa'amaoti mai ai ta'iala mo le fa'avasegaina lautele, fa'aletonu o le mafaufau masani, fa'atonuga o meatotino ma uiga, ma isi mea.

Matou te fa'aogaina le Stylelint e fa'amalosia nei tulaga ma isi mea i la matou Sass/CSS. O la matou masani Stylelint config e tatala ma avanoa mo isi e faʻaoga ma faʻalautele.

Matou te faʻaogaina le vnu-jar e faʻamalosia ai HTML masani ma semantic, faʻapea foʻi ma le suʻeina o mea sese masani.