سرلیکونه

ټول HTML سرلیکونه، <h1>له لارې <h6>شتون لري.

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5

h6. سرلیک 6

د بدن کاپي

د بوټسټریپ نړیوال ډیفالټ 14pxfont-size دی ، د 20px سره . دا په ټولو پراګرافونو کې پلي کیږي. برسېره پردې، (پراګرافونه) د دوی د لیکې لوړوالی نیمایي ټیټ مارجن ترلاسه کوي (د ډیفالټ په واسطه 9px).line-height<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

د مشر بدن کاپي

یو پراګراف په اضافه کولو سره څرګند کړئ .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.

<p class = "لیډ" > ... </p>

د کم سره جوړ شوی

د ټایپوګرافیک پیمانه په variables.less کې د دوه لږ متغیرونو پراساس ده : @baseFontSizeاو @baseLineHeight. لومړی د بیس فونټ اندازه ده چې په اوږدو کې کارول کیږي او دوهم د بیس لاین لوړوالی دی. موږ دا متغیرونه او یو څه ساده ریاضی کاروو ترڅو زموږ د ټولو ډولونو حاشیو ، پیډینګونو ، او لاین لوړوالی رامینځته کړو. دوی تنظیم کړئ او بوټسټریپ موافقت کوي.

ټینګار

د سپک وزن سټایلونو سره د HTML د ډیفالټ ټینګار ټاګونو څخه کار واخلئ.

`<small>`

د متن په انلاین یا بلاکونو کې د ټینګار کولو لپاره، کوچنۍ ټګ وکاروئ.

د متن دا کرښه د ښه چاپ په توګه درملنه کیږي.

<p> <small> د متن دا کرښه د ښه چاپ په توګه د چلند لپاره ده. </ small> </p>

`<strong>`

د مهم سره د متن یوه ټوټه ټینګار کولو لپاره

د متن لاندې برخه د بولډ متن په توګه وړاندې کیږي .

<strong> د بولډ متن په توګه وړاندې شوی </strong>

`<em>`

د فشار سره د متن یوه ټوټه ټینګار کولو لپاره

د متن لاندې برخه د ایتالیک متن په توګه وړاندې کیږي .

<em> د ایتالیک متن په توګه وړاندې شوی </em>

پورته شه! د کارولو لپاره وړیا احساس وکړئ <b>او <i>په HTML5 کې. <b>د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي پداسې حال <i>کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.

لنډیزونه

<abbr>د مخففاتو او مخففونو لپاره د HTML عنصر سټایل شوي پلي کول ترڅو په هور کې پراخه شوې نسخه وښیې. د ځانګړتیا سره لنډیزونه titleپه هور کې د سپک ټکي لاندې سرحد او د مرستې کرسر لري، په هور کې اضافي شرایط چمتو کوي.

`<abbr>`

د لنډیز اوږد هوور کې د پراخ شوي متن لپاره، titleصفت شامل کړئ.

د کلمې د صفت لنډیز attr دی .

<abbr عنوان = "attribute" > attr </abbr>

`<abbr class="initialism">`

.initialismد یو څه کوچني فونټ اندازې لپاره په لنډیز کې اضافه کړئ .

HTML د ټوټې شوي ډوډۍ څخه غوره شی دی.

<abbr سرلیک = "انتساب" کلاس = "ابتداییزم" > attr </abbr>

ادرسونه

د نږدې پلار یا د کار ټول بدن لپاره د اړیکو معلومات وړاندې کړئ.

`<address>`

د ټولو لینونو په پای ته رسولو سره فارمینګ خوندي کړئ <br>.

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

بشپړ نوم
[email protected]

<address>
  <strong> ټویټر، Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  سان فرانسسکو، CA 94107 <br>
  <abbr عنوان = "تلیفون" > P: </abbr> (123) 456-7890 
</address>
 
<address>
  <strong> بشپړ نوم </strong><br>
  <a href="mailto:#" > [email protected] </a> _ _ 
</address>

بلاک کوټونه

ستاسو په سند کې د بلې سرچینې څخه د مینځپانګو بلاکونو حواله کولو لپاره.

ډیفالټ بلاککوټ

د اقتباس په توګه د <blockquote>هر HTML شاوخوا وپلټئ . د مستقیم نرخونو لپاره موږ وړاندیز کوو a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

