Reboot

Reboot, berhevokek guheztinên CSS-ê yên taybetî yên di pelek yekane de, Bootstrap-ê dest pê dike da ku bingehek xweşik, domdar û hêsan peyda bike ku li ser were avakirin.

Nêzîkbûhatinî

Reboot li ser Normalîzekirinê ava dibe, ku gelek hêmanên HTML-ê bi şêwazên hinekî ramanbar peyda dike ku tenê hilbijêrên hêmanan bikar tînin. Şêweya pêvek tenê bi dersan re tê kirin. Mînakî, em hin <table>şêwazan ji bo bingehek hêsan ji nû ve dest pê dikin û paşê .table, .table-bordered, û bêtir peyda dikin.

Li vir rêwerz û sedemên me hene ku ji bo hilbijartina tiştê ku di Reboot-ê de derbas bikin:

Hin nirxên xwerû yên gerokê nûve bikin da ku rems-yê li şûna ems-ê ji bo veqetandina pêkhateyên berbelavkirî bikar bînin.
Xwe dûr bixin margin-top. Mercên vertîkal dikarin hilweşin, encamên nediyar derxînin. Lêbelê ya girîngtir, rêgezek yekane marginmodelek derûnî ya hêsan e.
Ji bo pîvandina hêsantir di nav mezinahiyên cîhazê de, divê hêmanên blokê s- remyê ji bo margins-yê bikar bînin.
Daxuyaniyên fonttaybetmendiyên -girêdayî herî kêm bihêlin, inheritgava ku gengaz be bikar bînin.

Pêşniyarên rûpelê

Hêman <html>û <body>hêman têne nûve kirin da ku pêşnumayên li seranserê rûpelê çêtir peyda bikin. Bi taybetî bêtir:

Di box-sizinggerdûnî de li ser her hêmanek tête danîn-di nav de *::beforeû *::after, ji bo border-box. Ev piştrast dike ku firehiya diyarkirî ya hêmanê ji ber peldank an sînor qet derbas nabe.
No bingehek font-sizeli ser <html>, lê 16pxtê texmîn kirin (geroka xwerû). font-size: 1remji <body>bo pîvandina tîpa bersivdar a hêsan bi navgîniya pirsnameyên medyayê ve tê sepandin dema ku rêz li tercîhên bikarhêner digire û nêzîkatiyek gihîştîtir peyda dike.
Di <body>heman demê de gerdûnek font-family, line-heightû, û text-align. Ev paşê ji hêla hin hêmanên formê ve tê mîras kirin da ku pêşî li nakokiyên tîpan bigire.
Ji bo ewlehiyê, <body>xwedan navnîşek diyarkirî ye background-color, ku ji #fff.

Pişka tîpên xwemalî

Tîpnivîsên webê yên xwerû (Helvetica Neue, Helvetica, û Arial) di Bootstrap 4 de hatine avêtin û ji bo veguheztina nivîsê ya herî baş li ser her amûr û OS-ê bi "pişkek tîpên xwemalî" hatine veguheztin. Di vê gotara Kovara Smashing de li ser stûnên tîpên xwemalî bêtir bixwînin .

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

Bala xwe bidinê ku ji ber ku stûna tîpan tîpên emoji vedihewîne, gelek karakterên Unicode yên sembol/dingbat hevpar dê wekî wênekêşên pirreng werin pêşkêş kirin. Dê xuyangê wan cûda be, li gorî şêwaza ku di fontê emoji ya xwemalî ya gerok/platformê de tê bikar anîn, û ew ê ji tu colorşêwazên CSS-ê bandor nebin.

Ev li seranserê Bootstrap-ê li seranserê gerdûnî û bixweber mîras font-familytê sepandin . <body>Ji bo veguherîna gerdûnî , Bootstrap- ê font-familynûve bikin û ji nû ve berhev bikin.$font-family-base

Sernav û paragraf

Hemî hêmanên sernavê - mînak, - û ji bo <h1>rakirina <p>wan têne nûve margin-topkirin. Sernav margin-bottom: .5remû paragraf margin-bottom: 1remji bo veqetandina hêsan lê zêde kirine.

Sernivîs	Mînak
`<h1></h1>`	h1. Sernavê Bootstrap
`<h2></h2>`	h2. Sernavê Bootstrap
`<h3></h3>`	h3. Sernavê Bootstrap
`<h4></h4>`	h4. Sernavê Bootstrap
`<h5></h5>`	h5. Sernavê Bootstrap
`<h6></h6>`	h6. Bootstrap heading

Lists

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. <dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dt>s are bolded.

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

Preformatted text

The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.

.example-element {
  margin-bottom: 1rem;
}

Tables

Tables are slightly adjusted to style <caption>s, collapse borders, and ensure consistent text-align throughout. Additional changes for borders, padding, and more come with the .table class.

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

Forms

Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:

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