Te huarahi

Akohia nga maataapono arahi, rautaki, me nga tikanga e whakamahia ana ki te hanga me te pupuri i a Bootstrap kia ngawari ake ai koe ki te whakarite me te whakawhānui ake i a koe ano.

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 pana 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, ko o maatau momo katoa e whai ana ki te whakamahi i nga karaehe hei kaiwhiriwhiri. Ko te tikanga ko te urungi 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-primaryi 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, no reira kia mohio kei te tiakina e koe nga rarangi o te waehere me te aukati i nga whakarereketanga kore i te wa e hanga 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 karekau e whakarato i tetahi uara kupu, 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

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

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.