پورته

پاتې

حق

لاندې

بوټسټپ، د ټویټر څخه

بوټسټریپ د ټویټر یوه وسیله کټ ده چې د ویب ایپسونو او سایټونو پراختیا پیل کولو لپاره ډیزاین شوې.
پدې کې د ټایپوګرافۍ، فورمو، بټونو، میزونو، ګریډونو، نیویګیشن، او نورو لپاره بیس CSS او HTML شامل دي.

د بې خوبۍ خبرداری: بوټسټریپ د لږ سره جوړ شوی او د عصري براوزرونو سره په ذهن کې د دروازې څخه بهر کار کولو لپاره ډیزاین شوی.

د سی ایس ایس سره اړیکه ونیسئ

د چټک او اسانه پیل لپاره، یوازې دا ټوټه په خپل ویب پاڼه کې کاپي کړئ.

له لږ سره یې وکاروئ

د لږ کارولو مینه وال؟ کومه ستونزه نشته، یوازې ریپو کلون کړئ او دا کرښې اضافه کړئ:

په GitHub کې فورک

په ګیتوب کې د رسمي بوټسټریپ ریپو سره ډاونلوډ ، فورک ، پل ، د فایل مسلې او نور ډیر څه.

په GitHub کې بوټسټریپ »

اوس مهال v1.3.0

تاریخ

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

په dev.twitter.com کې نور ولولئ >

د براوزر ملاتړ

بوټسټریپ په لوی عصري براوزرونو لکه کروم ، سفاري ، انټرنیټ اکسپلورر ، او فایرفوکس کې ازمول شوی او ملاتړ شوی.

په کروم، سفاري، انټرنیټ اکسپلورر، او فایرفوکس کې ازمول شوی او ملاتړ شوی

وروستی سفاري
وروستی ګوګل کروم
فایرفوکس 4+
انټرنیټ اکسپلورر 7+
اوپیرا 11

څه پکې شامل دي

بوټسټریپ د تالیف شوي CSS ، غیر ترکیب شوي ، او مثال ټیمپلیټونو سره بشپړ کیږي.

جاوا سکرپٹ پلگ ان
ټول اصلي .less فایلونه
په بشپړه توګه تالیف شوی او کوچنی شوی CSS
د سټایل لارښود بشپړ اسناد
درې بېلګې پاڼې د مختلف ترتیبونو سره

د چټک پیل مثالونه

ځینې چټک ټیمپلیټ ته اړتیا لرئ؟ دا لومړني مثالونه وګورئ چې موږ یې یوځای کړي دي:

ډیفالټ گرډ

د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 940px پراخه 16 کالم گرډ دی. دا د مشهور 960 گرډ سیسټم خوند دی، مګر په ښي او ښي خوا کې د اضافي حاشیې / پیډینګ پرته.

د ګریډ مارک اپ بیلګه

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

<div class = " قطار" > 
  <div class = "span6" > 
    ...
  </div>
  <div  class = "span10" >
    ...
  </div>
</div>

1/3

2/3

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

8 آفسټ 4

1/3 آفسټ 2/3s

4 آفسټ 4

5 آفسټ 3

10 آفسټ 6

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

خپل مینځپانګه وخورئ که تاسو اړتیا لرئ .rowپه موجوده کالم کې د جوړولو له لارې.

د ځړول شوي کالمونو بیلګه

د کالم 1 کچه

کچه 2

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

خپل گرډ رول کړئ

په بوټسټریپ کې جوړ شوی د ډیفالټ 940px گرډ سیسټم تنظیم کولو لپاره یو څو متغیرونه دي. د یو څه تخصیص سره ، تاسو کولی شئ د کالمونو اندازه ، د دوی ګټرونه او هغه کانټینر بدل کړئ چې دوی پکې اوسیږي.

د ګریډ دننه

هغه متغیرات چې د شبکې سیسټم بدلولو لپاره اړین دي اوس مهال ټول په کې میشته دي variables.less.

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

اوس د دودیز کولو لپاره

د گرډ بدلول پدې معنی دي چې د دریو @grid-*متغیرونو بدلول او د لږ فایلونو بیا تنظیم کول.

بوټسټریپ د 24 کالمونو سره د ګریډ سیسټم اداره کولو لپاره مجهز دی؛ ډیفالټ یوازې 16 دی. دلته دا دی چې ستاسو د گرډ متغیرونه به د 24 کالم گرډ سره دودیز ښکاري.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

یوځل بیا تنظیم شوی ، تاسو به تنظیم شئ!

ثابت ترتیب

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

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

