دووبارە بوت بکەرەوە
Reboot، کۆمەڵێک گۆڕانکاری CSS تایبەت بە توخمەکان لە یەک پەڕگەدا، Kickstart Bootstrap بۆ دابینکردنی هێڵێکی بنەڕەتی ڕەسەن و بەردەوام و سادە بۆ بنیاتنانی لەسەر.
نزیک بوونەوە
Reboot لەسەر Normalize بنیات دەنرێت، زۆرێک لە توخمەکانی HTML بە شێوازی تا ڕادەیەک بۆچووندار دابین دەکات بە بەکارهێنانی تەنها هەڵبژێرەری توخمەکان. ستایلکردنی زیادە تەنها لەگەڵ کلاسەکان ئەنجام دەدرێت. بۆ نموونە، ئێمە هەندێک <table>
ستایل دووبارە هەڵدەکەینەوە بۆ هێڵێکی بنەڕەتی سادەتر و دواتر .table
, .table-bordered
, و زۆر شتی تر دابین دەکەین.
لێرەدا ڕێنمایی و هۆکارەکانمان بۆ هەڵبژاردنی ئەوەی کە لە Rebootدا سەرپێچی بکەیت:
- هەندێک بەهای پێشوەختەی وێبگەڕ نوێ بکەرەوە بۆ بەکارهێنانی
rem
s لەبریem
s بۆ دووری پێکهاتەکانی قەبارەدار. - دوور بکەوەرەوە لە
margin-top
. پەراوێزی ڕاست دەتوانێت داڕووخێت و ئەنجامێکی چاوەڕواننەکراو بەدەست بهێنێت. بەڵام لەوەش گرنگتر، یەک ئاراستەیmargin
مۆدێلێکی دەروونی سادەترە. - بۆ ئاسانتر قەبارەدانان لە سەرانسەری قەبارەکانی ئامێرەکاندا، توخمەکانی بلۆک پێویستە
rem
s بۆmargin
s بەکاربهێنن. - ڕاگەیاندنەکانی
font
تایبەتمەندییە پەیوەندیدارەکان بە کەمترین ئاست بهێڵەرەوە،inherit
هەرکاتێک بتوانیت بەکاریبهێنە.
گۆڕاوەکانی CSS
لە v5.1.1 زیاد کراوە
لەگەڵ v5.1.1، ئێمە @import
s پێویستەکانمان لە سەرانسەری هەموو باندڵەکانی CSSمان ستاندارد کرد (لەوانەش bootstrap.css
, bootstrap-reboot.css
, و bootstrap-grid.css
بۆ ئەوەی _root.scss
. ئەمە :root
گۆڕاوە ئاستی CSS زیاد دەکات بۆ هەموو باندڵەکان، بەبێ گوێدانە ئەوەی چەندیان لەو باندڵەدا بەکاردەهێنرێن. لە کۆتاییدا Bootstrap 5 بەردەوام دەبێت لە گۆڕاوەی زیاتری CSS ببینە کە بە تێپەڕبوونی کات زیاد دەکرێن.
پێشوەختەی لاپەڕەکان
توخمەکانی <html>
و <body>
نوێ دەکرێنەوە بۆ دابینکردنی پێشوەختەی باشتر لەسەر سەرانسەری لاپەڕە. بە تایبەتیتر:
- The
box-sizing
بە شێوەیەکی جیهانی لەسەر هەموو توخمێک دانراوە- لەوانە*::before
و*::after
, بۆborder-box
. ئەمەش دڵنیای دەدات لەوەی کە هەرگیز پانایی ڕاگەیەندراوی توخمەکە تێپەڕ ناکرێت بەهۆی پادکردن یان سنوورەوە.- هیچ بنەمایەک
font-size
لەسەر ، ڕاگەیەندراوە<html>
، بەڵام16px
گریمانە دەکرێت (بەپێی پێشوەختەی وێبگەڕەکە).font-size: 1rem
بۆ پێوانەکردنی جۆری وەڵامدەرەوەی ئاسان لە ڕێگەی پرسیارەکانی میدیاوە لە هەمان کاتدا ڕێز لە هەڵبژاردەکانی بەکارهێنەر<body>
دەگرێت و دڵنیابوون لە رێبازێکی دەستڕاگەیشتنتر بەکاردەهێنرێت. ئەم پێشوەختەیەی وێبگەڕ دەتوانرێت بە دەستکاریکردنی$font-size-root
گۆڕاوەکە سەرپێچی بکرێت.
- هیچ بنەمایەک
- هەروەها , , , و
<body>
جیهانی دادەنێت . ئەمەش دواتر لەلایەن هەندێک توخمەکانی فۆرمەوە بە میرات دەگیرێت بۆ ڕێگریکردن لە ناتەبایی فۆنتەکان.font-family
font-weight
line-height
color
- بۆ سەلامەتی، the
<body>
has a declaredbackground-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,
// 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
گۆڕاوەکانی CSS
لەگەڵ بەردەوامبوونی پێگەیشتنی Bootstrap 5، زیاتر و زیاتر ستایلەکان بە گۆڕاوەکانی CSS دروست دەکرێن وەک ئامرازێک بۆ دابینکردنی زیاتری خۆکارکردن لە کاتی ڕاستەقینەدا بەبێ ئەوەی پێویست بکات هەمیشە Sass دووبارە کۆبکرێتەوە. رێبازی ئێمە ئەوەیە کە گۆڕاوە سەرچاوەییەکانی Sass وەربگرین و بیانگۆڕین بۆ گۆڕاوەی CSS. بەم شێوەیە ئەگەر گۆڕاوەکانی CSS بەکارنەهێنیت، هێشتا هەموو هێزی Sassت هەیە. ئەمەش هێشتا لە قۆناغی جێبەجێکردندایە و کاتێکی دەوێت تا بە تەواوی جێبەجێ بکرێت.
بۆ نموونە ئەم :root
گۆڕاوانەی CSS بۆ <body>
ستایلە باوەکان لەبەرچاو بگرن:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
بە کردەوە، ئەو گۆڕاوانە دواتر لە Reboot وەک ئەمانە جێبەجێ دەکرێن:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
سەردێڕ و بڕگەکان
هەموو توخمەکانی سەردێڕ-بۆ نموونە، <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
. هەروەها توخمەکانی padding-left
on <ul>
و ڕێستمان کردووە <ol>
.
- هەموو لیستەکان پەراوێزی سەرەوەیان لابراوە
- وە پەراوێزی خوارەوەیان ئاسایی بووەوە
- لیستە هێلانەکراوەکان هیچ پەراوێزێکی خوارەوەیان نییە
- بەم شێوەیە سیمایەکی یەکسانتریان دەبێت
- بە تایبەتی کاتێک بابەتی زیاتری لیست بەدوایدا دێت
- هەروەها پادینگی چەپیش ڕێست کراوە
- لێرەدا لیستێکی ڕێکخراو
- لەگەڵ چەند بابەتێکی لیست
- هەمان دیمەنی گشتی هەیە
- وەک لیستی پێشووی بێ ڕێکخستن
بۆ ستایلێکی سادەتر، پلەبەندی ڕوون و دووری باشتر، لیستەکانی وەسفەکان margin
sیان نوێ کردووەتەوە. <dd>
s ڕێست بکە margin-left
بۆ 0
و زیاد بکە margin-bottom: .5rem
. <dt>
s بە قەڵەمی نووسراوە .
- لیستەکانی وەسف
- لیستی وەسف تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.
- چەمک
- پێناسە بۆ ئەو زاراوەیە.
- پێناسەی دووەم بۆ هەمان زاراوە.
- زاراوەیەکی تر
- پێناسە بۆ ئەم زاراوەیەی تر.
کۆدی ناو هێڵ
پارچە کۆدەکانی ناو هێڵ بە پێچەوە <code>
. دڵنیابە لە کەوانەکانی گۆشەی HTML ڕزگارت بێت.
<section>
پێویستە وەک ئینلاین بپێچرێتەوە.
For example, <code><section></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>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
گۆڕاوەکان
بۆ ئاماژەدان بە گۆڕاوەکان <var>
تاگەکە بەکاربهێنە.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
زانیارییەکانی بەکارهێنەر
<kbd>
بۆ ئاماژەدان بە زانیارییەکانی ناوەوە کە بە شێوەیەکی گشتی لە ڕێگەی کیبۆردەوە دەخرێتە ژوورەوە، بەکاربهێنە .
بۆ دەستکاریکردنی ڕێکخستنەکان، فشار بدە ctrl + ,
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>
تاگەکە بەکاربهێنە.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
خشتەکان
خشتەکان کەمێک ڕێکدەخرێن بە شێوازی <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>
وەردەگرێت بۆ ئەوەی لە نێوان دەقی بڕگەکاندا جیاواز بێت.
پوختە
بەپێی پێشوەختە 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
ئەوە پۆلەکە بەکاربهێنە.