Ath-thòisich

Reboot, cruinneachadh de dh’ atharrachaidhean CSS a tha sònraichte do eileamaid ann an aon fhaidhle, kickstart Bootstrap gus bun-loidhne eireachdail, cunbhalach agus sìmplidh a thoirt seachad airson togail air.

Air an duilleig seo

Dòigh-obrach

Bidh Reboot a’ togail air Normalize, a’ toirt seachad mòran eileamaidean HTML le stoidhlichean beagan beachdail a’ cleachdadh dìreach taghadairean eileamaid. Chan eil stoidhle a bharrachd air a dhèanamh ach le clasaichean. Mar eisimpleir, bidh sinn ag ath-thòiseachadh cuid de <table>stoidhlichean airson bun-loidhne nas sìmplidh agus nas fhaide air adhart bheir sinn seachad .table, .table-bordered, agus barrachd.

Seo an stiùireadh agus na h-adhbharan againn airson taghadh dè a bu chòir a dhol thairis air ann an Reboot:

Ùraich cuid de luachan bunaiteach brabhsair gus s a chleachdadh reman àite ems airson farsaingeachd phàirtean so-ruigsinneach.
Seachain margin-top. Faodaidh oirean dìreach tuiteam, a 'toirt seachad toraidhean ris nach robh dùil. Nas cudromaiche ge-tà, tha aon stiùireadh marginna mhodail inntinn nas sìmplidh.
Airson sgèileadh nas fhasa thar meudan innealan, bu chòir eileamaidean bloca s a chleachdadh remairson margins.
Cùm dearbhaidhean mu fontthogalaichean co-cheangailte ris a’ char as lugha, a’ cleachdadh inheritfar a bheil sin comasach.

CSS caochladairean

Air a chur ris ann an v5.1.1

Le v5.1.1, rinn sinn riaghailteachadh air na bha a dhìth oirnn @importthairis air na pasganan CSS againn gu lèir (a’ gabhail a -steach bootstrap.css, bootstrap-reboot.css, agus bootstrap-grid.cssa’ toirt a-steach _root.scss. Cuiridh seo :rootcaochladairean ìre CSS ris a h-uile pasgan, ge bith cia mheud dhiubh a thathas a’ cleachdadh sa phasgan sin. faic barrachd chaochladairean CSS air an cur ris thar ùine.

Ro-shealladh duilleag

Tha na h-eileamaidean <html>agus <body>na h-eileamaidean air an ùrachadh gus bunaitean nas fheàrr a thoirt seachad air feadh na duilleige. Nas mionaidiche:

Tha box-sizingan suidheachadh air feadh na cruinne air gach eileamaid - a’ toirt a-steach *::beforeagus *::after, gu border-box. Bidh seo a’ dèanamh cinnteach nach tèid an leud ainmichte de eileamaid a-riamh thairis air mar thoradh air pleadhag no crìoch.
- Chan eil bunait sam bith font-sizeair ainmeachadh air an <html>, ach 16pxthathar a 'gabhail ris (bunaiteach a' bhrabhsair). font-size: 1remair a chuir an sàs <body>airson sgèileadh seòrsa freagairteach furasta tro cheistean meadhanan fhad ‘s a tha e a’ toirt urram do roghainnean luchd-cleachdaidh agus a ’dèanamh cinnteach à dòigh-obrach nas ruigsinneach. Gabhaidh am brobhsair bunaiteach seo a dhol seachad le bhith ag atharrachadh a' $font-size-rootchaochlaidich.
Tha <body>seo cuideachd a’ suidheachadh cruinne font-family, font-weight, line-height, agus color. Tha seo air a shealbhachadh nas fhaide air adhart le cuid de dh’ eileamaidean cruth gus casg a chuir air neo-chunbhalachd cruth-clò.
Airson sàbhailteachd, <body>tha suaicheantas dearbhte aig an neach-cleachdaidh background-color, a’ dol gu #fff.

Stack font dùthchasach