د سیال ترتیب

یو بدیل، د انعطاف وړ مایع پاڼې جوړښت د لږ تر لږه او اعظمي پلنوالی او کیڼ لاس اړخ بار سره. د ایپسونو او اسنادو لپاره عالي.

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "منځپانګه" > 
      ...
    </div>
  </div>
</body>

سرلیکونه او کاپي

ستاسو د ویب پاڼو د جوړښت لپاره یو معیاري ټایپوګرافیک درجه بندي.

ټول ټایپوګرافیک گرډ زموږ په variables.less فایل کې د دوه لږ متغیرونو پراساس دی: @basefontاو@baseline . لومړی د بیس فونټ اندازه ده چې په اوږدو کې کارول کیږي او دوهم د بیس لاین لوړوالی دی.

موږ دا متغیرونه، او ځینې ریاضي کاروو، ترڅو زموږ د ټولو ډولونو حاشیو، پیډینګونو، او لاین لوړوالی رامینځته کړي.

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5

h6. سرلیک 6

بېلګه پراګراف

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

د مثال سرلیک فرعي سرلیک لري ...

متفرقه. عناصر

د تاکید، پتې، او لنډیزونو کارول

<strong> <em> <address> <abbr>

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

د تاکید ټاګونه ( <strong>او <em>) باید د یوې کلمې یا جملې اضافي اهمیت یا ټینګار څرګندولو لپاره وکارول شي چې د هغې شاوخوا کاپي سره تړاو لري. <strong>د اهمیت او فشار<em> لپاره وکاروئ .

په یوه پراګراف کې ټینګار

Fusce dapibus , Tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharatra augue.

یادونه: دا لاهم سمه ده چې په HTML5 کې وکاروئ <b>او <i>ټګونه وکړئ او دوی باید په ترتیب سره بولډ او ایټالیک سټایل نه وي (که څه هم که چیرې یو ډیر سیمانټیک عنصر وي نو وکاروئ). <b>د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي<i> کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.

ادرسونه

<address>عنصر د خپل نږدې پلرونو، یا د کار ټول بدن لپاره د اړیکو معلوماتو لپاره کارول کیږي . دلته دوه مثالونه دي چې دا څنګه کارول کیدی شي:

ټویټر، Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

بشپړ نوم
[email protected]

یادونه: هره کرښه <address>باید د لاین بریک ( <br />) سره پای ته ورسیږي یا د بلاک په کچه ټاګ (د مثال په توګه <p>) کې وتړل شي ترڅو مینځپانګه په سمه توګه تنظیم کړي.

لنډیزونه

د لنډیزونو او مخففاتو لپاره، <abbr>ټګ وکاروئ ( <acronym>په HTML5 کې رد شوی دی ). د لنډیز فورمه په ټګ کې دننه کړئ او د بشپړ نوم لپاره سرلیک وټاکئ.

بلاک کوټونه

<blockquote> <p> <small>

څنګه حواله کول

د بلاک کوټ شاملولو لپاره، <blockquote>شاوخوا وپلټئ <p>او <small>ټګونه. <small>عنصر د خپلې سرچینې په حواله کولو لپاره وکاروئ او تاسو به د —هغې دمخه د ایم ډیش ترلاسه کړئ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
ډاکټر جولیوس هیبرټ

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <کوچنی> ډاکټر جولیوس هیبرټ </small>
</blockquote>

لیستونه

بې ترتیبه`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

بې سټایل`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

