Te huarahi

Ahakoa kei nga wharangi timatanga he haerenga whakataki mo te kaupapa me nga mea e tukuna ana, e aro ana tenei tuhinga ki te take ka mahia e matou nga mahi i Bootstrap. He whakamarama i to maatau whakaaro mo te hanga i runga i te ipurangi kia ako ai etahi atu mai i a maatau, ka koha mai ki a matou, ka awhina i a matou ki te whakapai ake.

Ka kite i tetahi mea kaore i te pai, tera pea ka pai ake? Whakatuwheratia he take —e pai ana matou ki te korerorero ki a koe.

Whakarāpopototanga

Ka rukuhia e matou o enei katoa puta noa, engari i te taumata teitei, koinei te mea e arahi ana i ta matou huarahi.

• Ko nga waahanga me whakautu me te waea-tuatahi
• Me hanga nga waahanga me te karaehe turanga me te whakaroa ma nga karaehe whakarereke
• Ko nga ahuatanga o te waahanga me whakarongo ki te tauine-z noa
• I nga wa katoa ka taea, pai ake te whakauru HTML me CSS ki runga i te JavaScript
• I nga wa katoa ka taea, whakamahia nga taputapu mo nga momo ritenga
• I nga wa katoa ka taea, karohia te whakatinana i nga whakaritenga HTML tino (nga kaiwhiri tamariki)

Whakautu

Ko nga momo urupare a Bootstrap he mea hanga kia aro mai, he huarahi e kiia ana he waea-tuatahi . Ka whakamahia e matou tenei kupu i roto i o maatau tuhinga me te tino whakaae ki tera, engari i etahi wa ka whanui rawa atu. Ahakoa kaore nga waahanga katoa e tino aro ki Bootstrap, ko tenei huarahi urupare e pa ana ki te whakaiti i nga huringa CSS ma te turaki i a koe ki te taapiri i nga momo ka nui ake te tauranga tirohanga.

Puta noa i Bootstrap, ka tino kitea e koe tenei i roto i a maatau patai pāpāho. I te nuinga o nga wa, ka whakamahi matou i min-widthnga patai ka timata ki te tono i tetahi waahi pakaru me te kawe ki runga i nga waahanga teitei ake. Hei tauira, he .d-nonetono mai i min-width: 0te mutunga kore. I tetahi atu ringa, ka .d-md-nonepa mai i te waahi wehenga waenga me te piki ake.

I etahi wa ka whakamahia e matou max-widthina hiahiatia e te uaua o tetahi waahanga. I etahi wa, he maamaa ake te mahi me te hinengaro ki te whakatinana me te tautoko atu i te tuhi ano i nga mahi matua mai i a maatau waahanga. Ka whakapau kaha matou ki te whakaiti i tenei huarahi, engari ka whakamahia i ia wa i ia wa.

Karaehe

I tua atu i a maatau Reboot, he pepa ahua whakawhiti tirotiro tirotiro, ka whai a maatau momo katoa ki te whakamahi i nga karaehe hei kaiwhiriwhiri. Ko te tikanga ko te aukati i nga kaikowhiri momo (hei tauira, input[type="text"]) me nga karaehe matua ke atu (hei tauira, .parent .child) he mea motuhake rawa nga momo ki te whakakore ngawari.

No reira, me hanga nga waahanga me te karaehe turanga e mau ana i nga takirua o nga rawa-uara noa, kaua e whakakorehia. Hei tauira, .btnme .btn-primary. Ka whakamahia e matou .btnmo nga momo ahua noa penei i te display, padding, me te border-width. Ka whakamahia e matou nga whakarereke penei .btn-primaryki te taapiri i te tae, te tae papamuri, te tae-taitapa, aha atu.

Me whakamahi noa nga karaehe whakarereke ina he maha nga taonga me nga uara hei whakarereke i nga momo rereke maha. Ehara i te mea e tika ana te whakarereke i nga wa katoa, na kia mohio kei te tiakina e koe nga rarangi o te waehere me te aukati i nga huringa kore i te wa e hangaia ana. Ko nga tauira pai o te whakarereke ko o maatau karaehe tae kaupapa me nga momo rerekee.

tauine-z

E rua nga z-indexunahi kei Bootstrap—nga huānga kei roto i tetahi waahanga me te whakakikorua i nga waahanga.

Huānga Waahanga

• Ko etahi waahanga kei Bootstrap he mea hanga ki nga huānga inaki hei aukati i nga taitapa rua me te kore e whakarereke i te borderrawa. Hei tauira, nga roopu paatene, nga roopu whakauru, me te whakaingoatanga.
• Ko enei waahanga he z-indextauine paerewa 0puta noa 3.
• 0he taunoa (tuatahi), 1he :hover, 2he :active/ .active, me 3te :focus.
• Ko tenei huarahi ka rite ki o maatau tumanako mo te kaupapa matua a nga kaiwhakamahi. Mena kei te arotahi tetahi huānga, kei te titiro, kei te aro o te kaiwhakamahi. Ko nga huānga hohe he tuarua teitei na te mea e tohu ana i te ahua. Ko te whakaparo te tuatoru teitei na te mea e tohu ana i te hiahia a te kaiwhakamahi, engari tata katoa ka taea te whakaparo.

