دووبارە بوت بکەرەوە

Reboot، کۆمەڵێک گۆڕانکاری CSS تایبەت بە توخمەکان لە یەک پەڕگەدا، Kickstart Bootstrap بۆ دابینکردنی هێڵێکی بنەڕەتی ڕەسەن و بەردەوام و سادە بۆ بنیاتنانی لەسەر.

نزیک بوونەوە

Reboot لەسەر Normalize بنیات دەنرێت، زۆرێک لە توخمەکانی HTML بە شێوازی تا ڕادەیەک بۆچووندار دابین دەکات بە بەکارهێنانی تەنها هەڵبژێرەری توخمەکان. ستایلکردنی زیادە تەنها لەگەڵ کلاسەکان ئەنجام دەدرێت. بۆ نموونە، ئێمە هەندێک <table>ستایل دووبارە هەڵدەکەینەوە بۆ هێڵێکی بنەڕەتی سادەتر و دواتر .table, .table-bordered, و زۆر شتی تر دابین دەکەین.

لێرەدا ڕێنمایی و هۆکارەکانمان بۆ هەڵبژاردنی ئەوەی کە لە Rebootدا سەرپێچی بکەیت:

هەندێک بەهای پێشوەختەی وێبگەڕ نوێ بکەرەوە بۆ بەکارهێنانی rems لەبری ems بۆ دووری پێکهاتەکانی قەبارەدار.
دوور بکەوەرەوە لە margin-top. پەراوێزی ڕاست دەتوانێت داڕووخێت و ئەنجامێکی چاوەڕواننەکراو بەدەست بهێنێت. بەڵام لەوەش گرنگتر، یەک ئاراستەی marginمۆدێلێکی دەروونی سادەترە.
بۆ ئاسانتر قەبارەدانان لە سەرانسەری قەبارەکانی ئامێرەکاندا، توخمەکانی بلۆک پێویستە rems بۆ margins بەکاربهێنن.
ڕاگەیاندنەکانی fontتایبەتمەندییە پەیوەندیدارەکان بە کەمترین ئاست بهێڵەرەوە، inheritهەرکاتێک بتوانیت بەکاریبهێنە.

پێشوەختەی لاپەڕەکان

توخمەکانی <html>و <body>نوێ دەکرێنەوە بۆ دابینکردنی پێشوەختەی باشتر لەسەر سەرانسەری لاپەڕە. بە تایبەتیتر:

The box-sizingبە شێوەیەکی جیهانی لەسەر هەموو توخمێک دانراوە- لەوانە *::beforeو *::after, بۆ border-box. ئەمەش دڵنیای دەدات لەوەی کە هەرگیز پانایی ڕاگەیەندراوی توخمەکە تێپەڕ ناکرێت بەهۆی پادکردن یان سنوورەوە.
هیچ بنەمایەک font-sizeلەسەر ، ڕاگەیەندراوە <html>، بەڵام 16pxگریمانە دەکرێت (بەپێی پێشوەختەی وێبگەڕەکە). font-size: 1remبۆ پێوانەکردنی جۆری وەڵامدەرەوەی ئاسان لە ڕێگەی پرسیارەکانی میدیاوە لە هەمان کاتدا ڕێز لە هەڵبژاردەکانی بەکارهێنەر <body>دەگرێت و دڵنیابوون لە رێبازێکی دەستڕاگەیشتنتر بەکاردەهێنرێت.
هەروەها , , و <body>جیهانی دادەنێت . ئەمەش دواتر لەلایەن هەندێک توخمەکانی فۆرمەوە بە میرات دەگیرێت بۆ ڕێگریکردن لە ناتەبایی فۆنتەکان.font-familyline-heighttext-align
بۆ سەلامەتی، the <body>has a declared background-color, defaulting to #fff.

ستاکی فۆنتێکی ڕەسەن

فۆنتەکانی وێبی پێشوەختە (Helvetica Neue، Helvetica، و Arial) لە Bootstrap 4 دا لابراون و بە "ستاکی فۆنتەکانی ڕەسەن" گۆڕدراون بۆ باشترین ڕەندەری دەق لەسەر هەموو ئامێرێک و سیستەمی کارپێکردن. زیاتر بخوێنەرەوە دەربارەی ستاکی فۆنتەکانی ڕەسەن لەم بابەتەی گۆڤاری Smashing .

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

سەرنج بدە کە لەبەر ئەوەی فۆنت ستاک فۆنتەکانی ئیمۆجی لەخۆدەگرێت، زۆرێک لە پیتە باوەکانی هێما/دینگبات یونیکۆد وەک پیکتۆگرافی فرەڕەنگ ڕەندەر دەکرێن. دەرکەوتنیان دەگۆڕێت، بەپێی ئەو ستایلەی کە لە فۆنتەکەی ئیمۆجییە ڕەسەنەکەی وێبگەڕ/پلاتفۆرمەکەدا بەکارهاتووە، هەروەها هیچ colorستایلێکی CSS کاریگەرییان لەسەر نابێت.

