ڇڪڻ

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 ڏيک بندرگاهن، ڪالمن سيال بڻجي ويندا آهن ۽ عمودي طور تي اسٽيڪ ٿي ويندا آهن.

بنيادي گرڊ HTML

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

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

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

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

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

3 آفسٽ 2

3 آفسٽ 1

3 آفسٽ 2

6 آفسٽ 3

<div ڪلاس = "قطار" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Nesting ڪالمن

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

سطح 1 ڪالم

سطح 2

<div ڪلاس = "قطار" > 
  <div class = "span9" > 
    سطح 1 ڪالم
    <div ڪلاس = "قطار" > 
      <div class = "span6" > ليول 2 </div> 
      <div class = "span3" > ليول 2 </div> 
    </div>
  </div>
</div>

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

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

بنيادي فلو گرڊ HTML

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

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

رطوبت بند ڪرڻ

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

4 آفسٽ 4

3 آفسٽ 3

6 آفسٽ 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

ٻوٽي جي ڄار

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

سيال 12

سيال 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    سيال 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        سيال 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

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

مهيا ڪري ٿو هڪ عام مقرر-چوٽي (۽ اختياري طور تي جوابي) ترتيب سان صرف <div class="container">گهربل.

<جسم>
  <div class = "container" > 
    ...
  </div>
</body>

فلاڻي ترتيب

<div class="container-fluid">ٺاھيو فلوئڊ ، ٻن-ڪالمن وارو صفحو سان گڏ - ايپليڪيشنن ۽ دستاويزن لاءِ بھترين.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--سائڊبار مواد-->
    </div>
    <div class = "span10" > 
      <!--جسماني مواد-->
    </div>
  </div>
</div>

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

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

<ميٽا جو نالو = "ويوپورٽ" مواد = "چوڌائي = ڊيوائس-چوٽي، شروعاتي-اسڪيل = 1.0" >  
<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 ۽ هيٺ	فلئڊ ڪالمن، ڪا به مقرر ويڪر نه

/* وڏو ڊيسڪ ٽاپ */
@ ميڊيا ( منٽ - ويڪر : 1200px ) { ... }     
 
/* پورٽريٽ ٽيبليٽ کي لينڊ اسڪيپ ۽ ڊيسڪ ٽاپ */
@ ميڊيا ( منٽ - ويڪر : 768px ) ۽ ( وڌ ۾ وڌ - ويڪر : 979px ) { ... }        
 
/* لينڊ اسڪيپ فون کان پورٽريٽ ٽيبليٽ */
@ ميڊيا ( وڌ ۾ وڌ - ويڪر : 767px ) { ... }     
 
/* لينڊ اسڪيپ فون ۽ هيٺ */
@ ميڊيا ( وڌ ۾ وڌ - ويڪر : 480px ) { ... }

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

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

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

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

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

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

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

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

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

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

تي لڪايو...

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

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

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