Source

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 rems-ren ordez ems erabiltzeko osagaien tarte eskalagarrirako.
Saihestu margin-top. Marjin bertikalak kolapsatu daitezke, eta ustekabeko emaitzak emanez. Are garrantzitsuagoa dena, norabide bakarra margineredu mental sinpleagoa da.
Gailuen tamainak errazteko eskalatzeko, bloke-elementuek s erabili behar dute rems-rako margin.
Mantendu font-lotutako propietateen deklarazioak ahalik eta gutxien, inheritahal den guztietan erabiliz.

Orriaren lehenetsiak

eta <html>elementuak <body>eguneratzen dira orrialde osorako lehenetsi hobeak emateko. Zehazkiago:

Elementu box-sizingguztietan ezarrita dago globalki, *::beforeeta *::after, barne border-box. Horrek bermatzen du deklaratutako elementuaren zabalera ez dela inoiz gainditzen betegarria edo ertzaren ondorioz.
Ez da oinarririk font-sizedeklaratzen <html>, baina 16pxsuposatzen da (arakatzailearen lehenetsia). font-size: 1remeuskarri-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-familyline-heighttext-align
Segurtasunerako, <body>deklaratu bat du background-color, lehenetsita #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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Hau Bootstrap osoan font-familyaplikatzen da eta automatikoki heredatzen da. <body>Globala aldatzeko font-family, eguneratu $font-family-baseeta berriro konpilatu Bootstrap.

Izenburuak eta paragrafoak

Goiburuko elementu guztiak —adibidez, <h1>— eta <p>berrezarri egiten dira margin-topkentzeko. Izenburuak margin-bottom: .5remeta paragrafoak gehitu margin-bottom: 1remdira 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-topmargin-bottom: 1remmargin-bottom

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem eta masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ak tristique libre voltpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem eta masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Estilo sinpleagoa, hierarkia argia eta tarte hobea lortzeko, deskribapen-zerrendek margins eguneratu dituzte. <dd>s berrezarri eta margin-leftgehitu . s lodiz daude .0margin-bottom: .5rem<dt>

Deskribapen zerrendak: Deskribapen zerrenda ezin hobea da terminoak definitzeko.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Aurrez formateatutako testua

Elementua <pre>berrezartzen da bere kentzeko margin-topeta bere remunitateak 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 .

Hau adibide-taula bat da, eta edukia deskribatzeko bere epigrafea da.
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 aplikatu display: inline-blockahal izateko.margin
<input>s, <select>s, <textarea>s eta <button>s Normalize-k zuzentzen ditu gehienbat, baina Berrabiarazteak haien margineta multzoak line-height: inheritere 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 elementuek cursor: pointernoiz dute :not(:disabled).

Aldaketa hauek, eta gehiago, jarraian erakusten dira.

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-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Izen osoa
[email protected]

Blokeoa

Blockquotes lehenetsia marginda 1em 40px, beraz, berrezarri dugu 0 0 1rembeste elementuekin koherenteagoa den zerbait lortzeko.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

Inline elementuak

Elementuak <abbr>oinarrizko estiloa jasotzen du paragrafoko testuen artean nabarmentzeko.

Nulla attr vitae elit libero, a pharetra augue.

Laburpen

Laburpenaren lehenetsia cursorda text, beraz, berrezarri dugu pointerelementuarekin 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 . displayIE10-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 displayda, ez da aldatzen eta elementuak dokumentuaren fluxuari eragin diezaiokeela esan nahi du, erabili .invisibleklasea .