Hurbilketa

Ikasi Bootstrap eraikitzeko eta mantentzeko erabiltzen diren printzipio, estrategia eta teknikei buruz, errazago pertsonalizatu eta heda dezazun.

Hasierako orrialdeek proiektuari eta zer eskaintzen duen sarrera eskaintzen duten arren, dokumentu honek Bootstrap-en egiten ditugun gauzak zergatik egiten ditugun aztertzen du. Sarean eraikitzeko dugun filosofia azaltzen du, besteek gugandik ikas dezaten, gurekin lagundu eta hobetzen laguntzeko.

Ondo soinua ez den zerbait ikusten duzu, edo agian hobeto egin liteke? Ireki gai bat — gustatuko litzaiguke zurekin eztabaidatzea.

Laburpen

Horietako bakoitzean gehiago murgilduko gara, baina maila altuan, hona hemen gure ikuspegia gidatzen duena.

• Osagaiek sentikorrak eta mugikorrak izan behar dute lehenik
• Osagaiak oinarrizko klase batekin eraiki behar dira eta modifikatzaile klaseen bidez zabaldu
• Osagaien egoerak z-indizeko eskala komun bat bete beharko lukete
• Ahal den guztietan, nahiago HTML eta CSS inplementazioa JavaScript baino
• Ahal den guztietan, erabili utilitateak estilo pertsonalizatuen gainean
• Ahal den guztietan, saihestu HTML eskakizun zorrotzak ezartzea (haurren hautatzaileak)

Erantzunkorra

Bootstrap-en responsive-estiloak responsive-ak izateko eraiki dira, sarritan mugikorretarako lehenik deitzen den ikuspegia . Termino hau gure dokumentuetan erabiltzen dugu eta neurri handi batean ados gaude, baina batzuetan zabalegia izan daiteke. Osagai guztiek Bootstrap-en guztiz sentikorra izan behar ez duten arren, ikuspegi sentikorra hau CSS gainidatziak murriztea da, bista handitzen den heinean estiloak gehitzera bultzatuz.

Bootstrap-en, gure komunikabideetako kontsultetan ikusiko duzu hori argien. Kasu gehienetan, min-widtheten-puntu zehatz batean aplikatzen hasten diren eta eten-puntu altuetatik aurrera egiten diren kontsultak erabiltzen ditugu. Adibidez, a - tik infinituraino .d-noneaplikatzen da. min-width: 0Bestalde, a .d-md-noneeten puntu ertainetik eta gora aplikatzen da.

Batzuetan max-widthosagai baten berezko konplexutasunak hala eskatzen duenean erabiliko dugu. Batzuetan, baliogabetze hauek funtzionalki eta mentalki argiagoak dira inplementatzeko eta onartzen gure osagaietako oinarrizko funtzionalitatea berridaztea baino. Ikuspegi hori mugatzen ahalegintzen gara, baina noizean behin erabiliko dugu.

Klaseak

Gure Berrabiarazteaz gain, arakatzaileen arteko normalizazio-estilo-orria, gure estilo guztiek klaseak hautatzaile gisa erabiltzea dute helburu. Horrek esan nahi du estilo-hautatzaileetatik (adibidez, input[type="text"]) eta kanpoko klase nagusietatik (adibidez, ) .parent .childbaztertzea, estilo espezifikoegiak egiten dituztenak erraz gainidazteko.

Horrela, osagaiak oinarrizko klase batekin eraiki behar dira, baliogabetu beharreko propietate-balio bikote arruntak biltzen dituena. Adibidez, .btneta .btn-primary. .btnEstilo arrunt guztietarako erabiltzen dugu display, padding, eta border-width. Ondoren, modifikatzaileak erabiltzen .btn-primaryditugu kolorea gehitzeko, atzeko planoaren kolorea, ertzaren kolorea, etab.

Aldagailu-klaseak aldaera anitzetan aldatu beharreko propietate edo balio anitz daudenean soilik erabili behar dira. Aldatzaileak ez dira beti beharrezkoak, beraz, ziurtatu kode lerroak gordetzen ari zarela eta horiek sortzean beharrezkoak ez diren gainidatziak saihesten dituzula. Aldatzaileen adibide onak gure gaiaren kolore-klaseak eta tamaina-aldaerak dira.

z-indizeko eskalak

Bootstrap-en bi z-indexeskala daude: osagai baten barruan dauden elementuak eta gainjarritako osagaiak.

Osagaien elementuak

• Bootstrap-en osagai batzuk elementu gainjarriekin eraikitzen dira, ertz bikoitzak saihesteko borderpropietatea aldatu gabe. Adibidez, botoi-taldeak, sarrera-taldeak eta orria.
• Osagai hauek bidezko z-indexeskala estandarra partekatzen 0dute 3.
• 0lehenetsia da (hasierakoa), 1da :hover, 2da :active/ da .activeeta 3da :focus.
• Planteamendu honek erabiltzaileen lehentasun handienaren itxaropenarekin bat dator. Elementu bat zentratuta badago, begi-bistan eta erabiltzailearen arreta dago. Elementu aktiboak bigarren altuenak dira egoera adierazten dutelako. Pasatzea hirugarren maila altuena da erabiltzailearen asmoa adierazten duelako, baina ia edozer pasa daiteke.

