in English

I-reboot

I-reboot, isang koleksyon ng mga pagbabago sa CSS na partikular sa elemento sa iisang file, simulan ang Bootstrap upang magbigay ng elegante, pare-pareho, at simpleng baseline na bubuuin.

Lapitan

Ang pag-reboot ay bubuo sa Normalize, na nagbibigay ng maraming elemento ng HTML na may medyo opinyong mga istilo gamit lamang ang mga tagapili ng elemento. Ang karagdagang pag-istilo ay ginagawa lamang sa mga klase. Halimbawa, nagre-reboot kami ng ilang <table>istilo para sa isang mas simpleng baseline at sa paglaon ay nagbibigay kami ng .table, .table-bordered, at higit pa.

Narito ang aming mga alituntunin at dahilan sa pagpili kung ano ang i-override sa Reboot:

  • I-update ang ilang default na value ng browser para gamitin ang rems sa halip na ems para sa scalable na spacing ng bahagi.
  • Iwasan ang margin-top. Maaaring bumagsak ang mga vertical na margin, na nagbubunga ng mga hindi inaasahang resulta. Higit sa lahat, ang isang direksyon ng marginay isang mas simpleng modelo ng pag-iisip.
  • Para sa mas madaling pag-scale sa mga laki ng device, ang mga elemento ng block ay dapat gumamit remng s para sa margins.
  • Panatilihing pinakamababa ang mga deklarasyon ng mga fontkatangiang nauugnay sa paggamit, inherithangga't maaari.

Mga default ng page

Ang <html>at <body>mga elemento ay ina-update upang magbigay ng mas mahusay na mga default sa buong page. Mas partikular:

  • Ang box-sizingay pandaigdigang nakatakda sa bawat elemento—kabilang ang *::beforeat *::after, hanggang border-box. Tinitiyak nito na ang ipinahayag na lapad ng elemento ay hindi kailanman lalampas dahil sa padding o hangganan.
  • Walang base font-sizena idineklara sa <html>, ngunit 16pxipinapalagay (ang default ng browser). font-size: 1remay inilapat sa <body>para sa madaling tumutugon na uri-scaling sa pamamagitan ng mga query sa media habang iginagalang ang mga kagustuhan ng user at tinitiyak ang isang mas madaling paraan.
  • <body>Nagtatakda din ang The ng isang pandaigdigang , font-family, line-heightat text-align. Ito ay minana sa ibang pagkakataon ng ilang mga elemento ng form upang maiwasan ang mga hindi pagkakapare-pareho ng font.
  • Para sa kaligtasan, ang <body>ay may ipinahayag background-colorna , defaulting sa #fff.

Native na font stack

Ang mga default na web font (Helvetica Neue, Helvetica, at Arial) ay ibinaba sa Bootstrap 4 at pinalitan ng "native font stack" para sa pinakamabuting pag-render ng text sa bawat device at OS. Magbasa pa tungkol sa mga native na stack ng font sa artikulong ito sa Smashing Magazine .

$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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

font-familyInilapat ito sa at <body>awtomatikong minana sa buong Bootstrap. Upang ilipat ang global font-family, i-update $font-family-baseat i-compile muli ang Bootstrap.

Mga pamagat at talata

Lahat ng elemento ng heading—hal., <h1>—at <p>na-reset upang margin-topmaalis ang mga ito. Ang mga heading ay margin-bottom: .5remidinagdag at mga talata margin-bottom: 1rempara sa madaling espasyo.

Heading Halimbawa

<h1></h1>

 h1. Bootstrap na heading

<h2></h2>

 h2. Bootstrap na heading

<h3></h3>

 h3. Bootstrap na heading

<h4></h4>

 h4. Bootstrap na heading

<h5></h5>

 h5. Bootstrap na heading

<h6></h6>

 h6. Bootstrap na heading

Mga listahan

Lahat ng listahan— <ul>, <ol>, at <dl>—ay margin-topinalis ang mga ito at isang margin-bottom: 1rem. Ang mga nested list ay walang margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean umupo amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at masa
  4. Facilisis sa pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean umupo amet erat nunc
  8. Eget porttitor lorem

Para sa mas simpleng pag-istilo, malinaw na hierarchy, at mas magandang espasyo, ang mga listahan ng paglalarawan ay nag-update ng mga margins. <dd>s i-reset margin-leftsa 0at idagdag margin-bottom: .5rem. <dt>s ay naka- bold .

Mga listahan ng paglalarawan
Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Paunang na-format na teksto

Ni-reset ang <pre>elemento upang alisin ito margin-topat gamitin remang mga unit para sa margin-bottom.

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

Mga mesa

