Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

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.

Dangosir y newidiadau hyn, a mwy, isod.

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

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.