سکفولډنګ

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

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

ټایپوګرافي او لینکونه

د scaffolding.less فایل کې، موږ بنسټیز نړیوال نندارتون، ټایپوګرافي، او د لینک سټایلونه تنظیم کوو. په ځانګړې توګه، موږ:

په بدن کې حاشیه لرې کړئ
background-color: white;په کې تنظیم کړئbody
زموږ د ټایپوګرافیک اساس په توګه @baseFontFamily، @baseFontSize، او ځانګړتیاوې وکاروئ@baseLineHeight
د نړیوال لینک رنګ له لارې تنظیم کړئ @linkColorاو یوازې د لینک لاندې لاینونه پلي کړئ:hover

د نورمال کولو له لارې بیا تنظیم کړئ

د بوټسټریپ 2 په څیر، دودیز CSS ری سیٹ د Normalize.css څخه د عناصرو کارولو لپاره رامینځته شوی ، د نیکولاس ګالګر لخوا یوه پروژه چې د HTML5 بویلر پلیټ ځواک هم ورکوي .

نوی ریسیټ لاهم په reset.less کې موندل کیدی شي ، مګر د ډیری عناصرو سره د لنډوالي او دقت لپاره لرې شوي.

د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 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*

بېلګه

په نیست شوي قطارونو کې باید د کالمونو مجموعه شامل وي چې د دې د اصلي کالمونو شمیر ته اضافه کړي. د مثال په توګه، دوه ځړول شوي .span3کالمونه باید په دننه کې کیښودل شي .span6.

د کالم 1 کچه

کچه 2

<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٪ نیسي.

سیال 12

سیال ۶

<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>

ځواب ویونکي وسایل

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

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

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

د رسنیو پوښتنې په مسؤلیت سره وکاروئ او یوازې ستاسو د ګرځنده لیدونکو لپاره د پیل په توګه. د لویو پروژو لپاره، د وقف شوي کوډ اډې په پام کې ونیسئ نه د رسنیو پوښتنو پرتونو.

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

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

لیبل	د ترتیب پلنوالی	د کالم عرض	د ګتر پلنوالی
سمارټ فونونه	480px او لاندې	د مایع کالمونه، هیڅ ثابت پلنوالی نلري
ټابلیټونو ته سمارټ فونونه	767px او لاندې	د مایع کالمونه، هیڅ ثابت پلنوالی نلري
د پورټریټ ټابلیټونه	768px او پورته	42px	20px
ډیفالټ	980px او پورته	60px	20px
لوی نندارتون	1200px او پورته	70px	30px

میټا ټګ ته اړتیا لري

د دې لپاره چې ډاډ ترلاسه کړئ چې وسایل په سمه توګه ځواب ورکوونکي پاڼې ښکاره کوي، د ویوپورټ میټا ټګ شامل کړئ.

<میټا نوم = "ویوپورټ" منځپانګه = "چوک = د وسیلې پلنوالی، ابتدايي پیمانه = 1.0" >

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

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

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

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

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

د ځواب ویونکي کارونې ټولګي

دا څه دي

د ګړندي ګرځنده دوستانه پرمختګ لپاره ، د وسیلې په واسطه د مینځپانګې ښودلو او پټولو لپاره دا لومړني یوټیلټي کلاسونه وکاروئ.

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

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

د مثال په توګه، تاسو ممکن <select>په ګرځنده ترتیبونو کې د nav لپاره عنصر وښایئ، مګر په ټابلیټونو یا ډیسټاپونو کې نه.

د ملاتړ ټولګي

دلته د ټولګیو یو جدول ښودل شوی چې موږ یې ملاتړ کوو او د ورکړل شوي میډیا پوښتنې ترتیب باندې د دوی اغیز (د وسیلې لخوا لیبل شوی). دوی په کې موندل کیدی شي responsive.less.

ټولګي	تلیفونونه480px او لاندې	ټابلیټونه767px او لاندې	ډیسټاپونه768px او پورته
`.visible-phone`	د لیدلو وړ	پټ	پټ
`.visible-tablet`	پټ	د لیدلو وړ	پټ
`.visible-desktop`	پټ	پټ	د لیدلو وړ
`.hidden-phone`	پټ	د لیدلو وړ	د لیدلو وړ
`.hidden-tablet`	د لیدلو وړ	پټ	د لیدلو وړ
`.hidden-desktop`	د لیدلو وړ	د لیدلو وړ	پټ

د ازموینې قضیه

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

د لیدلو وړ ...

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

په پټه...

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