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.
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)
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.
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.
Bootstrap-en bi z-indexeskala daude: osagai baten barruan dauden elementuak eta gainjarritako osagaiak.
- 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 partekatzen0dute3. 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.
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 ausazkoa da 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 .
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 arakatzaile orokorrak funtzionalitate handia eskaintzen dizu.
Printzipio hau gure lehen mailako JavaScript API da dataatributuak. 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
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.
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.