د بلاک اقتباس اختیارونه

په معیاري بلاککوټ کې د ساده تغیراتو لپاره سټایل او مینځپانګه بدلونونه.

د سرچینې نوم ورکول

<small>د سرچینې پیژندلو لپاره ټګ اضافه کړئ . د سرچینې کار نوم په کې وتړئ <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
یو څوک چې د سرچینې په سرلیک کې مشهور دی

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> یو څوک مشهور <cite title = "سرچینه سرلیک" > د سرچینې سرلیک </cite></small> 
</blockquote>

بدیل نندارې

.pull-rightد تیر شوي، ښي اړخ شوي بلاک اقتباس لپاره وکاروئ .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
یو څوک چې د سرچینې په سرلیک کې مشهور دی

<blockquote class = "pull-right" > 
  ...
</blockquote>

لیستونه

بې ترتیبه

د توکو لیست په کوم کې چې امر په ښکاره ډول مهم نه دی.

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>
  <li> ... </li>
</ul>

امر وکړ

د توکو لیست په کوم کې چې امر په ښکاره ډول مهم دی.

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

<ol>
  <li> ... </li>
</ol>

بې سټایل

د شیانو لیست پرته له کوم list-styleیا اضافي کیڼ پیډینګ سره.

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 class = "unstyled" > 
  <li> ... </li>
</ul>

تفصیل

د دوی اړوند توضیحاتو سره د شرایطو لیست.

د توضیحاتو لیست: د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

افقی توضیحات

شرایط او توضیحات په <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.
Felis euismod sempre eget lacinia: Fusce dapibus، telus ac cursus commodo، tortor mauris condimentum nibh، ut fermentum massa justo sit amet risus.

<dl ټولګي = "dl-افقي" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

پورته شه! د افقی توضیحاتو لیستونه به هغه شرایط لنډ کړي چې د کیڼ کالم فکس کې د فټ کولو لپاره خورا اوږد وي text-overflow. په تنګ لیدونو کې، دوی به د ډیفالټ سټیک شوي ترتیب ته بدل شي.

انلاین

د کوډ انلاین ټوټې په سره وتړئ <code>.

د مثال په توګه، <section>باید د انلاین په توګه وپلټل شي.

د مثال په توګه ، <code><section> </ code > باید د انلاین په توګه وپلټل شي .

بنسټیز بلاک

<pre>د کوډ ډیری لینونو لپاره وکاروئ . ډاډ ترلاسه کړئ چې د مناسب رینډرینګ لپاره په کوډ کې د هرې زاویې بریکٹ څخه تیښته وکړئ.

<p>د متن نمونه دلته...</p>

<pre>
  <p>د متن نمونه دلته...</p>
</pre>

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

تاسو کولی شئ په اختیاري ډول هغه .pre-scrollableټولګي اضافه کړئ کوم چې به د 350px اعظمي لوړوالی تنظیم کړي او د y-axis سکرول بار چمتو کړي.

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

.tableد لومړني سټایل کولو لپاره — سپک پیډینګ او یوازې افقی ویشونکي — هر ته بیس کلاس اضافه کړئ <table>.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

د میز ټولګي = "میز" > 
  …
</table>

اختیاري ټولګي

د لاندې ټولګیو څخه هر یو .tableبیس کلاس ته اضافه کړئ.

`.table-striped`

<tbody>د CSS انتخاب کونکي له لارې د هر میز قطار ته د زیبرا سټریپینګ اضافه کوي :nth-child(په IE7-IE8 کې شتون نلري).

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

میز ته سرحدونه او ګردي کونجونه اضافه کړئ.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
1	مارک	اوټو	@getbootstrap
2	یعقوب	تورټن	@ غوړ
3	لاري مرغۍ		@ټویټر

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

`.table-hover`

د میز په قطارونو کې دننه د هوور حالت فعال کړئ <tbody>.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري مرغۍ		@ټویټر

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

د حجرو پیډینګ په نیمایي کې پرې کولو سره میزونه نور هم کمپیکٹ کوي.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري مرغۍ		@ټویټر

<table class = "table table-condensed" > 
  …
</table>

اختیاري قطار ټولګي

د میز قطارونو رنګ کولو لپاره متناسب ټولګي وکاروئ.

