Source

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

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

ئەمەش 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.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
- فاسێلۆس ئیاکولیس نێکێ
- پوروس سۆدالێس ultricies
- Vestibulum laoreet پۆرتیتۆر سێم
- Ac tristique لیبێرۆ ڤۆڵوتپات لە
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

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

لیستەکانی وەسف: لیستی وەسف تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.
یۆیسمۆد: ڤێستیبولۆم id لیگولا پۆرتا فێلیس یۆیسمۆد سێمپەر ئیگێت لاسینیا ئۆدیۆ سێم.; Donec id elit non mi porta gravida لە ئیگێت مێتۆس.
مالێسوادا پۆرتا: ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.

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

توخمەکە ڕێست دەکرێتەوە <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 دەستکاری دەکرێن بۆ ئەوەی تەنها قەبارەیان بە شێوەی ڕاست بگۆڕدرێت چونکە قەبارەی ئاسۆیی زۆرجار نەخشەی لاپەڕەکە "دەشکێنێت".

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

نموونەی ئەفسانە

نموونەی هاتنە ژوورەوە

نموونە هەڵبژێرە

ئەم بۆکسە هەڵبژێرە

بژاردەی یەکەم ئەمە و ئەو بژاردەی دووەم شتێکی ترە کە هەروەها سوپەر درێژە بۆ نیشاندانی پێچانی ئەم کۆنتڕۆڵە فۆڕمی فەنتازیانە. بژاردەی سێیەم لەکارخراوە

نموونەی ناوچەی دەق

نموونەی بەروار

نموونەی کات

نموونەی دەرچوون 100

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

ناونیشان

توخمەکە نوێ دەکرێتەوە <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بۆ شتێک کە زیاتر لەگەڵ توخمەکانی تردا یەکدەگرێتەوە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

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

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

توخمەکە ستایلێکی بنەڕەتی <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 ئەوە پۆلەکە بەکاربهێنە.