Käynnistä uudelleen

Reboot, kokoelma elementtikohtaisia CSS-muutoksia yhdessä tiedostossa, käynnistää Bootstrapin ja tarjoaa tyylikkään, johdonmukaisen ja yksinkertaisen perustan rakentamiseen.

Tällä sivulla

Lähestyä

Uudelleenkäynnistys perustuu Normalisointiin ja tarjoaa monet HTML-elementit hieman mielivaltaisilla tyyleillä käyttämällä vain elementin valitsimia. Lisätyylit tehdään vain luokissa. Esimerkiksi käynnistämme uudelleen joitain <table>tyylejä yksinkertaisemman perustason saavuttamiseksi ja tarjoamme myöhemmin .table, .table-borderedja paljon muuta.

Tässä ovat sääntömme ja syymme valita, mitä Rebootissa ohitetaan:

Päivitä jotkin selaimen oletusarvot käyttämään rems-kirjainta s:n sijaan emskaalautuvassa komponenttivälissä.
Vältä margin-top. Pystymarginaalit voivat romahtaa ja tuottaa odottamattomia tuloksia. Vielä tärkeämpää on kuitenkin se, että yksi suunta marginon yksinkertaisempi mentaalinen malli.
Jotta skaalaus olisi helpompaa eri laitekokojen välillä, lohkoelementtien tulee käyttää rems: tä margins:lle.
Pidä fontasiaan liittyvien ominaisuuksien ilmoitukset mahdollisimman vähäisinä, käytä inheritaina kun mahdollista.

Sivun oletusasetukset

Elementit <html>ja <body>päivitetään tarjoamaan parempia koko sivun oletusasetuksia. Tarkemmin:

A box-sizingon globaalisti asetettu jokaiselle elementille - mukaan lukien *::beforeja *::after, border-box. Tämä varmistaa, että elementin ilmoitettua leveyttä ei koskaan ylitetä pehmusteen tai reunuksen vuoksi.
- Mitään perustaa font-sizeei ole ilmoitettu <html>, mutta 16pxse oletetaan (selaimen oletus). font-size: 1remSovelletaan <body>helposti reagoivaan tyyppiskaalaukseen mediakyselyjen kautta, samalla kun kunnioitetaan käyttäjien mieltymyksiä ja varmistetaan helpommin saavutettavissa oleva lähestymistapa. Tämä selaimen oletusarvo voidaan ohittaa muuttamalla $font-size-rootmuuttujaa.
Asettaa <body>myös globaalin font-family, font-weight, line-height, ja color. Jotkin lomakeelementit perivät tämän myöhemmin fonttien epäjohdonmukaisuuksien estämiseksi.
Turvallisuussyistä siinä <body>on ilmoitettu background-color, oletusarvoisesti #fff.

Alkuperäinen fonttipino

Bootstrap käyttää "alkuperäistä fonttipinoa" tai "järjestelmän fonttipinoa" optimaaliseen tekstin toistoon kaikissa laitteissa ja käyttöjärjestelmissä. Nämä järjestelmäfontit on suunniteltu erityisesti tämän päivän laitteita silmällä pitäen, ja niissä on parannettu renderöinti näytöillä, muuttuva kirjasintuki ja paljon muuta. Lue lisää alkuperäisistä kirjasinpinoista tästä Smashing Magazine -artikkelista .

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

Huomaa, että koska fonttipino sisältää emoji-fontteja, monet yleiset symboli-/dingbat-unicode-merkit hahmonnetaan monivärisinä kuvakkeina. Niiden ulkonäkö vaihtelee selaimen/alustan alkuperäisessä emoji-fontissa käytetyn tyylin mukaan, eivätkä CSS- colortyylit vaikuta niihin.

Tätä font-familysovelletaan <body>Bootstrapiin ja se periytyy automaattisesti maailmanlaajuisesti. Vaihda globaalia versiota font-familypäivittämällä $font-family-baseja kääntämällä uudelleen Bootstrap.

Otsikot ja kappaleet

Kaikki otsikkoelementit - esim. <h1>- ja <p>nollataan, jotta ne margin-toppoistetaan. Otsikot margin-bottom: .5remja kappaleet on lisätty margin-bottom: 1remvälitysten helpottamiseksi.

Otsikko	Esimerkki
`<h1></h1>`	h1. Bootstrap otsikko
`<h2></h2>`	h2. Bootstrap otsikko
`<h3></h3>`	h3. Bootstrap otsikko
`<h4></h4>`	h4. Bootstrap otsikko
`<h5></h5>`	h5. Bootstrap otsikko
`<h6></h6>`	h6. Bootstrap otsikko

Luettelot

