بووتستراپ

داسەپاندن

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

رێکخستنە گشتیەکان

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

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

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

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

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

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

ئەم ستایلانە دەتوانرێت لەناو scaffolding.less بدۆزرێتەوە .

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

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

سیستەمی تۆڕی پێشوەختە

نموونەی تۆڕی ڕاستەوخۆ

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

1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
1. 1
2. 2
3. 3
4. 4
4. 4
5. 5
9. 9

HTML ی تۆڕی بنەڕەتی

بۆ نەخشەیەکی سادەی دوو ستوون، a دروست .rowبکە و ژمارەی گونجاوی .span*ستوونەکان زیاد بکە. بەو پێیەی ئەمە تۆڕێکی ١٢ ستوونییە، هەریەکەیان .span*ژمارەیەک لەو ١٢ ستوونە دەگرێتەوە، و هەمیشە دەبێت تا ١٢ بۆ هەر ڕیزێک (یان ژمارەی ستوونەکانی ناو باوک) کۆبکەنەوە.

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

بە لەبەرچاوگرتنی ئەم نموونەیە، ئێمە .span4و ,مان هەیە .span8بۆ 12 ستوونی کۆی گشتی و ڕیزێکی تەواو.

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

.offset*بە بەکارهێنانی پۆلەکان ستوونەکان بۆ لای ڕاست بگوازەرەوە . هەر پۆلێک پەراوێزی چەپی ستوونێک بە تەواوی ستوونێک زیاد دەکات. بۆ نموونە بەسەر چوار ستووندا .offset4دەجووڵێت ..span4

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

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

بۆ هێلانەکردنی ناوەڕۆکەکەت بە تۆڕی پێشوەختە، ستوونێکی نوێ .rowو کۆمەڵێک زیاد بکە لەناو ستوونێکی .span*هەبوودا . .span*ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە بۆ ژمارەی ستوونەکانی باوکی.

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

سیستەمی تۆڕی شلە

نموونەی تۆڕی شلەی زیندوو

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

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

تۆڕی شلەی بنەڕەتی HTML

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

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

ئۆفسێتی شلە

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

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

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

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

شلەی 12
شلەی ٦
شلەی ٦ 
  1. <div class = "شلەی ڕیز" > 
  2.   <div پۆل = "span12" > 
  3.     شلەی 12
  4.     <div class = "شلەی ڕیز" > 
  5.       <div class = "span6" > شلەی ٦ </div> 
  6.       <div class = "span6" > شلەی ٦ </div> 
  7.     </div>
  8.   </div>
  9. </div>

نەخشەکان

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

نەخشەیەکی باوی پانایی جێگیر (و بە ئیختیاری وەڵامدەرەوە) لەگەڵ تەنها <div class="container">پێویست دابین دەکات.

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

شێوازی شلە

لاپەڕەیەکی شل و دوو ستوونی دروست بکە بە <div class="container-fluid">—great for applications and docs.

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

دیزاینێکی وەڵامدەرەوە

چالاککردنی تایبەتمەندییە وەڵامدەرەوەکان

CSS وەڵامدەرەوە لە پرۆژەکەتدا دابگیرسێنە بە دانانی مێتا تاگی دروست و ستایلی زیادە لەناو <head>بەڵگەنامەکەتدا. ئەگەر لە لاپەڕەی Customize ەوە Bootstrap ـت کۆکردۆتەوە، تەنها پێویستە مێتا تاگی تێدا بێت.

  1. <meta name = "viewport" ناوەڕۆک = "پانی=پانی-ئامێر، پێوەر-سەرەکی=1.0" >  
  2. <link href = "سەروەت و سامان/css/bootstrap-responsive.css" rel = "لاپەڕەی ستایل" >

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

دەربارەی Bootstrap وەڵامدەرەوە

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

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

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

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

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

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

لەیبڵ پانایی نەخشە پانایی ستوونەکە پانایی کانیاو
شاشەیەکی گەورە 1200px و بەرزتر 70px 30px
بنەڕەتی 980px و بەرزتر 60px 20px
تابلێتی پۆرترێت 768px و سەرووتر 42px 20px
مۆبایلەکان بۆ تابلێتەکان 767px و خوارەوە ستوونی شلە، بێ پانایی جێگیر
مۆبایلەکان 480px و خوارەوە ستوونی شلە، بێ پانایی جێگیر 
  1. /* دەسکتۆپی گەورە */
  2. @media ( کەمترین پانی : 1200px ) { ... } _     
  3.  
  4. /* تابلێتی پۆرترێت بۆ لاندسکەیپ و دەسکتۆپ */
  5. @media ( کەمترین پانی : 768px ) و ( زۆرترین پانی : 979px ) { ... } . _        
  6.  
  7. /* مۆبایلی لاندسکەیپ بۆ تابلێتی پۆرترێت */
  8. @media ( زۆرترین پانایی : 767px ) { ... } _     
  9.  
  10. /* مۆبایلەکانی لاندسکەیپ و داون */
  11. @media ( زۆرترین پانایی : 480px ) { ... } _

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

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

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

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

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

کەیسی تاقیکردنەوەی خزمەتگوزارییە وەڵامدەرەوەکان

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

لە سەر...

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

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

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

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

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