بوٽ اسٽريپ

ڇڪڻ

بوٽ اسٽراپ هڪ جوابي 12-ڪالمن گرڊ تي ٺهيل آهي. اسان انهي سسٽم جي بنياد تي مقرر ٿيل ۽ فلو-چوٿون ترتيبون پڻ شامل ڪيون آهن.

CSS ري سيٽ، ٽائپوگرافي، ۽ لنڪس لاءِ عالمي انداز

HTML5 doctype جي ضرورت آهي

بوٽ اسٽريپ HTML عناصر ۽ CSS ملڪيتن جو استعمال ڪري ٿو جيڪو HTML5 ڊڪٽيائپ جي استعمال جي ضرورت آهي. توهان جي پروجيڪٽ ۾ هر بوٽ اسٽريپ ٿيل صفحي جي شروعات ۾ ان کي شامل ڪرڻ جي پڪ ڪريو.

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

ٽائپوگرافي ۽ لنڪس

scaffolding.less فائل جي اندر ، اسان بنيادي عالمي ڊسپلي، ٽائپوگرافي، ۽ لنڪ اسلوب قائم ڪريون ٿا. خاص طور تي، اسان:

  • جسم تي مارجن کي هٽايو
  • background-color: white;تي مقرر ڪريوbody
  • اسان جي ٽائپوگرافڪ بنياد طور استعمال ڪريو @baseFontFamily، @baseFontSize, ۽ خاصيتون@baseLineHeight
  • ذريعي گلوبل لنڪ رنگ مقرر ڪريو @linkColor۽ لاڳو ڪريو لنڪ ھيٺ لائينون صرف تي:hover

نارملائز ذريعي ري سيٽ ڪريو

Bootstrap 2 جي طور تي، روايتي CSS ري سيٽ Normalize.css مان عناصر کي استعمال ڪرڻ لاءِ ترقي ڪئي وئي آهي ، هڪ پروجيڪٽ نيڪولس گالاگير جو جيڪو پڻ HTML5 بوائلر پليٽ کي طاقت ڏئي ٿو .

نئين ري سيٽ اڃا به reset.less ۾ ملي سگهي ٿي ، پر اختصار ۽ درستگي لاءِ ڪيترن ئي عناصر کي هٽايو ويو آهي.

ڊفالٽ گرڊ سسٽم 12 ڪالمن هڪ جوابي موڙ سان

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

Bootstrap ۾ مهيا ڪيل ڊفالٽ گرڊ سسٽم 12 ڪالمن استعمال ڪري ٿو جيڪي 724px، 940px جي چوٽي تي پيش ڪن ٿا (بغير جوابي CSS شامل)، ۽ 1170px. هيٺيون 767px ڏيک بندرگاهن، ڪالمن سيال بڻجي ويندا آهن ۽ عمودي طور تي اسٽيڪ ٿي ويندا آهن.

  1. <div ڪلاس = "قطار" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

جيئن ته هتي ڏيکاريل آهي، هڪ بنيادي ترتيب ٺاهي سگهجي ٿي ٻن "ڪالمن" سان، هر هڪ 12 بنيادي ڪالمن جي تعداد ۾ پکڙيل آهي جنهن کي اسان اسان جي گرڊ سسٽم جي حصي طور بيان ڪيو آهي.


ڪالمن کي ترتيب ڏيڻ

4
4 آفسٽ 4
3 آفسٽ 3
3 آفسٽ 3
8 آفسٽ 4 
  1. <div ڪلاس = "قطار" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nesting ڪالمن

بوٽ اسٽريپ ۾ جامد (غير سيال) گرڊ سسٽم سان، nesting آسان آهي. توهان جي مواد کي گهيرو ڪرڻ لاء، صرف هڪ موجوده ڪالمن ۾ ڪالمن .rowجو هڪ نئون ۽ سيٽ شامل ڪريو ..span*.span*

مثال

Nested قطارن ۾ ڪالمن جو هڪ سيٽ شامل ڪرڻ گهرجي جيڪي ان جي والدين جي ڪالمن جي تعداد ۾ شامل ڪن. مثال طور، ٻه nested .span3ڪالمن اندر رکيا وڃن .span6.

ڪالمن جي سطح 1
سطح 2
سطح 2 
  1. <div ڪلاس = "قطار" > 
  2.   <div class = "span6" > 
  3.     سطح 1 ڪالم
  4.     <div ڪلاس = "قطار" > 
  5.       <div class = "span3" > ليول 2 </div> 
  6.       <div class = "span3" > ليول 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

