دووبارە بوت بکەرەوە
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
هەرکاتێک بتوانیت بەکاریبهێنە.
پێشوەختەی لاپەڕەکان
توخمەکانی <html>
و <body>
نوێ دەکرێنەوە بۆ دابینکردنی پێشوەختەی باشتر لەسەر سەرانسەری لاپەڕە. بە تایبەتیتر:
- The
box-sizing
بە شێوەیەکی جیهانی لەسەر هەموو توخمێک دانراوە- لەوانە*::before
و*::after
, بۆborder-box
. ئەمەش دڵنیای دەدات لەوەی کە هەرگیز پانایی ڕاگەیەندراوی توخمەکە تێپەڕ ناکرێت بەهۆی پادکردن یان سنوورەوە. - هیچ بنەمایەک
font-size
لەسەر ، ڕاگەیەندراوە<html>
، بەڵام16px
گریمانە دەکرێت (بەپێی پێشوەختەی وێبگەڕەکە).font-size: 1rem
بۆ پێوانەکردنی جۆری وەڵامدەرەوەی ئاسان لە ڕێگەی پرسیارەکانی میدیاوە لە هەمان کاتدا ڕێز لە هەڵبژاردەکانی بەکارهێنەر<body>
دەگرێت و دڵنیابوون لە رێبازێکی دەستڕاگەیشتنتر بەکاردەهێنرێت. - هەروەها , , و
<body>
جیهانی دادەنێت . ئەمەش دواتر لەلایەن هەندێک توخمەکانی فۆرمەوە بە میرات دەگیرێت بۆ ڕێگریکردن لە ناتەبایی فۆنتەکان.font-family
line-height
text-align
- بۆ سەلامەتی، the
<body>
has a declaredbackground-color
, defaulting to#fff
.
ستاکی فۆنتێکی ڕەسەن
فۆنتەکانی وێبی پێشوەختە (Helvetica Neue، Helvetica، و Arial) لە Bootstrap 4 دا لابراون و بە "ستاکی فۆنتەکانی ڕەسەن" گۆڕدراون بۆ باشترین ڕەندەری دەق لەسەر هەموو ئامێرێک و سیستەمی کارپێکردن. زیاتر بخوێنەرەوە دەربارەی ستاکی فۆنتەکانی ڕەسەن لەم بابەتەی گۆڤاری Smashing .
ئەمەش font-family
بۆ <body>
و بە شێوەیەکی ئۆتۆماتیکی بە شێوەیەکی جیهانی لە سەرتاسەری Bootstrapدا بە میرات دەگیرێت. بۆ گۆڕینی global , Bootstrap font-family
نوێ بکەرەوە و دووبارە کۆبکەرەوە.$font-family-base
سەردێڕ و بڕگەکان
هەموو توخمەکانی سەردێڕ-بۆ نموونە، <h1>
—و <p>
ڕێست دەکرێنەوە بۆ ئەوەی margin-top
لاببرێن. سەردێڕەکان margin-bottom: .5rem
زیادکراون و بڕگە margin-bottom: 1rem
بۆ دووری ئاسان.
سەردێڕ | نموونە |
---|---|
|
h1. سەردێڕی بووتستراپ |
|
h2. سەردێڕی بووتستراپ |
|
h3. سەردێڕی بووتستراپ |
|
h4. سەردێڕی بووتستراپ |
|
h5. سەردێڕی بووتستراپ |
|
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
- ئیگێت پۆرتیتۆر لۆرێم
بۆ ستایلێکی سادەتر، پلەبەندی ڕوون و دووری باشتر، لیستەکانی وەسفەکان margin
sیان نوێ کردووەتەوە. <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 دەستکاری دەکرێن بۆ ئەوەی تەنها قەبارەیان بە شێوەی ڕاست بگۆڕدرێت چونکە قەبارەی ئاسۆیی زۆرجار نەخشەی لاپەڕەکە "دەشکێنێت".<button>
s و<input>
توخمەکانی دوگمە کاتێکیانcursor: pointer
هەیە:not(:disabled)
.
ئەم گۆڕانکاریانە و زۆر شتی تر لە خوارەوە نیشان دراون.
توخمە جۆراوجۆرەکان
ناونیشان
توخمەکە نوێ دەکرێتەوە <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>
وەردەگرێت بۆ ئەوەی لە نێوان دەقی بڕگەکاندا جیاواز بێت.
پوختە
بەپێی پێشوەختە cursor
لەسەر پوختە بریتییە لە text
, بۆیە ئێمە ئەوە بۆ ڕێست دەکەین بۆ pointer
ئەوەی بگەیەنین کە دەتوانرێت توخمەکە کارلێکی لەگەڵدا بکرێت بە کرتەکردن لەسەری.
چەند وردەکارییەک
زانیاری زیاتر لەسەر وردەکارییەکان.
تەنانەت وردەکاری زیاتریش
لێرەدا وردەکاری زیاتریش سەبارەت بە وردەکارییەکان دەخەینەڕوو.
[hidden]
تایبەتمەندی HTML5
HTML5 تایبەتمەندییەکی جیهانی نوێ زیاد دەکات بە ناوی[hidden]
, کە بە شێوازی display: none
پێشوەختە ستایل کراوە. بە قەرزکردنی بیرۆکەیەک لە PureCSS , ئێمە باشتر دەکەین لەسەر ئەم پێشوەختە بە دروستکردن [hidden] { display: none !important; }
بۆ یارمەتیدان لە ڕێگریکردن display
لە وەرگرتنی بە هەڵە لە سەرپێچی. لە کاتێکدا [hidden]
کە بە شێوەیەکی سروشتی لەلایەن IE10 پشتگیری ناکرێت، ڕاگەیاندنی ڕوون لە CSS ی ئێمەدا ئەو کێشەیە دەگرێتەوە.
ناتەبایی jQuery
[hidden]
لەگەڵ jQuery's $(...).hide()
و $(...).show()
شێوازەکان ناگونجێت. بۆیە ئێمە لە ئێستادا بە تایبەتی پشتگیری [hidden]
لە تەکنیکەکانی تر بۆ بەڕێوەبردنی display
توخمەکان ناکەین.
بۆ ئەوەی تەنها بینینی توخمێک بگۆڕیت، واتە display
دەستکاری نەکراوە و توخمەکە هێشتا دەتوانێت کاریگەری لەسەر ڕەوتی بەڵگەنامەکە هەبێت، لەبری.invisible
ئەوە پۆلەکە بەکاربهێنە.