Rindizni

Reboot, një koleksion ndryshimesh CSS specifike për elementë në një skedar të vetëm, nis Bootstrap për të ofruar një bazë elegante, të qëndrueshme dhe të thjeshtë për t'u ndërtuar mbi të.

Qasje

Rindezja bazohet në Normalize, duke siguruar shumë elementë HTML me stile disi të mendimit duke përdorur vetëm përzgjedhës elementësh. Stilimi shtesë bëhet vetëm me klasa. Për shembull, ne rinisim disa <table>stile për një bazë më të thjeshtë dhe më vonë ofrojmë .table, .table-bordered, dhe më shumë.

Këtu janë udhëzimet dhe arsyet tona për të zgjedhur atë që të anashkaloni në Reboot:

Përditësoni disa vlera të paracaktuara të shfletuesit për të përdorur rems në vend të ems për ndarje të shkallëzueshme të komponentëve.
Shmangni margin-top. Kufijtë vertikale mund të shemben, duke dhënë rezultate të papritura. Megjithatë, më e rëndësishmja, një drejtim i vetëm i marginështë një model mendor më i thjeshtë.
Për shkallëzim më të lehtë në përmasat e pajisjes, elementët e bllokut duhet të përdorin rems për margins.
Mbani fontnë minimum deklaratat e pronave të lidhura, duke i përdorur inheritsa herë që është e mundur.

Parazgjedhjet e faqes

Elementet <html>dhe <body>janë përditësuar për të ofruar parazgjedhje më të mira në të gjithë faqen. Më specifikisht:

Është box-sizingvendosur globalisht në çdo element—duke përfshirë *::beforedhe *::after, në border-box. Kjo siguron që gjerësia e deklaruar e elementit të mos tejkalohet kurrë për shkak të mbushjes ose kufirit.
Asnjë bazë nuk font-sizeështë deklaruar në <html>, por 16pxsupozohet (parazgjedhja e shfletuesit). font-size: 1remzbatohet në <body>për shkallëzim të lehtë të përgjegjshëm të tipit nëpërmjet pyetjeve të medias duke respektuar preferencat e përdoruesve dhe duke siguruar një qasje më të aksesueshme.
Gjithashtu <body>vendos një globale font-family, line-heightdhe text-align. Kjo trashëgohet më vonë nga disa elementë të formës për të parandaluar mospërputhjet e shkronjave.
Për siguri, <body>ka një të deklaruar background-color, duke mos u vendosur në #fff.

Stafi i shkronjave origjinale

Shkronjat e paracaktuara të uebit (Helvetica Neue, Helvetica dhe Arial) janë hequr në Bootstrap 4 dhe janë zëvendësuar me një "grumbull font vendas" për interpretimin optimal të tekstit në çdo pajisje dhe OS. Lexoni më shumë rreth grupeve të shkronjave vendase në këtë artikull të Revistës Smashing .

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

Vini re se për shkak se grupi i shkronjave përfshin shkronja emoji, shumë karaktere të zakonshme të simbolit/dingbat Unicode do të paraqiten si piktografë me shumë ngjyra. Pamja e tyre do të ndryshojë, në varësi të stilit të përdorur në fontin e emoji të shfletuesit/platformës dhe ato nuk do të ndikohen nga asnjë stil CSS color.

Kjo font-familyaplikohet <body>dhe trashëgohet automatikisht globalisht në të gjithë Bootstrap. Për të ndërruar versionin global font-family, përditësoni $font-family-basedhe rikompiloni Bootstrap.

Titujt dhe paragrafët

Të gjithë elementët e titullit - p.sh. - <h1>dhe <p>janë rivendosur për t'u margin-tophequr. Titujt janë margin-bottom: .5remshtuar dhe paragrafët margin-bottom: 1rempër ndarje të lehtë.

Drejtimi	Shembull
`<h1></h1>`	h1. Titulli i bootstrap
`<h2></h2>`	h2. Titulli i bootstrap
`<h3></h3>`	h3. Titulli i bootstrap
`<h4></h4>`	h4. Titulli i bootstrap
`<h5></h5>`	h5. Titulli i bootstrap
`<h6></h6>`	h6. Titulli i bootstrap

Listat

Të gjitha listat— <ul>, <ol>, dhe <dl>— janë margin-tophequr dhe një margin-bottom: 1rem. Listat e mbivendosura nuk kanë margin-bottom.

Të gjitha listat u hiqet diferenca kryesore
Dhe diferenca e tyre e poshtme u normalizua
Listat e mbivendosura nuk kanë diferencë të poshtme
- Në këtë mënyrë ato kanë një pamje më të barabartë
- Veçanërisht kur pasohet nga më shumë artikuj të listës
Mbushja e majtë gjithashtu është rivendosur

Këtu është një listë e renditur
Me disa artikuj të listës
Ka të njëjtën pamje të përgjithshme
Si lista e mëparshme e parenditur

Për stilim më të thjeshtë, hierarki të qartë dhe ndarje më të mirë, listat e përshkrimeve kanë përditësuar margins. <dd>s rivendoset margin-leftnë 0dhe shtoni margin-bottom: .5rem. <dt>s janë të guximshme .

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
Afati: Përkufizimi për termin.; Një përkufizim i dytë për të njëjtin term.
Një term tjetër: Përkufizimi për këtë term tjetër.

Tekst i paraformatuar

Elementi <pre>rivendoset për të hequr margin-topdhe për të përdorur remnjësitë për të margin-bottom.

.shembull-element {
  marzh-fundi: 1rem;
}

Tabelat

Tabelat janë përshtatur paksa për të stiluar <caption>s, kolapsin kufijtë dhe sigurojnë konsistencë në të text-aligngjithë. Ndryshime shtesë për kufijtë, mbushjet dhe më shumë vijnë me klasën.table .

Kjo është një tabelë shembull, dhe ky është titulli i saj për të përshkruar përmbajtjen.
Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline

Format

Elementë të ndryshëm të formës janë rindezur për stile bazë më të thjeshta. Këtu janë disa nga ndryshimet më të dukshme:

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