ټولګي	تفصیل
`.success`	یو بریالی یا مثبت عمل په ګوته کوي.
`.error`	یو خطرناک یا احتمالي منفي عمل په ګوته کوي.
`.info`	د ډیفالټ سټایلونو لپاره د بدیل په توګه کارول کیږي.

#	محصول	تادیه اخیستل	حالت
1	TB - میاشتنی	01/04/2012	تصویب شو
2	TB - میاشتنی	02/04/2012	رد کړل
3	TB - میاشتنی	03/04/2012	پاتې

...
  < tr class = "بریالیتوب" >
    <td> 1 < /td>
    <td>TB - میاشتنی</ td >
    < td > 01/04/2012 < / td >
    <td>منظور شوی</ td >
  </ tr >
...

د میز مارک اپ ملاتړ شوی

د ملاتړ شوي جدول HTML عناصرو لیست او څنګه باید وکارول شي.

ټګ	تفصیل
`<table>`	په جدول کې د معلوماتو ښودلو لپاره د ریپ کولو عنصر
`<thead>`	`<tr>`د جدول سرلیک قطارونو ( ) لپاره د میز کالمونو لیبل کولو لپاره د کانټینر عنصر
`<tbody>`	`<tr>`د میز په بدن کې د میز قطارونو ( ) لپاره د کانټینر عنصر
`<tr>`	د کانټینر عنصر د میز حجرو ( `<td>`یا `<th>`) سیټ لپاره چې په یوه قطار کې څرګندیږي
`<td>`	د ډیفالټ میز حجره
`<th>`	د کالم لپاره ځانګړی جدول حجره (یا قطار، د ساحې او ځای په ځای کولو پورې اړه لري) لیبل باید په دننه کې وکارول شي`<thead>`
`<caption>`	د هغه څه توضیحات یا لنډیز چې جدول لري ، په ځانګړي توګه د سکرین لوستونکو لپاره ګټور

<میز>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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

د انفرادي فارم کنټرول سټایل ترلاسه کوي، مګر پرته له کوم اړین بیس کلاس <form>یا په مارک اپ کې لوی بدلونونه. پایلې د فارم کنټرولونو په سر کې په سټیک شوي، کیڼ اړخ شوي لیبلونو کې.

<فارم>
  <legend> Legend </ legend>
  <label> د لیبل نوم </label>
  د ان پټ ډول = "متن" ځای لرونکی = "یو څه ټایپ کړئ…" >  
  <span class = "help-block" > د بلاک په کچه د مرستې متن مثال دلته. </span> 
  <لیبل کلاس = "چیک باکس" > 
    <input type = "checkbox" > ما وګوره 
  </label>
  د تڼۍ ډول = "سپارل" طبقه = "btn" > سپارل </ تڼۍ>  
</form>

اختیاري ترتیبونه

د بوټسټریپ سره شامل شوي د عام استعمال قضیې لپاره درې اختیاري فارم ترتیبونه دي.

د لټون فورمه

.form-searchپه فورمه کې اضافه کړئ او .search-queryد <input>اضافي ګردي متن داخلولو لپاره.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  د تڼۍ ډول = "سبمیت " کلاس = "btn" > لټون </ تڼۍ>  
</form>

انلاین بڼه

.form-inlineد کیڼ اړخ شوي لیبلونو او انلاین بلاک کنټرولونو لپاره د کمپیکٹ ترتیب لپاره اضافه کړئ .

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  د انپټ ډول = "پاسورډ" ټولګي = "ان پټ-کوچنی" ځای لرونکی = "پاسورډ" >   
  <لیبل کلاس = "چیک باکس" > 
    <input type = "checkbox" > ما یاد کړه 
  </label>
  <button type = "submit" class = "btn" > ننوتنه </button>  
</form>

افقی بڼه

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

.form-horizontalپه فورمه کې اضافه کړئ
لیبلونه او کنټرولونه دننه کړئ.control-group
.control-labelپه لیبل کې اضافه کړئ
.controlsد مناسب سمون لپاره کوم تړلي کنټرولونه لپاسه کړئ

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > بریښنالیک </label>  
    <div class = "کنټرولونه" > 
      د ان پټ ډول = "متن" id = "inputEmail" ځای لرونکی = "بریښنالیک" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > پټنوم </label>  
    <div class = "کنټرولونه" > 
      د ان پټ ډول = "پاسورډ" id = "inputPassword" ځای لرونکی = "پاسورډ" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "کنټرولونه" > 
      <لیبل کلاس = "چیک باکس" > 
        <input type = "checkbox" > ما یاد کړه 
      </label>
      <button type = "submit" class = "btn" > ننوتنه </button>  
    </div>
  </div>