ئەمەش font-familyبۆ <body>و بە شێوەیەکی ئۆتۆماتیکی بە شێوەیەکی جیهانی لە سەرتاسەری Bootstrapدا بە میرات دەگیرێت. بۆ گۆڕینی global , Bootstrap font-familyنوێ بکەرەوە و دووبارە کۆبکەرەوە.$font-family-base

سەردێڕ و بڕگەکان

هەموو توخمەکانی سەردێڕ-بۆ نموونە، <h1>—و <p>ڕێست دەکرێنەوە بۆ ئەوەی margin-topلاببرێن. سەردێڕەکان margin-bottom: .5remزیادکراون و بڕگە margin-bottom: 1remبۆ دووری ئاسان.

سەردێڕ	نموونە
`<h1></h1>`	h1. سەردێڕی بووتستراپ
`<h2></h2>`	h2. سەردێڕی بووتستراپ
`<h3></h3>`	h3. سەردێڕی بووتستراپ
`<h4></h4>`	h4. سەردێڕی بووتستراپ
`<h5></h5>`	h5. سەردێڕی بووتستراپ
`<h6></h6>`	h6. سەردێڕی بووتستراپ

لیستەکان

هەموو لیستەکان— <ul>, <ol>, و <dl>— margin-topلابراون و margin-bottom: 1rem. لیستە هێلانەکراوەکان هیچ margin-bottom.

هەموو لیستەکان پەراوێزی سەرەوەیان لابراوە
وە پەراوێزی خوارەوەیان ئاسایی بووەوە
لیستە هێلانەکراوەکان هیچ پەراوێزێکی خوارەوەیان نییە
- بەم شێوەیە سیمایەکی یەکسانتریان دەبێت
- بە تایبەتی کاتێک بابەتی زیاتری لیست بەدوایدا دێت
هەروەها پادینگی چەپیش ڕێست کراوە

لێرەدا لیستێکی ڕێکخراو
لەگەڵ چەند بابەتێکی لیست
هەمان دیمەنی گشتی هەیە
وەک لیستی پێشووی بێ ڕێکخستن

بۆ ستایلێکی سادەتر، پلەبەندی ڕوون و دووری باشتر، لیستەکانی وەسفەکان marginsیان نوێ کردووەتەوە. <dd>s ڕێست بکە margin-leftبۆ 0و زیاد بکە margin-bottom: .5rem. <dt>s بە قەڵەمی نووسراوە .

لیستەکانی وەسف: لیستی وەسف تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.
چەمک: پێناسە بۆ ئەو زاراوەیە.; پێناسەی دووەم بۆ هەمان زاراوە.
زاراوەیەکی تر: پێناسە بۆ ئەم زاراوەیەی تر.

دەقی پێش فۆڕماتکراو

توخمەکە ڕێست دەکرێتەوە <pre>بۆ لابردنی margin-topو بەکارهێنانی remیەکەکان بۆ margin-bottom.

.نموونە-توخم {
  پەراوێز-خوارەوە: 1rem;
}

خشتەکان

خشتەکان کەمێک ڕێکدەخرێن بە شێوازی <caption>s، سنوورەکان دەڕووخێن، و دڵنیا دەبن لە یەکدەنگی text-alignبە درێژایی. گۆڕانکاری زیادە بۆ سنوورەکان، پادکردن و زۆر شتی تر لەگەڵ پۆلەکەدا.table دێن .

ئەمە خشتەی نموونەییە، و ئەمەش سەردێڕەکەیەتی بۆ وەسفکردنی ناوەڕۆکەکەی.
سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە
خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە

فۆڕمەکان

توخمە جۆراوجۆرەکانی فۆڕم دووبارە هەڵکراونەتەوە بۆ ستایلە بنەڕەتییە سادەکان. لێرەدا چەند گۆڕانکارییەکی بەرچاو دەخەینەڕوو:

<fieldset>s هیچ سنوورێک، پادکردنێک، یان پەراوێزێکیان نییە بۆیە دەتوانرێت بە ئاسانی وەکو پێچان بۆ تاکە زانیارییەکان یان گروپەکانی زانیارییەکان بەکاربهێنرێن.
<legend>s، وەک کۆمەڵە مەیدانەکان، هەروەها ستایل کراوەتەوە بۆ ئەوەی وەک سەردێڕی جۆرەکان پیشان بدرێت.
<label>s دانراون بۆ display: inline-blockئەوەی ڕێگە marginبدەن جێبەجێ بکرێت.
<input>s، <select>s، <textarea>s، و <button>s زیاتر لەلایەن Normalizeەوە ئاڕاستە دەکرێن، بەڵام Reboot ئەوان لادەبات marginو , هەروەها دادەنێت line-height: inherit.
<textarea>s دەستکاری دەکرێن بۆ ئەوەی تەنها قەبارەیان بە شێوەی ڕاست بگۆڕدرێت چونکە قەبارەی ئاسۆیی زۆرجار نەخشەی لاپەڕەکە "دەشکێنێت".
<button>s و <input>توخمەکانی دوگمە کاتێکیان cursor: pointerهەیە :not(:disabled).

