in English

Perkraukite

Reboot, konkretiems elementams būdingų CSS pakeitimų rinkinys viename faile, paleiskite „Bootstrap“, kad būtų galima sukurti elegantišką, nuoseklų ir paprastą pagrindą.

Šiame puslapyje

metodas

Paleidimas iš naujo grindžiamas Normalizavimo funkcija, suteikiant daug HTML elementų, kurių stiliai yra šiek tiek apgalvoti, naudojant tik elementų parinkiklius. Papildomas stilius atliekamas tik su klasėmis. Pavyzdžiui, kai kuriuos <table>stilius paleidžiame iš naujo, kad būtų paprastesnė pradinė linija, o vėliau pateikiame .table, .table-bordered, ir daugiau.

Štai mūsų gairės ir priežastys, kodėl pasirenkate, ką pakeisti perkrovimo metu:

Atnaujinkite kai kurias naršyklės numatytąsias reikšmes, kad būtų naudojamas rems, o ne ems keičiamam komponentų tarpui.
Venkite margin-top. Vertikalios paraštės gali sugriūti ir duoti netikėtų rezultatų. Tačiau dar svarbiau, kad viena kryptis marginyra paprastesnis psichinis modelis.
Kad būtų lengviau keisti įrenginio dydžius, bloko elementuose s turėtų būti naudojamas rems margin.
Sumažinkite susijusių savybių deklaracijas font, naudokite, inheritkai tik įmanoma.

Puslapio numatytieji nustatymai

Elementai <html>ir <body>atnaujinami, kad būtų geresni viso puslapio numatytieji nustatymai. Konkrečiau:

Visame box-sizingpasaulyje nustatytas kiekvienam elementui, įskaitant *::beforeir *::after, į border-box. Tai užtikrina, kad deklaruotas elemento plotis niekada nebus viršytas dėl užpildymo ar kraštinės.
- Jokia bazė font-sizenėra deklaruojama <html>, bet 16pxyra laikoma (naršyklės numatytoji reikšmė). font-size: 1remTaikoma <body>lengvai reaguojančiam tipo mastelio keitimui naudojant medijos užklausas, kartu atsižvelgiant į vartotojo nuostatas ir užtikrinant labiau prieinamą metodą. Šios naršyklės numatytosios nuostatos gali būti nepaisomos pakeitus $font-size-rootkintamąjį.
Taip <body>pat nustatomi visuotiniai font-family, font-weight, line-height, ir color. Tai vėliau paveldima kai kurių formos elementų, kad būtų išvengta šrifto neatitikimų.
Saugumo sumetimais <body>yra paskelbtas background-color, pagal nutylėjimą #fff.

Vietinis šriftų krūva

„Bootstrap“ naudoja „savąjį šriftų krūvą“ arba „sistemos šriftų krūvą“, kad tekstas būtų optimaliai atvaizduojamas kiekviename įrenginyje ir OS. Šie sistemos šriftai buvo sukurti specialiai atsižvelgiant į šiuolaikinius įrenginius, patobulintą atvaizdavimą ekranuose, kintamo šrifto palaikymą ir kt. Skaitykite daugiau apie vietinių šriftų krūvas šiame Smashing Magazine straipsnyje .

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

Atminkite, kad šriftų krūvoje yra jaustukų šriftų, todėl daugelis įprastų simbolių / dingbat unikodo simbolių bus pateikiami kaip daugiaspalvės piktogramos. Jų išvaizda skirsis priklausomai nuo stiliaus, naudojamo naršyklės / platformos vietiniame jaustukų šrifte, ir jiems neturės įtakos jokie CSS colorstiliai.

Tai font-familytaikoma <body>ir automatiškai paveldima visame pasaulyje visame „Bootstrap“. Norėdami perjungti visuotinį font-family, atnaujinkite $font-family-baseir iš naujo kompiliuokite Bootstrap.

Antraštės ir pastraipos

Visi antraštės elementai, pvz., <h1>ir <p>yra nustatomi iš naujo, kad būtų margin-toppašalinti. Pridėtos antraštės margin-bottom: .5remir pastraipos margin-bottom: 1rem, kad būtų lengviau išdėstyti tarpus.

Antraštė	Pavyzdys
`<h1></h1>`	h1. Bootstrap antraštė
`<h2></h2>`	h2. Bootstrap antraštė
`<h3></h3>`	h3. Bootstrap antraštė
`<h4></h4>`	h4. Bootstrap antraštė
`<h5></h5>`	h5. Bootstrap antraštė
`<h6></h6>`	h6. Bootstrap antraštė

Sąrašai

Visi sąrašai <ul>– , <ol>, ir <dl>– yra margin-toppašalinti ir margin-bottom: 1rem. Įdėtuose sąrašuose nėra margin-bottom. Taip pat iš naujo nustatėme įjungimą padding-leftir <ul>elementus <ol>.

Visų sąrašų viršutinė paraštė pašalinta
Ir jų apatinė marža normalizavosi
Įdėtieji sąrašai neturi apatinės paraštės
- Taip jie įgauna tolygesnę išvaizdą
- Ypač tada, kai seka daugiau sąrašo elementų
Kairysis užpildas taip pat buvo nustatytas iš naujo

Štai užsakytas sąrašas
Su keliais sąrašo elementais
Jis turi tą pačią bendrą išvaizdą
Kaip ir ankstesnis netvarkingas sąrašas

Siekiant paprastesnio stiliaus, aiškios hierarchijos ir geresnių tarpų, aprašymų sąrašai buvo atnaujinti margins. <dd>s iš naujo margin-leftnustatyti 0ir pridėti margin-bottom: .5rem. <dt>s yra paryškinti .

Aprašų sąrašai: Aprašų sąrašas puikiai tinka terminams apibrėžti.
Terminas: Termino apibrėžimas.; Antrasis to paties termino apibrėžimas.
Kitas terminas: Šio kito termino apibrėžimas.

Inline kodas

Įterptuosius kodo fragmentus apvyniokite <code>. Būtinai atsisakykite HTML kampinių skliaustų.

Pavyzdžiui, <section>turėtų būti suvyniota kaip įterpta.

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

Kodų blokai

Naudokite <pre>s kelioms kodo eilutėms. Dar kartą nepamirškite palikti bet kokių kampinių skliaustų kode, kad būtų galima tinkamai atvaizduoti. Elementas <pre>nustatomas iš naujo, kad jis būtų pašalintas margin-topir būtų naudojami remjo vienetai 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>

Kintamieji

Kintamiesiems nurodyti naudokite <var>žymą.

y = m x + b

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

Vartotojo įvestis

Naudokite , <kbd>kad nurodytumėte įvestį, kuri paprastai įvedama klaviatūra.

Norėdami perjungti katalogus, įveskite cdir katalogo pavadinimą.
Norėdami redaguoti nustatymus, paspauskite 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>

Mėginio išvestis

Norėdami nurodyti programos išvesties pavyzdį, naudokite <samp>žymą.

Šis tekstas turi būti traktuojamas kaip kompiuterio programos išvesties pavyzdys.

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

Lentelės

Lentelės šiek tiek pakoreguotos pagal stilių <caption>s, sutraukiamos kraštinės ir užtikrinamas nuoseklumas text-align. Papildomi kraštinių, užpildymo ir kt. pakeitimai pateikiami su .tableklase .

Tai yra lentelės pavyzdys, o tai yra jos antraštė, apibūdinanti turinį.
Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė
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.

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

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.

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