</form>

ملاتړ شوي فورمې کنټرول

د معیاري فارم کنټرول مثالونه د مثال په شکل ترتیب کې ملاتړ شوي.

داخلونه

ډیری عام فارم کنټرول، د متن پر بنسټ د ننوتلو ساحې. د ټولو HTML5 ډولونو لپاره ملاتړ شامل دی: متن، پټنوم، د نیټې وخت، د نیټې وخت - محلي، نیټه، میاشت، وخت، اونۍ، شمیره، بریښنالیک، یو آر ایل، لټون، ټیل، او رنګ.

typeپه هر وخت کې د ټاکل شوي کارولو ته اړتیا لري .

د ان پټ ډول = "متن" ځای لرونکی = "د متن داخل" >

Textarea

د فارم کنټرول چې د متن ډیری لینونو ملاتړ کوي. rowد اړتیا په صورت کې ځانګړتیا بدل کړئ .

<textarea قطار = "3" ></textarea>

چک بکسونه او راډیوګانې

چیک باکسونه په لیست کې د یو یا څو انتخابونو غوره کولو لپاره دي پداسې حال کې چې راډیوګانې د ډیری څخه د یو انتخاب غوره کولو لپاره دي.

ډیفالټ (سټاک شوی)

<لیبل کلاس = "چیک باکس" > 
  د انپټ ډول = "د چک بکس" ارزښت = "" >  
  یو انتخاب دا دی او دا - ډاډ ترلاسه کړئ چې ولې دا خورا ښه دی
</label>
 
<لیبل کلاس = "راډیو" > 
  د ان پټ ډول = "راډیو" نوم = " optionsRadios " id = "optionsRadios1" ارزښت = "option1" چک شوی >     
  یو انتخاب دا دی او دا - ډاډ ترلاسه کړئ چې ولې دا خورا ښه دی
</label>
<لیبل کلاس = "راډیو" > 
  د انپټ ډول = "راډیو" نوم = "optionsRadios" id = "optionsRadios2" ارزښت = "option2" >    
  دوه اختیارونه بل څه کیدی شي او د دې غوره کول به یو انتخاب غیر انتخاب کړي
</label>

انلاین چک بکسونه

ټولګي د چک بکسونو یا راډیوګانو لړۍ ته اضافه کړئ .inlineترڅو کنټرول په ورته کرښه کې څرګند شي.

<لیبل کلاس = "د چیک باکس انلاین" > 
  د ان پټ ډول = "چیک باکس" id = "inlineCheckbox1" ارزښت = "option1" > 1   
</label>
<لیبل کلاس = "د چیک باکس انلاین" > 
  د ان پټ ډول = "چیک باکس" id = "inlineCheckbox2" ارزښت = "option2" > 2   
</label>
<لیبل کلاس = "د چیک باکس انلاین" > 
  د ان پټ ډول = "چیک باکس" id = "inlineCheckbox3" ارزښت = "option3" > 3   
</label>

ټاکي

multiple="multiple"د ډیفالټ اختیار وکاروئ یا په یوځل کې ډیری اختیارونو ښودلو لپاره a مشخص کړئ.

<انتخاب>
  <اختیار> 1 </ اختیار>
  <option> 2 </option>
  <اختیار> 3 </ اختیار>
  <اختیار> 4 </ اختیار>
  <option> 5 </option>
</ انتخاب>
 
< متعدد غوره کړئ = "ګڼ" > 
  <اختیار> 1 </ اختیار>
  <option> 2 </option>
  <اختیار> 3 </ اختیار>
  <اختیار> 4 </ اختیار>
  <option> 5 </option>
</ انتخاب>

د فارم کنټرول پراخول

د موجوده براوزر کنټرولونو په سر کې اضافه کول ، بوټسټریپ نور ګټور فارم اجزا شاملوي.

مخکینۍ او ضمیمه شوي معلومات

د متن پراساس ان پټ څخه دمخه یا وروسته متن یا بټن اضافه کړئ. په یاد ولرئ چې selectعناصر دلته نه ملاتړ کیږي.

