بووتستراپ

داسەپاندن

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

شێوازە جیهانییەکان بۆ ڕێستکردنی CSS، تایپۆگرافی و بەستەرەکان

پێویستی بە HTML5 doctype هەیە

بووتستراپ سوود لە توخمەکانی HTML و تایبەتمەندییەکانی CSS وەردەگرێت کە پێویستیان بە بەکارهێنانی doctype HTML5 هەیە. دڵنیابە لە سەرەتای هەموو لاپەڕەیەکی Bootstrapped لە پرۆژەکەتدا بیخەیتە ناوەوە.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

تایپۆگرافی و بەستەرەکان

لەناو پەڕگەی scaffolding.less دا ، ئێمە پیشاندانی جیهانی بنەڕەتی، تایپۆگرافی و شێوازی بەستەرەکان دادەنێین. بە تایبەتی ئێمە:

  • پەراوێز لەسەر جەستە دەربهێنە
  • دانراوە background-color: white;لەسەر...body
  • @baseFontFamilyتایبەتمەندیەکانی , @baseFontSize, و @baseLineHeightوەک بنەمای تایپۆگرافیمان بەکاربهێنە
  • ڕەنگی بەستەری جیهانی لە ڕێگەی @linkColorو جێبەجێکردنی ژێر هێڵەکانی بەستەر تەنها لەسەر:hover

لە ڕێگەی Normalize ەوە ڕێست بکە

لە Bootstrap 2 ەوە، ڕێستکردنی CSS ی تەقلیدی پەرەی سەندووە بۆ ئەوەی سوود لە توخمەکانی Normalize.css وەربگرێت ، پڕۆژەیەک لەلایەن Nicolas Gallagher کە هەروەها HTML5 Boilerplate بەهێز دەکات .

هێشتا دەتوانرێت ڕێستکردنی نوێ لە reset.less بدۆزرێتەوە ، بەڵام لەگەڵ چەندین توخم کە لابراون بۆ کورتی و وردبینی.

سیستەمی تۆڕی پێشوەختە 12 ستوون بە پێچێکی وەڵامدەرەوە

1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
4. 4
4. 4
4. 4
4. 4
8. 8
6. 6
6. 6
12. 12

سیستەمی تۆڕی پێشوەختە کە لە Bootstrap دابین کراوە 12 ستوون بەکاردەهێنێت کە بە پانایی 724px، 940px (بەپێی پێشوەختە بەبێ CSS وەڵامدەرەوەی لەگەڵدا بێت)، و 1170px ڕەندەر دەکات. لە خوارەوەی 767px viewports، ستوونەکان دەبنە شلە و بە شێوەی ڕاست لەسەر یەک کۆدەبنەوە.

  1. <div class = "ڕیز" > 
  2.   <div پۆل = "span4" > ... </div> 
  3.   <div پۆل = "span8" > ... </div> 
  4. </div>

وەک لێرەدا نیشان دراوە، دەتوانرێت نەخشەیەکی بنەڕەتی بە دوو "ستوون" دروست بکرێت، هەریەکەیان ژمارەیەک لەو ١٢ ستوونە بنەڕەتییە دەگرێتەوە کە وەک بەشێک لە سیستەمی تۆڕەکەمان پێناسەمان کردووە.


ئۆفسێتی ستوونەکان

4. 4
4 ئۆفسێت 4
3 ئۆفسێت 3
3 ئۆفسێت 3
8 ئۆفسێت 4 
  1. <div class = "ڕیز" > 
  2.   <div پۆل = "span4" > ... </div> 
  3.   <div پۆل = "span4 ئۆفسێت4" > ... </div> 
  4. </div>

ستوونی هێلانەکردن

بە سیستەمی تۆڕی ئیستاتیک (نا شلە) لە Bootstrap، هێلانەکردن ئاسانە. بۆ هێلانەکردنی ناوەڕۆکەکەت، تەنها ستوونێکی نوێ .rowو کۆمەڵێک ستوون زیاد بکە لەناو ستوونێکی .span*هەبوودا ..span*

نموونە

ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە بۆ ژمارەی ستوونەکانی باوکی. بۆ نموونە دوو .span3ستوونی هێلانەکراو دەبێ لەناو یەکێکدا دابنرێت .span6.