Bidh Bootstrap a’ cleachdadh “stack cruth-clò dùthchasach” no “stack font system” airson an teacsa as fheàrr a thoirt seachad air gach inneal agus OS. Chaidh na clòidean siostam seo a dhealbhadh gu sònraichte le innealan an latha an-diugh san amharc, le tairgse nas fheàrr air scrionaichean, taic cruth-clò caochlaideach, agus barrachd. Leugh tuilleadh mu chruachan cruth-clò dùthchasach san artaigil Smashing Magazine seo .

$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,
  // 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;

Thoir an aire, leis gu bheil an stac cruth-clò a’ toirt a-steach clòidean emoji, gun tèid mòran de charactaran cumanta samhla / dingbat unicode a thoirt seachad mar dhealbhan ioma-dathte. Bidh an coltas eadar-dhealaichte, a rèir an stoidhle a chleachdar ann an cruth-clò emoji dùthchasach a’ bhrobhsair/àrd-ùrlar, agus cha toir colorstoidhlichean CSS sam bith buaidh orra.

Tha seo font-familyair a chuir an sàs <body>agus air a shealbhachadh gu fèin-ghluasadach air feadh na cruinne air feadh Bootstrap. Gus an cruinne atharrachadh font-family, ùrachadh $font-family-baseagus ath-chruinneachadh Bootstrap.

CSS caochladairean

Mar a bhios Bootstrap 5 a ’leantainn air adhart a’ fàs aibidh, thèid barrachd is barrachd stoidhlichean a thogail le caochladairean CSS mar dhòigh air barrachd gnàthachadh fìor-ùine a thoirt seachad gun fheum air Sass ath-chruinneachadh an-còmhnaidh. Is e an dòigh-obrach againn na caochladairean stòr Sass againn a ghabhail agus an cruth-atharrachadh gu caochladairean CSS. San dòigh sin, eadhon ged nach cleachd thu caochladairean CSS, tha cumhachd Sass agad fhathast. Tha seo fhathast a’ dol air adhart agus bheir e ùine airson a làn bhuileachadh.

Mar eisimpleir, smaoinich air na :rootcaochladairean CSS seo airson <body>stoidhlichean cumanta:

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

Ann an cleachdadh, tha na caochladairean sin an uairsin air an cur an sàs ann an Reboot mar seo:

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

A leigeas leat gnàthachadh fìor-ùine a dhèanamh ge bith dè as toil leat:

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

Cinn agus paragrafan

Tha na h-eileamaidean cinn uile - me, <h1>-agus <p>gan ath-shuidheachadh gus an toirt air margin-topfalbh. Tha cinn air margin-bottom: .5remcur ris agus paragrafan margin-bottom: 1remairson farsaingeachd furasta.

Ceann-cinnidh	eisimpleir
`<h1></h1>`	h1. Ceann-uidhe Bootstrap
`<h2></h2>`	h2. Ceann-uidhe Bootstrap
`<h3></h3>`	h3. Ceann-uidhe Bootstrap
`<h4></h4>`	h4. Ceann-uidhe Bootstrap
`<h5></h5>`	h5. Ceann-uidhe Bootstrap
`<h6></h6>`	h6. Ceann-uidhe Bootstrap

Liostaichean

Tha na liostaichean uile - <ul>, <ol>, agus <dl>- air an margin-toptoirt air falbh agus margin-bottom: 1rem. Chan eil liostaichean neadachaidh margin-bottom. Tha sinn cuideachd air an inneal padding-leftagus <ul>na h- <ol>eileamaidean ath-shuidheachadh.

Tha an iomall àrd aca uile air a thoirt air falbh
Agus bha an iomall ìosal aca àbhaisteach
Chan eil iomall bun aig liostaichean neadachaidh
- San dòigh seo tha coltas nas cothromaiche orra
- Gu sònraichte nuair a bhios barrachd nithean liosta air a leantainn
Chaidh am pleadhag chlì ath-shuidheachadh cuideachd

Seo liosta òrdaichte
Le beagan rudan liosta
Tha an aon shealladh iomlan aige
Mar an liosta roimhe gun òrdugh

Airson stoidhle nas sìmplidhe, rangachd shoilleir, agus farsaingeachd nas fheàrr, tha liostaichean tuairisgeul air margins. <dd>s ath-shuidheachadh margin-leftgu 0agus cuir ris margin-bottom: .5rem. <dt>s dàna .