ډیفالټ اختیارونه

ان پټ ته د متن د مخکینۍ یا ضمیمه کولو لپاره له دوه ټولګیو څخه یوه سره an .add-onاو an وتړئ.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "کارن نوم" >      
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>     
</div>

ګډ

.add-onد ان پټ د مخکینۍ کولو او ضمیمه کولو لپاره دواړه ټولګي او دوه مثالونه وکاروئ .

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>      
</div>

د متن پر ځای تڼۍ

<span>د متن سره د ځای پرځای ، .btnد ان پټ سره د تڼۍ (یا دوه) د نښلولو لپاره a وکاروئ.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > لاړ شه! </ تڼۍ>      
</div>
 
<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > لټون </button><button class = "btn" ډول = "button" > اختیارونه </button>        
</div>

د لټون فورمه

<form class = "form-search" > 
  <div class = "input-append" > 
    د ان پټ ډول = "متن" کلاس = "span2 لټون-پوښتنه" >  
    د تڼۍ ډول = "سبمیت " کلاس = "btn" > لټون </ تڼۍ>  
  </div>
  <div class = "input-prepend" > 
    د تڼۍ ډول = "سبمیت " کلاس = "btn" > لټون </ تڼۍ>  
    د ان پټ ډول = "متن" کلاس = "span2 لټون-پوښتنه" >  
  </div>
</form>

د اندازه کولو کنټرول

د اړونده اندازه کولو ټولګیو څخه کار واخلئ لکه .input-largeیا د ټولګیو په کارولو سره د ګریډ کالم سایزونو سره خپل آخذې میچ کړئ .span*.

نسبي اندازه کول

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = "input-small" >   
<input class = "input-medium" type = "text" placeholder = "input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

پورته شه! په راتلونکو نسخو کې، موږ به زموږ د تڼۍ اندازې سره سمون لپاره د دې نسبي ان پټ ټولګیو کارول بدل کړو. د مثال په توګه، .input-largeد انپټ پیډینګ او فونټ اندازه به زیاته کړي.

د جال اندازه کول

د هغو معلوماتو لپاره وکاروئ .span1چې .span12د گرډ کالمونو ورته اندازې سره سمون لري.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
< ټولګي غوره کړئ = "span1" > 
  ...
</ انتخاب>
< ټولګي غوره کړئ = "span2" > 
  ...
</ انتخاب>
< ټولګي غوره کړئ = "span3" > 
  ...
</ انتخاب>

په هره کرښه کې د څو ګریډ داخلونو لپاره، د مناسب واټن لپاره د.controls-row ترمیم کونکي ټولګي وکاروئ . دا د سپینې ځای د سقوط لپاره آخذې تیروي، مناسب حاشیې ټاکي، او فلوټ پاکوي.

<div class = "کنټرولونه" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

د نه ترمیم وړ آخذې

ډاټا په داسې بڼه کې وړاندې کړئ چې د اصلي فارم مارک اپ کارولو پرته د ترمیم وړ نه وي.

<span class = "input-xlarge uneditable-input" > دلته یو څه ارزښت </span>

د کړنو بڼه

د عملونو د یوې ډلې (تڼۍ) سره فورمه پای ته ورسوي. کله چې په کې کېښودل شي .form-horizontal، تڼۍ به په اوتومات ډول د فارم کنټرولونو سره په قطار کې دننه شي.

<div class = "فارم-عملونه" > 
  د تڼۍ ډول = "سپارل" طبقه = "btn btn-primary" > بدلونونه خوندي کړئ </button>  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn" > لغوه </ تڼۍ>  
</div>

د مرستې متن

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

انلاین مرسته

<input type = "text" ><span class = "help-inline" > د انلاین مرسته متن </span>

بلاک مرسته

<input type = "text" ><span class = "help-block" > د مرستې متن یو اوږد بلاک چې په نوې کرښه کې ماتیږي او کیدای شي له یوې کرښې هاخوا وغزیږي. </span>

د فارم کنټرول ریاستونه

کاروونکو یا لیدونکو ته د فارم کنټرولونو او لیبلونو په اړه د لومړني فیډبیک ریاستونو سره فیډبیک چمتو کړئ.

د ننوتلو تمرکز

