سکفولډنګ

بوټسټریپ د ځواب ویونکي 12 کالم گرډ باندې جوړ شوی. موږ د دې سیسټم پراساس ثابت او د مایع چوکۍ ترتیبونه هم شامل کړي دي.

ډیفالټ 940px گرډ

د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 940px پراخه ، 12 کالم گرډ دی.

دا د مختلف وسیلو او ریزولوشنونو لپاره څلور ځواب ویونکي تغیرات هم لري: تلیفون ، د ټابلیټ پورټریټ ، د میز منظره او کوچني ډیسټاپونه ، او لوی پراخه سکرین ډیسټاپونه.

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

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

د کالمونو بندول

4 آفسټ 4

3 آفسټ 3

8 آفسټ 4

<div class = " قطار" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

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

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

بېلګه

د کالم 1 کچه

کچه 2

<div class = " قطار" > 
  <div class = "span12" > 
    د کالم 1 کچه
    <div class = " قطار" > 
      <div class = "span6" > کچه 2 </div> 
      <div class = "span6" > کچه 2 </div> 
    </div>
  </div>
</div>

د گرډ اصلاح کول

متغیر	ډیفالټ ارزښت	تفصیل
`@gridColumns`	12	د کالمونو شمیر
`@gridColumnWidth`	60px	د هر کالم عرض
`@gridGutterWidth`	20px	د کالمونو ترمنځ منفي ځای
`@siteWidth`	د ټولو کالمونو او ګټرونو محاسبه شوې مجموعه	`.container-fixed()`د مکسین عرض ټاکلو لپاره د کالمونو او ګټرونو شمیر شمیرل کیږي

متغیرات په لږ

په بوټسټریپ کې جوړ شوي د ډیفالټ 940px گرډ سیسټم دودیز کولو لپاره یو څو متغیرات دي ، چې پورته مستند شوي. د گرډ لپاره ټول متغیرونه په variables.less کې زیرمه شوي.

څنګه دودیز کول

د گرډ بدلول پدې معنی دي چې د دریو @grid*متغیرونو بدلول او د بوټسټریپ بیا تنظیم کول. د گرډ متغیرونه په variables.less کې بدل کړئ او د بیا تنظیم کولو لپاره مستند شوي څلور لارو څخه یوه وکاروئ . که تاسو نور کالمونه اضافه کوئ، ډاډ ترلاسه کړئ چې د هغو کسانو لپاره چې په grid.less کې دي CSS اضافه کړئ.

ځواب ویونکي پاتې کیدل

د گرډ تنظیم کول یوازې په ډیفالټ کچه کار کوي ، د 940px گرډ. د Bootstrap د ځواب ورکوونکي اړخونو ساتلو لپاره، تاسو باید په ځواب ورکوونکي.less کې گرډونه هم تنظیم کړئ.

ثابت ترتیب

ډیفالټ او ساده 940px پراخه، د هرې ویب پاڼې یا پاڼې لپاره چې د یوې واحد لخوا چمتو شوي مرکز شوي ترتیب <div class="container">.

<body>
  <div class = "کانټینر" > 
    ...
  </div>
</body>

د سیال ترتیب

<div class="container-fluid">د مخ انعطاف وړ جوړښت، دقیق او اعظمي پلنوالی، او د کیڼ لاس اړخ بار ورکوي. دا د ایپسونو او اسنادو لپاره خورا ښه دی.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--سایډبار منځپانګه-->
    </div>
    <div class = "span10" > 
      <!--د بدن منځپانګه-->
    </div>
  </div>
</div>

ملاتړ شوي وسایل

بوټسټریپ د یو څو میډیا پوښتنو ملاتړ کوي ترڅو ستاسو پروژې په مختلف وسیلو او سکرین ریزولوشنونو کې ډیر مناسب کړي. دلته هغه څه دي چې پکې شامل دي:

لیبل	د ترتیب پلنوالی	د کالم عرض	د ګتر پلنوالی
سمارټ فونونه	480px او لاندې	د مایع کالمونه، هیڅ ثابت پلنوالی نلري
د پورټریټ ټابلیټونه	له 480px څخه تر 768px پورې	د مایع کالمونه، هیڅ ثابت پلنوالی نلري
د منظرې میزونه	له 768px څخه تر 940px پورې	44px	20px
ډیفالټ	940px او پورته	60px	20px
لوی نندارتون	1210px او پورته	70px	30px

هغه څه چې دوی یې کوي

د میډیا پوښتنې د یو شمیر شرایطو پراساس دودیز CSS ته اجازه ورکوي — تناسب ، عرض ، د ښودلو ډول ، او داسې نور — مګر معمولا شاوخوا min-widthاو تمرکز کوي max-width.

زموږ په گرډ کې د کالم عرض بدل کړئ
هر چیرې چې اړتیا وي د فلوټ پرځای عناصر سټیک کړئ
سرلیکونه او متن بیا اندازه کړئ ترڅو د وسایلو لپاره ډیر مناسب وي

د رسنیو پوښتنو کارول

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

تالیف شوی ځواب ویونکی نسخه وکاروئ، bootstrap-responsive.css
@import "responsive.less" اضافه کړئ او بوټسټریپ بیا تنظیم کړئ
responsive.less د جلا جلا په توګه تعدیل او بیا جوړ کړئ

ولې یوازې دا شامل نه کړئ؟ ریښتیا ووایاست، اړتیا نه ده چې هر څه ځواب ویونکي وي. د دې پرځای چې پراختیا کونکي وهڅوي چې دا خصوصیت لرې کړي، موږ دا غوره ګڼو چې دا فعال کړو.

  // د منظرې تلیفونونه او ښکته
  @میډیا ( اعظمي - عرض : 480px ) { ... }     
 
  // د منظرې تلیفون د پورټریټ ټابلیټ ته
  @میډیا ( اعظمي - عرض : 768px ) { ... }     
 
  // د منظرې او ډیسټاپ لپاره د پورټریټ ټابلیټ
  @میډیا ( دقیقه - پلنوالی : 768px ) او ( اعظمي - عرض : 940px ) { ... }        
 
  // لوی ډیسټاپ
  @میډیا ( دقیقه - پلنوالی : 1200px ) { .. }