Atamela

Leha maqephe a qalang a fana ka ketelo ea selelekela sa projeke le seo e fanang ka sona, tokomane ena e tsepamisitse maikutlo tabeng ea hore na hobaneng re etsa lintho tseo re li etsang ho Bootstrap. E hlalosa filosofi ea rona ea ho haha ​​​​marang-rang hore ba bang ba ithute ho rona, ba kenye letsoho le rona, 'me ba re thuse ho ntlafatsa.

U bona ntho e sa utloahaleng hantle, kapa mohlomong e ka etsoa betere? Bula taba —re ka thabela ho buisana le uena ka eona.

Kakaretso

Re tla ikakhela ka setotsoana ho e 'ngoe le e 'ngoe ea tsena ho feta, empa maemong a holimo, ke sena se tataisang mokhoa oa rona.

• Likarolo li tlameha ho ba tse arabelang le ho mobile-pele
• Likarolo li lokela ho hahuoa ka sehlopha sa mantlha mme li atolosoe ka litlelase tsa modifier
• Likarolo tsa linaha li tlameha ho latela sekala se tloaelehileng sa z-index
• Ha ho khoneha, khetha ho kenya HTML le CSS ho feta JavaScript
• Ha ho khoneha, sebelisa lisebelisoa ho feta mekhoa e tloaelehileng
• Nako le nako ha ho khonahala, qoba ho qobella litlhokahalo tse thata tsa HTML (bakhethoa ba bana)

Ea arabelang

Mekhoa ea ho arabela ea Bootstrap e hahiloe hore e arabele, mokhoa oo hangata o bitsoang mobile-first . Re sebelisa lentsoe lena ho litokomane tsa rona mme re lumellana le lona haholo, empa ka linako tse ling e ka ba sephara haholo. Leha e se karolo e 'ngoe le e' ngoe e tlamehang ho arabela ka botlalo ho Bootstrap, mokhoa ona oa karabelo o mabapi le ho fokotsa maemo a holimo a CSS ka ho u sutumelletsa ho eketsa setaele ha sebaka sa pono se ntse se hola.

Hohle ho Bootstrap, o tla bona sena ka ho hlaka lipotsong tsa rona tsa media. Maemong a mangata, re sebelisa min-widthlipotso tse qalang ho sebetsa sebakeng se itseng sa phomolo ebe re tsoela pele ho fihla libakeng tse holimo. Ka mohlala, e .d-nonesebetsa ho tloha min-width: 0ho infinity. Ka lehlakoreng le leng, a e .d-md-nonesebetsa ho tloha sebakeng se mahareng le holimo.

Ka linako tse ling re tla sebelisa max-widthha ho rarahana ha motsoako ho e hloka. Ka nako e 'ngoe, lintlha tsena tse fetelletseng li hlakile haholoanyane ka ts'ebetso le kelellong ho li sebelisa le ho li tšehetsa ho feta ho ngola bocha tšebetso ea mantlha ho tsoa ho likarolo tsa rona. Re leka ho fokotsa mokhoa ona, empa re tla o sebelisa nako le nako.

Lihlopha

Ntle le Reboot ea rona, leqephe la setaele se tloaelehileng sa sebatli, mekhoa eohle ea rona e ikemiselitse ho sebelisa litlelase joalo ka bakhethoa. Sena se bolela ho se khetholle mefuta (mohlala, input[type="text"]) le litlelase tsa batsoali ba kantle ho naha (mohlala, .parent .child) tse etsang hore setaele se khethollehe haholo hore se ka fetisoa habonolo.

Ka hona, likarolo li lokela ho hahoa ka sehlopha sa motheo se nang le lipara tse tloaelehileng, tse sa lokelang ho fetisoa. Ka mohlala, .btnle .btn-primary. Re sebelisa .btnbakeng sa mefuta eohle e tloaelehileng joalo ka display, padding, le border-width. Ka mor'a moo re sebelisa li-modifiers tse kang .btn-primaryho eketsa 'mala, mebala-bala, mebala ea moeli, joalo-joalo.

Likarolo tsa ho feto-fetoha li lokela ho sebelisoa feela ha ho na le thepa kapa boleng bo bongata bo lokelang ho fetoloa ho mefuta e mengata. Li-modifiers ha li hlokehe kamehla, ka hona etsa bonnete ba hore u boloka mela ea khoutu 'me u thibela ho fetella ho sa hlokahaleng ha u li theha. Mehlala e metle ea li-modifiers ke lihlopha tsa rona tsa mebala ea lihlooho le mefuta e fapaneng ea boholo.

z-index sekala

Ho na le z-indexlitekanyo tse peli ho Bootstrap-lintlha tse ka hare ho karolo le likarolo tse koahelang.

Likarolo tsa likarolo

• Likarolo tse ling ho Bootstrap li hahiloe ka likarolo tse fetang ho thibela meeli e habeli ntle le ho fetola borderthepa. Ka mohlala, lihlopha tsa likonopo, lihlopha tsa ho kenya, le pagination.
• Likarolo tsena li arolelana tekanyo e tloaelehileng z-indexea 0ka 3.
• 0ke ea kamehla (ea pele), 1ke :hover, 2ke :active/ .active, 'me 3ke :focus.
• Mokhoa ona o tsamaisana le litebello tsa rona tsa bohlokoa ka ho fetisisa ba basebelisi. Haeba element e tsepamisitsoe maikutlo, e shebiloe le tlhokomelong ea mosebelisi. Lielemente tse sebetsang li boemong ba bobeli ka holimo hobane li bontša boemo. Hover ke ea boraro holimo hobane e bonts'a sepheo sa mosebelisi, empa hoo e ka bang eng kapa eng e ka ts'oaroa.