Osagaiak gainjartzea

Bootstrap-ek nolabaiteko gainjartze gisa funtzionatzen duten hainbat osagai biltzen ditu. Honek, altuenen ordenan z-index, goitibeherako zerrendak, nabigazio-barra finkoak eta itsaskorrak, modalak, tresna-aholkuak eta popover-ak barne hartzen ditu. z-indexOsagai hauek mailan hasten den eskala propioa dute 1000. Hasierako zenbaki hau arbitrarioki aukeratu zen eta gure estiloen eta zure proiektuaren estilo pertsonalizatuen arteko buffer txiki gisa balio du.

Gainjartze-osagai bakoitzak bere z-indexbalioa apur bat handitzen du, UI printzipio arruntek erabiltzaileari zuzendutako edo pasatzean jarritako elementuak uneoro ikusgai egon daitezen. Adibidez, modal bat dokumentuen blokeoa da (adibidez, ezin duzu beste ekintzarik egin modalaren ekintza izan ezik), beraz, gure nabigazio-barren gainean jartzen dugu.

Lortu informazio gehiago honi buruz gure z-indexdiseinu-orrian .

HTML eta CSS JS bidez

Ahal den guztietan, nahiago dugu HTML eta CSS idatzi JavaScript baino. Oro har, HTML eta CSS emankorragoak dira eta esperientzia maila ezberdinetako jende gehiagorentzat eskuragarriagoak dira. HTML eta CSS ere azkarragoak dira zure arakatzailean JavaScript baino, eta zure arakatzaileak, oro har, funtzionalitate handia eskaintzen dizu.

Printzipio hau dataatributuak erabiliz gure lehen mailako JavaScript APIa da. Ez duzu ia JavaScript idatzi behar gure JavaScript pluginak erabiltzeko; horren ordez, idatzi HTML. Irakurri honi buruzko informazio gehiago gure JavaScript orrialdean .

Azkenik, gure estiloak web-elementu arrunten oinarrizko jokabideetan oinarritzen dira. Ahal den guztietan, nabigatzaileak eskaintzen duena erabili nahiago dugu. Adibidez, .btnklase bat ia edozein elementutan jar dezakezu, baina elementu gehienek ez dute balio semantikorik edo arakatzailearen funtzionaltasunik ematen. Horren ordez, <button>s eta <a>s erabiltzen ditugu.

Gauza bera gertatzen da osagai konplexuagoekin. Sarrera baten egoeran oinarritutako elementu nagusi bati klaseak gehitzeko gure inprimakiak baliozkotzeko plugina idatz genitzakeen arren , horrela testuari gorria esateko estiloa emanez, nahiago dugu arakatzaile bakoitzak eskaintzen dizkigun :valid/ sasi-elementuak erabiltzea.:invalid

Utilitateak

Erabilgarritasun-klaseak (lehen Bootstrap 3-n laguntzaileak ziren) aliatu indartsuak dira CSS puzketaren eta orriaren errendimendu eskasaren aurka borrokatzeko. Erabilgarritasun-klase bat propietate-balio parekatze bakar eta aldaezina da normalean klase gisa adierazita (adibidez, .d-blockadierazten du display: block;). Beren erakargarri nagusia HTML idaztean erabiltzeko abiadura da eta idatzi behar duzun CSS pertsonalizatuen kopurua mugatzea.

Zehazki, CSS pertsonalizatuari dagokionez, erabilgarritasunek fitxategiaren tamaina handitzeari aurre egiten lagundu dezakete gehien errepikatzen diren jabetza-balio bikoteak klase bakarrean murriztuz. Horrek eragin izugarria izan dezake eskalan zure proiektuetan.

HTML malgua

Beti posible ez den arren, osagaien HTML eskakizunetan dogmatikoegiak izan ez daitezen ahalegintzen gara. Horrela, gure CSS hautatzaileetan klase bakarrean zentratzen gara eta berehalako haurren hautatzaileak saihesten saiatzen gara ( >). Horrek malgutasun handiagoa ematen dizu inplementazioan eta gure CSS sinpleagoa eta zehatzagoa izaten laguntzen du.

Kode-konbentzioak

Code Guide (Bootstrap sortzailekidearena, @mdo) gure HTML eta CSS Bootstrap-en nola idazten ditugun dokumentatzen du. Formatu orokorrari buruzko jarraibideak zehazten ditu, zentzu oneko lehenetsiak, jabetza eta atributuen ordenak eta abar.

Stylelint erabiltzen dugu estandar hauek eta gehiago gure Sass/CSS-en betearazteko. Gure Stylelint konfigurazio pertsonalizatua kode irekikoa da eta besteek erabiltzeko eta hedatzeko erabilgarri dago.

Vnu-jar erabiltzen dugu HTML estandarra eta semantikoa betearazteko, baita ohiko erroreak detektatzeko ere.