بوټسټپ

سکفولډنګ

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

د سی ایس ایس ری سیٹ، ټایپوګرافي، او لینکونو لپاره نړیوال سټایلونه

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

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

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

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

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

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

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

د ډیفالټ گرډ سیسټم 12 کالمونه د ځواب ویونکي ټویسټ سره

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
۸
6
6
12

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

  1. <div class = " قطار" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

4
4 آفسټ 4
3 آفسټ 3
3 آفسټ 3
8 آفسټ 4 
  1. <div class = " قطار" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

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

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

بېلګه

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

د کالم 1 کچه
کچه 2
کچه 2 
  1. <div class = " قطار" > 
  2.   <div class = "span6" > 
  3.     کچه 1 کالم
  4.     <div class = " قطار" > 
  5.       <div class = "span3" > کچه 2 </div> 
  6.       <div class = "span3" > کچه 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

د فلوډ گرډ سیسټم 12 ځواب ورکوونکی، د فیصدو پر بنسټ کالمونه

د مایع کالمونه

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
۸
6
6
12

سلنه، نه پکسلز

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

د سیالانو قطارونه

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

مارک اپ

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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

د مایع ګریډونو سره ځړول یو څه توپیر لري: د ځړول شوي کالمونو شمیر د والدین سره سمون ته اړتیا نلري. پرځای یې، ستاسو کالمونه په هره کچه بیا تنظیم شوي ځکه چې هر قطار د اصلي کالم 100٪ نیسي.

سیال 12
سیال ۶
سیال ۶ 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     د کالم 1 کچه
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > کچه 2 </div> 
  6.       <div class = "span6" > کچه 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

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

متغیر ډیفالټ ارزښت تفصیل
@gridColumns 12 د کالمونو شمیر
@gridColumnWidth 60px د هر کالم عرض
@gridGutterWidth 20px د کالمونو ترمنځ منفي ځای

متغیرات په لږ

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

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

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

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

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

د ویب پاڼو د جوړولو لپاره بنسټیز ټیمپلیټونه

ثابت ترتیب

ډیفالټ او ساده 940px پراخه، د هرې ویب پاڼې یا پاڼې لپاره چې د یوې واحد لخوا چمتو شوي مرکز شوي ترتیب <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 ته اجازه ورکوي — تناسب ، عرض ، د ښودلو ډول ، او داسې نور — مګر معمولا شاوخوا min-widthاو تمرکز کوي max-width.

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

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

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

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

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

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

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

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

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

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

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

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

  1.   /* د منظرې تلیفونونه او ښکته */
  2.   @میډیا ( اعظمي - عرض : 480px ) { ... }     
  3.  
  4.   /* د منظرې تلیفون د پورټریټ ټابلیټ ته */
  5.   @میډیا ( اعظمي - عرض : 767px ) { ... }     
  6.  
  7.   /* د منظرې او ډیسټاپ ته د پورټریټ ټابلیټ */
  8.   @میډیا ( دقیقه - پلنوالی : 768px ) او ( اعظمي - عرض : 979px ) { ... }        
  9.  
  10.   /* لوی ډیسټاپ */
  11.   @میډیا ( دقیقه - پلنوالی : 1200px ) { ... }

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

دا څه دي

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

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

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

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

د ملاتړ ټولګي

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

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

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

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

د لیدلو وړ ...

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

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

په پټه...

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

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