in English

Habka

Baro mabaadi'da hagaya, xeeladaha, iyo farsamooyinka loo isticmaalo in lagu dhiso oo lagu ilaaliyo Bootstrap si aad si sahal ah u habayn karto oo aad naftaada u kordhiso.

Iyadoo boggaga bilawga ahi ay bixinayaan socdaal hordhac ah oo mashruuca ah iyo waxa uu bixiyo, dukumeentigani waxa uu diiradda saarayaa sababta aanu u samayno waxyaabaha aanu ku samayno Bootstrap. Waxay sharxaysaa falsafadeena inaan ku dhisno shabakada si kuwa kale ay wax nooga bartaan, nala qaybsadaan, oo ay nooga caawiyaan horumarinta.

Arag wax aan sax ahayn, ama laga yaabo in si ka wanaagsan loo sameeyo? Furo arrin -waxaan jeclaan lahayn inaan kaala hadalno.

Soo koobid

Mid kasta oo ka mid ah kuwan ayaan sii dhex geli doonnaa inta lagu jiro, laakiin heer sare, waa kan waxa haga habkayaga.

  • Qaybaha waa inay ahaadaan kuwo ka jawaabaya oo mobile-ka ugu horreeya
  • Qaybaha waa in lagu dhisaa fasal sal ah oo lagu kordhiyaa iyada oo loo marayo fasalada wax ka beddelka
  • Dawladaha ka kooban waa inay adeecaan qiyaasta z-index-ka caadiga ah
  • Mar kasta oo ay suurtagal tahay, ka door bidi dhaqangelinta HTML iyo CSS JavaScript
  • Mar kasta oo ay suurtagal tahay, u adeegso utilities qaab-dhaqameedyada gaarka ah
  • Mar kasta oo ay suurtagal tahay, iska ilaali fulinta shuruudaha HTML ee adag (doorashooyinka carruurta)

Ka jawaaba

Hababka ka jawaab celinta Bootstrap waxaa loo dhisay inay noqdaan kuwo wax ka jawaabaya, hab inta badan loo yaqaan mobil-koowaad . Ereygan waxaan ku isticmaalnaa dukumeentiyadayada waxaanan ku raacsannahay inta badan, laakiin mararka qaarkood aad ayey u ballaaran tahay. In kasta oo qayb kastaa aanay ahayn in ay si buuxda uga jawaabto Bootstrap, habkan ka jawaabaya waxa uu ku saabsan yahay dhimista ka-hortagga CSS adiga oo kugu riixaya in aad ku darto qaabab marka daawadu sii weynaato.

Guud ahaan Bootstrap, waxaad tan si cad ugu arki doontaa weydiimahayada warbaahinta. Inta badan, waxaan isticmaalnaa min-widthsu'aalo bilaabaya in lagu dabaqo meel gaar ah oo aan sii marno meelaha sare ee nasashada. Tusaale ahaan, a .d-nonewaxay khusaysaa min-width: 0ilaa infinity. Dhanka kale, a .d-md-nonewaxay khusaysaa barta goynta dhexe iyo kor.

Marmarka qaarkood waxaan isticmaali doonaa max-widthmarka kakanaanta sheygu u baahan yahay. Marmarka qaarkood, ka-hortaggani waa kuwo shaqayn iyo maskax ahaanba ka cad in la hirgeliyo oo la taageero marka loo eego dib-u-qorista hawlaha asaasiga ah ee qaybahayada. Waxaan ku dadaaleynaa inaan xaddidno habkan, laakiin waxaan isticmaali doonnaa waqti ka waqti.

Fasallada

Marka laga reebo Dib-u-bootkayaga, xaashida qaabaynta browser-ka-isku-tallaabta, dhammaan noocyadayadu waxay higsanayaan inaan u isticmaalno fasallada sidii doorasho. Tani waxay ka dhigan tahay inaad ka fogaato nooca xulayaasha (tusaale, input[type="text"]) iyo fasalada waalidka ee ka baxsan (tusaale, .parent .child) kuwaas oo ka dhigaya qaabab aad u gaar ah oo si sahlan loo burin karo.

