Akkaataa

Fuulonni jalqabaa daawwannaa seensa pirojektichaa fi maal akka dhiyeessu yoo kennan, galmeen kun maaliif wantoota Bootstrap keessatti hojjennu irratti xiyyeeffata. Falaasama keenya gara weeb irratti ijaaruutti ibsa, akka namoonni biroo nu irraa baratanii, nu waliin gumaachan, akkasumas fooyya’iinsa akka nu gargaaran taasisa.

Waan sirriitti hin dhaga'amne argitee, ykn tarii kana caalaa hojjetamuu danda'a? Dhimma tokko banaa —si waliin mari'achuu ni jaallanna.

Cuunfaa

Tokkoon tokkoon kanaa keessatti caalaatti guutummaatti ni cuuphamna, garuu sadarkaa olaanaatti, kunoo mala keenya kan qajeelchu.

• Qaamonni deebii kan kennan fi mobile-first ta’uu qabu
• Qaamonni gita bu'uuraa waliin ijaaramuu fi karaa gita fooyyessaa dheerachuu qabu
• Haalli qaamolee iskeelii z-indeeksii waliigalaa bitamuu qabu
• Yeroo danda'ametti, JavaScript caalaa hojiirra oolmaa HTML fi CSS filadhu
• Yeroo danda'ametti, akkaataa amala irratti faayidaa fayyadami
• Yeroo danda'ametti, ulaagaalee HTML ciccimoo dirqisiisuu irraa fagaadhu (filattoota ijoollee) .

Deebii kan kennu

Bootstrap's responsive styles deebii kennuudhaaf ijaaramaniiru, mala yeroo baay'ee mobile-first jedhamee waamamu . Jecha kana docs keenya keessatti fayyadamnee baay'inaan irratti walii galle, garuu yeroo tokko tokko garmalee bal'aa ta'uu danda'a. Qaamni hundi Bootstrap keessatti guutummaatti deebii kennuu kan hin qabne yoo ta'ellee , mala deebii kennuu kun waa'ee CSS irra darbuu hir'isuudhaan akkuma mul'ataan guddachaa deemuun akkaataa itti dabaluuf si dhiibuudha.

Bootstrap qaxxaamuree, kana gaaffii miidiyaa keenya keessatti ifatti argitu. Yeroo baay'ee, min-widthgaaffiiwwan bakka ciccituu murtaa'e irratti hojiirra ooluu jalqabanii fi bakka ciccituu ol'aanaa keessa ol baatan fayyadamna. Fakkeenyaaf, a .d-noneirraa min-width: 0gara dhuma hin qabneetti hojiirra oola. Gama biraatiin, a .d-md-nonebakka cabbii giddugaleessaa irraa fi ol hojiirra oola.

Yeroo tokko max-widthtokko yeroo walxaxiinsi uumamaan qaama tokkoo isa barbaadu fayyadamna. Yeroo tokko tokko, irra darbuun kunniin dalagaa ijoo qaamolee keenya irraa irra deebi'anii barreessuu caalaa hojiirra oolchuu fi deeggaruuf dalagaa fi sammuudhaan ifaadha. Mala kana daangessuuf carraaqna, garuu yeroo yerootti itti fayyadamna.

Daree barnootaa

Reboot keenya, barruu akkaataa idileessuu qaxxaamuraa-browser irraa kan hafe, akkaataan keenya hundi gita akka filannootti fayyadamuuf kaayyeffateera. Kana jechuun filattoota akaakuu (fkn, input[type="text"]) fi gita warraa alaa (fkn, .parent .child) kanneen akkaataa salphaatti irra darbuuf baay'ee adda taasisan irraa fagaachuu jechuudha.

