Source

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.

Stakê tîpên xwecihî

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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. Sernavê Bootstrap

Lists

Hemî navnîşan- <ul>, <ol>, û <dl>- wan margin-topjêbirin û a margin-bottom: 1rem. Lîsteyên nested tune margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Hêsankirin di aliquet pretium nisl
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 sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Hêsankirin di aliquet pretium nisl
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ji bo şêwazek hêsan, hiyerarşiya zelal, û cîhê çêtir, navnîşên ravekirinê margins nûve kirine. <dd>s reset margin-leftbike 0û lê zêde bike margin-bottom: .5rem. <dt>s têne stûr kirin.

Navnîşan lîsteyên: Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
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.

Nivîsa pêşformatkirî

Hêman <pre>ji nû ve tê rakirin da ku wê jê bibe margin-topû ji rembo wê yekîneyan bikar bîne margin-bottom.

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

Tables

Tablo li gorî şêwaza s-yê hinekî têne guheztin , sînoran hilweşînin, û li seranserê <caption>domdar peyda dikin. text-alignGuhertinên pêvek ên ji bo sînor, peldank, û hêj bêtir bi polê .tablere têne.

Ev tabloyek nimûne ye, û ev sernavê wê ye ku naverokê diyar dike.
Sernavê sifrê	Sernavê sifrê	Sernavê sifrê	Sernavê sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê

Forms

Ji bo şêwazên bingehîn ên hêsan hêmanên cûrbecûr ji nû ve hatine destpêkirin. Li vir hinek guhertinên herî berbiçav hene:

<fieldset>Sînor, peldank, an marjîna wan tune ji ber vê yekê ew dikarin bi hêsanî ji bo têketinên kesane an komên têketinê wekî pêçan werin bikar anîn.
<legend>s, mîna berhevokên zeviyan, di heman demê de ji nû ve hatine şêwazkirin da ku wekî sernavek cûrbecûr werin xuyang kirin.
<label>s têne destnîşan kirin display: inline-blockku destûr bidin marginku bêne sepandin.
<input>s, <select>s, <textarea>s, û <button>s bi piranî ji hêla Normalize ve têne navnîş kirin, lê Reboot wan jî radike marginû destnîşan dike line-height: inherit.
<textarea>s têne guheztin da ku tenê bi rengek vertîkal werin veguheztin ji ber ku veguheztina horizontî pirê caran xêzkirina rûpelê "diqetîne".

Ev guhertin, û bêtir, li jêr têne destnîşan kirin.

hêmanên cuda

Navnîşan

Hêman <address>tê nûvekirin da ku geroka xwerû font-styleji italicbo vegere normal. line-heightjî niha mîras e, û margin-bottom: 1remhatiye zêdekirin. <address>s ji bo pêşkêşkirina agahdariya pêwendiyê ji bo bav û kalê herî nêzîk (an tevahiya laşê xebatê) ne. Bi qedandina rêzan bi <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Navê
Tev [email protected]

Blockquote

Veguhastina marginli ser blokan ev e 1em 40px, ji ber vê yekê em wê ji 0 0 1rembo tiştek bi hêmanên din re hevahengtir ji nû ve dikin.

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

Kesek di Sernavê Çavkaniyê de navdar e

hêmanên Inline

Hêman <abbr>şêweya bingehîn distîne da ku ew di nav nivîsa paragrafê de derkeve holê.

Nulla attr vitae elit libero, a pharetra augue.

Berhevkirinî

Pêşniyara cursorkurteyê ev e text, ji ber vê yekê em wê ji nû pointerve vedigirin da ku ragihînin ku hêman dikare bi tikandina li ser wê re têkilî daynin.

Hin hûrgulî

Agahiyên bêtir li ser hûrguliyan.

Hîn bêtir hûrgulî

Li vir hûrguliyên bêtir li ser hûrguliyan hene.

`[hidden]`taybetmendiya HTML5

HTML5 taybetmendiyek gerdûnî ya nû ya bi navê[hidden] , ku ji hêla xwerû ve hatî şêwaz kirin lê zêde dike display: none. Bi deynkirina ramanek ji PureCSS , em li ser vê pêşnumayê çêtir dikin ku [hidden] { display: none !important; }ji bo pêşîgirtina wê ya bêserûber were paşguh kirin alîkar bikin display. Digel ku [hidden]ji hêla IE10 ve bi xwemalî nayê piştgirî kirin, danezana eşkere ya di CSS-ya me de wê pirsgirêkê li dora xwe digire.

<input type="text" hidden>

jQuery nelihevhatî

[hidden]bi jQuery $(...).hide()û $(...).show()rêbazên ne lihevhatî ye. Ji ber vê yekê, em niha bi taybetî [hidden]teknîkên din ên ji bo birêvebirina displayhêmanan napejirînin.

Ji bo ku tenê xuyabûna hêmanekê biguhezîne, tê vê wateyê ku displayew nayê guheztin û hêman hîn jî dikare bandorê li herikîna belgeyê bike, li şûna wê .invisiblepolê bikar bînin.