Sidan oo kale, qaybaha waa in lagu dhisaa dabaqa aasaasiga ah kaas oo ay ku wada nool yihiin lammaane-qiimo hantiyeed oo aan la dhaafin. Tusaale ahaan, .btniyo .btn-primary. Waxaan .btnu isticmaalnaa dhammaan qaababka caadiga ah sida display, padding, iyo border-width. Waxaan markaa isticmaalnaa wax ka beddelayaasha sida .btn-primaryinaan ku darno midabka, midabka asalka, midabka xadka, iwm.

Fasallada wax ka beddelka waa in la isticmaalo oo keliya marka ay jiraan waxyaabo badan ama qiimayaal lagu beddelayo noocyo badan. Wax ka beddelayaashu had iyo jeer lagama maarmaan ma aha, markaa hubso inaad dhab ahaantii kaydinayso khadadka koodka oo aad ka hortagayso xad-gudubyada aan loo baahnayn marka la abuurayo. Tusaalooyinka wanaagsan ee wax ka beddelayaashu waa fasallada midabka mawduuceena iyo kala duwanaanshaha cabbirka.

miisaanka z-index

Waxaa jira laba z-indexmiisaan oo ku jira Bootstrap-xubnaha ka kooban qayb iyo qaybo dulsaar ah.

Qaybaha ka kooban

  • Qaybaha qaar ee Bootstrap ayaa lagu dhisay canaasiir is dulsaaran si looga hortago soohdin laba jibaaran iyadoon wax laga beddelin borderhantida. Tusaale ahaan, kooxaha badhanka, kooxaha wax gelinta, iyo boggaga.
  • Qaybahani waxay wadaagaan cabbirka caadiga z-indexah 0ilaa 3.
  • 0waa default (bilowgii), 1waa :hover, 2waa :active/ .active, 3waana :focus.
  • Habkani wuxuu ku habboon yahay filashadayada mudnaanta isticmaale ee ugu sarreysa. Haddii curiye diirada la saaro, waa la eegayaa iyo dareenka isticmaalaha. Waxyaabaha firfircooni waa labaad ee ugu sarreeya sababtoo ah waxay muujinayaan xaalad. Hover waa seddexaad ee ugu sareysa sababtoo ah waxay muujineysaa ujeedka isticmaale, laakiin ku dhawaad ​​wax kasta waa la dulmari karaa.

Qaybaha dulsaar

Bootstrap waxaa ku jira dhowr qaybood oo u shaqeeya sida dulsaar nooc ka mid ah. Tan waxaa ku jira, sida ay u kala sarreeyaan z-index, hoos u dhaca, navbars go'an oo dhegdheg leh, modal, qalab-tips, iyo popovers. Qaybahani waxay leeyihiin z-indexmiisaan u gaar ah oo ka bilaabma 1000. Lambarkan bilawga ah waxa loo doortay si aan kala sooc lahayn wuxuuna u adeegaa sidii wax yar oo u dhexeeya qaababkayaga iyo qaababka mashruucaaga caado u ah.

Qayb kasta oo ka mid ah wax-ku-kordhinta waxay kordhisaa z-indexqiimaheeda si yar si ay mabaadi'da UI ee caadiga ah u oggolaadaan isticmaalayaasha diirada saaraya ama kuwa la dulmayo inay ku sii jiraan aragtida mar walba. Tusaale ahaan, modal waa dukumeenti xannibaya (tusaale, ma qaadi kartid wax kale oo tallaabo ah oo lagu badbaadinayo tallaabada modalka), markaa taas waxaan ka sarraysiinnaa navbarsyadayada.

Wax badan ka baro tan z-indexbogga qaabeynta .

HTML iyo CSS ka badan JS

Mar kasta oo ay suurtagal tahay, waxaan door bidaynaa inaan HTML iyo CSS ku qorno JavaScript. Guud ahaan, HTML iyo CSS waa kuwo aad u faa'iido badan oo ay heli karaan dad badan oo leh dhammaan heerarka khibradaha kala duwan. HTML iyo CSS sidoo kale waa ka dhaqso badan yihiin biraawsarkaaga JavaScript, biraawsarkaagana guud ahaan waxa uu ku siinayaa hawlkarnimo aad u weyn.

