Esmapilgul, Bootstrap tundub üsna lihtne . Ja tõepoolest, Bootstrapi kasutamist pole keeruline alustada. Seal on väga hästi kirjutatud Bootstrapi dokumentatsioon paljude HTML-, CSS- ja JavaScripti koodinäidetega. Seal mainitakse enamikku olulistest lõkse, kuid siiski on mõned vead üsna peened või neil on ebaselged põhjused. Kuna Bootstrap näeb välja väga lihtne ja hõlpsasti kasutatav, tormavad paljud arendajad raamistikku ja nii juhtub vigu.

Kui arendajad seda kasutama hakkavad, vaatame kümmet levinumat Bootstrapi viga, probleemi ja väärarusaama.

Levinud alglaadimisviga nr 1: põhiarvamused raamistiku kohta

Programmi kohta on mõned põhiarvamused Bootstrapi raamistik mis inimestel on. Selle põhjuseks võib olla asjaolu, et seda ei reklaamita Bootstrapi saidil selgelt või inimesed ei võta dokumentatsiooni lugemiseks piisavalt aega. Fakt on see, et mõnikord satuvad arendajad nurka ja teevad valesti asju ning süüdistavad seejärel raamistikku. Nii saame mõned põhifaktid selgeks teha.

Bootstrap on kõikehõlmav, kuid see pole ei tohutu ega tohutu. Bootstrap on komplektis põhiliste HTML- ja CSS-kujundusmallidega, mis sisaldavad palju levinud kasutajaliidese komponente. Nende hulka kuuluvad tüpograafia, tabelid, vormid, nupud, glüfoonid, rippmenüüd, nupud ja sisestusrühmad, navigeerimine, lehekülgede otsimine, sildid ja märgid, märguanded, edenemisribad, modaalid, vahelehed, akordionid, karussellid ja palju muud. Võite valida neist mõned ja valida need ning vaikekonfiguratsiooniga saate kiiresti luua kasutajaliidese, mis haldab kena vorminguga mitut brauserit, seadet ja eraldusvõimet.

Bootstrap ei tee teie eest kõike, kuid pakub valikut mõistlikke vaikeväärtusi ja aitab arendajatel keskenduda rohkem arendustööle kui muretsemisele disaini pärast ja aitab neil ilusa väljanägemisega veebis kiiresti töötada. See võimaldab kiiret prototüüpimist, kuid ei piira arendajaid teel.

See on piisavalt laiendatav, et igaüks saaks seda oma vajadustele vastavaks kohandada. Alguses olid Bootstrapil mõned piirangud ja siis oli vaikestiilide laiendamine keeruline. Kuid raamistiku küpsemisel paranes ka laiendatavus.

Üldine alglaadimisviga nr 2: arvate, et Bootstrapi kasutamiseks ei pea te CSS-i tundma ja te ei vaja disainerit

Kui mõtlete, et kui kasutate Bootstrapi, ei pea te CSS-i tundma, siis eksite väga. Iga kasutajaliidese arendaja peab õppima CSS-i ja HTML5-d. Bootstrap eemaldab arendajate õlgadelt palju keerulisi CSS-i osi (nagu tarnijate spetsiifilised eesliited) ja pakub põhilisi vaikestiile, kuid peate siiski mõistma CSS-i. Te ei pea teadma, kuidas meediumipäringud töötavad, kuid peate mõistma, kuidas reageeriv disain töötab. Bootstrap ei ole mõeldud CSS-i õpetamiseks, kuid see võib aidata, kui soovite. Lähtekoodi uurimine LESS- või SASS-vormingus on suurepärane lähtepunkt.

Sarnase teema puhul ei pea te olema disainer ja võite väita, et te ei vaja Bootstrapiga disainerit. Kuid võimaluse korral kasutage disaineri abi. Levinud kaebus Bootstrapi vastu on see, et kõik Bootstrapi saidid näevad välja sarnased ja on lihtne leida veebisaiti, mis näeb välja täpselt nagu iga teine ​​Bootstrapi sait. Kuid see ei pea olema tõsi. Bootstrapi abil luuakse miljoneid veebisaite kogu veebis. Lehelt leiate suurepäraseid vitriine selle kohta, kuidas erinevaid kujundusi on võimalik saavutada Bootstrap Expo , mis kogub Bootstrapi abil loodud saite. Heitke pilk, hankige inspiratsiooni ja alustage oma disainivariatsiooni loomist.

Üldine alglaadimisviga nr 3: Bootstrapi CSS-faili muutmine

Selle lihtsaks ja lihtsaks muutmiseks tehke järgmist mitte muutke bootstrap.css faili.

Kui teete muudatusi bootstrap.css faili, muutuvad asjad väga kiiresti keeruliseks. Kui soovite Bootstrapi faile uuendada, puruneb kogu kujundus. Saate oma stiililehe alglaadimise vaikevärvid, stiilid, veerised, padjad ja kõik üle kirjutada. bootstrap.css Ei ole vaja puudutada stiilileht üldse.