Whakakikorua i nga waahanga

Kei roto i te Bootstrap etahi waahanga e mahi ana hei whakakikorua o etahi momo. Kei roto i tenei, i roto i te raupapa o te teitei z-index, nga takaiho, nga pae whakatere me te piri, nga tikanga, nga aki taputapu, me nga pouvers. Ko enei waahanga kei a raatau ake z-indextauine ka timata i te 1000. Ko tenei tau timata i whiriwhiria noa, ka noho hei parepare iti i waenga i a maatau momo me nga momo ritenga o to kaupapa.

Ko ia waahanga whakakikorua ka piki ake tona z-indexuara i runga i te huarahi e taea ai e nga maataapono UI noa nga huānga e arotahi ana ki te kaiwhakamahi kia noho tonu ki te tirohanga i nga wa katoa. Hei tauira, ko te aratau he aukati tuhinga (hei tauira, kaore e taea e koe te mahi i etahi atu mahi engari mo te mahi a te aratau), na reira ka waiho e matou ki runga ake i o maatau pae whakatere.

Ako atu mo tenei i roto i ta maatau z-indexwharangi tahora .

HTML me CSS mo JS

I nga wa katoa ka taea, he pai ake taatau ki te tuhi HTML me CSS mo JavaScript. I te nuinga o te waa, he pai ake te HTML me te CSS me te waatea ki te maha atu o nga taangata o nga taumata wheako rereke. He tere ake hoki te HTML me te CSS i roto i to kaitirotiro atu i te JavaScript, a ko te tikanga he maha nga mahi a to kaitirotiro mo koe.

Ko tenei maataapono ko to maatau API JavaScript akomanga tuatahi ma te whakamahi i datanga huanga. Kaore koe e hiahia ki te tuhi tata ki tetahi JavaScript hei whakamahi i a maatau taputapu JavaScript; engari, tuhia HTML. Pānuihia atu mo tenei i roto i ta maatau wharangi tirohanga JavaScript .

Ka mutu, ko o maatau momo hanga i runga i nga whanonga taketake o nga huānga tukutuku noa. I nga wa katoa ka taea, he pai ake taatau ki te whakamahi i nga mea e whakaratohia ana e te kaitirotiro. Hei tauira, ka taea e koe te whakauru i tetahi .btnkaraehe ki runga tata ki nga huānga katoa, engari ko te nuinga o nga huānga kaore e whakarato i tetahi uara tohu, mahi tirotiro ranei. Na, ka whakamahia e matou te <button>s me <a>te s.

He pera ano mo nga waahanga uaua ake. Ahakoa ka taea e matou te tuhi i ta matou ake mono whakamana puka hei taapiri i nga karaehe ki tetahi huānga matua i runga i te ahua o te whakaurunga, na reira ka taea e matou te tuhi i te tuhinga ki te whero, he pai ake taatau ki te whakamahi i nga :valid/ :invalidpseudo-huānga e whakaratohia ana e ia kaitirotiro.

Nga taputapu

Ko nga karaehe taputapu—he kaiawhina i mua i Bootstrap 3—he hoa kaha ki te whawhai i te pupuhi CSS me te ngoikore o te mahi wharangi. Ko te karaehe whaipainga te tikanga he takirua uara-waa kotahi e kore e taea te huri hei karaehe (hei tauira, he .d-blocktohu display: block;). Ko ta raatau tono tuatahi ko te tere o te whakamahi i te wa e tuhi ana i te HTML me te whakaiti i te nui o te CSS ritenga hei tuhi.

Mo te CSS ritenga, ka taea e nga taputapu te awhina i te whakanui ake i te rahi o nga konae ma te whakaiti i o takirua taonga-uara e tino rite tonu ana ki nga karaehe kotahi. Ka whai hua nui tenei ki o kaupapa.

HTML ngawari

Ahakoa kaore e taea i nga wa katoa, ka ngana matou ki te karo i te tino koretake i roto i a maatau whakaritenga HTML mo nga waahanga. No reira, ka aro atu matou ki nga karaehe kotahi i roto i o maatau kaiwhiriwhiri CSS me te ngana ki te karo i nga kaiwhiringa tamariki tonu ( >). Ma tenei ka whaiwari ake koe i roto i to whakatinanatanga me te awhina i a maatau CSS kia ngawari me te iti ake.

Tikanga tikanga

Ko te Aratohu Waehere (mai i te Kaihanga Kaihanga Bootstrap, @mdo) e tuhi ana me pehea te tuhi i a maatau HTML me CSS puta noa i Bootstrap. Ka tohuhia nga aratohu mo te whakahōputu whānui, nga hapa tikanga noa, nga taonga me nga ota huanga, me era atu.

Ka whakamahi matou i te Stylelint ki te whakatinana i enei paerewa me etahi atu i roto i a maatau Sass/CSS. Ko ta maatau whirihora Stylelint he puna tuwhera, ka waatea ma etahi atu hei whakamahi me te whakawhānui.

Ka whakamahi matou i te vnu-jar ki te whakatinana i te HTML paerewa me te tohu tohu, me te kimi hapa noa.