Kaikista listoista - <ul>, <ol>, ja <dl>- on margin-toppoistettu ja margin-bottom: 1rem. Sisäkkäisissä luetteloissa ei ole margin-bottom. Olemme myös palauttaneet padding-leftpäälle <ul>ja <ol>elementit.

Kaikista listoista on poistettu ylämarginaali
Ja niiden alamarginaali normalisoitui
Sisäkkäisillä luetteloilla ei ole alamarginaalia
- Näin niistä tulee tasaisempi ulkonäkö
- Varsinkin kun sitä seuraa useampia luettelokohteita
Myös vasen pehmuste on nollattu

Tässä on järjestetty lista
Muutamalla listalla
Sillä on sama yleisilme
Kuten edellinen järjestämätön lista

Yksinkertaisemman tyylin, selkeän hierarkian ja paremman välin vuoksi kuvausluettelot on päivitetty margins. <dd>s nollaa margin-leftja 0lisää margin-bottom: .5rem. <dt>s on lihavoitu .

Kuvausluettelot: Kuvausluettelo on täydellinen termien määrittelyyn.
Termi: Määritelmä termille.; Toinen määritelmä samalle termille.
Toinen termi: Määritelmä tälle toiselle termille.

Sisäinen koodi

Kääri tekstin sisäiset koodinpätkät <code>. Muista välttää HTML-kulmasulkuja.

Esimerkiksi <section>pitäisi kääriä riviin.

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

Koodilohkot

Käytä <pre>s useille koodiriveille. Jälleen kerran, muista jättää koodin kulmasulkeet pois oikeasta renderöinnista. Elementti <pre>nollataan sen poistamiseksi margin-topja sen remyksiköiden käyttämiseksi 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>

Muuttujat

Käytä muuttujien osoittamiseen <var>tagia.

y = m x + b

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

Käyttäjän syöttö

Käytä -näppäintä <kbd>osoittaaksesi syötteen, joka syötetään tavallisesti näppäimistöllä.

Vaihda hakemistoa kirjoittamalla cdja sen jälkeen hakemiston nimi.
Muokkaa asetuksia painamalla 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>

Näytetulostus

<samp>Käytä tunnistetta ohjelman näytetulosteen osoittamiseen .

Tätä tekstiä on tarkoitus käsitellä tietokoneohjelman esimerkkitulosteena.

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

Taulukot

Taulukot on hieman mukautettu tyyliin <caption>s, kutistavat reunat ja varmistavat yhdenmukaisuuden text-alignkaikkialla. Luokkaan tulee lisämuutoksia reunuksiin, pehmusteisiin ja muuhun.table .

Tämä on esimerkkitaulukko, ja tämä on sen otsikko kuvaamaan sisältöä.
Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu

Lomakkeet

Useita lomakeelementtejä on käynnistetty uudelleen yksinkertaisempia perustyylejä varten. Tässä on joitain merkittävimmistä muutoksista:

<fieldset>Sillä ei ole reunuksia, pehmusteita tai marginaaleja, joten niitä voidaan helposti käyttää yksittäisten syötteiden tai syöttöryhmien kääreinä.
<legend>s, kuten kenttäjoukot, on myös muotoiltu uudelleen näytettäväksi eräänlaisena otsikona.
<label>s on asetettu display: inline-blocksallimaan marginkäytön.
<input>Normalize käsittelee enimmäkseen s-, <select>s-, <textarea>s- ja s-koodeja, mutta Reboot poistaa ne ja asettaa myös .<button>marginline-height: inherit
<textarea>s on muokattu niin, että kokoa voi muuttaa vain pystysuunnassa, koska vaakasuuntainen koon muuttaminen usein "katkaisee" sivun asettelun.
<button>s- ja <input>painikeelementeillä on cursor: pointermilloin :not(:disabled).

Nämä ja muut muutokset esitellään alla.

Esimerkki legenda

Esimerkkisyöttö

Esimerkki sähköposti

Esimerkki puhelin

Esimerkki url

Esimerkkinumero

Esimerkkihaku

Esimerkkialue

Esimerkki tiedoston syötöstä

Esimerkki valinta

Valitse tämä valintaruutu

Vaihtoehto yksi on tämä ja tuo Vaihtoehto kaksi on jotain muuta, joka on myös erittäin pitkä esittelemään näiden hienojen lomakesäätimien käärimistä. Vaihtoehto kolme on poistettu käytöstä

Esimerkkitekstialue

Esimerkkipäivämäärä

Esimerkki aika

Esimerkki salasanasta

Esimerkki päivämäärä-aika-paikallinen

Esimerkkiviikko

Esimerkkikuukausi

Esimerkkiväri

Esimerkkilähtö 100

Päivämäärän ja värin syöttötuki

Muista, että kaikki selaimet, nimittäin Safari, eivät tue täysin päivämäärän syöttöä.

Osoittimet painikkeissa

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.