outlineموږ په ځینې فارم کنټرولونو کې ډیفالټ سټایلونه لرې کوو او box-shadowد دې لپاره یې په ځای کې پلي کوو :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "دا متمرکز دی..." >

غیر فعال شوي داخلونه

disabledد کارونکي داخلیدو مخنیوي لپاره په ان پټ کې صفت اضافه کړئ او یو څه مختلف لید رامینځته کړئ.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "دلته ان پټ غیر فعال شوی..." غیر فعال >

د تایید ریاستونه

بوټسټریپ کې د غلطۍ ، خبرتیا او بریا پیغامونو لپاره د اعتبار سټایلونه شامل دي. د کارولو لپاره، په شاوخوا کې مناسب ټولګي اضافه کړئ .control-group.

<div class = "کنټرول ګروپ خبرداری" > 
  <label class = "control-label" for = "inputWarning" > د خبرتیا سره داخلول </label>  
  <div class = "کنټرولونه" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > ممکن یو څه غلط شوي وي </span> 
  </div>
</div>
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > د خطا سره داخلول </label>  
  <div class = "کنټرولونه" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > مهرباني وکړئ تېروتنه سمه کړئ </span> 
  </div>
</div>
<div class = "کنټرول ګروپ بریا" > 
  <label class = "control-label" for = "inputSuccess" > د بریالیتوب سره داخلول </label>  
  <div class = "کنټرولونه" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > ووهو! </span> 
  </div>
</div>

ډیفالټ بټن

.btnد تڼۍ سټایلونه د پلي شوي ټولګي سره په هرڅه پلي کیدی شي . په هرصورت، معمولا تاسو غواړئ چې دا یوازې <a>او <button>عناصرو ته د غوره رینډینګ لپاره پلي کړئ.

تڼۍ	ټولګي =""	تفصیل
	`btn`	معیاري خړ تڼۍ د تدریجي سره
	`btn btn-primary`	اضافي بصري وزن چمتو کوي او د بټونو په سیټ کې لومړني عمل پیژني
	`btn btn-info`	د ډیفالټ سټایلونو لپاره د بدیل په توګه کارول کیږي
	`btn btn-success`	یو بریالی یا مثبت عمل په ګوته کوي
	`btn btn-warning`	دا په ګوته کوي چې د دې عمل سره باید احتیاط وشي
	`btn btn-danger`	یو خطرناک یا احتمالي منفي عمل په ګوته کوي
	`btn btn-inverse`	بدیل تیاره خړ تڼۍ، د سیمانټیک عمل یا کارولو سره تړلې ندي
	`btn btn-link`	د تڼۍ د چلند ساتلو په وخت کې د یو لینک په څیر په جوړولو سره د تڼۍ په اړه ټینګار وکړئ

د کراس براوزر مطابقت

IE9 په ګردي کونجونو کې د شالید ګریډینټ نه فصل کوي، نو موږ یې لرې کوو. اړونده، IE9 غیر فعال buttonعناصر جنکیف کوي، د متن خړ رنګ د یو ناوړه متن سیوري سره وړاندې کوي چې موږ یې نشو حل کولی.

د تڼۍ اندازه

لوی یا کوچني بټنونه خوښوي؟ اضافه کړئ .btn-large، .btn-smallیا .btn-miniد اضافي اندازو لپاره.

<p>
  <تڼۍ  طبقه = "btn btn-large btn-primary" type = "button" > لوی تڼۍ </button> 
  <تڼۍ  کلاس = "btn btn-large" type = "button" > لوی تڼۍ </ تڼۍ> 
</p>
<p>
  <تڼۍ  کلاس = "btn btn-primary" type = "button" > د اصلي تڼۍ </ تڼۍ> 
  <تڼۍ  کلاس = "btn" ډول = "تڼۍ" > ډیفالټ تڼۍ </ تڼۍ> 
</p>
<p>
  د تڼۍ ټولګي =  "btn btn-small btn-primary" type = "button" > کوچنۍ تڼۍ </button> 
  د تڼۍ ټولګي  = "btn btn-small" type = "button" > کوچنۍ تڼۍ </ تڼۍ> 
</p>
<p>
  د تڼۍ ټولګي = "btn btn-mini btn-primary"   type = "button" > منی تڼۍ </button>
  د تڼۍ ټولګي = "btn btn-mini"   ډول = "تڼۍ" > مینی تڼۍ </ تڼۍ>
