مچان · بوټ سټریپ په پښتو

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 لید پورټونو لاندې، کالمونه مایع کیږي او په عمودي توګه سټیک کیږي.

بنسټیز گرډ HTML

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

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

د دې مثال په پام کې نیولو سره، موږ لرو .span4او .span8، د 12 ټول کالمونو او یو بشپړ قطار لپاره.

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

.offset*کالمونه د ټولګیو په کارولو سره ښي خوا ته حرکت وکړئ . هر ټولګي د ټول کالم په واسطه د کالم کیڼ حاشیه زیاتوي. د مثال په توګه، په څلورو کالمونو کې .offset4حرکت کوي ..span4

3 آفسټ 2

3 آفسټ 1

3 آفسټ 2

6 آفسټ 3

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

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

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

کچه 1 کالم

کچه 2

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

د ژوندی مایع گرډ مثال

د مایع گرډ سیسټم د کالم پلنوالی لپاره د پکسلونو پرځای فیصده کاروي. دا زموږ د ثابت گرډ سیسټم په څیر ورته ځواب ورکوونکي وړتیاوې لري، د کلیدي سکرین ریزولوشنونو او وسیلو لپاره مناسب تناسب ډاډمن کوي.

بنسټیز سیال گرډ HTML

.rowپه بدلولو سره هر قطار "مایع" جوړ کړئ .row-fluid. د کالم ټولګي یو شان پاتې کیږي، د ثابت او مایع ګریډونو ترمنځ فلپ کول اسانه کوي.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

د مایعاتو بندول

د ثابت گرډ سیسټم آفسیټینګ په څیر کار کوي: .offset*هر کالم ته اضافه کړئ ترڅو د دې ډیری کالمونو لخوا آفسیټ شي.

4 آفسټ 4

3 آفسټ 3

6 آفسټ 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

د مایعاتو ځړول

د فلوډ گرډونه په مختلف ډول د ځنځیرونو څخه کار اخلي: د کالمونو هر ځنځیر کچه باید تر 12 کالمونو پورې اضافه کړي. دا ځکه چې د مایع گرډ سلنې کاروي، نه پکسلز، د عرضونو ترتیبولو لپاره.

سیال 12

سیال ۶

<div class = "row-fluid" > 
  <div class = "span12" > 
    سیال 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        سیال ۶
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

ثابت ترتیب

یو عام ثابت پلنوالی (او اختیاري ځواب ورکوونکی) ترتیب چمتو کوي چې یوازې <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 فعال <head>کړئ. که تاسو د دودیز پاڼې څخه بوټسټریپ ترتیب کړی وي، تاسو اړتیا لرئ یوازې د میټا ټګ شامل کړئ.

<میټا نوم = "ویوپورټ" منځپانګه = "چوک = د وسیلې پلنوالی، ابتدايي پیمانه = 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`	د لیدلو وړ	د لیدلو وړ	پټ

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

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

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

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

د لیدلو وړ ...

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

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

په پټه...

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

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

سکفولډنګ

نړیوال تنظیمات