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. Marjina bertikalak kolapsatu daitezke, 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.
  • fontMantendu -erlazionatutako propietateen adierazpenak 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, 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-tipo-pilei 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 volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem eta masa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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.

Aldaketa hauek, eta gehiago, jarraian erakusten dira.

Kondaira adibidea

100

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, hori berrezarri dugu pointerelementuarekin klik eginda interakzionatu 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 mailegatuta , lehenetsi hau hobetzen dugu ustekabean gainidaztea [hidden] { display: none !important; }saihesteko . displayIE10-k natiboki onartzen ez duen arren [hidden], gure CSSko adierazpen esplizituak arazo hori konpontzen du.

<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 .