ئەم گۆڕانکاریانە و زۆر شتی تر لە خوارەوە نیشان دراون.

ئاماژەدەرەکان لەسەر دوگمەکان

Reboot پێشکەوتنێکی تێدایە بۆ role="button"گۆڕینی ئاماژەدەری پێشوەختە بۆ pointer. ئەم تایبەتمەندییە زیاد بکە بۆ توخمەکان بۆ ئەوەی یارمەتیت بدات ئاماژە بەوە بدەیت کە توخمەکان کارلێککارن. ئەم ڕۆڵە بۆ توخمەکان پێویست نییە ، کە گۆڕانکاری <button>خۆیان بەدەست دەهێنن .cursor

دوگمەی توخمە نا دوگمەییەکان

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

توخمە جۆراوجۆرەکان

ناونیشان

توخمەکە نوێ دەکرێتەوە <address>بۆ ڕێستکردنی پێشوەختەی وێبگەڕەکە font-styleلە italicبۆ normal. line-heightهەروەها ئێستا بۆماوەییە، و margin-bottom: 1remزیاد کراوە. <address>s بۆ پێشکەشکردنی زانیاری پەیوەندیکردنە بۆ نزیکترین باپیرە (یان تەواوی جەستەیەکی کار). پاراستنی فۆرماتکردن بە کۆتایی هێنان بە دێڕەکان بە <br>.

تویتەر، ئینکۆ
1355 مارکێت ست، سویت 900
سان فرانسیسکۆ، سی ئەی 94103
پ: (123) 456-7890

ناوی تەواو
[email protected]

بلۆککۆت

بەپێی پێشوەختە marginلەسەر blockquotes بریتییە لە 1em 40px, بۆیە ئێمە ئەوە ڕێست دەکەین 0 0 1remبۆ شتێک کە زیاتر لەگەڵ توخمەکانی تردا یەکدەگرێتەوە.

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە

توخمەکانی ناو هێڵ

توخمەکە ستایلێکی بنەڕەتی <abbr>وەردەگرێت بۆ ئەوەی لە نێوان دەقی بڕگەکاندا جیاواز بێت.

Nulla attr vitae elit libero، یەکێکە لە فارێترا ئاوگەکان.

پوختە

بەپێی پێشوەختە cursorلەسەر پوختە بریتییە لە text, بۆیە ئێمە ئەوە بۆ ڕێست دەکەین بۆ pointerئەوەی بگەیەنین کە دەتوانرێت توخمەکە کارلێکی لەگەڵدا بکرێت بە کرتەکردن لەسەری.

چەند وردەکارییەک

زانیاری زیاتر لەسەر وردەکارییەکان.

تەنانەت وردەکاری زیاتریش

لێرەدا وردەکاری زیاتریش سەبارەت بە وردەکارییەکان دەخەینەڕوو.

`[hidden]`تایبەتمەندی HTML5

HTML5 تایبەتمەندییەکی جیهانی نوێ زیاد دەکات بە ناوی[hidden] , کە بە شێوازی display: noneپێشوەختە ستایل کراوە. بە قەرزکردنی بیرۆکەیەک لە PureCSS , ئێمە باشتر دەکەین لەسەر ئەم پێشوەختە بە دروستکردن [hidden] { display: none !important; }بۆ یارمەتیدان لە ڕێگریکردن displayلە وەرگرتنی بە هەڵە لە سەرپێچی. لە کاتێکدا [hidden]کە بە شێوەیەکی سروشتی لەلایەن IE10 پشتگیری ناکرێت، ڕاگەیاندنی ڕوون لە CSS ی ئێمەدا ئەو کێشەیە دەگرێتەوە.

<input type="text" hidden>

ناتەبایی jQuery

[hidden]لەگەڵ jQuery's $(...).hide()و $(...).show()شێوازەکان ناگونجێت. بۆیە ئێمە لە ئێستادا بە تایبەتی پشتگیری [hidden]لە تەکنیکەکانی تر بۆ بەڕێوەبردنی displayتوخمەکان ناکەین.

بۆ ئەوەی تەنها بینینی توخمێک بگۆڕیت، واتە displayدەستکاری نەکراوە و توخمەکە هێشتا دەتوانێت کاریگەری لەسەر ڕەوتی بەڵگەنامەکە هەبێت، لەبری.invisible ئەوە پۆلەکە بەکاربهێنە.