Kas te ei tea VÄHEM ega SASS-i? Pole probleemi, saate luua oma CSS-faili ja originaalist bootstrap.css üle kirjutada, mida iganes soovite stiilileht. Nii nagu eelmises veas mainisime, on CSS-i tundmine kohustuslik. Looge oma uus CSS-i valija, kasutage seda HTML-is ja kui te pärast Bootstrapi stiile oma CSS-klassid deklareerite, kirjutavad teie definitsioonid Bootstrapi vaikeseaded üle.

Ikka tahad rohkem teada saada ja sügavamale sukelduda? Soovitan tungivalt teil seda teha. Kasutage Bootstrap LESS lähtekoodi. Saate paremini aru, mis toimub ja kus on, kui kasutate allikat LESS ja mitte staatilist CSS-i.

Üldine alglaadimisviga nr 4: Kasutage kõike, mida Bootstrap pakub

Nagu varem mainitud, on Bootstrap kõikehõlmav. See pakub palju kasutajaliidese komponente, HTML- ja CSS-kujundusemalle ning JavaScripti pistikprogramme. Aga palun, ole valiv. Te ei pea kasutama kõiki Bootstrapi funktsioone.

See kehtib eriti pistikprogrammide kohta. Valige ja valige ainult mõistlikud pistikprogrammid ja ärge kasutage kõike, sest see näeb kena ja lahe välja. Teie veebisaidil saab hõlpsasti üle pingutada. Alustuseks kaaluge, et te ei sisaldaks bootstrap.js faili ja looge sait, kasutades lihtsalt HTML-i ja CSS-i. Ja seejärel lisage ükshaaval komponente ainult vastavalt konkreetsetele rollidele.

Üldine alglaadimisviga nr 5: modaalse viiba väärkasutamine

Bootstrapi modaalid pakuvad paindlikke dialoogi viipasid minimaalse vajaliku funktsionaalsusega ja sellega kaasnevad nutikad vaikesätted. Kuigi modaali on lihtne kasutada ja see pakub rikkalikku kohandamist, peame tavaliste väärkasutuste vältimiseks silmas pidama mõningaid asju.

Kuvatakse korraga rohkem kui üks modaalne viip

Bootstrap ei toeta kattuvaid modaale. Ainult üks modaal korraga saab olla nähtav. Korraga saab kuvada rohkem kui ühte modaali, kuid selle nõuetekohaseks käsitsemiseks on vaja kirjutada kohandatud kood.

Bootstrapi modal ilmub tausta alla

Kui modaalsel konteineril või selle vanuselementil on fikseeritud või suhteline positsioon, ei kuvata modaali korralikult. Veenduge alati, et modaalsel konteineril ja selle põhielementidel pole spetsiaalset positsioneerimist. Parim tava on paigutada modaali HTML vahetult enne sulgemismärki või veelgi parem dokumendi tipptaseme kohale vahetult pärast avamärki. See on parim viis vältida muid modali välimust ja funktsionaalsust mõjutavaid komponente.

Mobiilseadmetes modaalne

On mõningaid hoiatusi, mida arendajad peavad modaalidega tegelemisel teadma virtuaalsete klaviatuuridega mobiilseadmed . See kehtib eriti iOS-i seadmed , kus on renderdamisviga, mis ei värskenda fikseeritud elementide asukohta virtuaalse klaviatuuri käivitamisel. Bootstrap sellega ei tegele, seega on arendaja ülesanne need olukorrad koodis kõnealuse rakenduse jaoks parimal viisil lahendada.

Üldine alglaadimisviga nr 6: faili sisestusnupu komponendi probleem

Bootstrapil pole failide üleslaadimise nupu jaoks määratud komponenti. Lihtsa ja elegantse lahenduse, mis kasutab ainult HTML-i ja CSS-i, saab saavutada järgmise näidiskoodiga:

Browse .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Sarnase efekti saamiseks on palju näiteid. See koodinäide on laenatud Cory LaViskalt ja tema saidil saate lugeda üksikasjalikumat selle probleemi selgitamine . Samuti on laiendatud näide suurema funktsionaalsusega, mis kasutab täiendavat JavaScripti koodi.

Üldine alglaadimisviga nr 7: JavaScripti ülemäära komplitseerimine ja „data-” atribuutide eiramine

Disainerid või lihtsalt algajad JavaScripti arendajad saavad väga hõlpsalt sukelduda veebiarendusse ja luua veebilehti, kasutades ainult HTML-i, CSS-i ja Bootstrapi. Kui nad pole kodeerimises eriti osavad, võivad nad sattuda JavaScripti väärkasutamise või lihtsalt liiga keeruka lõksu. Oluline on märkida, et kõiki Bootstrapi pistikprogramme saab kasutada puhtalt märgistus-API kaudu, ilma kirjutamine a üks rida JavaScripti. See on Bootstrapi esmaklassiline API ja see peaks olema pistikprogrammide kasutamisel teie esimene kaalutlus.

