Berrabiarazi
Berrabiarazi, fitxategi bakarreko elementuen berariazko CSS aldaketen bilduma, abiarazi Bootstrap oinarri-oinarri dotore, koherente eta sinple bat emateko.
Hurbilketa
Berrabiarazi Normalizean oinarritzen da, eta HTML elementu asko iritzizko estiloak eskaintzen ditu elementu-hautatzaileak soilik erabiliz. Estilo osagarria klaseekin bakarrik egiten da. Esate baterako, estilo batzuk berrabiaraziko ditugu <table>
oinarri sinpleago baterako eta geroago .table
, .table-bordered
, eta gehiago eskaintzen ditugu.
Hona hemen berrabiaraztean zer baliogabetu aukeratzeko gure jarraibideak eta arrazoiak:
- Eguneratu arakatzailearen balio lehenetsi batzuk
rem
s-ren ordezem
s erabiltzeko osagaien tarte eskalagarrirako. - Saihestu
margin-top
. Marjin bertikalak kolapsatu daitezke, eta ustekabeko emaitzak emanez. Are garrantzitsuagoa dena, norabide bakarramargin
eredu mental sinpleagoa da. - Gailuen tamainak errazteko eskalatzeko, bloke-elementuek s erabili behar dute
rem
s-rakomargin
. - Mantendu
font
-lotutako propietateen deklarazioak ahalik eta gutxien,inherit
ahal den guztietan erabiliz.
Orriaren lehenetsiak
eta <html>
elementuak <body>
eguneratzen dira orrialde osorako lehenetsi hobeak emateko. Zehazkiago:
- Elementu
box-sizing
guztietan ezarrita dago globalki,*::before
eta*::after
, barneborder-box
. Horrek bermatzen du deklaratutako elementuaren zabalera ez dela inoiz gainditzen betegarria edo ertzaren ondorioz. - Ez da oinarririk
font-size
deklaratzen<html>
, baina16px
suposatzen da (arakatzailearen lehenetsia).font-size: 1rem
euskarri-kontsulten bidez erraz erantzuteko mota eskalatzeko aplikatzen da,<body>
erabiltzaileen hobespenak errespetatuz eta hurbilketa eskuragarriagoa bermatuz. - , , eta
<body>
global bat ere ezartzen du . Hau inprimaki-elementu batzuek geroago heredatzen dute letra-tipoen inkoherentziak saihesteko.font-family
line-height
text-align
- Segurtasunerako,
<body>
deklaratu bat dubackground-color
, lehenetsia#fff
.
Letra-tipo-pila natiboa
Web-letra-tipo lehenetsiak (Helvetica Neue, Helvetica eta Arial) Bootstrap 4-n kendu dira eta "jatorrizko letra-tipo pila" batekin ordezkatu dira, gailu eta sistema eragile guztietan testua hobeto errendatzeko. Irakurri gehiago Smashing Magazine artikulu honetan jatorrizko letra-tipoen pilarei buruz .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Kontuan izan letra-tipoen pilak emoji letra-tipoak biltzen dituenez, Unicode ikur/dingbat karaktere arrunt asko kolore anitzeko piktograma gisa errendatuko direla. Haien itxura aldatu egingo da, arakatzailearen/plataformaren jatorrizko emoji letra-tipoan erabiltzen den estiloaren arabera, eta ez dute CSS color
estiloek eragingo.
Hau Bootstrap osoan font-family
aplikatzen da eta automatikoki heredatzen da. <body>
Globala aldatzeko font-family
, eguneratu $font-family-base
eta berriro konpilatu Bootstrap.
Izenburuak eta paragrafoak
Goiburuko elementu guztiak —adibidez, <h1>
— eta <p>
berrezarri egiten dira margin-top
kentzeko. Izenburuak margin-bottom: .5rem
eta paragrafoak gehitu margin-bottom: 1rem
dira erraz tartekatzeko.
Goiburua | Adibidea |
---|---|
<h1></h1> |
h1. Bootstrap goiburua |
<h2></h2> |
h2. Bootstrap goiburua |
<h3></h3> |
h3. Bootstrap goiburua |
<h4></h4> |
h4. Bootstrap goiburua |
<h5></h5> |
h5. Bootstrap goiburua |
<h6></h6> |
h6. Bootstrap goiburua |
Zerrendak
Zerrenda guztiak — <ul>
, <ol>
, eta — kendu <dl>
dituzte eta bat . Habiaratutako zerrendek ez dute .margin-top
margin-bottom: 1rem
margin-bottom
- Zerrenda guztiei goiko marjina kendu zaie
- Eta haien beheko marjina normalizatu zen
- Habiaratutako zerrendek ez dute beheko marjinarik
- Horrela itxura berdinagoa dute
- Batez ere, zerrendako elementu gehiago jarraitzen dutenean
- Ezkerreko betegarria ere berrezarri da
- Hona hemen zerrenda ordenatua
- Zerrendako elementu batzuekin
- Itxura orokor bera du
- Aurreko ordenatu gabeko zerrenda bezala
Estilo sinpleagoa, hierarkia argia eta tarte hobea lortzeko, deskribapen-zerrendek margin
s eguneratu dituzte. <dd>
s berrezarri eta margin-left
gehitu . s lodiz daude .0
margin-bottom: .5rem
<dt>
- Deskribapen zerrendak
- Deskribapen zerrenda ezin hobea da terminoak definitzeko.
- Epea
- Terminoaren definizioa.
- Termino beraren bigarren definizioa.
- Beste termino bat
- Beste termino honen definizioa.
Aurrez formateatutako testua
Elementua <pre>
berrezartzen da bere kentzeko margin-top
eta bere rem
unitateak erabiltzeko margin-bottom
.
.example-element { marjina-behea: 1rem; }
Taulak
Taulak zertxobait doitzen dira estilora <caption>
, ertzak tolestu eta koherentea bermatzen dute text-align
. Ertzetarako, betegarrirako eta beste aldaketa gehigarriak klasearekin batera datoz.table
.
Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua |
---|---|---|---|
Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
Formak
Hainbat inprimaki-elementu berrabiarazi dira oinarrizko estilo sinpleagoetarako. Hona hemen aldaketa aipagarrienetako batzuk:
<fieldset>
s-ek ez dute ertzarik, betegarririk edo marjinarik, beraz, erraz erabil daitezke sarrera indibidual edo taldeen bilgarri gisa.<legend>
s, eremu-multzoek bezala, eraberritu egin dute goiburu gisa bistaratzeko.<label>
s ezarrita dago aplikatudisplay: inline-block
ahal izateko.margin
<input>
s,<select>
s,<textarea>
s eta<button>
s Normalize-k zuzentzen ditu gehienbat, baina Berrabiarazteak haienmargin
eta multzoakline-height: inherit
ere kentzen ditu.<textarea>
s aldatzen dira bertikalki tamainaz aldatzeko aukera izateko, tamaina horizontalean aldatzea askotan orriaren diseinua "hautsi" egiten baitu.<button>
s eta<input>
botoi elementuekcursor: pointer
noiz dute:not(:disabled)
.
Aldaketa hauek, eta gehiago, jarraian erakusten dira.
Erakusleak botoietan
Berrabiarazteak hobekuntza bat dakar role="button"
kurtsore lehenetsia aldatzeko pointer
. Gehitu atributu hau elementuei elementu interaktiboak direla adierazteko. Rol hori ez da beharrezkoa <button>
elementuentzat, zeinek beren cursor
aldaketa lortzen baitute.
<span role="button" tabindex="0">Non-button element button</span>
Hainbat elementu
Helbidea
Elementua eguneratzen <address>
da arakatzailearen lehenetsia berrezartzeko . orain ere heredatzen da, eta gehitu egin da. s arbaso hurbilenari (edo lan-talde oso bati) harremanetarako informazioa aurkezteko dira. Gorde formatua lerroekin amaituz .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Izen osoa
[email protected]
Blokeoa
Blockquotes lehenetsia margin
da 1em 40px
, beraz, berrezarri dugu 0 0 1rem
beste elementuekin koherenteagoa den zerbait lortzeko.
Aipamen ezagun bat, blockquote elementu batean jasotakoa.
Inline elementuak
Elementuak <abbr>
oinarrizko estiloa jasotzen du paragrafoko testuen artean nabarmentzeko.
Laburpen
Laburpenaren lehenetsia cursor
da text
, beraz, berrezarri dugu pointer
elementuarekin klik eginez interakzioa egin daitekeela adierazteko.
Xehetasun batzuk
Xehetasunei buruzko informazio gehiago.
Are xehetasun gehiago
Hona hemen xehetasunei buruzko xehetasun gehiago.
HTML5 [hidden]
atributua
HTML5-ek atributu global berri bat[hidden]
gehitzen du display: none
, lehenespenez estiloa duena. PureCSS -en ideia bat mailegatuz , lehenetsi hau hobetzen dugu ustekabean gainidaztea [hidden] { display: none !important; }
saihesteko . display
IE10-k berez onartzen ez duen arren [hidden]
, gure CSSko adierazpen esplizituak arazo horri aurre egiten dio.
<input type="text" hidden>
jQuery bateraezintasuna
[hidden]
$(...).hide()
ez da jQuery eta $(...).show()
metodoekin bateragarria . Hori dela eta, gaur egun ez ditugu bereziki onartzen elementuak [hidden]
kudeatzeko beste teknika batzuk.display
Elementu baten ikusgarritasuna aldatzeko, hau display
da, ez da aldatzen eta elementuak dokumentuaren fluxuari eragin diezaiokeela esan nahi du, erabili .invisible
klasea .