Likarolo tse koahelang

Bootstrap e kenyelletsa likarolo tse 'maloa tse sebetsang e le sekoaelo sa mofuta o itseng. Sena se kenyelletsa, ka tatellano ea maemo a holimo z-index, li-dropdown, li-navbar tse tsitsitseng le tse khomarelang, mekhoa, lisebelisoa, le li-popovers. Likaroloana tsena li na le z-indexsekala sa tsona se qalang ho 1000. Nomoro ena ea ho qala e khethiloe ntle ho mabaka 'me e sebetsa e le tšireletso e nyane lipakeng tsa litaele tsa rona le mekhoa ea projeke ea hau.

Karolo e 'ngoe le e 'ngoe e koahelang e eketsa z-indexboleng ba eona hanyane ka tsela eo melaoana e tloaelehileng ea UI e lumellang likarolo tse shebaneng le mosebelisi hore li lule li bonoa ka linako tsohle. Ka mohlala, modal ke ho thibela litokomane (mohlala, u ke ke ua nka khato e 'ngoe ntle le ketso ea modal), kahoo re e beha ka holim'a li-navbar tsa rona.

Ithute haholoanyane ka sena z-indexleqepheng la rona la moralo .

HTML le CSS holim'a JS

Ha ho khoneha, re khetha ho ngola HTML le CSS holim'a JavaScript. Ka kakaretso, HTML le CSS li ngata haholo ebile li fumaneha ho batho ba bangata ba maemo a fapaneng a boiphihlelo. HTML le CSS le tsona li potlakile ho sebatli sa hau ho feta JavaScript, 'me sebatli sa hau se u fa tšebetso e ngata haholo.

Molao-motheo ona ke JavaScript ea rona ea boemo ba pele e sebelisang datalitšobotsi. Ha ho hlokahale hore u ngole hoo e ka bang JavaScript ho sebelisa li-plugins tsa rona tsa JavaScript; ho e-na le hoo, ngola HTML. Bala haholoanyane ka sena leqepheng la rona la kakaretso la JavaScript .

Qetellong, litaele tsa rona li aha holim'a mekhoa ea mantlha ea likarolo tse tloaelehileng tsa webo. Ha ho khoneha, re khetha ho sebelisa seo sebatli se fanang ka sona. Mohlala, o ka beha .btnsehlopha hoo e batlang e le ntho efe kapa efe, empa likarolo tse ngata ha li fane ka boleng ba semantic kapa ts'ebetso ea sebatli. Kahoo ho e-na le hoo, re sebelisa <button>s le <a>s.

Hoa tšoana le ho likarolo tse rarahaneng. Le ha re ka ngola plugin ea rona ea netefatso ea foromo ho kenyelletsa litlelase ho karolo ea motsoali ho ipapisitse le boemo ba tlhahiso, ka hona e re lumella ho ngola sengoloa se re khubelu, re khetha ho sebelisa :valid/ :invalidpseudo-elements sebatli se seng le se seng se re fang sona.

Lisebelisoa

Litlelase tsa utility-eo pele e neng e le bathusi ho Bootstrap 3-ke molekane ea matla ho loants'eng CSS bloat le ts'ebetso e mpe ea maqephe. Sehlopha sa lisebelisoa hangata ke mofuta o le mong, o ke keng oa fetoha oa boleng ba thepa e hlahisoang e le sehlopha (mohlala, .d-blocke emela display: block;). Boipiletso ba bona ba mantlha ke lebelo la ts'ebeliso ha u ntse u ngola HTML le ho fokotsa palo ea tloaelo ea CSS eo u tlamehang ho e ngola.

Haholo-holo mabapi le tloaelo ea CSS, lisebelisoa li ka u thusa ho loantša ho eketsa boholo ba faele ka ho fokotsa lipara tsa hau tse atisang ho phetoa tsa boleng ba thepa ka lihlopha tse le 'ngoe. Sena se ka ba le phello e kholo mererong ea hau.

HTML e feto-fetohang

Le hoja e se kamehla ho khonehang, re leka ka matla ho qoba ho tsitlella ho fetelletsa litlhoko tsa rona tsa HTML bakeng sa likarolo. Ka hona, re tsepamisa maikutlo lihlopheng tse le 'ngoe ho bakhethoa ba rona ba CSS mme re leka ho qoba bakhethoa ba kapele ba bana ( >). Sena se u fa monyetla oa ho kenya ts'ebetsong 'me se thusa ho boloka CSS ea rona e le bonolo le e sa tobang haholo.

Likopano tsa khoutu

Tataiso ea Khoutu (ho tsoa ho moetsi-'moho le Bootstrap, @mdo) e fana ka litokomane tsa hore na re ngola HTML le CSS ea rona joang ho Bootstrap. E hlakisa litataiso bakeng sa ho fomata ka kakaretso, ho feto-fetoha ha kelello, thepa le litaelo tsa litšobotsi, le tse ling.

Re sebelisa Stylelint ho tiisa litekanyetso tsena le tse ling ho Sass/CSS ea rona. Sebopeho sa rona sa tloaelo sa Stylelint ke mohloli o bulehileng 'me oa fumaneha hore ba bang ba o sebelise le ho o atolosa.

Re sebelisa vnu-jar ho qobella HTML e tloaelehileng le ea semantic, hammoho le ho lemoha liphoso tse tloaelehileng.