in English

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

Sylwch, oherwydd bod y pentwr ffontiau yn cynnwys ffontiau emoji, bydd llawer o gymeriadau symbol/dingbat Unicode cyffredin yn cael eu rendro fel pictograffau aml-liw. Bydd eu hymddangosiad yn amrywio, yn dibynnu ar yr arddull a ddefnyddir yn ffont emoji brodorol y porwr / platfform, ac ni fydd unrhyw colorarddulliau CSS yn effeithio arnynt.

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.

Mae ymyl uchaf pob rhestr wedi'i dynnu
Ac roedd eu hymyl gwaelod wedi'i normaleiddio
Nid oes ymyl gwaelod ar restrau nythu
- Fel hyn mae ganddyn nhw ymddangosiad mwy gwastad
- Yn enwedig pan fydd mwy o eitemau rhestr yn dilyn
Mae'r padin chwith hefyd wedi'i ailosod

Dyma restr drefnus
Gydag ychydig o eitemau rhestr
Mae ganddo'r un edrychiad cyffredinol
Fel y rhestr flaenorol heb ei threfnu

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.
Tymor: Diffiniad ar gyfer y term.; Ail ddiffiniad ar gyfer yr un term.
Term arall: Diffiniad ar gyfer y term arall hwn.

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.

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

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

Mae HTML5 yn ychwanegu priodoledd byd-eang newydd o'r enw[hidden] , sydd wedi'i steilio fel yn display: noneddiofyn. Gan fenthyg syniad gan PureCSS , rydym yn gwella ar y rhagosodiad hwn trwy wneud [hidden] { display: none !important; }i helpu i'w atal displayrhag cael ei ddiystyru'n ddamweiniol. Er [hidden]nad yw'n cael ei gefnogi'n frodorol gan IE10, mae'r datganiad penodol yn ein CSS yn mynd o gwmpas y broblem honno.

<input type="text" hidden>

anghydnawsedd jQuery

[hidden]nid yw'n gydnaws â dulliau $(...).hide()a $(...).show()dulliau jQuery. Felly, nid ydym ar hyn o bryd yn cymeradwyo'n arbennig [hidden]dechnegau eraill ar gyfer rheoli'r displayelfennau.

I newid gwelededd elfen yn unig, sy'n golygu displaynad yw wedi'i haddasu a bod yr elfen yn dal i allu effeithio ar lif y ddogfen, defnyddiwch y .invisibledosbarth yn lle hynny.