Berrabiarazi

Berrabiarazi, fitxategi bakarreko elementuen berariazko CSS aldaketen bilduma, abiarazi Bootstrap oinarri-oinarri dotore, koherente eta sinple bat emateko.

Orrialde honetan

Hurbilketa

Berrabiarazi Normalizean oinarritzen da, eta HTML elementu asko iritzizko estiloak eskaintzen ditu elementu-hautatzaileak soilik erabiliz. Estilo gehigarria 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.

CSS aldagaiak

v5.2.0-n gehitua

v5.1.1-ekin, beharrezkoak diren @imports-ak estandarizatu ditugu gure CSS sorta guztietan ( bootstrap.css, bootstrap-reboot.css, eta bootstrap-grid.css) barne hartzeko _root.scss. Honek CSS maila-aldagaiak gehitzen :rootdizkie sorta guztiei, horietako asko sorta horretan erabiltzen diren kontuan hartu gabe. Azken finean, Bootstrap -ek denboran zehar CSS aldagai gehiago gehitzen jarraituko du, denbora errealeko pertsonalizazio gehiago eskaintzeko Sass beti birkonpilatu beharrik gabe. Gure ikuspegia gure iturri Sass aldagaiak hartu eta CSS aldagai bihurtzea da. Horrela, nahiz eta CSS aldagairik erabili ez, Sassen ahalmen guztia izango duzu. Hau oraindik abian da eta denbora beharko da guztiz gauzatzeko.

Adibidez, kontuan hartu :rootCSS aldagai hauek ohiko <body>estiloetarako:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Praktikan, aldagai horiek Berrabiarazin aplikatzen dira honela:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Horrek denbora errealeko pertsonalizazioak egin ditzakezu nahi duzun moduan:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. $font-size-rootArakatzaile lehenetsi hau aldagaia aldatuz gainidatzi daiteke .
<body>Global , font-family, font-weight, line-heighteta color. Hau inprimaki-elementu batzuek geroago heredatzen dute letra-tipoen inkoherentziak saihesteko.
Segurtasunerako, <body>deklaratu bat du background-color, lehenetsita #fff.

Letra-tipo-pila natiboa

Bootstrap-ek "jatorrizko letra-tipo pila" edo "sistemako letra-tipo pila" erabiltzen du gailu eta sistema eragile guztietan testua errendatzerik onena lortzeko. Sistemaren letra-tipo hauek egungo gailuak kontuan hartuta diseinatu dira bereziki, pantailetan errendatze hobetuarekin, letra-tipo aldakorren laguntzarekin eta abar. Irakurri gehiago Smashing Magazine artikulu honetan jatorrizko letra-tipoen pilarei buruz .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Kontuan izan letra-tipo 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 colorestiloek eragingo.

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

Arau horizontalak

Elementua <hr>sinplifikatu egin da. Arakatzaileen lehenespenen antzera, <hr>s-k bidez estiloa border-topdute, lehenetsia dute opacity: .25eta automatikoki haien border-colorbidez heredatzen dute , gurasoen bidez ezartzen colordenean barne . colorTestu, ertz eta opakotasun utilitateekin alda daitezke.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Zerrendak

Zerrenda guztiak — <ul>, <ol>, eta — kendu <dl>dituzte eta bat . Habiaratutako zerrendek ez dute . On eta elementuak ere berrezarri ditugu .margin-topmargin-bottom: 1remmargin-bottompadding-left<ul><ol>

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 gehiagoren atzetik datozenean
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 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.
Epea: Terminoaren definizioa.; Termino beraren bigarren definizioa.
Beste termino bat: Beste termino honen definizioa.

Inline kodea

Itzulbiratu lerroko kode zatiak <code>. Ziurtatu HTML parentesi angeluetatik ihes egiten duzula.

Adibidez, <section>lerroan bezala bildu behar da.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kode blokeak

Erabili <pre>s kode-lerro anitzetarako. Berriro ere, ziurtatu kodearen angelu-kotxeetatik ihes egiten duzula errendatze egokia lortzeko. Elementua <pre>berrezartzen da bere kentzeko margin-topeta bere remunitateak erabiltzeko margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Aldagaiak

Aldagaiak adierazteko, erabili <var>etiketa.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Erabiltzailearen sarrera

Erabili <kbd>normalean teklatuaren bidez sartzen den sarrera adierazteko.

Direktorioak aldatzeko, idatzi cdeta ondoren direktorioaren izena.
Ezarpenak editatzeko, sakatu ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Laginaren irteera

Programa baten irteera laginak adierazteko, erabili <samp>etiketa.

Testu hau ordenagailu-programa baten lagin gisa tratatu nahi da.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Data eta kolorea sartzeko laguntza

Gogoan izan data-sarrerak ez dutela guztiz onartzen arakatzaile guztiek, hots, Safari-k.

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 cursoraldaketa lortzen baitute.

Botoirik gabeko elementuaren botoia

html

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

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait

Inline elementuak

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

HTML laburdura elementua .

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 mailegatuz , lehenetsi hau hobetzen dugu ustekabean gainidaztea [hidden] { display: none !important; }saihesteko .display

<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 dela aldatzen eta elementuak dokumentuaren fluxuari eragin diezaiokeela esan nahi du, erabili .invisibleklasea .

Berrabiarazi

Hurbilketa

CSS aldagaiak

Orriaren lehenetsiak

Letra-tipo-pila natiboa

Izenburuak eta paragrafoak

Arau horizontalak

Zerrendak

Inline kodea

Kode blokeak

Aldagaiak

Erabiltzailearen sarrera

Laginaren irteera

Taulak

Formak

Data eta kolorea sartzeko laguntza

Erakusleak botoietan

Hainbat elementu

Helbidea

Blokeoa

Inline elementuak

Laburpen

HTML5 [hidden]atributua

jQuery bateraezintasuna

HTML5 `[hidden]`atributua