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.

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.

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.
Tha <body>seo cuideachd a' suidheachadh cruinne font-family, line-height, agus text-align. 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

Chaidh na clòidean lìn àbhaisteach (Helvetica Neue, Helvetica, agus Arial) a leigeil sìos ann am Bootstrap 4 agus chaidh “stack cruth-clò dùthchasach” a chuir nan àite airson an teacsa as fheàrr a thoirt seachad air gach inneal agus OS. Leugh tuilleadh mu chruachan cruth-clò dùthchasach san artaigil Smashing Magazine seo .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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 samhla cumanta / 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.

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

Teacs ro-chruthaichte

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.

.example-element {
  iomall-bhonn: 1rem;
}

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 have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
<legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
<label>s are set to display: inline-block to allow margin to be applied.
<input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.
<button>s and <input> button elements have cursor: pointer when :not(:disabled).

These changes, and more, are demonstrated below.

Pointers on buttons

Reboot includes an enhancement for role="button" to change the default cursor to pointer. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button> elements, which get their own cursor change.

Non-button element button

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

Misc elements

Address

The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
[email protected]

Blockquote

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

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.

<input type="text" hidden>

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.