Akka kanaan, qaamolee gita bu'uuraa kan lamaan gatii-qabeenyaa waliigalaa, kan hin irra darbamne of keessaa qabuun ijaaramuu qabu. Fakkeenyaaf, .btnfi .btn-primary. Akkaataa .btnwaliigalaa hundaaf kan akka display, padding, fi border-width. Sana booda fooyyessitoota akka .btn-primaryhalluu, duubbee-halluu, daangaa-halluu fi kkf itti dabaluu fayyadamna.

Gitoota fooyyessaa fayyadamuu kan qaban yeroo amaloonni ykn gatiiwwan hedduu garaagarummaa hedduu irratti jijjiiramuu qaban qofa. Fooyyessitoonni yeroo hunda barbaachisoo miti, kanaafuu dhuguma sararoota koodii qusachuu fi yeroo isaan uumtu irra darbuu hin barbaachifne ittisuu kee mirkaneessi. Fakkeenyonni gaariin fooyyessitootaa gita halluu mata duree keenyaa fi garaagarummaa guddinaati.

iskeelii z-indeeksii

Bootstrap keessatti iskeelii lamatu jira z-index-qaamota qaama keessaa fi qaamolee haguuggii.

Qaamolee qaamolee

• borderQaamonni tokko tokko Bootstrap keessatti qabeentaa osoo hin fooyyessiin daangaa dachaa ittisuuf qaamolee wal-irra bu'an waliin ijaaramaniiru . Fakkeenyaaf, gareewwan qaree, gareewwan galtee, fi fuula.
• Qaamonni kun z-indexiskeelii istaandaardii 0karaa 3.
• 0durtii (jalqabaa), 1dha :hover, / 2dha , fi dha .:active.active3:focus
• Malli kun dursa fayyadamaa olaanaa irraa eegnu waliin walsima. Yoo elementiin tokko xiyyeeffate, ilaalcha keessa jiraa fi xiyyeeffannoo fayyadamaa jala jira. Elementiiwwan sochii qaban haala agarsiisaniif sadarkaa lammaffaa irratti ol’aanaadha. Hover yaada fayyadamaa waan agarsiisuuf sadarkaa sadaffaa irratti ol'aanaadha, garuu waan kamiyyuu jechuun ni danda'ama hover gochuun ni danda'ama.

Qaamolee wal-irratti uwwisuu

Bootstrap qaamolee hedduu akka overlay gosa tokkootti hojjetan of keessatti qabata. Kunis, tartiiba ol'aanaa z-index, gadi bu'iinsa, navbar dhaabbataa fi maxxanuu, moodaalota, tooltipps, fi popovers of keessatti qabata. Qaamonni kun z-indexiskeelii mataa isaanii kan 1000. Lakkoofsi jalqabaa kun akka fedhetti kan filatame yoo ta'u, akkaataawwan keenyaa fi akkaataawwan amala piroojektii keetii gidduutti akka buffer xiqqaatti tajaajila.

Tokkoon tokkoon qaama haguuggii z-indexgatii isaa xiqqoo dabala haala seera bu'uuraalee UI waliigalaa qaamolee fayyadamaa irratti xiyyeeffatan ykn hovered yeroo hunda ilaalcha keessa akka turaniif hayyamuun. Fakkeenyaaf, moodaaliin tokko galmee ugguraadha (fkn, gocha moodaalichaaf qusachuun tarkaanfii biraa fudhachuu hin dandeessu), kanaaf sana navbars keenya olitti kaa'a.

Waa'ee kanaa z-indexfuula haala qindaa'ina keenyaa irratti bal'inaan baradhaa .

HTML fi CSS JS irratti

Yeroo danda'ametti JavaScript irra HTML fi CSS barreessuu filanna. Walumaagalatti, HTML fi CSS caalaatti baay’inaan kan hojjetaniifi namoota sadarkaa muuxannoo adda addaa qaban hedduudhaaf dhaqqabamaa dha. HTML fi CSS akkasumas JavaScript caalaa browser keessan keessatti saffisaa dha, akkasumas browser keessan akka waliigalaatti hojii guddaa isiniif kenna.