امر وکړ`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

تفصیل`dl`

د توضیحاتو لیست: د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

کوډ

<code> <pre>

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

کوډ وړاندې کوي

کوډ، بلاکونه یا یوازې د انلاین ټوټې، یوازې په سم ټاګ کې د لپاس کولو سره د سټایل سره ښودل کیدی شي. د کوډ بلاکونو لپاره چې ډیری لینونه پراخوي، <pre>عنصر وکاروئ. د انلاین کوډ لپاره، <code>عنصر وکاروئ.

عنصر پایله

<code> د دې په څیر د متن په یوه کرښه کې، ستاسو پوښل شوی کوډ به د دې <html>عنصر په څیر ښکاري.

عنصر	پایله
`<code>`	د دې په څیر د متن په یوه کرښه کې، ستاسو پوښل شوی کوډ به د دې `<html>`عنصر په څیر ښکاري.
`<pre>`	<div> <h1>سرلیک</h1> <p>دلته یو څه...</p> </div> یادونه: ډاډه اوسئ چې کوډ په `<pre>`ټاګونو کې د امکان تر حده کیڼ اړخ ته نږدې وساتئ؛ دا به ټول ټبونه وړاندې کړي.
`<pre class="prettyprint">`	د google-code-prettify کتابتون په کارولو سره، ستاسو د کوډ بلاکونه یو څه مختلف بصری سټایل او اتوماتیک ترکیب روښانه کول ترلاسه کوي. <div> <h1> سرلیک </h1> <p> دلته یو څه... </p> </div> google-code-prettify ډاونلوډ کړئ او د کارولو څرنګوالي لپاره ریډم وګورئ.

<pre>

<div>
  <h1>سرلیک</h1>
  <p>دلته یو څه...</p>
</div>

یادونه: ډاډه اوسئ چې کوډ په <pre>ټاګونو کې د امکان تر حده کیڼ اړخ ته نږدې وساتئ؛ دا به ټول ټبونه وړاندې کړي.

<pre class="prettyprint">

د google-code-prettify کتابتون په کارولو سره، ستاسو د کوډ بلاکونه یو څه مختلف بصری سټایل او اتوماتیک ترکیب روښانه کول ترلاسه کوي.

<div> <h1> سرلیک </h1> <p> دلته یو څه... </p> </div>

google-code-prettify ډاونلوډ کړئ او د کارولو څرنګوالي لپاره ریډم وګورئ.

انلاین لیبلونه

<span class="label">

ستاسو د بدن متن کې هرې جملې ته پاملرنه وکړئ یا پرچم کړئ.

هر څه لیبل کړئ

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

لیبل	پایله
`<span class="label">Default</span>`	ډیفالټ
`<span class="label success">New</span>`	نوی
`<span class="label warning">Warning</span>`	خبرتیا
`<span class="label important">Important</span>`	مهم
`<span class="label notice">Notice</span>`	خبرتیا

د رسنیو شبکه

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

د تمبیلونو بیلګه

تمبیلونه په .media-gridهره اندازه کې کیدی شي، مګر دوی غوره کار کوي کله چې په مستقیم ډول د جوړ شوي بوټسټریپ گرډ سیسټم سره نقشه شي. د انځور پلنوالی لکه 90، 210، او 330 د څو پکسل پیډینګ سره یوځای کیږي ترڅو د .span2, .span4او .span6کالم اندازې سره مساوي شي.

لوی

منځنی

کوچنی

دوی کوډ کول

د میډیا گرډونه کارول اسانه دي او د مارک اپ اړخ کې ساده دي. د دوی ابعاد په خالص ډول د شامل شوي عکسونو اندازې پراساس دي.

<ul class = "media-grid" > 
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

د ودانیو میزونه

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

میزونه خورا ښه دي - د ډیری شیانو لپاره. په هرصورت ، عالي میزونه یو څه مارک اپ مینې ته اړتیا لري ترڅو ګټور ، د توزیع وړ او لوستلو وړ وي (د کوډ په کچه). دلته د مرستې لپاره یو څو لارښوونې دي.

تل خپل د کالم سرلیکونه په داسې ډول لپاسه کړئ چې <thead>درجه بندي >>> وي .<thead><tr><th>

د کالم سرلیکونو ته ورته، ستاسو د میز ټول بدن مینځپانګه باید په یو ډول پوښل شي <tbody>نو ستاسو درجه بندي <tbody>> <tr>> <td>وي.

بېلګه: د ډیفالټ میز سټایلونه

ټول میزونه به په اوتومات ډول یوازې د لازمي سرحدونو سره سټایل شي ترڅو د لوستلو وړتیا او جوړښت وساتي. د اضافي ټولګیو یا ځانګړتیاو اضافه کولو ته اړتیا نشته.

#	لومړی نوم	تخلص	ژبه
1	ځینې	یو	انګلیسي
2	جو	شپږ بسته	انګلیسي
3	Stu	غاښ	کوډ

<میز>
  ...
</table>

بېلګه: کنډنډ شوی جدول

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

#	لومړی نوم	تخلص	ژبه
1	ځینې	یو	انګلیسي
2	جو	شپږ بسته	انګلیسي
3	Stu	غاښ	کوډ

بېلګه: سرحدی میز

خپل میزونه د کونجونو په ګردولو او په ټولو اړخونو کې د سرحدونو په اضافه کولو سره یو څه نرم ښکاري.

#	لومړی نوم	تخلص	ژبه
1	ځینې	یو	انګلیسي
2	جو	شپږ بسته	انګلیسي
3	Stu	غاښ	کوډ

<table class = "bordered-table" > 
  ...
</table>

بېلګه: د زیبرا پټه

د زیبرا سټریپینګ په اضافه کولو سره د خپلو میزونو سره یو څه خوند واخلئ — یوازې .zebra-stripedټولګي اضافه کړئ.

#	لومړی نوم	تخلص	ژبه
1	ځینې	یو	انګلیسي
2	جو	شپږ بسته	انګلیسي
3	Stu	غاښ	کوډ
span 4 کالمونه
span 2 کالمونه		span 2 کالمونه

یادونه: د زیبرا سټریپینګ یو پرمختللی وده ده چې د زړو براوزرونو لکه IE8 او لاندې لپاره شتون نلري.

د میز طبقه = "زیبرا پټه" > 
  ...
</table>

بېلګه: د زیبرا پټه w/ TableSorter.js

د مخکیني مثال په پام کې نیولو سره، موږ د jQuery او Tablesorter پلگ ان له لارې د ترتیب کولو فعالیت چمتو کولو سره زموږ د میزونو ګټورتیا ته وده ورکوو . د ترتیب بدلولو لپاره د هر کالم سرلیک کلیک وکړئ.

#	لومړی نوم	تخلص	ژبه
2	جو	شپږ بسته	انګلیسي
3	Stu	غاښ	کوډ
1	ستاسو	یو	انګلیسي

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( فعالیت () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
د میز طبقه = "زیبرا پټه" > 
  ...
</table>

ثابت ټاپ بار

دا څه دي

زموږ ټاپ بار یو ثابت بار دی چې د ویب پاڼې لوګو یا نوم، لومړني نیویګیشن، او د لټون فورمه لري.

د اصلاح وړ

دننه ټول عناصر، او ټول ټاپ بار هم اختیاري دي. تاسو کولی شئ د لوګو/نوم، nav، لټون، او ثانوي نیوی - یا د دې کوم ترکیب شامل کړئ.

ډراپ ډاون شامل دي

د اصلي نیویګیشن د یوې برخې په توګه، موږ ستاسو لپاره دا وړتیا شامله کړې چې ستاسو په نیویګیشن کې ډراپ ډاون اضافه کړئ. پورته ثانوي نیوی وګورئ (ښي اړخ ته شوی) ترڅو وګورئ چې دا څنګه ترسره کیږي. د ډراپ ډاون ټګونه د اوسني مخ انتخاب ښودلو لپاره liهم ملاتړ کوي..active

نوټ: کله چې په هره پاڼه کې د ټاپ بار کاروئ، ډاډ ترلاسه کړئ چې د هغه اوورلیپ لپاره حساب وکړئ چې دا padding-top: 40px;ستاسو bodyپه .

ټبونه او ګولۍ

د یو سره ساده ثانوي نیویګیشن جوړ کړئ <ul>. د مناسب ټولګي په اضافه کولو سره د ټبونو یا ګولیو ترمنځ تبادله وکړئ.

د منځپانګې فرعي برخو لکه زموږ د حساب ترتیباتو پاڼې او د کارونکي مهال ویشونو لپاره د ورته منځپانګو د پاڼو تر منځ د بدلون لپاره خورا ښه. په ټب شوي یا ګولۍ سټایلونو کې شتون لري.

د بنسټیز ټب مثال

ټبونه د منظم نیویګیشن په توګه کارول کیدی شي (په ورته ټب کې بهرنۍ پاڼې پورته کول) یا د محتوياتو پینونو بدلولو لپاره د میز وړ مینځپانګې ساحې په توګه کارول کیدی شي. موږ د ټبونو پلگ ان لرو چې د وروستي مدغم کولو لپاره کارول کیدی شي.

<ul class = "tabs" > 
  <li class = "فعال" ><a href = "#" > کور </a></li>  
  <li><a href = "#" > پروفایل </a></li> 
  <li><a href = "#" > پیغامونه </a></li> 
  <li><a href = "#" > ترتیبات </a></li> 
  <li><a href = "#" > اړیکه </a></li> 
</ul>

د اساسي ګولۍ مثال

<ul class = "ګولۍ" > 
  <li class = "فعال" ><a href = "#" > کور </a></li>  
  <li><a href = "#" > پروفایل </a></li> 
  <li><a href = "#" > پیغامونه </a></li> 
  <li><a href = "#" > ترتیبات </a></li> 
  <li><a href = "#" > اړیکه </a></li> 
</ul>

breadcrumbs

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

<ul class = "breadcrumb" > 
  <li><a href = "#" > کور </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > منځنی مخ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > بل </a> <span class = "divider" > / </span></li>   
  <li class = "فعال" > تاسو دلته یاست </li> 
</ul>

پاڼه کول

د Rdio لخوا الهام شوی خورا ساده او لږترلږه سټایل شوی پاڼه. لوی بلاک له لاسه ورکول سخت دي، په اسانۍ سره د توزیع وړ، او لوی کلک ساحې چمتو کوي.

<div class = "صفحه کول" > 
  <ul>
    <li class = "مخکینی غیر فعال شوی" ><a href = "#" > ← مخکینی </a></li>  
    <li class = "فعال" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "بل" ><a href = "#" > بل → </a></li>  
  </ul>
</div>

بنسټیز خبرتیاوې

.alert-message

د ناکامۍ، احتمالي ناکامۍ، یا د عمل بریالیتوب روښانه کولو لپاره یو لیک پیغامونه. په ځانګړې توګه د فورمو لپاره ګټور.

جاواسکریپټ ترلاسه کړئ »

مقدس ګواکامول! خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري .

اوه ټویټ! دا او هغه بدل کړئ او بیا هڅه وکړئ .

ډیر ښه! تاسو دا خبرتیا پیغام په بریالیتوب سره ولولئ .

پورته شه! دا یو خبرتیا ده چې ستاسو پام ته اړتیا لري، مګر دا لاهم یو لوی لومړیتوب ندی.

کوډ بېلګه

<div class = "د خبرتیا پیغام خبرداری" > 
  <a class="close" href="#" > × </a> _ _ _ _  
  <p><strong> مقدس ګواکامول! </strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست. </p>
</div>

پیغامونه بند کړئ

.alert-message.block-message

د هغو پیغامونو لپاره چې لږ وضاحت ته اړتیا لري، موږ د پاراګراف سټایل خبرتیاوې لرو. دا د اوږدې تېروتنې پیغامونو د ببل کولو لپاره مناسب دي، یو کاروونکي ته د پاتې عمل په اړه خبرداری ورکوي، یا یوازې په پاڼه کې د ډیر ټینګار لپاره معلومات وړاندې کوي.

جاواسکریپټ ترلاسه کړئ »

مقدس ګواکامول! دا یو خبرداری دی! خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري. Nulla vitae elit libero, a pharatra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

دا اقدام وکړئ یا دا کار وکړئ

اوه ټویټ! تاسو یوه تېروتنه وکړه! دا او هغه بدل کړئ او بیا هڅه وکړئ .

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

دا اقدام وکړئ یا دا کار وکړئ

ډیر ښه! تاسو دا خبرتیا پیغام په بریالیتوب سره ولولئ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

دا اقدام وکړئ یا دا کار وکړئ

پورته شه! دا یو خبرتیا ده چې ستاسو پام ته اړتیا لري، مګر دا لاهم یو لوی لومړیتوب ندی.

دا اقدام وکړئ یا دا کار وکړئ

کوډ بېلګه

<div class = "alert-message block-message warning" > 
  <a class="close" href="#" > × </a> _ _ _ _  
  <p><strong> مقدس ګواکامول! دا یو خبرداری دی! </strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست. Nulla vitae elit libero, a pharatra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > دا اقدام وکړئ </a> <a class = "btn small" href = "#" > یا دا وکړئ </a>     
  </div>
</div>

موډلونه

موډلونه - ډیالوګونه یا لایټ بکسونه - په داسې شرایطو کې د متناسب عملونو لپاره عالي دي چیرې چې دا مهمه ده چې د شالید شرایط وساتل شي.

جاواسکریپټ ترلاسه کړئ »

وسیلې

Twipsies د مغشوش کارونکي سره د مرستې لپاره خورا ګټور دي او سم لوري ته یې په ګوته کوي.

جاواسکریپټ ترلاسه کړئ »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium .

Popovers

مخ ته د فرعي متن معلوماتو چمتو کولو لپاره د پاپورونو څخه کار واخلئ پرته له دې چې ترتیب اغیزه وکړي.

جاواسکریپټ ترلاسه کړئ »

پیل کول

د بوټسټریپ کتابتون سره د جاوا سکریپټ ادغام خورا اسانه دی. لاندې موږ اساساتو ته ځو او تاسو ته د پیل کولو لپاره ځینې په زړه پوري فلګ ان چمتو کوو!

جاواسکریپټ اسناد وګورئ »

څه پکې شامل دي

د بوټسټریپ ځینې لومړني برخې د نوي دودیز پلګ انونو سره ژوند ته راوړو چې د jQuery او Ender سره کار کوي . موږ تاسو هڅوو چې ستاسو د ځانګړي پراختیا اړتیاو سره سم د دوی پراختیا او ترمیم کړئ.

دوتنه	تفصیل
bootstrap-modal.js	زموږ موډل پلگ ان د دودیز موډل js پلگ ان په اړه خورا سلم ټیک دی! موږ ځانګړې پاملرنه وکړه چې یوازې هغه وړ فعالیت شامل کړو چې موږ په ټویټر کې ورته اړتیا لرو.
bootstrap-alerts.js	د خبرتیا پلگ ان خبرتیاو ته د نږدې فعالیت اضافه کولو لپاره خورا کوچنی ټولګی دی.
bootstrap-dropdown.js	دا پلگ ان د بوټسټریپ ټاپ بار یا ټب شوي نیویګیشنونو کې د ډراپ ډاون تعامل اضافه کولو لپاره دی.
bootstrap-scrollspy.js	د ScrollSpy پلگ ان د بوټسټریپ ټاپ بار ته د سکرول موقعیت پراساس د اتوماتیک تازه کولو نیوی اضافه کولو لپاره دی.
bootstrap-buttons.js	د ScrollSpy پلگ ان د بوټسټریپ ټاپ بار ته د سکرول موقعیت پراساس د اتوماتیک تازه کولو نیوی اضافه کولو لپاره دی.
bootstrap-tabs.js	دا پلگ ان د محلي منځپانګې له لارې د سایکل چلولو لپاره چټک، متحرک ټب او د ګولۍ فعالیت زیاتوي.
bootstrap-twipsy.js	د جیسن فریم لخوا لیکل شوي د عالي jQuery.tipsy پلگ ان پراساس؛ twipsy یوه تازه نسخه ده، کوم چې په عکسونو تکیه نه کوي، د انیمیشنونو لپاره css3 کاروي، او د ځایی سرلیک ذخیره کولو لپاره د ډاټا ځانګړتیاوې کاروي!
bootstrap-popover.js	د پاپ اوور پلگ ان ستاسو غوښتنلیک ته د پاپورونو اضافه کولو لپاره یو ساده انٹرفیس چمتو کوي. دا د boostrap-twipsy.js پلگ ان غزوي، نو ډاډه اوسئ چې دا فایل هم واخلئ کله چې ستاسو په پروژه کې پاپورونه شامل وي!

ایا جاوا سکرپٹ اړین دی؟

نه! بوټسټریپ لومړی او خورا مهم د CSS کتابتون لپاره ډیزاین شوی. دا جاوا سکرپٹ د شامل سټایلونو په سر کې یو بنسټیز متقابل پرت چمتو کوي.

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

د نورو معلوماتو لپاره او د ځینې ژوندیو ډیمو لیدلو لپاره، مهرباني وکړئ زموږ د پلگ ان اسنادو پاڼې ته مراجعه وکړئ .

بوټسټریپ د پریبوټ څخه جوړ شوی و ، د مکسینونو او متغیرونو خلاص سرچینه بسته چې د ګړندي او اسانه ویب پراختیا لپاره د CSS پری پروسیسر ، Less سره په ګډه کارول کیږي.

وګورئ چې موږ څنګه په بوټسټریپ کې پریبوټ کارولی او تاسو څنګه کولی شئ له دې څخه کار واخلئ که تاسو په خپله راتلونکي پروژه کې لږ چلول غوره کړئ.

څنګه یې وکاروئ

دا اختیار په خپل براوزر کې د جاوا سکرپٹ له لارې په CSS کې د بوټسټریپ لږ متغیرونو ، مکسینونو او نیسټ کولو بشپړ کارولو لپاره وکاروئ.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ټول" />    
<script src = "js/less-1.1.3.min.js" ></script>

د .js حل احساس نه کوئ؟ د کم میک اپلیټ هڅه وکړئ یا د تالیف کولو لپاره Node.js وکاروئ کله چې تاسو خپل کوډ ځای په ځای کړئ.

څه پکې شامل دي

دلته د بوټسټریپ د یوې برخې په توګه د ټویټر بوټسټریپ کې د هغه څه ځینې مهمې څرګندونې دي. د بوټسټریپ ویب پا orې یا ګیتوب پروژې پا pageې ته لاړشئ ترڅو ډاونلوډ او نور زده کړئ.

متغیرات

په لږ کې تغیرات ستاسو د CSS سر درد وړیا ساتلو او تازه کولو لپاره مناسب دي. کله چې تاسو غواړئ د رنګ ارزښت یا په مکرر ډول کارول شوي ارزښت بدل کړئ ، دا په یو ځای کې تازه کړئ او تاسو تنظیم شوي یاست.

// لینکونه
د لینک رنګ : #8b59c2 ؛         
@linkColorHover :     تیاره ( @linkColor , 10 ); 
 
// خړ
تور : #000;             
ګریډارک :           روښانه کول ( @تور ، 25 ٪)؛ 
خړ :               روښانه ( @تور ، 50 ٪)؛ 
خړ رڼا :          روښانه کول ( @ تور ، 70 ٪)؛ 
خړ لایټر :        روښانه کول ( @ تور ، 90 ٪)؛ 
سپين : #ffff ;             
 
// تلفظ رنګونه
نیلي : #08b5fb ;              
شنه : #46a546 ;             
سور : #9d261d ;               
ژیړ : #ffc40d;            
@نارنج : #f89406 ;            
ګلابي : #c3325f ;              
ارغواني : #7a43b6 ;            
 
// بیس لائن گرډ
@basefont : 13px ;          
@baseline : 18px ;

تبصره کول

/* ... */لږ د CSS نورمال ترکیب سربیره د تبصرې بل ډول هم چمتو کوي .

// دا یو تبصره ده
/* دا هم یوه تبصره ده*/

وازګه ګډوي

مکسینز اساسا د CSS لپاره شامل یا برخې دي، تاسو ته اجازه درکوي چې د کوډ بلاک په یو کې یوځای کړئ. دا د پلورونکي مخکیني ملکیتونو لپاره عالي دي لکه box-shadowد کراس براوزر ګریډینټ ، فونټ سټیکس ، او نور ډیر څه. لاندې د مکسینونو نمونه ده چې د بوټسټریپ سره شامل دي.

د فونټ سټکس

#فونټ {
  . لنډ لاسی ( @وزن : نورمال , @ اندازه : 14px , @ line Height : 20px ) {     
د     فونټ اندازه : @size ; 
    فونټ وزن : @weight ; _ 
    کرښه - لوړوالی : @ lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @line Height : 20px ) {     
    د فونټ کورنۍ : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
د     فونټ اندازه : @size ; 
    فونټ وزن : @weight ; _ 
    کرښه - لوړوالی : @ lineHeight ; 
  }
  ...
}

تدریجي

# تدریجي {
  ...
  . عمودی ( @startColor : #555, @endColor: #333) { 
    پس منظر رنګ : @endColor ; 
    پس منظر - تکرار : تکرار - x ;
    پس منظر - انځور : - khtml - تدریجي ( خطي ، کیڼ پورته ، کیڼ ښکته ، له ( @startColor ) څخه ( @endColor ) ته ؛ // کانکورر   
    پس منظر - انځور : - moz - خطي - تدریجي ( @startColor ، @endColor )؛ // FF 3.6+   
    پس منظر - انځور : - ms - خطي - تدریجي ( @startColor ، @endColor )؛ // IE10   
    پس منظر - انځور : - ویب کیټ - تدریجي ( خطي ، کیڼ پورته ، کیڼ ښکته ، رنګ - ودرول ( 0 ٪، @startColor )، رنګ - بند ( 100 ٪، @endColor ))؛ // سفاري 4+، کروم 2+    
    پس منظر - انځور : - ویبکیټ - خطي - تدریجي ( @startColor ، @endColor )؛ // سفاري 5.1+، کروم 10+   
    پس منظر - انځور : - o - خطي - تدریجي ( @startColor ، @endColor )؛ // اوپیرا 11.10   
    پس منظر - انځور : خطي - تدریجي ( @startColor ، @endColor )؛ // معیاري  
  }
  ...
}

عملیات

په زړه پوري اوسئ او یو څه ریاضی ترسره کړئ ترڅو د لاندې یو په څیر انعطاف وړ او ځواکمن مکسونه رامینځته کړئ.

// ګریډیټیوډ
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ځینې کالمونه جوړ کړئ
. کالمونه ( @columnSpan : 1 ) {  
  عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

تالیف لږ

په /lib/ کې د فایلونو ترمیم کولو وروسته .less، تاسو اړتیا لرئ چې د بوټسټریپ-* ..cm.css او bootstrap-*xx.min.css فایلونو بیا جوړولو لپاره یې بیا جوړ کړئ. که تاسو GitHub ته د پلټ غوښتنه وسپارئ ، نو تاسو باید تل بیا تنظیم کړئ.

د راټولولو لارې

طریقه	ګامونه
نوډ د میک فایل سره	د لاندې کمانډ په چلولو سره د npm سره د کم کمانډ لاین کمپیلر نصب کړئ: $ npm انسټالول lessc یوځل نصب شو یوازې `make`ستاسو د بوټسټریپ لارښود له ریښې څخه وګرځئ او تاسو ټول چمتو یاست. برسیره پردې، که تاسو څارونکی نصب کړی وي، تاسو کولی شئ د بوټسټریپ`make watch` په اتوماتيک ډول بیا جوړ کړئ هرکله چې تاسو د بوټسټریپ لیب کې فایل ترمیم کړئ (دا اړتیا نلري، یوازې د اسانتیا طریقه).
جاوا سکرپٹ	وروستی Less.js ډاونلوډ کړئ او د هغې لپاره لاره (او بوټسټریپ) کې شامل کړئ `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> د .less فایلونو د بیا تنظیم کولو لپاره، یوازې خوندي کړئ او خپل پاڼه بیا پورته کړئ. Less.js دوی تالیف کوي او په محلي ذخیره کې یې ذخیره کوي.
د قوماندې کرښه	که تاسو دمخه د کمانډ لاین وسیله نصب کړې وي ، په ساده ډول لاندې کمانډ پرمخ وړئ: $lessc ./lib/bootstrap.less > bootstrap.css ډاډ ترلاسه کړئ چې پدې `--compress`کمانډ کې شامل کړئ که تاسو هڅه کوئ چې ځینې بایټونه خوندي کړئ!
لږ ماک ایپ	غیر رسمي میک اپلیکیشن د .less فایلونو لارښودونه ګوري او د کتل شوي .less فایل له هر خوندي کولو وروسته محلي فایلونو ته کوډ تالیف کوي. که تاسو غواړئ، تاسو کولی شئ په اپلیکیشن کې غوره توبونه د اتوماتیک کمولو لپاره او په کوم ډایرکټر کې چې تالیف شوي فایلونه پای ته رسیږي.

