سکفولډنګ

بوټسټریپ په ځواب ویونکي 12 کالم گرډونو ، ترتیبونو او برخو کې جوړ شوی.

د HTML5 doctype ته اړتیا لري

بوټسټریپ د ځانګړو HTML عناصرو او سی ایس ایس ملکیتونو څخه کار اخلي چې د HTML5 doctype کارولو ته اړتیا لري. دا ستاسو د ټولو پروژو په پیل کې شامل کړئ.

  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 ډیره برخه کاروو ، موږ ځینې عناصر په ځانګړي ډول د بوټسټریپ لپاره لرې کړل.

د ژوندی شبکې مثال

د ډیفالټ بوټسټریپ گرډ سیسټم 12 کالمونه کاروي ، د 940px پراخ کانټینر لپاره پرته له ځواب ورکوونکي ځانګړتیاوې فعالوي . د ځواب ویونکي CSS فایل اضافه کولو سره ، گرډ ستاسو د لید پورټ پورې اړه لري 724px او 1170px پراخه وي. د 767px لید پورټونو لاندې، کالمونه مایع کیږي او په عمودي توګه سټیک کیږي.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
۹

بنسټیز گرډ HTML

د ساده دوه کالم ترتیب لپاره، یو جوړ کړئ او د کالمونو .rowمناسب شمیر اضافه کړئ . .span*لکه څنګه چې دا د 12 کالم گرډ دی، هر .span*یو د دې 12 کالمونو شمیر پراخوي، او تل باید د هر قطار لپاره 12 پورې اضافه کړي (یا په والدین کې د کالمونو شمیر).

  1. <div class = " قطار" >
  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 class = " قطار" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

د ځنځیرونو کالمونه

د ډیفالټ گرډ سره ستاسو مینځپانګې د ځړولو لپاره ، په موجوده کالم کې .rowد کالمونو نوی او سیټ اضافه کړئ . په نیست شوي قطارونو کې باید د کالمونو مجموعه شامله وي چې د هغې د اصلي کالمونو شمیر ته اضافه کړي..span*.span*

کچه 1 کالم
کچه 2
کچه 2
  1. <div class = " قطار" >
  2. <div class = "span9" >
  3. کچه 1 کالم
  4. <div class = " قطار" >
  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
۸
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
سیال ۶
سیال ۶
سیال ۶
سیال ۶
  1. <div class = "row-fluid" >
  2. <div class = "span12" >
  3. سیال 12
  4. <div class = "row-fluid" >
  5. <div class = "span6" >
  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. <body>
  2. <div class = "کانټینر" >
  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 فعال <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 د لیدلو وړ د لیدلو وړ

کله چې وکارول شي

په محدود ډول وکاروئ او د ورته سایټ بشپړ مختلف نسخې رامینځته کولو څخه مخنیوی وکړئ. پرځای یې، د هر وسیله پریزنټشن بشپړولو لپاره یې وکاروئ. ځواب ورکوونکي اسانتیاوې باید د میزونو سره ونه کارول شي، او لکه څنګه چې ملاتړ نه کیږي.

د ځواب ویونکي اسانتیاو ازموینې قضیه

د پورتنیو ټولګیو ازموینې لپاره خپل براوزر بدل کړئ یا په مختلف وسیلو کې بار کړئ.

د لیدلو وړ ...

شنه چک مارکونه په ګوته کوي چې ټولګي ستاسو په اوسني لید پورټ کې لیدل کیږي.

  • تلیفون✔ تلیفون
  • ټابلیټ✔ ټابلیټ
  • ډیسټاپ✔ ډیسټاپ

په پټه...

دلته، شنه چک مارکونه په ګوته کوي چې ټولګي ستاسو په اوسني لید کې پټ دی.

  • تلیفون✔ تلیفون
  • ټابلیټ✔ ټابلیټ
  • ډیسټاپ✔ ډیسټاپ