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

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

لەم پەیجەدا

نزیک بوونەوە

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

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

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

گۆڕاوەکانی CSS

لە v5.2.0 زیاد کراوە

لەگەڵ v5.1.1، ئێمە @imports پێویستەکانمان لە سەرانسەری هەموو باندڵەکانی CSSمان ستاندارد کرد (لەوانەش bootstrap.css, bootstrap-reboot.css, و bootstrap-grid.css) بۆ ئەوەی _root.scss. ئەمەش :rootگۆڕاوە ئاستی CSS زیاد دەکات بۆ هەموو باندڵەکان، بەبێ گوێدانە ئەوەی چەندیان لەو باندڵەدا بەکاردەهێنرێن. لە کۆتاییدا Bootstrap 5 بەردەوام دەبێت لە بینینی گۆڕاوەی زیاتری CSS کە بە تێپەڕبوونی کات زیاد دەکرێن، بە مەبەستی دابینکردنی خۆکارکردنی زیاتر لە کاتی ڕاستەقینەدا بەبێ ئەوەی پێویست بکات هەمیشە Sass دووبارە کۆبکاتەوە. رێبازی ئێمە ئەوەیە کە گۆڕاوە سەرچاوەییەکانی Sass وەربگرین و بیانگۆڕین بۆ گۆڕاوەی CSS. بەم شێوەیە ئەگەر گۆڕاوەی CSS بەکارنەهێنیت، هێشتا هەموو هێزی Sassت هەیە. ئەمەش هێشتا لە قۆناغی جێبەجێکردندایە و کاتێکی دەوێت تا بە تەواوی جێبەجێ بکرێت.

بۆ نموونە ئەم :rootگۆڕاوانەی CSS بۆ <body>ستایلە باوەکان لەبەرچاو بگرن:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

بە کردەوە، ئەو گۆڕاوانە دواتر لە Reboot وەک ئەمانە جێبەجێ دەکرێن:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

کە ڕێگەت پێدەدات بە هەر شێوەیەک حەزت لێیە خۆکارکردن لە کاتی ڕاستەقینەدا ئەنجام بدەیت:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

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

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

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

بووتستراپ "ستاکی فۆنتێکی سروشتی" یان "ستاکی فۆنتەکانی سیستەم" بەکاردەهێنێت بۆ باشترین ڕەندەری دەق لەسەر هەموو ئامێرێک و سیستەمی کارپێکردن. ئەم فۆنتانەی سیستەم بە تایبەتی بە لەبەرچاوگرتنی ئامێرەکانی ئەمڕۆ دیزاین کراون، بە باشترکردنی ڕەندەرکردن لەسەر شاشەکان، پشتگیری فۆنتەکانی گۆڕاو و زۆر شتی تر. زیاتر بخوێنەرەوە دەربارەی کۆی فۆنتەکانی ڕەسەن لەم بابەتەی گۆڤاری Smashing .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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. سەردێڕی بووتستراپ

یاسا ئاسۆییەکان

<hr>توخمەکە ئاسان کراوە . هاوشێوەی پێشوەختەکانی وێبگەڕ، <hr>s via ستایلیان بۆ دانراوە border-top، پێشوەختەیان هەیە ، و بە شێوەیەکی ئۆتۆماتیکی via opacity: .25یان بە میرات دەگرن ، لەوانە کاتێک لە ڕێگەی باوکەوە ڕێکدەخرێت. دەتوانرێت بە سوودمەندی دەق و سنوور و ناڕوون دەستکاری بکرێن.border-colorcolorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

لیستەکان

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

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

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

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

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

کۆدی ناو هێڵ

پارچە کۆدەکانی ناو هێڵ بە پێچەوە <code>. دڵنیابە لە کەوانەکانی گۆشەی HTML ڕزگارت بێت.

بۆ نموونە <section>پێویستە وەک ئینلاین بپێچرێتەوە.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

بلۆکی کۆدەکان

<pre>بۆ چەندین دێڕی کۆد s بەکاربهێنە . جارێکی تر دڵنیابە لە هەر بڕاکێتێکی گۆشەیی لە کۆدەکەدا بۆ ڕەندەرکردنی دروست ڕزگارت بێت. توخمەکە ڕێست دەکرێتەوە <pre>بۆ لابردنی margin-topو بەکارهێنانی remیەکەکان بۆ margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

گۆڕاوەکان

بۆ ئاماژەدان بە گۆڕاوەکان <var>تاگەکە بەکاربهێنە.

y = m x + ب

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

زانیارییەکانی بەکارهێنەر

<kbd>بۆ ئاماژەدان بە زانیارییەکانی ناوەوە کە بە شێوەیەکی گشتی لە ڕێگەی کیبۆردەوە دەخرێتە ژوورەوە، بەکاربهێنە .

بۆ گۆڕینی بەڕێوەبەرایەتییەکان بنووسە و cdدواتر ناوی بەڕێوەبەرایەتییەکە بنووسە.
بۆ دەستکاریکردنی ڕێکخستنەکان، فشار بدە ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

بۆ ئاماژەدان بە دەرچوونی نمونەیی لە بەرنامەیەکەوە <samp>تاگەکە بەکاربهێنە.

ئەم دەقە مەبەست لێی ئەوەیە کە وەک دەرچوونی نمونەیی لە بەرنامەیەکی کۆمپیوتەرەوە مامەڵەی لەگەڵدا بکرێت.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

خشتەکان

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

فۆڕمەکان

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

<fieldset>s هیچ سنوورێک، پادکردنێک، یان پەراوێزێکیان نییە بۆیە دەتوانرێت بە ئاسانی وەکو پێچان بۆ زانیارییەکانی تاکەکەسی یان گروپەکانی زانیارییەکان بەکاربهێنرێن.
<legend>s، وەکو fieldsets، هەروەها ستایل کراوەتەوە بۆ ئەوەی وەک سەردێڕی جۆرەکان پیشان بدرێت.
<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).

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

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

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

نموونەی ئیمەیڵ

نموونەی تەلەفۆن

نموونەی url

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

گەڕان بە نموونە

مەودای نموونە

نموونەی هاتنە ژوورەوەی پەڕگە

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

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

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

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

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

نموونەی کات

نموونەی وشەی نهێنی

نموونە datetime-local

نموونەی هەفتە

نموونەی مانگ

نموونەی ڕەنگ

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

پشتگیری لە داخڵکردنی بەروار و ڕەنگ

لەبیرت بێت زانیارییەکانی بەروار لەلایەن هەموو وێبگەڕەکانەوە بە تەواوی پشتگیری ناکرێت ، واتە سەفاری.

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

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

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

html

<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>وەردەگرێت بۆ ئەوەی لە نێوان دەقی بڕگەکاندا جیاواز بێت.

توخمە کورتکراوەی HTML .

پوختە

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

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

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

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

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

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

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

<input type="text" hidden>

ناتەبایی jQuery

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

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

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

نزیک بوونەوە

گۆڕاوەکانی CSS

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

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

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

یاسا ئاسۆییەکان

لیستەکان

کۆدی ناو هێڵ

بلۆکی کۆدەکان

گۆڕاوەکان

زانیارییەکانی بەکارهێنەر

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

خشتەکان

فۆڕمەکان

پشتگیری لە داخڵکردنی بەروار و ڕەنگ

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

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

ناونیشان

بلۆککۆت

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

پوختە

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

ناتەبایی jQuery

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