فلائيڊ گرڊ سسٽم 12 جوابي، سيڪڙو تي ٻڌل ڪالمن

فلائڊ ڪالمن

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

سيڪڙو، نه پکسلز

فلائيڊ گرڊ سسٽم فيڪسڊ پکسلز جي بدران ڪالمن جي ويڪر لاءِ سيڪڙو استعمال ڪري ٿو. ان ۾ اسان جي مقرر ڪيل گرڊ سسٽم وانگر ساڳيو جوابي تبديليون پڻ آهن، اهم اسڪرين جي قراردادن ۽ ڊوائيسز لاء مناسب تناسب کي يقيني بڻائي.

فلاڻي قطارون

ڪنهن به قطار جي سيال کي صرف تبديل ڪندي .rowٺاهيو .row-fluid. ڪالمن ساڳيا ئي رهن ٿا، ان کي فڪسڊ ۽ فلوئڊ لي آئوٽ جي وچ ۾ فلپ ڪرڻ لاءِ سپر سڌو بڻائي ٿو.

مارڪ اپ

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ٻوٽي جي ڄار

fluid grids سان Nesting ٿورو مختلف آهي: nested ڪالمن جو تعداد والدين سان ملائڻ جي ضرورت ناهي. ان جي بدران، توهان جا ڪالمن هر سطح تي ري سيٽ ڪيا ويا آهن ڇو ته هر قطار والدين ڪالمن جو 100٪ کڻندي آهي.

سيال 12
سيال 6
سيال 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     ڪالمن جي سطح 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > ليول 2 </div> 
  6.       <div class = "span6" > ليول 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

گرڊ ڪسٽمائيزيشن

متغير ڊفالٽ قدر وصف
@gridColumns 12 ڪالمن جو تعداد
@gridColumnWidth 60px هر ڪالمن جي ويڪر
@gridGutterWidth 20px ڪالمن جي وچ ۾ ناڪاري خلا

گھٽ ۾ متغير

Bootstrap ۾ ٺاهيل ڊفالٽ 940px گرڊ سسٽم کي ترتيب ڏيڻ لاءِ مٿس متغير آهن، مٿي ڏنل دستاويز. گرڊ لاءِ سڀئي متغير variables.less ۾ محفوظ ٿيل آهن.

ڪسٽمائيز ڪيئن ڪجي

گرڊ کي تبديل ڪرڻ جو مطلب آهي ٽن @grid*متغيرن کي تبديل ڪرڻ ۽ بوٽ اسٽراپ کي ٻيهر ترتيب ڏيڻ. گرڊ متغير کي variables.less ۾ تبديل ڪريو ۽ استعمال ڪريو چار طريقن مان ھڪڙو دستاويز ڪيل دستاويز کي ٻيهر ٺاھڻ لاء . جيڪڏھن توھان وڌيڪ ڪالم شامل ڪري رھيا آھيو، پڪ ڪريو ته انھن لاءِ سي ايس ايس شامل ڪريو grid.less ۾.

جوابدار رهڻ

گرڊ جي ڪسٽمائيزيشن صرف ڊفالٽ سطح تي ڪم ڪري ٿي، 940px گرڊ. Bootstrap جي جوابي پهلوئن کي برقرار رکڻ لاءِ، توهان کي به گرڊ کي ترتيب ڏيڻو پوندو Responsive.less ۾.

لي آئوٽ بنيادي ٽيمپليٽس ويب پيج ٺاهڻ لاءِ

مقرر ٿيل ترتيب

ڊفالٽ ۽ سادو 940px-وائڊ، صرف ڪنهن به ويب سائيٽ يا صفحي جي لاءِ مرڪزي ترتيب هڪ واحد طرفان مهيا ڪيل آهي <div class="container">.

  1. <جسم>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

فلاڻي ترتيب

<div class="container-fluid">لچڪدار صفحي جي جوڙجڪ، گھٽ ۾ گھٽ ۽ وڌ ۾ وڌ ويڪر، ۽ کاٻي پاسي واري سائڊبار ڏئي ٿو. اهو ائپس ۽ دستاويزن لاء بهترين آهي.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--سائڊبار مواد-->
  5.     </div>
  6.     <div class = "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. <ميٽا جو نالو = "ويوپورٽ" مواد = "چوڌائي = ڊيوائس-چوٽي، شروعاتي-اسڪيل = 1.0" >

ميڊيا جي سوالن کي استعمال ڪندي

