بوٽ اسٽريپ

ڇڪڻ

بوٽ اسٽراپ جوابي 12-ڪالمن گرڊ، ترتيب، ۽ اجزاء تي ٺهيل آهي.

گلوبل سيٽنگون

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

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

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

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

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

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

اهي انداز scaffolding.less ۾ ڳولي سگهجن ٿا .

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

Bootstrap 2 سان، پراڻي ري سيٽ بلاڪ کي Normalize.css جي حق ۾ ڇڏيو ويو آهي ، هڪ پروجيڪٽ نيڪولس گيلاگر ۽ جوناٿن نيل جو جيڪو پڻ HTML5 بوائلر پليٽ کي طاقت ڏئي ٿو . جڏهن ته اسان پنهنجي reset.less ۾ گهڻو ڪري Normalize استعمال ڪندا آهيون، اسان ڪجهه عنصرن کي هٽايو آهي خاص طور تي Bootstrap لاءِ.

ڊفالٽ گرڊ سسٽم

لائيو گرڊ مثال

ڊفالٽ بوٽ اسٽريپ گرڊ سسٽم 12 ڪالمن استعمال ڪري ٿو ، 940px ويڪر ڪنٽينر لاءِ بنا جوابي خصوصيتن جي فعال ٿيل. جوابي CSS فائل سان شامل ڪيو ويو، گرڊ 724px ۽ 1170px ويڪرو ٿي سگھي ٿو توھان جي ويوپورٽ جي لحاظ کان. هيٺيون 767px ڏيک بندرگاهن، ڪالمن سيال بڻجي ويندا آهن ۽ عمودي طور تي اسٽيڪ ٿي ويندا آهن.

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

بنيادي گرڊ HTML

ھڪڙي سادي ٻن ڪالمن جي ترتيب لاء، ھڪڙو ٺاھيو .row۽ ڪالمن جو مناسب تعداد شامل ڪريو .span*. جيئن ته هي هڪ 12-ڪالمن جو گرڊ آهي، هر .span*هڪ انهن 12 ڪالمن جي هڪ انگ تي مشتمل آهي، ۽ هميشه هر قطار لاء 12 تائين شامل ڪرڻ گهرجي (يا والدين ۾ ڪالمن جو تعداد).

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

هن مثال کي ڏنو ويو آهي، اسان وٽ آهي .span4۽ .span8، 12 ڪل ڪالمن ۽ هڪ مڪمل قطار لاء.

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

.offset*ڪلاس استعمال ڪندي ڪالمن کي ساڄي طرف منتقل ڪريو . هر ڪلاس هڪ ڪالمن جي کاٻي مارجن کي پوري ڪالمن سان وڌائي ٿو. مثال طور، چار ڪالمن مٿان .offset4ھلندو آھي..span4

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

Nesting ڪالمن

پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .row۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو ھڪڙو سيٽ شامل ڪرڻ گھرجي جيڪي پنھنجي والدين جي ڪالمن جي تعداد ۾ شامل ڪن..span*.span*

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

سيال گرڊ سسٽم

لائيو فلوئڊ گرڊ مثال

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

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

بنيادي سيال گرڊ HTML

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

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

رطوبت بند ڪرڻ

ساڳئي طريقي سان ڪم ڪري ٿو جيئن مقرر ٿيل گرڊ سسٽم آفسيٽنگ: .offset*ڪنهن به ڪالمن ۾ شامل ڪريو انهن ڪيترن ئي ڪالمن پاران آفسيٽ ڪرڻ لاء.

4
4 آفسٽ 4
3 آفسٽ 3
3 آفسٽ 3
6 آفسٽ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

ٻوٽي جي ڄار

فلوئڊ گرڊ مختلف طريقي سان نسٽنگ کي استعمال ڪن ٿا: ڪالمن جي هر نيسٽ ٿيل سطح کي 12 ڪالمن تائين شامل ڪرڻ گهرجي. اهو ئي سبب آهي ته فلوڊ گرڊ فيصد استعمال ڪري ٿو، نه پکسلز، چوٿون سيٽ ڪرڻ لاء.

سيال 12
سيال 6
سيال 6
سيال 6
سيال 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     سيال 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         سيال 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

ترتيب

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

مهيا ڪري ٿو هڪ عام مقرر-چوٽي (۽ اختياري طور تي جوابي) ترتيب سان صرف <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>

جوابي ڊيزائن

جوابي خصوصيتن کي فعال ڪرڻ

