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.

Ar y dudalen hon

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.

Newidynnau CSS

Ychwanegwyd yn v5.2.0

Gydag v5.1.1, gwnaethom safoni ein @imports gofynnol ar draws ein holl fwndeli CSS (gan gynnwys bootstrap.css, bootstrap-reboot.css, a bootstrap-grid.css) i gynnwys _root.scss. Mae hyn yn ychwanegu :rootnewidynnau CSS lefel i bob bwndel, waeth faint ohonynt sy'n cael eu defnyddio yn y bwndel hwnnw. Yn y pen draw, bydd Bootstrap 5 yn parhau i weld mwy o newidynnau CSS yn cael eu hychwanegu dros amser, er mwyn darparu mwy o addasu amser real heb yr angen i ail-grynhoi Sass bob amser. Ein hymagwedd yw cymryd ein newidynnau ffynhonnell Sass a'u trawsnewid yn newidynnau CSS. Y ffordd honno, hyd yn oed os nad ydych chi'n defnyddio newidynnau CSS, mae gennych chi holl bŵer Sass o hyd. Mae hyn yn dal i fynd rhagddo a bydd yn cymryd amser i'w weithredu'n llawn.

Er enghraifft, ystyriwch y newidynnau CSS hyn ar gyfer arddulliau :rootcyffredin :<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Yn ymarferol, mae'r newidynnau hynny wedyn yn cael eu cymhwyso yn Reboot fel hyn:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Sy'n eich galluogi i wneud addasiadau amser real sut bynnag y dymunwch:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Gellir diystyru rhagosodiad y porwr hwn trwy addasu'r $font-size-rootnewidyn.
Mae <body>hefyd yn gosod byd-eang font-family, font-weight, line-height, a color. 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 Bootstrap yn defnyddio “pentwr ffont brodorol” neu “stac ffontiau system” ar gyfer y rendro testun gorau posibl ar bob dyfais ac OS. Mae'r ffontiau system hyn wedi'u cynllunio'n benodol gyda dyfeisiau heddiw mewn golwg, gyda gwell rendro ar sgriniau, cefnogaeth ffontiau amrywiol, a mwy. Darllenwch fwy am bentyrrau ffont brodorol yn yr erthygl Smashing Magazine hon .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 amryliw. 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

Rheolau llorweddol

Mae'r <hr>elfen wedi'i symleiddio. Yn debyg i ragosodiadau porwr, <hr>mae s yn cael eu steilio trwy border-top, mae ganddynt ragosodiad opacity: .25, ac yn etifeddu eu border-colortrwy color, yn awtomatig, gan gynnwys pryd colormae'n cael ei osod trwy'r rhiant. Gellir eu haddasu gyda thestun, ffin, a chyfleustodau didreiddedd.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Rhestrau

Mae pob rhestr— <ul>, <ol>, a <dl>— wedi'u margin-topdileu a margin-bottom: 1rem. Nid oes gan restrau nythu margin-bottom. Rydym hefyd wedi ailosod yr padding-leftymlaen <ul>a'r <ol>elfennau.

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.

Cod mewnol

Lapiwch bytiau mewnol o god gyda <code>. Byddwch yn siwr i ddianc rhag cromfachau ongl HTML.

Er enghraifft, <section>dylid ei lapio fel llinell.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blociau cod

Defnyddiwch <pre>s ar gyfer llinellau cod lluosog. Unwaith eto, gwnewch yn siŵr eich bod yn dianc rhag unrhyw fracedi ongl yn y cod ar gyfer rendro priodol. Mae'r <pre>elfen yn cael ei ailosod i gael gwared ar ei margin-topa defnyddio remunedau ar gyfer ei margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Newidynnau

I ddangos newidynnau defnyddiwch y <var>tag.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Mewnbwn defnyddiwr

Defnyddiwch y <kbd>i nodi mewnbwn sy'n cael ei fewnbynnu fel arfer trwy fysellfwrdd.

I newid cyfeiriaduron, teipiwch cdac yna enw'r cyfeiriadur.
I olygu gosodiadau, pwyswch ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Allbwn sampl

I ddangos allbwn sampl o raglen defnyddiwch y <samp>tag.

Mae'r testun hwn i fod i gael ei drin fel allbwn sampl o raglen gyfrifiadurol.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Chwedl enghreifftiol

Mewnbwn enghreifftiol

E-bost enghreifftiol

Enghraifft o ffôn

url enghreifftiol

Rhif enghreifftiol

Chwilio enghreifftiol

Ystod enghreifftiol

Mewnbwn ffeil enghreifftiol

Enghraifft dewis

Gwiriwch y blwch ticio hwn

Opsiwn un yw hwn a'r llall Mae opsiwn dau yn rhywbeth arall sydd hefyd yn hynod o hir i ddangos lapio'r rheolaethau ffurf ffansi hyn. Mae opsiwn tri wedi'i analluogi

Ardal destun enghreifftiol

Enghraifft o ddyddiad

Amser enghreifftiol

Cyfrinair enghreifftiol

Enghraifft datetime-local

Wythnos enghreifftiol

Mis enghreifftiol

Enghraifft o liw

Allbwn enghreifftiol 100

Cefnogaeth mewnbwn dyddiad a lliw

Cofiwch nad yw mewnbynnau dyddiad yn cael eu cefnogi'n llawn gan bob porwr, sef Safari.

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

html

<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.

Yr elfen dalfyriad HTML .

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.

<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.

Ailgychwyn

Agwedd

Newidynnau CSS

Tudalen rhagosodiadau

Stack ffont brodorol

Penawdau a pharagraffau

Rheolau llorweddol

Rhestrau

Cod mewnol

Blociau cod

Newidynnau

Mewnbwn defnyddiwr

Allbwn sampl

Byrddau

Ffurflenni

Cefnogaeth mewnbwn dyddiad a lliw

Awgrymiadau ar fotymau

Elfennau amrywiol

Cyfeiriad

Blockquote

Elfennau mewnol

Crynodeb

[hidden]Priodoledd HTML5

anghydnawsedd jQuery

`[hidden]`Priodoledd HTML5