بوټسټریپ د ځواب ویونکي 12 کالم گرډ باندې جوړ شوی. موږ د دې سیسټم پراساس ثابت او مایع - پلن ترتیبونه هم شامل کړي دي.
د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 940px پراخه ، 12 کالم گرډ دی.
دا د مختلف وسیلو او ریزولوشنونو لپاره څلور ځواب ویونکي تغیرات هم لري: تلیفون ، د ټابلیټ پورټریټ ، د میز منظره او کوچني ډیسټاپونه ، او لوی پراخه سکرین ډیسټاپونه.
- <div class = " قطار" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
لکه څنګه چې دلته ښودل شوي، یو بنسټیز ترتیب د دوو "کالمونو" سره رامینځته کیدی شي، هر یو د 12 بنسټیزو کالمونو شمیره لري چې موږ یې زموږ د شبکې سیسټم د یوې برخې په توګه تعریف کړی.
- <div class = " قطار" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
په بوټسټریپ کې د جامد (غیر مایع) گرډ سیسټم سره، ځړول اسانه دي. د خپل مینځپانګې ځړولو لپاره ، یوازې په موجوده کالم کې .row
د کالمونو نوی او سیټ اضافه کړئ ..span*
.span*
په نیست شوي قطارونو کې باید د کالمونو مجموعه شامل وي چې د دې د اصلي کالمونو شمیر ته اضافه کړي. د مثال په توګه، دوه ځړول شوي .span3
کالمونه باید په دننه کې کیښودل شي .span6
.
- <div class = " قطار" >
- <div class = "span12" >
- د کالم 1 کچه
- <div class = " قطار" >
- <div class = "span6" > کچه 2 </div>
- <div class = "span6" > کچه 2 </div>
- </div>
- </div>
- </div>
د مایع گرډ سیسټم د ثابت پکسلونو پرځای د کالم پلنوالی لپاره سلنه کاروي. دا زموږ د ثابت گرډ سیسټم په څیر ورته ځواب ورکوونکي تغیرات هم لري، د کلیدي سکرین ریزولوشنونو او وسیلو لپاره مناسب تناسب ډاډمن کوي.
په ساده ډول په بدلولو .row
سره هر قطار مایع جوړ کړئ .row-fluid
. کالمونه یو شان پاتې کیږي، دا د ثابت او مایع ترتیبونو ترمنځ فلیپ کولو لپاره خورا ساده کوي.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
د مایع ګریډونو سره ځړول یو څه توپیر لري: د ځړول شوي کالمونو شمیر د والدین سره سمون ته اړتیا نلري. پرځای یې، ستاسو کالمونه په هره کچه بیا تنظیم شوي ځکه چې هر قطار د اصلي کالم 100٪ نیسي.
- <div class = "row-fluid" >
- <div class = "span12" >
- د کالم 1 کچه
- <div class = "row-fluid" >
- <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 څخه تر 979px پورې | 42px | 20px |
ډیفالټ | 980px او پورته | 60px | 20px |
لوی نندارتون | 1210px او پورته | 70px | 30px |
د دې لپاره چې ډاډ ترلاسه کړئ چې وسایل په سمه توګه ځواب ورکوونکي پاڼې ښکاره کوي، د ویوپورټ میټا ټګ شامل کړئ.
- <میټا نوم = "ویوپورټ" منځپانګه = "چوک = د وسیلې پلنوالی، ابتدايي پیمانه = 1.0" >
د میډیا پوښتنې د یو شمیر شرایطو پراساس دودیز CSS ته اجازه ورکوي — ت��اسب ، عرض ، د ښودلو ډول ، او داسې نور — مګر معمولا شاوخوا min-width
او تمرکز کوي max-width
.
بوټسټریپ په اوتومات ډول دا میډیا پوښتنې نه شاملوي ، مګر د دوی پوهیدل او اضافه کول خورا اسانه دي او لږترلږه تنظیم ته اړتیا لري. تاسو د بوټسټریپ د ځواب ویونکي ځانګړتیاو په شمول یو څو اختیارونه لرئ:
ولې یوازې دا شامل نه کړئ؟ ریښتیا وویل شي، هر څه ته اړتیا نلري چې ځواب ویونکي وي. د دې پرځای چې پراختیا کونکي وهڅوي چې دا ځانګړتیا لرې کړي، موږ دا غوره ګڼو چې دا فعال کړو.
- // د منظرې تلیفونونه او ښکته
- @میډیا ( اعظمي - عرض : 480px ) { ... }
- // د منظرې تلیفون د پورټریټ ټابلیټ ته
- @میډیا ( اعظمي - عرض : 768px ) { ... }
- // د منظرې او ډیسټاپ لپاره پورټریټ ټابلیټ
- @میډیا ( دقیقه - پلنوالی : 768px ) او ( اعظمي - عرض : 980px ) { ... }
- // لوی ډیسټاپ
- @میډیا ( دقیقه - پلنوالی : 1200px ) { .. }