Batamela

Ithute ka melawana ya go hlahla, maano, le dithekniki tšeo di šomišwago go aga le go hlokomela Bootstrap gore o kgone go e tlwaetša le go e katološa gabonolo ka bowena.

Le ge matlakala a go thoma a fa leeto la matseno la projeke le seo e se fago, tokomane ye e lebeletše kudu gore ke ka lebaka la eng re dira dilo tšeo re di dirago ka go Bootstrap. E hlaloša filosofi ya rena go aga mo wepeng gore ba bangwe ba kgone go ithuta go rena, go tsenya letsogo le rena, le go re thuša go kaonafatša.

O bona selo seo se sa kwagalego se lokile, goba mohlomongwe se ka dirwa gakaone? Bula taba —re tla thabela go e ahla-ahla le wena.

Kakaretšo

Re tla itahlela go ye nngwe le ye nngwe ya tše go feta go ralala, eupša maemong a godimo, se ke seo se hlahlago mokgwa wa rena.

Dikarolo di swanetše go ba tše di arabelago le tša pele tša sellathekeng
Dikarolo di swanetše go agwa ka sehlopha sa motheo gomme di katološwe ka dihlopha tša sefetoši
Dilete tša dikarolo di swanetše go obamela tekanyo ye e tlwaelegilego ya z-index
Nako le nako ge go kgonega, kgetha phethagatšo ya HTML le CSS go feta JavaScript
Nako le nako ge go kgonega, šomiša didirišwa godimo ga mekgwa ya tlwaelo
Nako le nako ge go kgonega, phema go gapeletša dinyakwa tše thata tša HTML (bakgethi ba bana) .

Go arabela

Mekgwa ya go arabela ya Bootstrap e agilwe gore e be yeo e arabelago, e lego mokgwa wo gantši o bitšwago mobile-first . Re šomiša lereo le ka go di-doc tša rena gomme re dumelelana kudu le lona, eupša ka dinako tše dingwe le ka ba le le nabilego kudu. Le ge e se karolo ye nngwe le ye nngwe yeo e swanetšego go arabela ka botlalo go Bootstrap, mokgwa wo wa go arabela o mabapi le go fokotša go tlošwa ga CSS ka go go kgoromeletša go oketša mekgwa ge lefelo la go lebelela le fetoga le legolo.

Go putla Bootstrap, o tla bona se gabotse kudu dipotšišong tša rena tša boraditaba. Maemong a mantši, re šomiša min-widthdipotšišo tšeo di thomago go šoma ka ntlha ye e itšego ya go kgaotša gomme tša rwala godimo ka dintlha tša godimo tša go kgaotša. Ka mohlala, a e .d-nonešoma go tloga min-width: 0go go se fele. Ka lehlakoreng le lengwe, a e .d-md-nonešoma go tšwa go ntlha ya go kgaotša ya magareng go ya godimo.

Ka dinako tše dingwe re tla diriša max-widthge go raragana ga tlhago ga karolo go go nyaka. Ka dinako tše dingwe, diphetošo tše di hlakile ka mošomo le monaganong go phethagatša le go thekga go feta go ngwala gape mošomo wa motheo go tšwa dikarolong tša rena. Re katanela go lekanyetša mokgwa wo, eupša re tla o diriša nako le nako.

Diklase

Ka thoko go tšwa go Reboot ya rena, letlakala la setaele la go tlwaetša sefapano sa sephephediši, mekgwa ya rena ka moka e ikemišeditše go šomiša diklase bjalo ka bakgethi. Se se ra gore o tlogele dikgetho tša mohuta (mohlala, input[type="text"]) le diklase tša motswadi tša ka ntle (mohlala, .parent .child) tšeo di dirago gore mekgwa e be ye e itšego kudu gore e ka tlogelwa gabonolo.

Ka ge go le bjalo, dikarolo di swanetše go agwa ka sehlopha sa motheo seo se nago le dipara tša boleng bja thoto tše di tlwaelegilego, tšeo di sa swanelago go tlošwa. Ka mohlala, .btnle .btn-primary. Re šomiša .btngo mekgwa ka moka ye e tlwaelegilego go swana le display, padding, le border-width. Re gona re šomiša diphetoši tša go swana le .btn-primarygo oketša mmala, mmala wa morago, mmala wa mollwane, bj.bj.

Diklase tša sefetoši di swanetše go šomišwa fela ge go na le dithoto tše ntši goba boleng bjo bo swanetšego go fetošwa go ralala le diphetogo tše ntši. Diphetoši ga se ka mehla di nyakegago, ka fao kgonthiša gore o tloga o boloka mela ya khoutu le go thibela go tlošwa mo go sa nyakegego ge o di hlama. Mehlala e mebotse ya diphetoši ke dihlopha tša rena tša mebala ya sehlogo le diphetogo tša bogolo.

dikala tša z-index

Go na le dikelo tše pedi z-indexka go Bootstrap—dielemente ka gare ga karolo le dikarolo tša go akaretša.

Dielemente tša karolo

Dikarolo tše dingwe ka go Bootstrap di agilwe ka dielemente tše di lekelelanago go thibela mellwane ye mebedi ntle le go fetoša borderthepa. Go fa mohlala, dihlopha tša dikonope, dihlopha tša go tsenya, le go beakanya matlakala.
Dikarolo tše di abelana ka z-indextekanyo e tlwaelegilego ya go 0feta 3.
0ke default (qalong), 1ke :hover, 2ke :active/ .active, le 3ke :focus.
Mokgwa wo o swana le ditebelelo tša rena tša go etiša pele ga godimodimo ga modiriši. Ge e le gore elemente e tsepame, e ka ponong le tlhokomelong ya modiriši. Dielemente tše di šomago ke tša bobedi godimo ka gobane di bontšha mmušo. Hover ke ya boraro godimo ka gobane e bontšha maikemišetšo a modiriši, eupša mo e nyakilego go ba selo le ge e le sefe se ka hovered.