</p>

د بلاک کچې تڼۍ رامینځته کړئ — هغه چې د مور او پلار بشپړ پراخوالی لري — په اضافه کولو سره .btn-block.

د تڼۍ ټولګي = "btn btn-لوی btn-بلاک btn-لومړنی" ډول =   "button" > د بلاک کچې تڼۍ </button>
د تڼۍ ټولګي = "btn btn-large btn-block" ډول = "تڼۍ"   > د بلاک سطحه تڼۍ </button>

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

تڼۍ د 50٪ بیرته له مینځه وړلو سره د کلیک کولو وړ نه ښکاري.

د لنگر عنصر

اضافه کړئ.disabledټولګي په <a>بټونو کې

لومړنۍ لینک لینک

<a href="#" class="btn btn-large btn-primary disabled" > لومړنۍ لینک   لومړنۍ
<a href="#" class="btn btn-large disabled" > لینک </a> _ _

پورته شه! موږ .disabledدلته د یوټیلټي کلاس په توګه کاروو، د عام .activeټولګي په څیر، نو هیڅ مخکینۍ اړتیا نشته.

د تڼۍ عنصر

disabledپه بټونو کې ځانګړتیا اضافه کړئ <button>.

د تڼۍ ډول = "تڼۍ" طبقه = "btn btn-large btn-primary disabled" disabled = "غیر فعال" > لومړنۍ تڼۍ </button>   
د تڼۍ ډول = "تڼۍ" طبقه = "btn btn-large" غیر فعاله > تڼۍ </ تڼۍ>

یو ټولګي، څو ټګونه

.btnټولګي په <a>, <button>, یا <input>عنصر کې وکاروئ .

<a class="btn" href=""> لینک </a> _ _ _ _ _  
<button class = "btn" type = "submit" > تڼۍ </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "submit " >

د غوره تمرین په توګه، هڅه وکړئ د خپل شرایطو لپاره عنصر سره سمون ومومي ترڅو د کراس براوزر رینډرینګ سره سمون ومومي. که تاسو لرئ input، <input type="submit">د خپلې تڼۍ لپاره یو وکاروئ.

<img>په هره پروژه کې په اسانۍ سره عکسونو سټایل کولو لپاره عنصر ته ټولګي اضافه کړئ .

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

پورته شه! .img-roundedاو .img-circleد ملاتړ نشتوالي له امله په IE7-8 کې کار مه کوئ border-radius.

د انځورونو ګیلفونه

140 شبیه په سپرایټ شکل کې ، په تیاره خړ (ډیفالټ) او سپین کې شتون لري ، د ګلیفیکون لخوا چمتو شوي .

icon-glass
icon - میوزیک
icon - لټون
icon-لفافه
icon - زړه
icon-star
icon-star-خالي
icon - کارن
icon-film
icon-th-لوی
icon-th
icon-th-list
icon- ok
icon- لیرې کول
icon-zoom-in
icon-zoom-out
icon-off
icon-سګنال
icon-cog
icon - کثافات
icon - کور
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-sircle
icon - تکرار
icon-refresh
icon-list-alt
icon-lock
icon-بیرغ
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon- چاپ
آئیکون کیمره
icon-font
icon-بولډ
icon-italic
icon-text-height
icon-text-width
icon-ساده-کیڼ
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent- left
icon-indent-right
icon-facetime-video
icon - انځور
icon-پنسل
icon-map-marker
icon - سمون
icon-tint
icon-edit
icon-share
icon-چیک
icon - حرکت
icon - ګام - شاته
icon - چټک - شاته
icon- شاته
icon-play
icon-pause
icon- stop
icon - مخکی
icon-fast-forward
icon - ګام - مخکې
icon-eject
icon-شیورون-کیڼ
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-پوښتنه-نښه
icon-info-sign
icon-screenshot
icon-remove-sircle
icon-ok- حلقه
icon-ban-sircle
icon- تیر- کیڼ
icon-arrow-ښي
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-عجزیه-نښه
icon - ډالۍ
icon-leaf
icon-fire
icon- سترګې پرانیستې
icon- سترګې تړل
icon-warning-sign
icon-plan
icon-calendar
icon-تصادفي
icon - تبصره
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-عمودی
icon-resize-orizontal
icon-hdd
icon-bullhorn
icon-bell
icon- سند
icon-thumbs-up
icon-thumbs-down
icon-لاس-ښي
icon-لاس-کیڼ
icon-hand up
icon-hand-down
icon-circle-arrow-right
icon-دایره-تیر-کیڼ
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon - دندې
icon-filter
icon-briefcase
icon-full screen