پنھنجي پروجيڪٽ ۾ جوابي سي ايس ايس کي فعال ڪريو مناسب ميٽا ٽيگ ۽ اضافي اسٽائل شيٽ شامل ڪندي <head>پنھنجي دستاويز جي اندر. جيڪڏھن توھان مرتب ڪيو آھي بوٽ اسٽريپ ڪسٽمائيز صفحي مان، توھان کي صرف ميٽا ٽيگ شامل ڪرڻ جي ضرورت آھي.

  1. <ميٽا جو نالو = "ويوپورٽ" مواد = "چوڌائي = ڊيوائس-چوٽي، شروعاتي-اسڪيل = 1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

اٿو!بوٽ اسٽريپ ۾ هن وقت ڊفالٽ طور جوابي خاصيتون شامل نه آهن جيئن هر شي کي جواب ڏيڻ جي ضرورت ناهي. ڊولپرز کي حوصلا افزائي ڪرڻ جي بدران هن خصوصيت کي هٽائڻ لاء، اسان اهو بهتر سمجهون ٿا ته ان کي گهربل طور تي فعال ڪرڻ لاء.

جوابي بوٽ اسٽراپ بابت

جوابي ڊوائيسز

ميڊيا سوالن جي اجازت ڏئي ٿي ڪسٽم CSS جي بنياد تي ڪيترن ئي شرطن جي بنياد تي - تناسب، ويڪر، ڊسپلي قسم، وغيره - پر عام طور تي چوڌاري min-width۽ max-width.

  • اسان جي گرڊ ۾ ڪالمن جي چوٽي کي تبديل ڪريو
  • جتي ضروري هجي ته فلوٽ جي بدران عناصر کي اسٽيڪ ڪريو
  • ڊوائيسن لاءِ وڌيڪ موزون ٿيڻ لاءِ عنوانن ۽ متن کي تبديل ڪريو

ميڊيا سوالن کي ذميواري سان استعمال ڪريو ۽ صرف توهان جي موبائل سامعين جي شروعات جي طور تي. وڏن منصوبن لاءِ، وقف ڪوڊ بيس تي غور ڪريو ۽ ميڊيا جي سوالن جي پرت نه.

سپورٽ ڊوائيسز

بوٽ اسٽريپ هڪ واحد فائل ۾ ميڊيا جي سوالن جي مدد ڪري ٿو توهان جي منصوبن کي مختلف ڊوائيسز ۽ اسڪرين جي قراردادن تي وڌيڪ مناسب بڻائڻ ۾ مدد ڏيڻ لاء. هتي جيڪي شامل آهن:

ليبل ترتيب جي ويڪر ڪالمن جي ويڪر گٽر جي چوٽي
وڏي ڊسپلي 1200px ۽ مٿي 70px 30px
ڊفالٽ 980px ۽ مٿي 60px 20px
پورٽريٽ ٽيبل 768px ۽ مٿي 42px 20px
فونن کان ٽيبلٽس 767px ۽ هيٺ فلئڊ ڪالمن، ڪا به مقرر ويڪر نه
فونون 480px ۽ هيٺ فلئڊ ڪالمن، ڪا به مقرر ويڪر نه 
  1. /* وڏو ڊيسڪ ٽاپ */
  2. @ ميڊيا ( منٽ - ويڪر : 1200px ) { ... }     
  3.  
  4. /* پورٽريٽ ٽيبليٽ کي لينڊ اسڪيپ ۽ ڊيسڪ ٽاپ */
  5. @ ميڊيا ( منٽ - ويڪر : 768px ) ۽ ( وڌ ۾ وڌ - ويڪر : 979px ) { ... }        
  6.  
  7. /* لينڊ اسڪيپ فون کان پورٽريٽ ٽيبليٽ */
  8. @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 767px ) { ... }     
  9.  
  10. /* لينڊ اسڪيپ فون ۽ هيٺ */
  11. @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 480px ) { ... }

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

تيز موبائيل-دوست ترقي لاءِ، ڊوائيس ذريعي مواد ڏيکارڻ ۽ لڪائڻ لاءِ اهي يوٽيلٽي ڪلاس استعمال ڪريو. هيٺ ڏنل طبقن جو هڪ جدول آهي ۽ انهن جو اثر ڏنو ويو ميڊيا سوالن جي ترتيب تي (ڊيوائس طرفان ليبل ٿيل). اهي ۾ ملي سگهن ٿا responsive.less.

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

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

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

جوابي افاديت ٽيسٽ ڪيس

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

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

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

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

تي لڪايو...

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

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