Näiteks saame seadistada data-toggle='modal' seadistades modaalse dialoogi JavaScripti kirjutamata juhtnupul nagu nupp või ankur ja edastage täiendavad parameetrid, kasutades data- atribuudid. Allolevas koodis sihime HTML-koodi ID-ga #myModal Oleme täpsustanud, et modaal ei sulgu, kui kasutaja klõpsab modalit väljapoole, kasutades data-backdrop valik ja me oleme keelanud põgenemisvõtme sündmuse, mis sulgeb modali koos data-keyboard valik. Kõik ühes HTML-koodireas:

Launch my modal

Üldine alglaadimisviga nr 8: Bootstrapi arendamist hõlbustavate tööriistade ignoreerimine

Vigu juhtub ja iga arendaja teeb neid aeg-ajalt. See on paratamatu, kuid oluline on see, kuidas veaga toime tulla. Bootstrapi meeskond märkas probleemijälgijat vaadates, et inimesed teevad mõningaid vigu sagedamini. Sellepärast proovisid nad arendusprotsessi automatiseerida. Tulemuseks on Bootlint , HTML-kiintööriist Bootstrapi projektide jaoks. Bootlinti saab kasutada kas brauseris või käsurealt Node.js-i kaudu ja see kontrollib Bootstrapped'i veebisaite automaatselt paljude levinud Bootstrapi kasutusvigade osas. Bootlinti lisamine veebiarenduse tööriistaketti võib kõrvaldada palju levinud vigu, mis tavaliselt projekti arengut pidurdavad.

Juhul, kui soovite Bootstrapi projekti kaasa aidata, tasub seda kontrollida Rorschach . Rorschach on Bootstrapi tõmbenõude tervisekontrolli bot, mis kontrollib iga uue tõmbenõude puhul paar kontrolli. Kui tervisekontroll ebaõnnestub, jätab see tõmbenõudele informatiivse kommentaari, milles selgitatakse viga ja kuidas seda parandada, ning sulgeb seejärel tõmbenõude.

Üldine alglaadimisviga nr 9: IE8 ja vanemate brauserite ühildamatuse probleemid

Bootstrap on loodud töötama kõige paremini uusimates töölaua- ja mobiilibrauserites. Vanemad brauserid võivad komponente ja elemente erinevas stiilis kuvada, kuid kõik peaks olema täielikult toimiv. Tugi sisaldab Internet Explorer 8 ja 9 koos olulise märkusega, et need brauserid ei toeta täielikult mõnda CSS3 atribuuti ja HTML5 elemente.

Internet Explorer 8 ja teiste vanemate brauserite täieliku toe saamiseks peate CSS3 meediumipäringute jaoks kasutama polüfilli Respond.js , HTML 5 vaheleht mis võimaldab kasutada HTML5 elemente ja korralikku IEtag HTML-peas, et tagada, et IE ei tööta ühilduvusrežiimis. Teie HTML-pea peaks lõpuks välja nägema umbes selline:

...

Respond.js Korral hoiduge järgmistest hoiatused arendus- ja tootmiskeskkondades.

Üldine alglaadimisviga nr 10: parimate tavade eiramine

Üks virna ületäitumise levinumaid küsimusi on see, kuidas panna menüü Bootstraps rippmenüü avanema hõljumise, mitte klõpsamise asemel. Kuigi selle küsimuse lahendus pole keeruline ja seda saab teha ainult CSS-i kasutades, pole see soovitatav. See funktsioon jäeti raamistikust meelega välja ja see on arendusmeeskonna tehtud kujundusotsus. Jällegi saab seda teha, kuid tuleb mõista selle tagajärgi ja mõista, et parimad tavad on olemas, eriti mobiilse esimese raamistiku puhul. Selle konkreetse küsimuse taga on see, et hõljuvate asjadega töötamine ei aita kasutajaid, kellel on puuteseadmed. Sellistes seadmetes pole hõljutust, puudutatakse ainult sündmusi. Seega ei tööta see üheski puutetundliku seadmega korralikult.

Bootstrapi vead Järeldus

Loodan, et see lühike Bootstrapi juhend aitab teil vältida mõningaid levinumaid vigu, selgeid tavalisi väärarusaamu ja aitab teil raamistikust suurema osa saada. Pidage meeles, et Bootstrap ei ole mõeldud kõigile ega sobi ka iga projekti jaoks. Raamistiku valimisel peate võtma aega dokumentatsiooni lugemiseks ning raamistikuga mängimiseks tuleb veidi aega kulutada, et selle toimimisest paremini aru saada. See kehtib ka Bootstrapi kohta.

Loe dokumentatsioon , proovidega proovige, katsetage põhitõed ja nautige uute ja ilusate kujunduste loomist.