د سی ایس ایس سره اړیکه ونیسئ

له لږ سره یې وکاروئ

په GitHub کې فورک

د بوټسټریپ لنډ تاریخ ، د براوزر ملاتړ ، او نور ډیر څه په اړه

تاریخ

د براوزر ملاتړ

څه پکې شامل دي

د چټک پیل مثالونه

د گرډ سیسټم معیاري 940px راک کړئ یا خپل ځان رول کړئ

ډیفالټ گرډ

د ګریډ مارک اپ بیلګه

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

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

د ځړول شوي کالمونو بیلګه

خپل گرډ رول کړئ

د ګریډ دننه

اوس د دودیز کولو لپاره

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

ثابت ترتیب

د سیال ترتیب

د ټایپوګرافي سرلیکونه، پراګرافونه، لیستونه، او نور د انلاین ډول عناصر

سرلیکونه او کاپي

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5

h6. سرلیک 6

بېلګه پراګراف

د مثال سرلیک فرعي سرلیک لري ...

متفرقه. عناصر

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

په یوه پراګراف کې ټینګار

ادرسونه

لنډیزونه

بلاک کوټونه

څنګه حواله کول

لیستونه

بې ترتیبه<ul>

بې سټایل<ul.unstyled>

امر وکړ<ol>

تفصیلdl