Liostaichean tuairisgeul: Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Teirm: Mìneachadh airson an teirm.; An dàrna mìneachadh airson an aon teirm.
Teirm eile: Mìneachadh airson an teirm eile seo.

Còd a-staigh

Paisg criomagan còd in-loidhne le <code>. Dèan cinnteach gun teich thu bho camagan ceàrn HTML.

Mar eisimpleir, <section>bu chòir a bhith air a phasgadh mar inline.

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

Blocaichean còd

Cleachd <pre>s airson iomadh loidhne de chòd. A-rithist, dèan cinnteach gun teich thu bho camagan ceàrn sam bith sa chòd airson a bhith a’ toirt seachad ceart. Tha an <pre>eileamaid air ath-shuidheachadh gus na h-aonadan aige a thoirt air falbh margin-topagus remaonadan a chleachdadh airson a faidhle margin-bottom.

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

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

Caochlaidhean

Airson caochladairean a chomharrachadh cleachd an <var>taga.

y = m x + b

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

Teachd-a-steach cleachdaiche

Cleachd an <kbd>gus cuir a-steach a tha mar as trice air a chuir a-steach tro mheur-chlàr a chomharrachadh.

Gus clàran atharrachadh, dèan seòrsa cdagus ainm an eòlaire an uairsin.
Gus roghainnean a dheasachadh, brùth ctrl + ,

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>

Toradh sampall

Airson sampall toradh bho phrògram a chomharrachadh cleachd an <samp>taga.

Thathas an dùil gun tèid dèiligeadh ris an teacsa seo mar thoradh sampall bho phrògram coimpiutair.

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

Clàir

Tha bùird air an atharrachadh beagan a rèir stoidhle <caption>s, tuiteam crìochan, agus dèanamh cinnteach gu bheil iad cunbhalach text-alignair feadh. Bidh atharrachaidhean a bharrachd airson crìochan, pleadhag, agus barrachd a’ tighinn leis a’ .tablechlas .

Is e seo clàr eisimpleir, agus seo an tiotal aige airson cunntas a thoirt air na th’ ann.
Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr
Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla

Foirmean

Chaidh diofar eileamaidean cruth ath-thòiseachadh airson stoidhlichean bunaiteach nas sìmplidh. Seo cuid de na h-atharrachaidhean as ainmeil:

<fieldset>s chan eil crìochan, pleadhag no iomall aca gus am bi iad furasta an cleachdadh mar phasganan airson cuir a-steach fa leth no buidhnean de chuir a-steach.
<legend>s, mar raointean-raoin, cuideachd air an ath-sgrìobhadh gus a bhith air an taisbeanadh mar cheann de sheòrsa.
<label>s air an suidheachadh gus display: inline-blockan tèid marginan cur an sàs.
<input>Bidh Normalize sa mhòr-chuid a’ dèiligeadh ri s, <select>s, <textarea>s, agus <button>s, ach bidh Reboot a’ toirt air falbh an cuid marginagus na seataichean line-height: inherit, cuideachd.
<textarea>s air an atharrachadh gus nach gabh ath-mheudachadh ach gu dìreach leis gu bheil ath-mheudachadh còmhnard gu tric a’ “briseadh” cruth na duilleige.
<button>s agus <input>eileamaidean putan cursor: pointernuair a bhios :not(:disabled).

Tha na h-atharrachaidhean sin, agus barrachd, air an taisbeanadh gu h-ìosal.

Uirsgeul eisimpleir

Teachd-a-steach eisimpleir

Eisimpleir post-dealain

Eisimpleir fòn

Eisimpleir url

Eisimpleir àireamh

Lorg eisimpleir

Raon eisimpleir

Eisimpleir cuir a-steach faidhle

Tagh eisimpleir

Thoir sùil air a’ bhogsa-seic seo

Is e roghainn a h-aon seo agus sin Tha roghainn a dhà na rud eile a tha cuideachd air leth fada gus sealltainn gu bheil na smachdan cruth sùbailte sin air an còmhdachadh. Tha roghainn a trì à comas

Eisimpleir de raon teacsa

Ceann-latha eisimpleir

Eisimpleir ùine

Eisimpleir facal-faire

Eisimpleir ceann-latha - ionadail

Seachdain eisimpleir