Overlay dikarolo

Bootstrap e akaretša dikarolo tše mmalwa tšeo di šomago bjalo ka overlay ya mohuta o itšego. Se se akaretša, ka tatelano ya godimodimo z-index, go theoga, di-navbar tše di sa fetogego le tše di kgomaretšego, di-modal, di- toltips le di-popover. Dikarolo tše di na le z-indextekanyo ya tšona yeo e thomago ka 1000. Nomoro ye ya go thoma e kgethilwe ka boithatelo gomme e šoma bjalo ka buffer ye nnyane magareng ga mekgwa ya rena le mekgwa ya tlwaelo ya projeke ya gago.

Karolo ye nngwe le ye nngwe ya go akaretša e oketša z-indexboleng bja yona go se nene ka tsela yeo melawana ye e tlwaelegilego ya UI e dumelelago dielemente tše di tsepeletšego goba tše di phaphametšego mosediriši go dula di le ponong ka dinako tšohle. Mohlala, modal ke go thibela tokomane (mohlala, o ka se tšee kgato efe goba efe ye nngwe go boloka tiro ya modal), ka fao re bea seo ka godimo ga di-navbar tša rena.

Ithute ka botlalo ka se z-indexletlakaleng la rena la peakanyo .

HTML le CSS godimo ga JS

Nako le nako ge go kgonega, re rata go ngwala HTML le CSS go feta JavaScript. Ka kakaretšo, HTML le CSS di atile kudu ebile di fihlelelwa go batho ba bantši ba maemo ka moka a maitemogelo a go fapana. HTML le CSS le tšona di na le lebelo go sephephediši sa gago go feta JavaScript, gomme sephephediši sa gago ka kakaretšo se go nea mošomo o mogolo kudu.

Molao wo wa motheo ke API ya rena ya JavaScript ya maemo a pele yeo e dirišago datadika. Ga go nyakege gore o ngwale mo e nyakilego go ba JavaScript le ge e le efe go diriša di-plugin tša rena tša JavaScript; go e na le moo, ngwala HTML. Bala ka botlalo ka se letlakaleng la rena la kakaretšo ya JavaScript .

Labofelo, mekgwa ya rena e aga godimo ga maitshwaro a motheo a dielemente tše di tlwaelegilego tša wepe. Nako le nako ge go kgonega, re rata go diriša seo sephephediši se se neago. Go fa mohlala, o ka bea .btnsehlopha mo e nyakilego go ba elemente efe goba efe, eupša bontši bja dielemente ga di neelane ka boleng bja semantiki goba mošomo wa sephephediši. Ka fao go e na le moo, re šomiša <button>s le <a>s.

Go bjalo le ka dikarolo tše di raraganego kudu. Le ge re be re ka ngwala plugin ya rena ya netefatšo ya foromo go oketša diklase go elemente ya motswadi yeo e theilwego godimo ga boemo bja tsenyo, ka go realo re re dumelela go setaela sengwalwa re re se sehwibidu, re rata go šomiša :valid/ :invalidpseudo-elements tšeo sephephediši se sengwe le se sengwe se re fago tšona.

Didirišwa tša go thuša

Diklase tša didirišwa—tšeo pele e bego e le bathuši go Bootstrap 3—ke modirišani yo matla go lwantšha go ruruga ga CSS le go se šome gabotse ga letlakala. Sehlopha sa utility ka go tlhaolega ke e le 'ngoe, e sa fetoheng thepa-boleng pairing bontšitsoeng e le sehlopha (mohlala, .d-blockemela display: block;). Boipiletšo bja bona bja mathomo ke lebelo la tšhomišo ge o dutše o ngwala HTML le go lekanyetša palo ya CSS ya tlwaelo yeo o swanetšego go e ngwala.

Ka go lebanya mabapi le CSS ya tlwaelo, didirišwa di ka thuša go lwantšha bogolo bja faele bjo bo oketšegago ka go fokotša dipara tša gago tša boleng bja thepa tšeo di boeletšwago kudu go ba diklase tše tee. Se se ka ba le mafelelo a magolo ka tekanyo ka diprotšekeng tša gago.

HTML e feto-fetogago

Le ge e se ka mehla go kgonegago, re katanela go phema go ba le thuto ya go se fetoge ka mo go feteletšego dinyakwa tša rena tša HTML tša dikarolo. Ka go rialo, re tsepamiša kgopolo go diklase tše di se nago balekane ka go bakgethi ba rena ba CSS gomme re leka go efoga bakgethi ba bana ba kapejana ( >). Se se go fa go fetofetoga le maemo kudu go phethagatšo ya gago gomme se thuša go boloka CSS ya rena e le bonolo ebile e sa lebanya.

Ditumellano tša khoutu

Tlhahlo ya Khoutu (go tšwa go Bootstrap co-creator, @mdo) e ngwala ka moo re ngwalago HTML ya rena le CSS go ralala le Bootstrap. E laetša ditlhahlo tša go fometa ka kakaretšo, di-default tša tlhaologanyo ye e tlwaelegilego, ditaelo tša thepa le tša seka, le tše dingwe.

Re šomiša Stylelint go gapeletša maemo a le tše dingwe ka go Sass/CSS ya rena. Peakanyo ya rena ya Stylelint ya tlwaelo ke mohlodi wo o bulegilego gomme e hwetšagala gore ba bangwe ba e šomiše le go katološa.

Re šomiša vnu-jar go gapeletša HTML ya maemo le ya semantiki, gammogo le go utolla diphošo tše di tlwaelegilego.