بوٽ اسٽريپ پاڻمرادو شامل نه ڪندو آهي اهي ميڊيا سوال، پر انهن کي سمجهڻ ۽ شامل ڪرڻ تمام آسان آهي ۽ گهٽ ۾ گهٽ سيٽ اپ جي ضرورت آهي. توھان وٽ ڪجھ اختيار آھن شامل ڪرڻ لاءِ Bootstrap جي جوابي خاصيتون:

  1. مرتب ٿيل جوابي نسخو استعمال ڪريو، bootstrap-responsive.css
  2. شامل ڪريو @import "responsive.less" ۽ بوٽ اسٽراپ کي ٻيهر گڏ ڪريو
  3. responsive.less کي الڳ فائل جي طور تي تبديل ڪريو ۽ ٻيهر ٺاھيو

ڇو نه صرف ان کي شامل ڪيو وڃي؟ سچ چيو وڃي، هر شيء کي جواب ڏيڻ جي ضرورت ناهي. ڊولپرز کي حوصلا افزائي ڪرڻ جي بدران هن خصوصيت کي هٽائڻ لاء، اسان ان کي فعال ڪرڻ لاء بهترين سمجهون ٿا.

  1.   /* لينڊ اسڪيپ فون ۽ هيٺ */
  2.   @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 480px ) { ... }     
  3.  
  4.   /* لينڊ اسڪيپ فون کان پورٽريٽ ٽيبليٽ */
  5.   @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 767px ) { ... }     
  6.  
  7.   /* پورٽريٽ ٽيبليٽ کي لينڊ اسڪيپ ۽ ڊيسڪ ٽاپ */
  8.   @ ميڊيا ( منٽ - ويڪر : 768px ) ۽ ( وڌ ۾ وڌ - ويڪر : 979px ) { ... }        
  9.  
  10.   /* وڏو ڊيسڪ ٽاپ */
  11.   @ ميڊيا ( منٽ - ويڪر : 1200px ) { ... }

قبول افاديت ڪلاس

اهي ڇا آهن

تيز موبائل دوستانه ترقي لاءِ، ڊوائيس ذريعي مواد ڏيکارڻ ۽ لڪائڻ لاءِ اهي بنيادي يوٽيلٽي ڪلاس استعمال ڪريو.

جڏهن استعمال ڪرڻ

هڪ محدود بنياد تي استعمال ڪريو ۽ ساڳئي سائيٽ جي مڪمل طور تي مختلف نسخن ٺاهڻ کان پاسو ڪريو. ان جي بدران، انهن کي استعمال ڪريو هر ڊوائيس جي پيشڪش کي مڪمل ڪرڻ لاء.

مثال طور، توھان <select>موبائل لي آئوٽ تي نيوي لاءِ عنصر ڏيکاري سگھو ٿا، پر ٽيبلٽس يا ڊيسڪٽاپس تي نه.

سپورٽ ڪلاس

هتي ڏيکاريل طبقن جو هڪ جدول آهي جنهن کي اسان سپورٽ ڪريون ٿا ۽ انهن جو اثر ڏنو ويو ميڊيا سوال جي ترتيب تي (ڊيوائس طرفان ليبل ٿيل). اهي ۾ ملي سگهن ٿا responsive.less.

ڪلاس فونون480px ۽ هيٺ ٽيبلٽ767px ۽ هيٺ ڊيسڪ ٽاپ768px ۽ مٿي
.visible-phone ڏيکاءُ
.visible-tablet ڏيکاءُ
.visible-desktop ڏيکاءُ
.hidden-phone ڏيکاءُ ڏيکاءُ
.hidden-tablet ڏيکاءُ ڏيکاءُ
.hidden-desktop ڏيکاءُ ڏيکاءُ

ٽيسٽ ڪيس

مٿين ڪلاسن کي جانچڻ لاءِ پنھنجي برائوزر کي ري سائز ڪريو يا مختلف ڊوائيسز تي لوڊ ڪريو.

تي ڏسڻ ۾ اچي ٿو ...

سائي چيڪ مارڪ ظاهر ڪن ٿا ته ڪلاس توهان جي موجوده ويو پورٽ ۾ نظر اچي ٿو.

  • فون✔ فون
  • ٽيبليٽ✔ ٽيبليٽ
  • ڊيسڪ ٽاپ✔ ڊيسڪ ٽاپ

تي لڪايو...

هتي، سائي چيڪ مارڪ ظاهر ڪن ٿا ته ڪلاس توهان جي موجوده ڏيک ۾ لڪيل آهي.

  • فون✔ فون
  • ٽيبليٽ✔ ٽيبليٽ
  • ڊيسڪ ٽاپ✔ ڊيسڪ ٽاپ