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
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.
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-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. - 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
.
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 .
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.
Penawdau a pharagraffau
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 |
Rhestrau
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.
Testun wedi'i fformatio ymlaen llaw
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; }
Byrddau
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 |
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 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.<button>
s ac<input>
elfennau botwm wedicursor: pointer
pryd: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 cursor
newid eu hunain.
Elfennau amrywiol
Cyfeiriad
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]
Blockquote
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.
Elfennau mewnol
Mae'r <abbr>
elfen yn derbyn arddull sylfaenol i wneud iddi sefyll allan ymhlith testun paragraff.
Crynodeb
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.
[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.
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.