Ailgychwyn

Mae Reboot, sef casgliad o newidiadau CSS elfen-benodol mewn un ffeil, yn cychwyn Bootstrap i ddarparu llinell sylfaen gain, gyson a syml i adeiladu arni.

Agwedd

Mae Reboot yn adeiladu ar Normalize, gan ddarparu llawer o elfennau HTML gydag arddulliau braidd yn farniadol gan ddefnyddio dewiswyr elfen yn unig. Gwneir steilio ychwanegol gyda dosbarthiadau yn unig. Er enghraifft, rydym yn ailgychwyn rhai <table>arddulliau ar gyfer llinell sylfaen symlach ac yn ddiweddarach yn darparu .table, .table-bordered, a mwy.

Dyma ein canllawiau a'n rhesymau dros ddewis beth i'w ddiystyru yn Reboot:

Diweddarwch rai gwerthoedd rhagosodedig porwr i ddefnyddio rems yn lle ems ar gyfer bylchau cydran graddadwy.
Osgoi margin-top. Gall ymylon fertigol gwympo, gan roi canlyniadau annisgwyl. Yn bwysicach fyth, mae un cyfeiriad marginyn fodel meddwl symlach.
Er mwyn graddio'n haws ar draws meintiau dyfeisiau, dylai elfennau bloc ddefnyddio rems ar gyfer margins.
Cadw datganiadau o fonteiddo cysylltiedig i'r lleiaf posibl, gan ddefnyddio inheritpryd bynnag y bo modd.

Tudalen rhagosodiadau

Mae'r <html>ac <body>elfennau'n cael eu diweddaru i ddarparu gwell rhagosodiadau ar draws y dudalen. Yn fwy penodol:

Mae box-sizingwedi'i osod yn fyd-eang ar bob elfen - gan gynnwys *::beforea *::after, i border-box. Mae hyn yn sicrhau nad eir byth yn uwch na lled datganedig yr elfen oherwydd padin neu ffin.
Nid oes unrhyw sylfaen font-sizewedi'i ddatgan ar y <html>, ond 16pxfe'i tybir (rhagosodiad y porwr). font-size: 1remyn cael ei gymhwyso ar <body>gyfer graddfa deipio ymatebol hawdd trwy ymholiadau cyfryngau tra'n parchu dewisiadau defnyddwyr a sicrhau dull mwy hygyrch.
Mae <body>hefyd yn gosod byd-eang font-family, line-height, a text-align. Etifeddir hyn yn ddiweddarach gan rai elfennau ffurf i atal anghysondebau ffontiau.
Er diogelwch, <body>mae gan y cwmni background-color, rhagosodedig i #fff.

Stack ffont brodorol

Mae'r ffontiau gwe rhagosodedig (Helvetica Neue, Helvetica, ac Arial) wedi'u gollwng yn Bootstrap 4 a'u disodli gan “pentwr ffont brodorol” ar gyfer y rendro testun gorau posibl ar bob dyfais ac OS. Darllenwch fwy am bentyrrau ffont brodorol yn yr erthygl Smashing Magazine hon .

$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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Mae hyn font-familyyn cael ei gymhwyso i'r <body>Bootstrap a'i etifeddu'n awtomatig yn fyd-eang. I newid y byd-eang font-family, diweddaru $font-family-baseac ail-grynhoi Bootstrap.

Penawdau a pharagraffau

Mae'r holl elfennau pennawd - ee, <h1>- ac <p>yn cael eu hailosod i gael eu margin-topdileu. Mae penawdau wedi'u margin-bottom: .5remhychwanegu a pharagraffau margin-bottom: 1remar gyfer bylchau hawdd.

Pennawd	Enghraifft
`<h1></h1>`	h1. Pennawd Bootstrap
`<h2></h2>`	h2. Pennawd Bootstrap
`<h3></h3>`	h3. Pennawd Bootstrap
`<h4></h4>`	h4. Pennawd Bootstrap
`<h5></h5>`	h5. Pennawd Bootstrap
`<h6></h6>`	h6. Pennawd Bootstrap

Rhestrau

Mae pob rhestr— <ul>, <ol>, a <dl>— wedi'u margin-topdileu a margin-bottom: 1rem. Nid oes gan restrau nythu margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cyfanrif molestie lorem yn massa
Facilitis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cyfanrif molestie lorem yn massa
Facilitis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ar gyfer steilio symlach, hierarchaeth glir, a bylchau gwell, mae rhestrau disgrifio wedi diweddaru margina. <dd>s ailosod margin-lefti 0ac ychwanegu margin-bottom: .5rem. <dt>s yn feiddgar .

