Sake yi

Sake yi, tarin takamaiman canje-canje na CSS a cikin fayil guda ɗaya, fara Bootstrap don samar da kyakkyawan tushe, daidaito da sauƙi don ginawa.

kusanci

Sake yi yana ginawa akan Normalize, yana samar da abubuwan HTML da yawa tare da ɗan salo na ra'ayi ta amfani da masu zaɓin kashi kawai. Ana yin ƙarin salo kawai tare da azuzuwan. Misali, muna sake yin wasu <table>salo don tushe mafi sauƙi kuma daga baya samar da .table, .table-bordered, da ƙari.

Anan ga jagororinmu da dalilan zabar abin da za mu soke a Sake yi:

Sabunta wasu tsoffin ƙima na burauza don amfani da rems maimakon ems don tazarar abubuwan da za'a iya daidaitawa.
Guji margin-top. Matsakaicin gefe na iya rugujewa, suna ba da sakamako mara tsammani. Mafi mahimmanci ko da yake, shugabanci guda ɗaya marginshine samfurin tunani mafi sauƙi.
Don sauƙin sikeli a cikin girman na'urar, abubuwan toshe yakamata suyi amfani da rems don margins.
Ci gaba da bayyana fontkaddarorin da ke da alaƙa da ƙayyadaddun bayanai, ta amfani da inheritduk lokacin da zai yiwu.

Matsalolin shafi

An sabunta abubuwan <html>da <body>abubuwan don samar da ingantattun ɓangarorin shafi. Ƙari na musamman:

An box-sizingsaita shi a duk duniya akan kowane nau'i-ciki har *::beforeda *::after, zuwa border-box. Wannan yana tabbatar da cewa faɗin abubuwan da aka ayyana ba a taɓa wuce gona da iri ba saboda matsi ko iyaka.
Babu tushe font-sizeda aka ayyana akan <html>, amma 16pxana ɗauka (tsohowar burauzar). font-size: 1remana amfani da shi akan <body>nau'in nau'in sikelin mai sauƙin amsa ta hanyar tambayoyin kafofin watsa labarai yayin da ake mutunta abubuwan da mai amfani da kuma tabbatar da hanyar da ta fi dacewa.
Hakanan <body>yana saita duniya font-family, line-height, da text-align. Ana gadar wannan daga baya ta wasu sifofi don hana rashin daidaiton rubutu.
Don aminci, <body>yana da ayyana background-color, rashin kuskure ga #fff.

Tarin rubutu na asali

An jefar da tsoffin fonts na gidan yanar gizo (Helvetica Neue, Helvetica, da Arial) a cikin Bootstrap 4 kuma an maye gurbinsu da "tarin rubutun asali" don ingantaccen rubutu akan kowace na'ura da OS. Kara karantawa game da tarin rubutu na asali a cikin wannan labarin 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",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Lura cewa saboda tarin font ɗin ya ƙunshi haruffan emoji, yawancin alamomin gama gari/dinbat haruffa Unicode za a sanya su azaman hotuna masu launi da yawa. colorSiffar su za ta bambanta, ya danganta da salon da aka yi amfani da su a cikin mashigin emoji na asali/dandali, kuma kowane salon CSS ba zai shafe su ba .

Ana font-familyamfani da wannan ga <body>kuma gaji ta atomatik a duk duniya cikin Bootstrap. Don canza duniya font-family, ɗaukaka $font-family-basekuma sake haɗa Bootstrap.

Kanun labarai da sakin layi

Duk abubuwan kan gaba-misali, <h1>-kuma <p>an sake saita su don margin-topcire su. An ƙara kanun labarai margin-bottom: .5remda sakin layi margin-bottom: 1remdon sauƙin tazara.

Jagora	Misali
`<h1></h1>`	h1. Bootstrap jagora
`<h2></h2>`	h2. Bootstrap jagora
`<h3></h3>`	h3. Bootstrap jagora
`<h4></h4>`	h4. Bootstrap jagora
`<h5></h5>`	h5. Bootstrap jagora
`<h6></h6>`	h6. Bootstrap jagora

Lissafi

Duk lissafin- <ul>, <ol>, da <dl>- an margin-topcire su da kuma margin-bottom: 1rem. Lissafin da aka kafa ba su da margin-bottom.

Duk lissafin an cire babban gefen su
Kuma tazarar gindinsu ta daidaita
Lissafin da aka kafa ba su da gefen ƙasa
- Ta wannan hanyar suna da kamannin kamanni
- Musamman idan ƙarin abubuwan lissafin ke biye da su
Hakanan an sake saita kullin hagu

Ga jerin oda
Tare da ƴan abubuwan jeri
Yana da kamanni gaba ɗaya
Kamar jerin abubuwan da ba a ba da oda ba a baya