د ګلیفیکون انتساب

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

څنګه یی استعمال کړو

ټول عکسونه <i>د یو ځانګړي ټولګي سره ټاګ ته اړتیا لري ، د مخکینۍ سره icon-. د کارولو لپاره، لاندې کوډ په هر ځای کې ځای په ځای کړئ:

<i class = "icon-search" ></i>

د برعکس (سپینې) شبیانو لپاره سټایلونه هم شتون لري، د یو اضافي ټولګي سره چمتو شوي. موږ به دا ټولګي په ځانګړي ډول په هور او فعال حالتونو کې د نیوی او ډراپ ډاون لینکونو لپاره پلي کړو.

<i class = "icon-search icon-white" ></i>

پورته شه! کله چې د متن د تارونو تر څنګ وکاروئ، لکه په بټونو یا نیوی لینکونو کې، ډاډ ترلاسه کړئ چې <i>د مناسب واټن لپاره د ټګ وروسته ځای پریږدئ.

د انځورونو مثالونه

دوی په بټنونو، د تڼۍ ګروپونو کې د وسیلې پټې، نیویګیشن، یا مخکینۍ بڼه داخلولو لپاره وکاروئ.

تڼۍ

د تڼۍ ګروپ په یوه تڼۍ وسیلې کې

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

په یوه تڼۍ ګروپ کې ښکته کول

کارن

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> کارن </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> سمون </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> ړنګول </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> بندیز </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> اداره کول </a></li>  
  </ul>
</div>

کوچنۍ تڼۍ

<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

نیویګیشن

<ul class = "nav nav-list" > 
  <li class = "فعال" ><a href = "#" ><i class = "icon-home icon-white" ></i> کور </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> کتابتون </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> غوښتنلیکونه </a></li>  
  <li><a href = "#" ><i class = "i" ></i> متفرق </a></li>  
</ul>

د فارم ساحې

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > د بریښنالیک پته </label>  
  <div class = "کنټرولونه" > 
    <div class = "input-prepend" > 
    <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" ډول = "text" >     
  </div>
</div>

ټایپوګرافي

سرلیکونه

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5

h6. سرلیک 6

د بدن کاپي

د مشر بدن کاپي

د کم سره جوړ شوی

ټینګار

<small>

<strong>

<em>

لنډیزونه

<abbr>

<abbr class="initialism">

ادرسونه

<address>

بلاک کوټونه

ډیفالټ بلاککوټ

د بلاک اقتباس اختیارونه

د سرچینې نوم ورکول

بدیل نندارې

لیستونه

بې ترتیبه

امر وکړ

بې سټایل

تفصیل

افقی توضیحات

کوډ

انلاین

بنسټیز بلاک

میزونه

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

اختیاري ټولګي

.table-striped

.table-bordered

.table-hover

.table-condensed

اختیاري قطار ټولګي

د میز مارک اپ ملاتړ شوی

فورمې

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

اختیاري ترتیبونه

د لټون فورمه

انلاین بڼه

افقی بڼه

ملاتړ شوي فورمې کنټرول

داخلونه

Textarea

چک بکسونه او راډیوګانې

ډیفالټ (سټاک شوی)

انلاین چک بکسونه

ټاکي

د فارم کنټرول پراخول

مخکینۍ او ضمیمه شوي معلومات

ډیفالټ اختیارونه

ګډ

د متن پر ځای تڼۍ

د لټون فورمه

د اندازه کولو کنټرول

نسبي اندازه کول

د جال اندازه کول

د نه ترمیم وړ آخذې

د کړنو بڼه

د مرستې متن

انلاین مرسته

بلاک مرسته

د فارم کنټرول ریاستونه

د ننوتلو تمرکز

غیر فعال شوي داخلونه

د تایید ریاستونه

تڼۍ

ډیفالټ بټن

د کراس براوزر مطابقت

د تڼۍ اندازه

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

د لنگر عنصر

`<small>`

`<strong>`

`<em>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`