بوټسټپ

بیس CSS

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

ټایپوګرافي

سرلیکونه

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

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5
h6. سرلیک 6

د بدن کاپي

د بوټسټریپ نړیوال ډیفالټ 14pxfont-size دی ، د 20px سره . دا په ټولو پراګرافونو کې پلي کیږي. برسېره پر دې، (پراګرافونه) د دوی د لیکې لوړوالی (د ډیفالټ په توګه 10px) د نیمایي ټیټ مارجن ترلاسه کوي.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="lead">...</p>

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

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

ټینګار

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

<small>

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

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

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

بولډ

د ډیر وزن لرونکي فونټ وزن سره د متن یوه ټوټه ټینګار کولو لپاره.

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

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

ایټالیکی

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

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

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

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

د ټینګار ټولګي

د یو لاسي ټینګار یوټیلټي ټولګیو سره د رنګ له لارې معنی وړاندې کړئ.

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, Nisi erat porttitor ligula.</p>

لنډیزونه

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

<abbr>

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

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

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

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

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

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ادرسونه

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

<address>

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

ټویټر، Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
بشپړ نوم
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  سان فرانسسکو، CA 94107<br>
  <abbr title="Phone">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>لورم ipsum dolor sit amet, consectetur adipiscing elit. د انټیجر posuere یو مخکې له منځه ځي.</p>
</blockquote>

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

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

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

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

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

یو څوک چې د سرچینې په سرلیک کې مشهور دی 
<blockquote>
  <p>لورم ipsum dolor sit amet, consectetur adipiscing elit. د انټیجر posuere یو مخکې له منځه ځي.</p>
  <small>څوک مشهور <cite title="Source 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>

امر وکړ

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. نولا ولتپت علیکم velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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 class="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 class="table">
  …
</table>

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

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

.table-striped

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

# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر 
<table class="table table-striped">
  …
</table>

.table-bordered

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

# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
مارک اوټو @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 یو خطرناک یا احتمالي منفي عمل په ګوته کوي.
.warning یو خبرداری په ګوته کوي چې پام ته اړتیا لري.
.info د ډیفالټ سټایلونو لپاره د بدیل په توګه کارول کیږي.
# محصول تادیه اخیستل حالت
1 TB - میاشتنی 01/04/2012 تصویب شو
2 TB - میاشتنی 02/04/2012 رد کړل
3 TB - میاشتنی 03/04/2012 پاتې
4 TB - میاشتنی 04/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>یا په مارک اپ کې لوی بدلونونه. پایلې د فارم کنټرولونو په سر کې په سټیک شوي، کیڼ اړخ شوي لیبلونو کې.

افسانه د بلاک په کچه د مرستې متن مثال دلته. 
<فارم>
  <fieldset>
    <legend>لیجنډ</legend>
    <label>د لیبل نوم</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">دلته د بلاک په کچه د مرستې متن بېلګه.</span>
    <label class="checkbox">
      <input type="checkbox"> ما وګوره
    </label>
    <button type="submit" class="btn">سپارئ</button>
  </fieldset>
</form>

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

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

د لټون فورمه

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

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">لټون</button>
</form>

انلاین بڼه

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

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <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">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword"> پټنوم</label>
    <div class="controls">
      <input type="password" id="inputPassword" ځای لرونکی="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> ما یاد کړه
      </label>
      <button type="submit" class="btn">ننوتل</button>
    </div>
  </div>
</form>

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

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

داخلونه

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

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

<input type="text" placeholder="Text input">

Textarea

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

<textarea rows="3"></textarea>

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

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

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


<label class="checkbox">
  <input type="checkbox" value="">
  یو انتخاب دا دی او دا - ډاډ ترلاسه کړئ چې ولې دا خورا ښه دی
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" چک شوی>
  یو انتخاب دا دی او دا - ډاډ ترلاسه کړئ چې ولې دا خورا ښه دی
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  دوه اختیارونه بل څه کیدی شي او د دې غوره کول به یو انتخاب غیر انتخاب کړي
</label>

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

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

<label class="checkbox inline">
  د انپټ ډول = "چیک باکس" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  د انپټ ډول = "چیک باکس" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  د انپټ ډول = "چیک باکس" id="inlineCheckbox3" value="option3"> 3
</label>

ټاکي

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


<انتخاب>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</ انتخاب>

<متعدد = ګڼ> انتخاب کړئ
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</ انتخاب>

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

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

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

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

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

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

@

.00 
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

ګډ

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

ډالر .00 
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

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

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

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">لاړ شه!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">لټون</button>
  <button class="btn" type="button">اختیارونه</button>
</div>

تڼۍ ښکته کول

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </ تڼۍ>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </ تڼۍ>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </ تڼۍ>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </ تڼۍ>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

د لټون فورمه

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 لټون-پوښتنه">
    <button type="submit" class="btn">لټون</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">لټون</button>
    <input type="text" class="span2 لټون-پوښتنه">
  </div>
</form>

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

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

د بلاک کچې داخلې

کوم <input>یا <textarea>عنصر د بلاک کچې عنصر په څیر چلند وکړئ.

<input class="input-block-level" type="text" placeholder=".input-block-level">

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

<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">
<class="span1"> انتخاب کړئ
  ...
</ انتخاب>
<class="span2"> انتخاب کړئ
  ...
</ انتخاب>
<class="span3"> انتخاب کړئ
  ...
</ انتخاب>

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

<div class="controls">
  <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="form-actions">
  <button type="submit" class="btn btn-primary">بدلونونه خوندي کړئ</button>
  <button type="button" class="btn">لغوه کول</button>
</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="control-group warning">
  <label class="control-label" for="inputWarning">د خبرتیا سره داخل</label>
  <div class="controls">
    <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="controls">
    <input type="text" id="inputError">
    <span class="help-inline">مهرباني وکړئ تېروتنه سمه کړئ</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">ان پټ په بریالیتوب سره</label>
  <div class="controls">
    <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>
  <button class="btn btn-large btn-primary" type="button">لوی تڼۍ</button>
  <button class="btn btn-large" type="button">لوی تڼۍ</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default تڼۍ</button>
  <button class="btn" type="button">ډیفالټ تڼۍ</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">کوچنۍ تڼۍ</button>
  <button class="btn btn-small" type="button">کوچنۍ تڼۍ</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">منی تڼۍ</button>
  <button class="btn btn-mini" type="button">منی تڼۍ</button>
</p>

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

<button class="btn btn-large btn-block btn-primary" type="button">د بلاک کچې تڼۍ</button>
<button class="btn btn-large btn-block" type="button">د بلاک سطح تڼۍ</button>

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

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

د لنگر عنصر

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

د لومړني لینک لینک 

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

پورته شه! موږ .disabledدلته د یوټیلټي کلاس په توګه کاروو، د عام .activeټولګي په څیر، نو هیڅ مخکینۍ اړتیا نشته. همدارنګه، دا ټولګی یوازې د جمالیات لپاره دی؛ تاسو باید دلته د لینکونو غیر فعالولو لپاره دودیز جاوا سکریپټ وکاروئ.

د تڼۍ عنصر

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

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">لومړنۍ تڼۍ</button>
<button type="button" class="btn btn-large" معيوب>تڼۍ</button>

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

.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

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

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

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

ټول عکسونه <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="active"><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="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>