Mìos eisimpleir

Eisimpleir dath

Toradh eisimpleir 100

Taic cuir a-steach ceann-latha & dath

Cumaibh cuimhne nach eil cuir a-steach ceann-latha a ’ faighinn làn thaic leis a h-uile brobhsair, is e sin Safari.

Comharran air na putanan

Tha ath-thòiseachadh a’ toirt a-steach àrdachadh airson role="button"an cursair bunaiteach atharrachadh gu pointer. Cuir am feart seo ri eileamaidean gus sealltainn gu bheil eileamaidean eadar-ghnìomhach. Chan eil an dreuchd seo riatanach airson <button>eileamaidean, a gheibh an cursoratharrachadh fhèin.

Putan eileamaid gun phutan

<span role="button" tabindex="0">Non-button element button</span>

Eileamaidean measgaichte

Seòladh

Tha an <address>eileamaid air ùrachadh gus am brabhsair bunaiteach ath-shuidheachadh font-stylebho italicgu normal. line-heighttha e nis mar an ceudna air a sealbhachadh, agus margin-bottom: 1remair a chur ris. <address>s airson fiosrachadh conaltraidh a thaisbeanadh don sinnsear as fhaisge (no buidheann obrach gu lèir). Glèidh cruth le bhith a’ crìochnachadh loidhnichean le <br>.

Twitter, Inc.
1355 Sràid a' Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ainm slàn
[email protected]

Blockquote

Is e an rud bunaiteach marginair blockquotes 1em 40px, agus mar sin bidh sinn ag ath-shuidheachadh sin 0 0 1remairson rudeigin nas cunbhalaiche ri eileamaidean eile.

Aithris ainmeil, ann an eileamaid blockquote.

Cuideigin ainmeil ann an Source Title

Feartan in-loidhne

Bidh an <abbr>eileamaid a’ faighinn stoidhle bunaiteach gus toirt air seasamh a-mach am measg teacsa paragraf.

An eileamaid giorrachadh HTML .

Geàrr-chunntas

cursorIs e an geàrr-chunntas bunaiteach text, agus mar sin bidh sinn ag ath-shuidheachadh sin pointergus innse gum faodar eadar-obrachadh leis an eileamaid le bhith a’ cliogadh air.

Beagan mion-fhiosrachaidh

Tuilleadh fiosrachaidh mun fhiosrachadh.

Fiù 's barrachd mion-fhiosrachaidh

Seo eadhon barrachd fiosrachaidh mun fhiosrachadh.

`[hidden]`Feartan HTML5

Tha HTML5 a’ cur feart cruinne ùr ris an canar[hidden] , a tha air a chomharrachadh mar display: nonegu bunaiteach. Le bhith a’ faighinn beachd air iasad bho PureCSS , leasaichidh sinn air a’ bhunait seo le bhith a’ dèanamh [hidden] { display: none !important; }gus cuideachadh le casg a displaychuir air gun fhiosta fhaighinn.

<input type="text" hidden>

jQuery neo-fhreagarrachd

[hidden]$(...).hide()chan eil e co-chòrdail ri modhan agus modhan jQuery $(...).show(). Mar sin, chan eil sinn gu sònraichte a’ toirt taic [hidden]do dhòighean eile airson riaghladh displaynan eileamaidean.

Gus dìreach faicsinneachd eileamaid a thogail, a’ ciallachadh displaynach eil e air atharrachadh agus gum faod an eileamaid fhathast buaidh a thoirt air sruthadh na sgrìobhainn, cleachd an .invisibleclas na àite.

Ath-thòisich

Dòigh-obrach

CSS caochladairean

Ro-shealladh duilleag

Stack font dùthchasach

CSS caochladairean

Cinn agus paragrafan

Liostaichean

Còd a-staigh

Blocaichean còd

Caochlaidhean

Teachd-a-steach cleachdaiche

Toradh sampall

Clàir

Foirmean

Taic cuir a-steach ceann-latha & dath

Comharran air na putanan

Eileamaidean measgaichte

Seòladh

Blockquote

Feartan in-loidhne

Geàrr-chunntas

[hidden]Feartan HTML5

jQuery neo-fhreagarrachd

`[hidden]`Feartan HTML5