- I-Bootstrap inikeza uhlelo lokuzulazula oluguquguqukayo noluphendulayo oluvumelana kalula nosayizi besikrini abahlukahlukene kusetshenziswa indlela yeselula-kuqala.
- Lolu hlaka lunikeza ukwenza ngokwezifiso okubanzi ngokusebenzisa amakilasi ezinsiza, iziguquguquko ze-CSS, kanye ne-SASS, okuvumela ukulawula okunembile imibala, indawo, kanye nokuziphatha.
- Ukuhlanganiswa kwezingxenye ezithuthukisiwe njenge-dropdowns, amadrowa e-offcanvas, kanye nama-modals kwenza kube lula ukudala izixhumi ezisebenzisana kakhulu nezisebenziseka kalula.
Ukuthola indlela efanele yokuzulazula iwebhusayithi yakho kufana nokwakha umnyango wangaphambili oya ekhaya lakho; uma kunzima noma kunzima ukuyithola, abantu ngeke bangene. Yilapho i -navbar ye-Bootstrap isebenza khona, isebenza njengesikhungo esinamandla sokudala ama-header aphendulayo abukeka kahle kukho konke kusukela kusikrini esikhulu sedeskithophu kuya esikrinini esincane se-smartphone. Akuyona nje imigqa yezixhumanisi, kodwa uhlelo oluphelele oluphatha uphawu, imigoqo yokusesha, namamenyu ayinkimbinkimbi ngaphandle kokuzikhandla.
Kungakhathaliseki ukuthi uqala nje ngokudala iwebhusayithi kusukela ekuqaleni noma unguchwepheshe onolwazi ofuna ukupholisha i-UI yakho, ukuqonda ukusebenza kwangaphakathi kwalesi sici kuyashintsha ngokuphelele. Ngokusebenzisa ifilosofi yeselula , i-Bootstrap iqinisekisa ukuthi abasebenzisi bakho banolwazi olubushelelezi kungakhathaliseki ukuthi bakuphi, besebenzisa inhlanganisela ehlakaniphile yama-plugin e-JavaScript kanye ne-CSS flexbox ukugcina konke kuhambisana futhi kufinyeleleka kalula.
Ubuchwepheshe Bokuhlela Nokuhlela
Ukuze izinto zihambe kahle, udinga ukugoqa ukuzulazula kwakho ngendlela .navbar ikilasi. Ukuze liphenduleke ngempela, kuzodingeka usebenzise .navbar-expand izilungisi (ezifana no--sm, -md, -lg, -xl, noma -xxl), ezitshela isiphequluli ngqo ukuthi imenyu kufanele ishintshe nini kusukela kusakhiwo sobubanzi obugcwele iye kumenyu ye-hamburger egobile. Ngokuzenzakalelayo, lawa ma-navbars ayashintshashintsha, okusho ukuthi athatha ububanzi bonke, kodwa ungawafaka kalula isitsha ukugcina okuqukethwe kwakho kugxile futhi kucocekile.
Ukufinyeleleka kuyinto enkulu lapha. Kufanele uhlale usebenzisa <nav> isici noma engeza indima = "ukuzulazula" uma usebenzisa i-div, ukuqinisekisa ukuthi abantu abasebenzisa izifundi zesikrini bayakwazi ukuthola indlela yabo. Futhi, ungakhohlwa ukumaka ikhasi lamanje usebenzisa i-aria-current=\”ikhasi\”, okuyimininingwane emincane eyenza umehluko omkhulu ekubandakanyekeni.
Amabhulokhi Okwakha Abalulekile
I-navbar enhle yenziwe ngezinto eziningana ezincane ongazixuba futhi uzifanise. Uhlobo lwe-.navbar luyindlela oyithandayo yama-logo enkampani noma amagama ephrojekthi; yize lusebenza kahle njengethegi ye-anchor, ungaxhuma izithombe, yize cishe uzodinga i-CSS yangokwezifiso ukuze uthole usayizi ofanele. Ngezixhumanisi zangempela, i-.navbar-nav inikeza isakhiwo esilula esisekela izimo ezisebenzayo ngeklasi le-.active, okusiza abasebenzisi bazi kahle ukuthi bakuphi kuhlu lwesayithi lakho.
Uma izinto zigcwele, i-.navbar-toggler kanye ne -.collapse.navbar-collapse zisebenza ndawonye ukufihla imenyu ngemuva kwenkinobho ezikrinini ezincane. Uma udinga ukwengeza ulwazi olwengeziwe, i-.navbar-text ilungele izintambo zombhalo ezigxile phezulu. Kulabo abadinga ukusebenza okwengeziwe, ungahlanganisa amafomu angaphakathi noma imigoqo yokusesha ngqo kusihloko usebenzisa amakilasi e-flex utility ukuze ugcine ukuhambisana kuqondile.
Ukwenza Isitayela Nokwenza Ngokwezifiso Okubonakalayo
Ukushintsha ukubukeka kwe-navbar yakho kulula kakhulu. Ungakhetha itimu elula usebenzisa ukukhanya kwe-.navbar noma emnyama ene .ibha ye-nav-emnyamaEzinguqulweni ezintsha ze-Bootstrap, lokhu kushintshele ekusebenziseni Izinguquko ze-CSS kanye nezimfanelo zedatha ezifana data-bs-theme=\"dark\", okuvumela ukwenza ngokwezifiso ngesikhathi sangempela ngaphandle kokubhala inqwaba ye-CSS yangokwezifiso. Ungalungisa ingemuva ngokwengeziwe usebenzisa izinsiza ze-.bg-* noma hlola amasu okulungisa isitayela athuthukile ukuze kufane nombala womkhiqizo wakho.
Ukubekwa kungenye into ebalulekile. Ungenza i-navbar yakho inamathele phezulu noma phansi kwekhasi, okusho ukuthi ihlala isendaweni ngenkathi umsebenzisi eskrola. Ngaphandle kwalokho, inketho ye -sticky-top inhle ngoba iskrola nekhasi ize ifike phezulu bese inamathela lapho. Khumbula nje ukuthi izikhundla ezihleliwe zisusa isici ekugelezeni okuvamile kwe-DOM, ngakho-ke kungadingeka ungeze i- padding-top emzimbeni ukuze uvimbele okuqukethwe kwakho ukuthi kufihlwe ngaphansi kwesihloko.
Izici Ezithuthukisiwe Nokusebenzisana
Kumasayithi ayinkimbinkimbi kakhulu, amamenyu okwehlayo asindisa impilo ekuhleleni izixhumanisi eziningi ngaphandle kokuhlanganisa i-UI. Lokhu kudinga ukwakheka okuthile kwe-.nav-item kanye ne-.nav-link ukuze kubekwe kahle. Uma ufuna ukukhanga ngempela, ungaguqula imenyu yakho egoqekayo ibe yidrowa elingaphandle kwekhanvasi . Lokhu kushelela kusuka ohlangothini lwesikrini, kunikeze umuzwa wesimanje, ofana nohlelo lokusebenza odumile kakhulu ekwakhiweni kwewebhu yeselula.
Ngale kwe-navbar uqobo, ukuhlanganisa i-Bootstrap Modals kungaphakamisa ulwazi lomsebenzisi. Cabanga ngenkinobho ethi \”Ngena\” ku-navbar yakho evula i-pop-up modal esikhundleni sokuthumela umsebenzisi ekhasini elisha lonke; igcina ukugeleza kushesha futhi kusheshile. Ungafaka futhi amabheji ezibalo zezaziso noma ama-avatar dropdowns kumaphrofayili abasebenzisi, ukuhlanganisa izithonjana namafulegi abashintshi bolimi ukuze wenze isayithi lakho lizizwe ligcwele umhlaba wonke.
Ukuthuthukisa Nokuxazulula Izinkinga
Ukuze ugcine isayithi lakho lishesha, kuyisinyathelo esihlakaniphile ukwenza amafayela akho e-CSS kanye ne-JS abe lula futhi usebenzise i-CDN ukuze ulethe ngokushesha. Uma i-navbar yakho ingasebenzi kahle, qala uhlole amaphutha e-JavaScript kukhonsoli , njengoba ukusebenza kokugoqa kuncike kakhulu ku-Bootstrap JS bundle. Futhi, qiniseka ukuthi isakhiwo sakho se-HTML silandela uhla lwezinhlaka ngokunembile, njengoba i-div elahlekile ingaphula kalula i-toggler ephendulayo.
Uma kukhulunywa ngokusebenza, ukuncika kumakilasi e-utility e-Bootstrap ukuze uthole ama-margin kanye ne-padding kusebenza kahle kakhulu kunokubhala i-CSS yangokwezifiso kuyo yonke i-tweak encane. Uma udinga ukubukeka okuhlukile ngokuphelele, indlela engcono kakhulu iwukushintsha izitayela ezizenzakalelayo kufayela le -CSS langokwezifiso elihlukile elixhunywe ngemuva kweshidi lesitayela se-Bootstrap, noma okungcono nakakhulu, ngena eziguquguquki ze-SASS ukuze ushintshe itimu eyinhloko kusukela phansi kuya phezulu.
Ukwakha uhlelo lokuzulazula lochwepheshe kuhilela ukulinganisela ukuphendula, ukufinyeleleka, kanye nokukhanga kobuhle . Ngokuhlanganisa isakhiwo se-navbar esiyinhloko namathuluzi athuthukile njengemenyu ye-offcanvas, ukubeka okunamathelayo, kanye nezimbangela ze-modal, ungakha isikhombimsebenzisi esisebenza kahle esiqondisa abasebenzisi kalula ngokuqukethwe kwakho ngenkathi sigcina ukubukeka okucwebezelayo, kwesimanje kuwo wonke amapulatifomu.