Don mafi sauƙin salo, bayyanannen matsayi, da mafi kyawun tazara, lissafin bayanin sun sabunta margins. <dd>sake saitin margin-leftzuwa 0kuma ƙara margin-bottom: .5rem. <dt>s suna da ƙarfi .

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Lokaci: Ma'anar kalmar.; Ma'anar na biyu don wannan kalma.
Wani lokaci: Ma'anar wannan wani lokaci.

Rubutun da aka riga aka tsara

An <pre>sake saita kashi don cire shi margin-topda amfani remda raka'a don sa margin-bottom.

.misali-bangaren {
  gefe-kasa: 1rem;
}

Tables

Tables an ɗan daidaita su zuwa salon <caption>s, iyakokin rugujewa, da tabbatar da daidaito text-aligna ko'ina. Ƙarin canje-canje don iyakoki, padding, da ƙari sun zo tare da .tableajin .

Wannan tebur misali ne, kuma wannan shine taken sa don bayyana abin da ke ciki.
Taken tebur	Taken tebur	Taken tebur	Taken tebur
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta

Siffofin

An sake kunna abubuwa daban-daban don tsarin tushe mafi sauƙi. Ga wasu fitattun sauye-sauye:

<fieldset>s ba su da iyakoki, padding, ko gefe don haka za a iya amfani da su cikin sauƙi azaman naɗa don abubuwan shigar mutum ɗaya ko ƙungiyoyin bayanai.
<legend>s, kamar fage-fage, an kuma sake tsara su don nunawa azaman jigo na iri.
<label>s an saita don display: inline-blockba da izinin marginamfani.
<input>s, <select>s, <textarea>s, da <button>s yawanci ana magance su ta Normalize, amma Sake yi yana cire su marginda saiti line-height: inherit, kuma.
<textarea>s ana canza su ne kawai don a iya sake girman su a tsaye kamar yadda a kwance a kwance sau da yawa ke “karye” shimfidar shafi.
<button>s da <input>abubuwan maɓalli suna da cursor: pointerlokacin :not(:disabled).

Waɗannan canje-canje, da ƙari, an nuna su a ƙasa.

Maɓalli a kan maɓalli

Sake yi ya haɗa da haɓakawa don role="button"canza siginar tsoho zuwa pointer. Ƙara wannan sifa ga abubuwa don taimakawa nuna abubuwa suna hulɗa. Wannan rawar ba dole ba ne ga abubuwa, waɗanda ke samun canjin <button>nasu .cursor

Maɓallin kashi mara maɓalli

<span role="button" tabindex="0">Non-button element button</span>

Daban-daban abubuwa

Adireshi

An <address>sabunta kashi don sake saita tsohowar burauzar font-styledaga italiczuwa normal. line-heightshi ma yanzu an gaji, kuma margin-bottom: 1reman kara. <address>s ne don gabatar da bayanin tuntuɓar kakanni mafi kusa (ko gaba ɗaya na aiki). Ajiye tsarawa ta hanyar ƙare layi da <br>.

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

Cikakken Suna
[email protected]

Blockquote

Tsohuwar kan blockquotes marginshine 1em 40px, don haka muna sake saita hakan zuwa 0 0 1remwani abu mafi dacewa da sauran abubuwan.

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen

Abubuwan cikin layi

Abun <abbr>yana karɓar salo na asali don sanya shi fice tsakanin rubutun sakin layi.

Nulla attr vitae elit libero, a pharetra augue.

Takaitawa

Tsohuwar cursortaƙaice ita ce text, don haka muna sake saita hakan pointerdon isar da cewa ana iya mu'amala da sinadarin ta danna shi.

Wasu bayanai

Ƙarin bayani game da cikakkun bayanai.

Ko da ƙarin cikakkun bayanai

Anan akwai ƙarin cikakkun bayanai game da cikakkun bayanai.

HTML5 `[hidden]`sifa

HTML5 yana ƙara sabon sifa na duniya mai suna[hidden] , wanda aka tsara shi azaman display: noneta tsohuwa. Aron ra'ayi daga PureCSS , mun inganta kan wannan tsoho ta hanyar yin [hidden] { display: none !important; }don taimakawa hana ta displayyin kuskure da gangan. Duk da yake [hidden]IE10 ba ta goyan bayan ta asali ba, bayyananniyar fayyace a cikin CSS ɗinmu ta shawo kan wannan matsalar.

<input type="text" hidden>

rashin jituwa jQuery

[hidden]bai dace da jQuery's $(...).hide()da $(...).show()hanyoyin ba. Don haka, a halin yanzu ba mu yarda [hidden]da wasu dabaru na sarrafa displayabubuwan abubuwa ba.

Don kawai kunna ganuwa na wani abu, ma'ana displayba a gyaggyara sa ba kuma har ila yau kashi na iya yin tasiri ga tafiyar daftarin aiki, yi amfani da .invisibleajin maimakon.