ئاستی یەکەمی ستوونی
ئاستی دووەم
ئاستی دووەم 
  1. <div class = "ڕیز" > 
  2.   <div پۆل = "span6" > 
  3.     ستوونی ئاستی یەکەم
  4.     <div class = "ڕیز" > 
  5.       <div class = "span3" > ئاستی دووەم </div> 
  6.       <div class = "span3" > ئاستی دووەم </div> 
  7.     </div>
  8.   </div>
  9. </div>

سیستەمی تۆڕی شلە 12 ستوونی وەڵامدەرەوە، لەسەر بنەمای لەسەدا

ستوونی شلە

1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
4. 4
4. 4
4. 4
4. 4
8. 8
6. 6
6. 6
12. 12

لەسەدا نەک پێکسڵ

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

ڕیزەکانی شلە

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

مارکاپ

  1. <div class = "شلەی ڕیز" > 
  2.   <div پۆل = "span4" > ... </div> 
  3.   <div پۆل = "span8" > ... </div> 
  4. </div>

هێلانەکردنی شلە

هێلانەکردن بە تۆڕە شلەکان کەمێک جیاوازە: ژمارەی ستوونە هێلانەکراوەکان پێویست ناکات لەگەڵ دایک و باوکدا بگونجێت. بەڵکو ستوونەکانت لە هەر ئاستێکدا ڕێست دەکرێنەوە چونکە هەر ڕیزێک 100% ستوونی باوک دەگرێتەوە.

شلەی 12
شلەی ٦
شلەی ٦ 
  1. <div class = "شلەی ڕیز" > 
  2.   <div پۆل = "span12" > 
  3.     ئاستی یەکەمی ستوونی
  4.     <div class = "شلەی ڕیز" > 
  5.       <div class = "span6" > ئاستی دووەم </div> 
  6.       <div class = "span6" > ئاستی دووەم </div> 
  7.     </div>
  8.   </div>
  9. </div>

خۆکارکردنی تۆڕ

گۆڕاو بةهاى دواكةوتن وەسف
@gridColumns 12. 12 ژمارەی ستوونەکان
@gridColumnWidth 60px پانایی هەر ستوونێک
@gridGutterWidth 20px بۆشایی نەرێنی لە نێوان ستوونەکاندا

گۆڕاوەکان لە LESS

لەناو Bootstrapدا مشتێک گۆڕاو بۆ خۆکارکردنی سیستەمی تۆڕی پێشوەختەی 940px دروستکراوە، کە لە سەرەوە بەڵگەی لەسەر کراوە. هەموو گۆڕاوەکان بۆ تۆڕەکە لە گۆڕاوەکاندا هەڵدەگیرێن.less.

چۆنێتی خۆکارکردن

دەستکاریکردنی تۆڕەکە واتە گۆڕینی سێ @grid*گۆڕاوەکە و دووبارە کۆکردنەوەی Bootstrap. گۆڕاوە تۆڕەکان لە variables.less بگۆڕە و یەکێک لە چوار ڕێگای بەڵگەدار بەکاربهێنە بۆ دووبارە کۆکردنەوە . ئەگەر ستوونی زیاتر زیاد دەکەیت، دڵنیابە CSS زیاد دەکەیت بۆ ئەوانەی لە grid.lessدان.

مانەوە بە وەڵامدەرەوە

خۆکارکردنی تۆڕەکە تەنها لە ئاستی پێشوەختەدا کاردەکات، تۆڕی 940px. بۆ پاراستنی لایەنە وەڵامدەرەوەکانی Bootstrap، هەروەها دەبێت تۆڕەکان لە responsive.lessدا خۆت ڕێکبخەیت.

نەخشەکان قاڵبی بنەڕەتی بۆ دروستکردنی وێبپەڕەکان

نەخشەی جێگیر کراوە

شێوازی پێشوەختە و سادە بە فراوانی 940px، ناوەنددار بۆ تەنها نزیکەی هەر ماڵپەڕێک یان لاپەڕەیەک کە لەلایەن تاکە لاپەڕەیەکەوە دابینکراوە <div class="container">.

  1. <جەستە>
  2.   <div class = "دەفر" > 
  3.     ...
  4.   </div>
  5. </body>

شێوازی شلە

<div class="container-fluid">پێکهاتەی لاپەڕەی نەرم و نیان دەدات، کەمترین و زۆرترین پانایی، و پەڕەیەکی لایەنی دەستی چەپ. بۆ ئەپ و دۆکەکان زۆر باشە.

  1. <div class = "شلەی دەفر" > 
  2.   <div class = "شلەی ڕیز" > 
  3.     <div پۆل = "span2" > 
  4.       <!--ناوەڕۆکی پەڕە لاوەکییەکان-->
  5.     </div>
  6.     <div پۆل = "span10" > 
  7.       <!--ناوەڕۆکی جەستە-->
  8.     </div>
  9.   </div>
  10. </div>