کوډ

کوډ وړاندې کوي

انلاین لیبلونه

هر څه لیبل کړئ

رسنۍ د انځورونو او ویډیوګانو ښودل

د رسنیو شبکه

د تمبیلونو بیلګه

لوی

منځنی

کوچنی

دوی کوډ کول

د میزونو لپاره، تاسو اټکل کړی، د جدول ډاټا

د ودانیو میزونه

بېلګه: د ډیفالټ میز سټایلونه

بېلګه: کنډنډ شوی جدول

بېلګه: سرحدی میز

بېلګه: د زیبرا پټه

بېلګه: د زیبرا پټه w/ TableSorter.js

فورمې

ډیفالټ سټایلونه

سټک شوي بڼې

د ساحې اندازې فارم

تڼۍ

د مثال بټن

بدیل اندازه

د معلولیت ریاست

لینکونه

تڼۍ

نیویګیشن

ثابت ټاپ بار

د پروژې نوم

دا څه دي

د اصلاح وړ

ډراپ ډاون شامل دي

ټبونه او ګولۍ

د بنسټیز ټب مثال

د اساسي ګولۍ مثال

breadcrumbs

بې ترتیبه`<ul>`

بې سټایل`<ul.unstyled>`

امر وکړ`<ol>`

تفصیل`dl`