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 erantzunak 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 arakatzaileak, oro har, 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 .
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
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.