دیزاینی وەڵامدەرەوە پرسیارەکانی میدیا بۆ ئامێر و ڕوونی جۆراوجۆر

ئامێری وەڵامدەرەوە

ئەوەی ئەوان دەیکەن

پرسیارەکانی میدیا ڕێگە بە CSSی تایبەت دەدەن بە پشتبەستن بە ژمارەیەک مەرج- ڕێژە، پانایی، جۆری پیشاندانی، هتد- بەڵام بەزۆری لە دەوری min-widthو تەرکیز دەکات max-width.

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

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

ئامێره‌ پشتگیریكراوه‌كان

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

لەیبڵ پانایی نەخشە پانایی ستوونەکە پانایی کانیاو
مۆبایلە زیرەکەکان 480px و خوارەوە ستوونی شلە، بێ پانایی جێگیر
مۆبایلە زیرەکەکان بۆ تابلێتەکان 767px و خوارەوە ستوونی شلە، بێ پانایی جێگیر
تابلێتی پۆرترێت 768px و سەرووتر 42px 20px
بنەڕەتی 980px و بەرزتر 60px 20px
شاشەیەکی گەورە 1200px و بەرزتر 70px 30px

پێویستی بە مێتا تاگی هەیە

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

  1. <meta name = "viewport" ناوەڕۆک = "پانی=پانی-ئامێر، پێوەر-سەرەکی=1.0" >

بەکارهێنانی پرسیارەکانی میدیا

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

  1. وەشانی وەڵامدەرەوەی کۆکراوە بەکاربهێنە، bootstrap-responsive.css
  2. @import "responsive.less" زیاد بکە و Bootstrap دووبارە کۆبکەرەوە
  3. دەستکاریکردن و دووبارە کۆکردنەوەی responsive.less وەک فایلێکی جیاواز

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

  1.   /* مۆبایلەکانی لاندسکەیپ و داون */
  2.   @media ( زۆرترین پانایی : 480px ) { ... } _     
  3.  
  4.   /* مۆبایلی لاندسکەیپ بۆ تابلێتی پۆرترێت */
  5.   @media ( زۆرترین پانایی : 767px ) { ... } _     
  6.  
  7.   /* تابلێتی پۆرترێت بۆ لاندسکەیپ و دەسکتۆپ */
  8.   @media ( کەمترین پانی : 768px ) و ( زۆرترین پانی : 979px ) { ... } _ _        
  9.  
  10.   /* دەسکتۆپی گەورە */
  11.   @media ( کەمترین پانی : 1200px ) { ... } _

پۆلەکانی سوودمەندی وەڵامدەرەوە

ئەوانە چین

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

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

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

بۆ نموونە دەتوانیت <select>توخمێک بۆ nav لەسەر نەخشەی مۆبایلەکان پیشان بدەیت، بەڵام لەسەر تابلێتەکان یان دەسکتۆپەکان نا.

پشتگیری پۆلەکان

لێرەدا خشتەی ئەو پۆلانە نیشان دراوە کە ئێمە پشتگیریان دەکەین و کاریگەرییان لەسەر نەخشەی پرسیاری میدیای دیاریکراو (بەپێی ئامێر ناونراوە). دەتوانرێت لە responsive.less.

پۆل مۆبایلەکان480px و خوارەوە حەبەکان767px و خوارەوە دەسکتۆپەکان768px و سەرووتر
.visible-phone دیارە
.visible-tablet دیارە
.visible-desktop دیارە
.hidden-phone دیارە دیارە
.hidden-tablet دیارە دیارە
.hidden-desktop دیارە دیارە

کەیسی تاقیکردنەوە

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

لە سەر...

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

  • تەلەفۆن✔ تەلەفۆن
  • حەب✔ حەب
  • دەسکتۆپ✔ دەسکتۆپ

شاراوە لەسەر...

لێرەدا، نیشانە سەوزەکان ئاماژە بەوە دەکەن کە پۆل لە دەرچەی بینینی ئێستاتدا شاراوەتەوە.

  • تەلەفۆن✔ تەلەفۆن
  • حەب✔ حەب
  • دەسکتۆپ✔ دەسکتۆپ