بوٽ اسٽراپ جوابي 12-ڪالمن گرڊ، ترتيب، ۽ اجزاء تي ٺهيل آهي.
بوٽ اسٽراپ ڪجهه HTML عناصر ۽ سي ايس ايس ملڪيتن جو استعمال ڪري ٿو جيڪي HTML5 ڊڪٽيائپ جي استعمال جي ضرورت آهي. توھان جي سڀني منصوبن جي شروعات ۾ شامل ڪريو.
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
بوٽ اسٽراپ بنيادي عالمي ڊسپلي، ٽائپوگرافي، ۽ لنڪ اسلوب سيٽ ڪري ٿو. خاص طور تي، اسان:
margin
جسم تي هٽايوbackground-color: white;
تي مقرر ڪريوbody
@baseFontFamily
، @baseFontSize
, ۽ خاصيتون@baseLineHeight
@linkColor
۽ لاڳو ڪريو لنڪ ھيٺ لائينون صرف تي:hover
اهي انداز scaffolding.less ۾ ڳولي سگهجن ٿا .
Bootstrap 2 سان، پراڻي ري سيٽ بلاڪ Normalize.css جي حق ۾ ڇڏيو ويو آهي ، هڪ پروجيڪٽ Nicolas Gallagher جو جيڪو پڻ HTML5 بوائلر پليٽ کي طاقت ڏئي ٿو . جڏهن ته اسان پنهنجي reset.less ۾ گهڻو ڪري Normalize استعمال ڪندا آهيون، اسان ڪجهه عنصرن کي هٽايو آهي خاص طور تي Bootstrap لاءِ.
ڊفالٽ بوٽ اسٽريپ گرڊ سسٽم 12 ڪالمن استعمال ڪري ٿو ، 940px وسيع ڪنٽينر لاءِ بنا جوابي خصوصيتن جي فعال ٿيل. جوابي CSS فائل شامل ڪرڻ سان، گرڊ 724px ۽ 1170px ويڪرو ٿي سگھي ٿو توھان جي ويوپورٽ جي لحاظ کان. هيٺيون 767px ڏيک بندرگاهن، ڪالمن سيال بڻجي ويندا آهن ۽ عمودي طور تي اسٽيڪ ٿي ويندا آهن.
هڪ سادي ٻن ڪالمن جي ترتيب لاءِ، هڪ ٺاهيو .row
۽ ڪالمن جو مناسب تعداد شامل ڪريو .span*
. جيئن ته هي هڪ 12-ڪالمن جو گرڊ آهي، هر .span*
هڪ انهن 12 ڪالمن جي هڪ انگ تي مشتمل آهي، ۽ هميشه هر قطار لاء 12 تائين شامل ڪرڻ گهرجي (يا والدين ۾ ڪالمن جو تعداد).
- <div ڪلاس = "قطار" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
هن مثال کي ڏنو ويو آهي، اسان وٽ آهي .span4
۽ .span8
، 12 ڪل ڪالمن ۽ هڪ مڪمل قطار لاء.
.offset*
ڪلاس استعمال ڪندي ڪالمن کي ساڄي طرف منتقل ڪريو . هر ڪلاس هڪ ڪالمن جي کاٻي مارجن کي پوري ڪالمن سان وڌائي ٿو. مثال طور، چار ڪالمن مٿان .offset4
ھلندو آھي..span4
- <div ڪلاس = "قطار" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
پنھنجي مواد کي ڊفالٽ گرڊ سان نسٽ ڪرڻ لاءِ، موجوده ڪالمن ۾ ھڪ نئون .row
۽ ڪالمن جو سيٽ شامل ڪريو . Nested قطارن ۾ ڪالمن جو ھڪڙو سيٽ شامل ڪرڻ گھرجي جيڪي پنھنجي والدين جي ڪالمن جي تعداد ۾ شامل ڪن..span*
.span*
- <div ڪلاس = "قطار" >
- <div class = "span9" >
- سطح 1 ڪالم
- <div ڪلاس = "قطار" >
- <div class = "span6" > ليول 2 </div>
- <div class = "span3" > ليول 2 </div>
- </div>
- </div>
- </div>
فلائيڊ گرڊ سسٽم ڪالمن جي چوٽي لاءِ پکسلز جي بدران سيڪڙو استعمال ڪري ٿو. ان ۾ اسان جي مقرر ٿيل گرڊ سسٽم وانگر ساڳيون جوابي صلاحيتون آهن، اهم اسڪرين جي قراردادن ۽ ڊوائيسز لاء مناسب تناسب کي يقيني بڻائي.
.row
تبديل ڪندي ڪنهن به قطار کي "سيال" ٺاهيو .row-fluid
. ڪالمن جا طبقا ساڳيا ئي رهن ٿا، ان کي فڪسڊ ۽ فلوئڊ گرڊ جي وچ ۾ فلپ ڪرڻ آسان بڻائي ٿو.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ساڳئي طريقي سان ڪم ڪري ٿو جيئن مقرر ٿيل گرڊ سسٽم آفسيٽنگ: .offset*
ڪنهن به ڪالمن ۾ شامل ڪريو انهن ڪيترن ئي ڪالمن پاران آفسيٽ ڪرڻ لاء.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </div>
fluid grids سان Nesting ٿورو مختلف آهي: nested ڪالمن جو تعداد والدين جي ڪالمن جي تعداد سان نه هجڻ گهرجي. ان جي بدران، نيسٽ ٿيل ڪالمن جي هر سطح کي ريٽ ڪيو ويو آهي ڇاڪاڻ ته هر قطار والدين ڪالمن جو 100٪ کڻندي آهي.
- <div class = "row-fluid" >
- <div class = "span12" >
- سيال 12
- <div class = "row-fluid" >
- <div class = "span6" > Fluid 6 </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>
پنھنجي دستاويز جي اندر. جيڪڏھن توھان مرتب ڪيو آھي بوٽ اسٽريپ ڪسٽمائيز صفحي مان، توھان کي صرف ميٽا ٽيگ شامل ڪرڻ جي ضرورت آھي.
- <meta name = "viewport" مواد = "چوڌائي = ڊيوائس-چوٿائي، شروعاتي-اسڪيل = 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 |
ڏيکاءُ | ڏيکاءُ | لڪيل |
هڪ محدود بنياد تي استعمال ڪريو ۽ ساڳئي سائيٽ جي مڪمل طور تي مختلف نسخن ٺاهڻ کان پاسو ڪريو. ان جي بدران، انهن کي استعمال ڪريو هر ڊوائيس جي پيشڪش کي مڪمل ڪرڻ لاء. جوابي افاديت کي ٽيبل سان استعمال نه ڪيو وڃي، ۽ جيئن ته سپورٽ نه آهي.
مٿين ڪلاسن کي جانچڻ لاءِ پنھنجي برائوزر کي ري سائز ڪريو يا مختلف ڊوائيسز تي لوڊ ڪريو.
سائي چيڪ مارڪ ظاهر ڪن ٿا ته ڪلاس توهان جي موجوده ويو پورٽ ۾ نظر اچي ٿو.
هتي، سائي چيڪ مارڪ ظاهر ڪن ٿا ته ڪلاس توهان جي موجوده ڏيک ۾ لڪيل آهي.