Mabda'aani waa JavaScript API-ga fasalka koowaad iyadoo la adeegsanayo datasifooyin. Uma baahnid inaad qorto ku dhawaad ​​JavaScript kasta si aad u isticmaasho pluginsyadayada JavaScript; halkii, ku qor HTML. Wax badan oo arrintan ku saabsan ka akhri boggayaga dulmarka JavaScript .

Ugu dambeyntii, qaababkayagu waxay dhisaan dabeecadaha asaasiga ah ee walxaha shabakadaha caadiga ah. Mar kasta oo ay suurtogal tahay, waxaan doorbidnaa inaan isticmaalno waxa browserku bixiyo. Tusaale ahaan, waxaad ku dhejin kartaa .btnfasalka ku dhawaad ​​shay kasta, laakiin inta badan curiyayaasha ma bixiyaan wax qiimo ah oo semantic ama browserka shaqaynta. Markaa taa beddelkeeda, waxaan isticmaalnaa <button>s iyo <a>s.

Isla sidaas oo kale ayaa loogu talagalay qaybo badan oo adag. In kasta oo aan qori karno plugin xaqiijinta foom noo gaar ah si aan ugu darno xiisado xubin waalid oo ku saleysan xaaladda gelinta, taas oo noo ogolaaneysa in aan qaabeyno qoraalka dhihi karo casaan, waxaan doorbideynaa isticmaalka :valid/ :invalidwalxaha been abuurka ah ee browser kasta na siiyo.

Utility

Fasalada utility-ka caawiyayaasha hore ee Bootstrap 3-waa xulafo awood leh la dagaallanka bararka CSS iyo waxqabadka bogga liita. Fasalka utility caadi ahaan waa hal, lammaane-qiimo hantiyeed oo aan la bedeli karin oo lagu muujiyay fasal ahaan (tusaale, .d-blockmatalayso display: block;). Soojiidashadooda aasaasiga ah waa xawaaraha isticmaalka marka aad qorayso HTML iyo xaddidaya cadadka CSS ee aad u baahan tahay inaad qorto.

Gaar ahaan ku saabsan CSS-ta caadiga ah, yutiiliyadaha ayaa kaa caawin kara la dagaallanka kordhinta cabbirka faylka iyaga oo yareynaya lammaanahaaga qiimaha hantida ee inta badan soo noqnoqda oo isku daraya hal fasal. Tani waxay saameyn weyn ku yeelan kartaa miisaanka mashaariicdaada.

HTML dabacsan

In kasta oo aan had iyo jeer suurtogal ahayn, waxaan ku dadaalnaa inaan ka fogaano inaan noqono kuwo si xad dhaaf ah u aaminsan shuruudaha HTML ee qaybaha. Markaa, waxaanu diirada saarnaa fasalada kali ah ee doorashadayada CSS waxaanan isku daynaa in aan iska ilaalino kuwa dooranaya caruurta ( >). Tani waxay ku siinaysaa dabacsanaan dheeraad ah hirgelintaada waxayna kaa caawinaysaa in CSS-keena uu ahaado mid fudud oo aan gaar ahayn.

Xeerarka xeerarka

Hagaha Koodhka (oo ka yimid la-abuuraha Bootstrap, @mdo) dukumeentiyada sida aan u qorno HTML iyo CSS ee Bootstrap. Waxay qeexdaa hab-raacyada qaabaynta guud, gafafka caqli-galnimada, hantida iyo amarrada sifada, iyo in ka badan.

Waxaan u isticmaalnaa Stylelint si aan u hirgelino heerarkan iyo in ka badan Sass/CSS. Habaynteena gaarka ah ee Stylelint waa il furan oo diyaar u ah kuwa kale inay isticmaalaan oo ay kordhiyaan.

Waxaan isticmaalnaa vnu-jar si aan u dhaqan galno HTML heerka iyo semantic, iyo sidoo kale ogaanshaha khaladaadka caadiga ah.