Rhestri disgrifiadau: Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
Porthladd Malesuada: Etiam porta sem malesuada magna mollis euismod.

Testun wedi'i fformatio ymlaen llaw

Mae'r <pre>elfen yn cael ei ailosod i gael gwared ar ei margin-topa defnyddio remunedau ar gyfer ei margin-bottom.

.example-element {
  ymyl-gwaelod: 1rem;
}

Byrddau

Mae tablau wedi'u haddasu ychydig i arddull <caption>s, cwympo ffiniau, a sicrhau cyson text-aligndrwyddi draw. Daw newidiadau ychwanegol ar gyfer borderi, padin, a mwy gyda'r dosbarth.table .

Mae hwn yn dabl enghreifftiol, a dyma ei gapsiwn i ddisgrifio'r cynnwys.
Pennawd tabl	Pennawd tabl	Pennawd tabl	Pennawd tabl
Cell bwrdd	Cell bwrdd	Cell bwrdd	Cell bwrdd
Cell bwrdd	Cell bwrdd	Cell bwrdd	Cell bwrdd
Cell bwrdd	Cell bwrdd	Cell bwrdd	Cell bwrdd

Ffurflenni

Mae elfennau ffurf amrywiol wedi'u hailgychwyn ar gyfer arddulliau sylfaen symlach. Dyma rai o’r newidiadau mwyaf nodedig:

<fieldset>s heb unrhyw ffiniau, padin nac ymyl fel y gellir eu defnyddio'n hawdd fel deunydd lapio ar gyfer mewnbynnau unigol neu grwpiau o fewnbynnau.
<legend>s, fel setiau maes, hefyd wedi'u hail-lunio i'w harddangos fel pennawd o bob math.
<label>s yn cael eu gosod i display: inline-blockganiatáu margini gael eu cymhwyso.
<input>s, <select>s, <textarea>s, ac <button>s yn cael sylw yn bennaf gan Normalize, ond mae Reboot yn dileu eu margina setiau line-height: inherit, hefyd.
<textarea>s yn cael eu haddasu i fod yn newid maint fertigol yn unig gan fod newid maint llorweddol yn aml yn “torri” cynllun y dudalen.
<button>s ac <input>elfennau botwm wedi cursor: pointerpryd :not(:disabled).

Dangosir y newidiadau hyn, a mwy, isod.

Awgrymiadau ar fotymau

Mae ailgychwyn yn cynnwys ychwanegiad er role="button"mwyn newid y cyrchwr rhagosodedig i pointer. Ychwanegwch y briodwedd hon at elfennau i helpu i ddangos bod elfennau'n rhyngweithiol. Nid yw'r rôl hon yn angenrheidiol ar gyfer <button>elfennau sy'n cael eu cursornewid eu hunain.

Botwm elfen di-botwm

<span role="button" tabindex="0">Non-button element button</span>

Elfennau amrywiol

Cyfeiriad

Mae'r <address>elfen yn cael ei diweddaru i ailosod rhagosodiad y porwr font-styleo italici normal. line-heighthefyd yn awr wedi ei etifeddu, ac margin-bottom: 1remwedi ei ychwanegu. <address>s ar gyfer cyflwyno gwybodaeth gyswllt ar gyfer y hynafiaid agosaf (neu gorff cyfan o waith). Cadw fformatio trwy orffen llinellau gyda <br>.

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

Enw Llawn
[email protected]

Blockquote

Y rhagosodiad marginar blockquotes yw 1em 40px, felly rydyn ni'n ailosod hynny i 0 0 1remrywbeth mwy cyson ag elfennau eraill.

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

Rhywun enwog yn Source Title

Elfennau mewnol

Mae'r <abbr>elfen yn derbyn arddull sylfaenol i wneud iddi sefyll allan ymhlith testun paragraff.

Nulla attr vitae elit libero, a pharetra augue.

Crynodeb

Y rhagosodiad cursorar grynodeb yw text, felly rydym yn ailosod hwnnw i pointeri gyfleu y gellir rhyngweithio â'r elfen trwy glicio arno.

Rhai manylion

Mwy o wybodaeth am y manylion.

Hyd yn oed mwy o fanylion

Dyma hyd yn oed mwy o fanylion am y manylion.

`[hidden]`Priodoledd HTML5

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.