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.
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
rem
s yn lleem
s ar gyfer bylchau cydran graddadwy. - Osgoi
margin-top
. Gall ymylon fertigol gwympo, gan roi canlyniadau annisgwyl. Yn bwysicach fyth, mae un cyfeiriadmargin
yn fodel meddwl symlach. - Er mwyn graddio'n haws ar draws meintiau dyfeisiau, dylai elfennau bloc ddefnyddio
rem
s ar gyfermargin
s. - Cadw datganiadau o
font
eiddo cysylltiedig i'r lleiaf posibl, gan ddefnyddioinherit
pryd bynnag y bo modd.
Mae'r <html>
ac <body>
elfennau'n cael eu diweddaru i ddarparu gwell rhagosodiadau ar draws y dudalen. Yn fwy penodol:
- Mae
box-sizing
wedi'i osod yn fyd-eang ar bob elfen - gan gynnwys*::before
a*::after
, iborder-box
. Mae hyn yn sicrhau nad eir byth yn uwch na lled datganedig yr elfen oherwydd padin neu ffin.- Nid oes unrhyw sylfaen
font-size
wedi'i ddatgan ar y<html>
, ond16px
fe'i tybir (rhagosodiad y porwr).font-size: 1rem
yn cael ei gymhwyso ar<body>
gyfer graddfa deipio ymatebol hawdd trwy ymholiadau cyfryngau tra'n parchu dewisiadau defnyddwyr a sicrhau dull mwy hygyrch.
- Nid oes unrhyw sylfaen
- Mae
<body>
hefyd yn gosod byd-eangfont-family
,line-height
, atext-align
. Etifeddir hyn yn ddiweddarach gan rai elfennau ffurf i atal anghysondebau ffontiau. - Er diogelwch,
<body>
mae gan y cwmnibackground-color
, rhagosodedig i#fff
.
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 .
Mae hyn font-family
yn 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-base
ac ail-grynhoi Bootstrap.
Mae'r holl elfennau pennawd - ee, <h1>
- ac <p>
yn cael eu hailosod i gael eu margin-top
dileu. Mae penawdau wedi'u margin-bottom: .5rem
hychwanegu a pharagraffau margin-bottom: 1rem
ar gyfer bylchau hawdd.
Pennawd | Enghraifft |
---|---|
|
h1. Pennawd Bootstrap |
|
h2. Pennawd Bootstrap |
|
h3. Pennawd Bootstrap |
|
h4. Pennawd Bootstrap |
|
h5. Pennawd Bootstrap |
|
h6. Pennawd Bootstrap |
Mae pob rhestr— <ul>
, <ol>
, a <dl>
— wedi'u margin-top
dileu 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 margin
a. <dd>
s ailosod margin-left
i 0
ac 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.
Mae'r <pre>
elfen yn cael ei ailosod i gael gwared ar ei margin-top
a defnyddio rem
unedau ar gyfer ei margin-bottom
.
.example-element { ymyl-gwaelod: 1rem; }
Mae tablau wedi'u haddasu ychydig i arddull <caption>
s, cwympo ffiniau, a sicrhau cyson text-align
drwyddi draw. Daw newidiadau ychwanegol ar gyfer borderi, padin, a mwy gyda'r dosbarth.table
.
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 |
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 idisplay: inline-block
ganiatáumargin
i gael eu cymhwyso.<input>
s,<select>
s,<textarea>
s, ac<button>
s yn cael sylw yn bennaf gan Normalize, ond mae Reboot yn dileu eumargin
a setiauline-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.
Mae'r <address>
elfen yn cael ei diweddaru i ailosod rhagosodiad y porwr font-style
o italic
i normal
. line-height
hefyd yn awr wedi ei etifeddu, ac margin-bottom: 1rem
wedi 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Enw Llawn
[email protected]
Y rhagosodiad margin
ar blockquotes yw 1em 40px
, felly rydyn ni'n ailosod hynny i 0 0 1rem
rywbeth mwy cyson ag elfennau eraill.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.
Mae'r <abbr>
elfen yn derbyn arddull sylfaenol i wneud iddi sefyll allan ymhlith testun paragraff.
Y rhagosodiad cursor
ar grynodeb yw text
, felly rydym yn ailosod hwnnw i pointer
i 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.
Mae HTML5 yn ychwanegu priodoledd byd-eang newydd o'r enw[hidden]
, sydd wedi'i steilio fel yn display: none
ddiofyn. Gan fenthyg syniad gan PureCSS , rydym yn gwella ar y rhagosodiad hwn trwy wneud [hidden] { display: none !important; }
i helpu i'w atal display
rhag 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.
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 display
elfennau.
I newid gwelededd elfen yn unig, sy'n golygu display
nad yw wedi'i haddasu a bod yr elfen yn dal i allu effeithio ar lif y ddogfen, defnyddiwch y .invisible
dosbarth yn lle hynny.