Ang mga talahanayan ay bahagyang inaayos sa mga istilo <caption>, gumuho ng mga hangganan, at tinitiyak na pare -pareho sa text-alignkabuuan. Ang mga karagdagang pagbabago para sa mga hangganan, padding, at higit pa ay kasama ng .tableklase .

Isa itong halimbawang talahanayan, at ito ang caption nito upang ilarawan ang mga nilalaman.
Pamagat ng talahanayan Pamagat ng talahanayan Pamagat ng talahanayan Pamagat ng talahanayan
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Mga porma

Na-reboot ang iba't ibang elemento ng form para sa mas simpleng mga base style. Narito ang ilan sa mga pinakakilalang pagbabago:

  • <fieldset>s ay walang mga hangganan, padding, o margin upang madali silang magamit bilang mga wrapper para sa mga indibidwal na input o grupo ng mga input.
  • <legend>s, tulad ng mga fieldset, ay na-restyle din upang maipakita bilang isang heading ng mga uri.
  • <label>s ay nakatakda sa display: inline-blockupang payagan marginna mailapat.
  • <input>Ang s, <select>s, <textarea>s, at <button>s ay kadalasang tinutugunan ng Normalize, ngunit ang Reboot ay nag-aalis din ng kanilang marginat set line-height: inherit.
  • <textarea>Ang mga s ay binago upang mapalitan lamang nang patayo dahil ang pahalang na pagbabago ng laki ay madalas na "sinisira" ang layout ng pahina.
  • <button>s at <input>mga elemento ng button ay may cursor: pointerkapag :not(:disabled).

Ang mga pagbabagong ito, at higit pa, ay ipinapakita sa ibaba.

Halimbawa ng alamat

100

Mga pointer sa mga pindutan

Ang pag-reboot ay may kasamang pagpapahusay para role="button"baguhin ang default na cursor sa pointer. Idagdag ang attribute na ito sa mga elemento upang makatulong na ipahiwatig na ang mga elemento ay interactive. Ang tungkuling ito ay hindi kailangan para sa <button>mga elemento, na nakakakuha ng sarili nilang cursorpagbabago.

Button ng elementong hindi button 
<span role="button" tabindex="0">Non-button element button</span>

Iba't ibang elemento

Address

Ina-update ang <address>elemento upang i-reset ang default ng browser font-stylemula italicsa normal. line-heightay minana na rin ngayon, at margin-bottom: 1remnaidagdag na. <address>s ay para sa pagpapakita ng impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno (o isang buong katawan ng trabaho). Panatilihin ang pag-format sa pamamagitan ng pagtatapos ng mga linya na may <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Buong Pangalan
[email protected]

Blockquote

Ang default marginsa blockquotes ay 1em 40px, kaya ni-reset namin iyon para 0 0 1remsa isang bagay na mas pare-pareho sa iba pang mga elemento.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Isang taong sikat sa Pamagat ng Pinagmulan

Mga inline na elemento

Ang <abbr>elemento ay tumatanggap ng pangunahing pag-istilo upang gawin itong kakaiba sa mga teksto ng talata.

Nulla attr vitae elit libero, a pharetra augue.

Buod

Ang default cursorsa buod ay text, kaya ni-reset namin iyon pointerupang maiparating na ang elemento ay maaaring makipag-ugnayan sa pamamagitan ng pag-click dito.

Ilang detalye

Higit pang impormasyon tungkol sa mga detalye.

Higit pang mga detalye

Narito ang higit pang mga detalye tungkol sa mga detalye.

HTML5 [hidden]attribute

Nagdaragdag ang HTML5 ng bagong global attribute na pinangalanang[hidden] , na naka-istilo bilang display: nonedefault. Nanghihiram ng ideya mula sa PureCSS , pinagbubuti namin ang default na ito sa pamamagitan ng paggawa [hidden] { display: none !important; }upang makatulong na maiwasan ang displayaksidenteng pag-override nito. Bagama't [hidden]hindi katutubong suportado ng IE10, ang tahasang deklarasyon sa aming CSS ay nakakalusot sa problemang iyon.

<input type="text" hidden>
hindi pagkakatugma ng jQuery

[hidden]ay hindi tugma sa jQuery's $(...).hide()at mga $(...).show()pamamaraan. Samakatuwid, hindi kami kasalukuyang nag-eendorso lalo na [hidden]sa iba pang mga diskarte para sa pamamahala displayng mga elemento.

Upang i-toggle lang ang visibility ng isang elemento, ibig sabihin displayay hindi ito binago at ang elemento ay maaari pa ring makaapekto sa daloy ng dokumento, gamitin ang .invisibleklase sa halip.