Qajeelfamni kun API JaavaScript keenya sadarkaa tokkoffaa dataamaloota fayyadamuun. Ilaginoota JaavaScript keenya fayyadamuuf JaavaScript kamiyyuu jechuun ni danda'ama barreessuu hin barbaachisu; kanaa mannaa HTML barreessi. Waa'ee kanaa fuula ilaalcha waliigalaa JaavaScript keenya irratti bal'inaan dubbisaa .

Dhumarratti, akkaataan keenya amala bu'uuraa qaamolee weeb waliigalaa irratti ijaara. Yeroo danda'ametti waan biraawzarichi kennu fayyadamuu filanna. Fakkeenyaaf, .btngita qaama kamiyyuu irratti jechuun ni danda'ama kaa'uu dandeessa, garuu qaamolee baay'een gatii hiika ykn dalagaa biraawzari kamiyyuu hin kennan. Kanaafuu kanaa mannaa <button>s fi s fayyadamna <a>.

Qaamolee walxaxaa ta’aniifis kanuma. Haala galtee tokkoo irratti hundaa'uun kutaa warraa irratti gita dabaluudhaaf ifteessituu mirkaneessa unkaa mataa keenyaa barreessuu kan dandeenyu yoo ta'ellee , kanaanis barruu diimaa jennee akka akkaataa itti goonu nu dandeessisa, :valid/ :invalidelementoota sobaa biraawzari hundi nuuf kennu fayyadamuu filanna.

Faayidaa (Utilities) jedhaman

Kutaawwan faayidaa-duraan gargaartota Bootstrap 3 keessatti-CSS bloat fi raawwii fuula gadhee loluu keessatti michuu humna guddaa qabudha. Gitni faayidaa akkaataa addaatiin wal-qabsiisuu qabeentaa-gatii tokkoo, hin jijjiiramne kan akka gitaatti ibsame (fkn, .d-blockbakka bu'a display: block;). Iyyannoo isaanii inni jalqabaa saffisa itti fayyadama yeroo HTML barreessituu fi hamma CSS amala barreessuu qabdu daangeessuudha.

Addatti CSS amala ilaalchisee, fayyadamtoonni lamaan gatii qabeentaa kee baay'inaan irra deddeebi'amu gara gita tokkootti hir'isuun hammangaa faayilii dabalaa jiru loluuf gargaaruu danda'u. Kunis pirojektoota keessan keessatti iskeelii irratti bu’aa guddaa qabaachuu danda’a.

HTML kan jijjiiramu

Yeroo hunda kan hin danda'amne ta'us, barbaachisummaa HTML keenya qaamoleedhaaf garmalee dogmaatikii ta'uu irraa of qusachuuf carraaqna. Haala kanaan, filannoowwan CSS keenya keessatti daree tokko qofa irratti xiyyeeffannee filattoota ijoollee battalaa irraa fagaachuuf yaalla ( >). Kunis hojiirra oolmaa keessan irratti jijjiirama guddaa siif kenna akkasumas CSS keenya salphaa fi adda ta'e akka hin taane gargaara.

Konveenshiniiwwan koodii

Qajeelfamni Koodii (Bootstrap co-creator irraa, @mdo) akkaataa HTML fi CSS keenya Bootstrap qaxxaamuree barreessinu galmeessa. Qajeelfama foormaatii waliigalaa, durtii yaada waliigalaa, tartiiba qabeentaa fi amalootaa fi kkf ifteessa.

Sass/CSS keenya keessatti ulaagaalee kanaa fi kanneen biroo hojiirra oolchuuf Stylelint fayyadamna . Qindaa'inni Stylelint amala keenyaa madda banaa fi warri kaan akka fayyadamanii fi dheeressaniif ni argama.

HTML istaandaardii fi hiika dirqisiisuuf, akkasumas dogongora waliigalaa adda baasuuf vnu-jar fayyadamna .