عنوانات

تمام 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 کلاس = "لیڈ" > ... </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 title = "attribute" > attr </abbr>

`<abbr class="initialism">`

.initialismقدرے چھوٹے فونٹ سائز کے لیے مخفف میں شامل کریں ۔

کٹی ہوئی روٹی کے بعد ایچ ٹی ایم ایل بہترین چیز ہے۔

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

پتے

قریبی آباؤ اجداد یا کام کے پورے جسم کے لیے رابطے کی معلومات پیش کریں۔

`<address>`

تمام لائنوں کو کے ساتھ ختم کرکے فارمیٹنگ کو محفوظ رکھیں <br>۔

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

پورا نام
[email protected]

<address>
  <strong> Twitter, Inc. </strong><br>
  795 فولسم ایوینیو، سویٹ 600 <br>
  سان فرانسسکو، CA 94107 <br>
  <abbr title = "فون" > 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. انٹیجر posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante. </p>
</blockquote>

بلاک کوٹ کے اختیارات

معیاری بلاک کوٹ پر سادہ تغیرات کے لیے انداز اور مواد کی تبدیلیاں۔

ماخذ کا نام دینا

<small>ماخذ کی شناخت کے لیے ٹیگ شامل کریں ۔ ماخذ کے کام کا نام اس میں لپیٹیں <cite>۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.
ماخذ کے عنوان میں مشہور کوئی

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante. </p>
  <small> کوئی مشہور <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

متبادل ڈسپلے

.pull-rightایک تیرے ہوئے، دائیں سیدھ والے بلاک کوٹ کے لیے استعمال کریں ۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.
ماخذ کے عنوان میں مشہور کوئی

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

فہرستیں

بے ترتیب

آئٹمز کی ایک فہرست جس میں ترتیب واضح طور پر اہمیت نہیں رکھتی۔

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam 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
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam 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
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam 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 semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl کلاس = "dl-horizontal" > 
  <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`

CSS سلیکٹر (IE7-IE8 میں دستیاب نہیں) <tbody>کے اندر اندر کسی بھی ٹیبل قطار میں زیبرا سٹرپنگ شامل کرتا ہے ۔:nth-child

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری	پرندہ	ٹویٹر

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

`.table-bordered`

میز پر بارڈرز اور گول کونے شامل کریں۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
1	نشان	اوٹو	@getbootstrap
2	جیکب	تھورنٹن	چربی
3	لیری برڈ		ٹویٹر

<ٹیبل کلاس = "ٹیبل ٹیبل بارڈرڈ" > 
  …
</table>

`.table-hover`

ایک کے اندر ٹیبل کی قطاروں پر ہوور حالت کو فعال کریں <tbody>۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری برڈ		ٹویٹر

<ٹیبل کلاس = "ٹیبل ٹیبل ہوور" > 
  …
</table>

`.table-condensed`

سیل پیڈنگ کو نصف میں کاٹ کر میزوں کو مزید کمپیکٹ بناتا ہے۔

#	پہلا نام	آخری نام	صارف نام
1	نشان	اوٹو	@mdo
2	جیکب	تھورنٹن	چربی
3	لیری برڈ		ٹویٹر

<ٹیبل کلاس = "ٹیبل ٹیبل کنڈینسڈ" > 
  …
</table>

اختیاری قطار کی کلاسیں۔

ٹیبل کی قطاروں کو رنگنے کے لیے متعلقہ کلاسز کا استعمال کریں۔

کلاس	تفصیل
`.success`	ایک کامیاب یا مثبت عمل کی نشاندہی کرتا ہے۔
`.error`	خطرناک یا ممکنہ طور پر منفی عمل کی نشاندہی کرتا ہے۔
`.info`	پہلے سے طے شدہ طرزوں کے متبادل کے طور پر استعمال کیا جاتا ہے۔

#	پروڈکٹ	ادائیگی لی گئی۔	حالت
1	ٹی بی - ماہانہ	01/04/2012	منظورشدہ
2	ٹی بی - ماہانہ	02/04/2012	انکار کر دیا
3	ٹی بی - ماہانہ	03/04/2012	زیر التواء

...
  < tr کلاس = "کامیابی" >
    <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>انفرادی فارم کنٹرولز اسٹائل حاصل کرتے ہیں، لیکن مارک اپ میں یا بڑی تبدیلیوں پر کسی بھی مطلوبہ بیس کلاس کے بغیر ۔ فارم کنٹرولز کے اوپر اسٹیک شدہ، بائیں جانب سے منسلک لیبلز میں نتائج۔

<form>
  <legend> Legend </legend>
  <label> لیبل کا نام </label>
  <ان پٹ قسم = "ٹیکسٹ" پلیس ہولڈر = "کچھ ٹائپ کریں…" >  
  <span class = "help-block" > مثال کے طور پر بلاک سطح کے مددی متن یہاں۔ </span> 
  <لیبل کلاس = "چیک باکس" > 
    <ان پٹ قسم = "چیک باکس" > مجھے چیک کریں۔ 
  </label>
  <button type = "submit" class = "btn" > جمع کروائیں </ بٹن>  
</form>

اختیاری لے آؤٹ

بوٹسٹریپ کے ساتھ شامل عام استعمال کے معاملات کے لیے تین اختیاری فارم لے آؤٹ ہیں۔

فارم تلاش کریں۔

اضافی گول ٹیکسٹ ان پٹ کے لیے فارم .form-searchمیں اور اس میں شامل کریں ۔.search-query<input>

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > تلاش کریں </ بٹن>  
</form>

ان لائن فارم

.form-inlineایک کمپیکٹ لے آؤٹ کے لیے بائیں جانب سے منسلک لیبلز اور ان لائن بلاک کنٹرولز کے لیے شامل کریں ۔

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <لیبل کلاس = "چیک باکس" > 
    <ان پٹ قسم = "چیک باکس" > مجھے یاد رکھیں 
  </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 = "controls" > 
      <input type = "text" id = "inputEmail" پلیس ہولڈر = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > پاس ورڈ </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" پلیس ہولڈر = "پاس ورڈ" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <لیبل کلاس = "چیک باکس" > 
        <ان پٹ قسم = "چیک باکس" > مجھے یاد رکھیں 
      </label>
      <button type = "submit" class = "btn" > سائن ان کریں </button>  
    </div>
  </div>
</form>

تائید شدہ فارم کنٹرولز

معیاری فارم کنٹرولز کی مثالیں مثال کے فارم لے آؤٹ میں معاون ہیں۔

ان پٹ

سب سے عام فارم کنٹرول، ٹیکسٹ پر مبنی ان پٹ فیلڈز۔ تمام HTML5 اقسام کے لیے تعاون پر مشتمل ہے: متن، پاس ورڈ، ڈیٹ ٹائم، ڈیٹ ٹائم-لوکل، تاریخ، مہینہ، وقت، ہفتہ، نمبر، ای میل، یو آر ایل، تلاش، ٹیلی فون، اور رنگ۔

typeہر وقت مخصوص کے استعمال کی ضرورت ہوتی ہے ۔

<ان پٹ کی قسم = "ٹیکسٹ" پلیس ہولڈر = "ٹیکسٹ ان پٹ" >

ٹیکسٹیریا

فارم کنٹرول جو متن کی متعدد لائنوں کو سپورٹ کرتا ہے۔ rowضرورت کے مطابق خصوصیت کو تبدیل کریں ۔

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

چیک باکس اور ریڈیو

چیک باکسز ایک فہرست میں سے ایک یا متعدد اختیارات کو منتخب کرنے کے لیے ہیں جبکہ ریڈیو بہت سے اختیارات میں سے ایک اختیار کو منتخب کرنے کے لیے ہیں۔

ڈیفالٹ (اسٹیکڈ)

<لیبل کلاس = "چیک باکس" > 
  <ان پٹ قسم = "چیک باکس" قدر = "" >  
  آپشن ایک یہ ہے اور وہ - یہ ضرور شامل کریں کہ یہ کیوں بہت اچھا ہے۔
</label>
 
<label class = "ریڈیو" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1 " value = "option1" کو نشان زد کیا گیا >     
  آپشن ایک یہ ہے اور وہ - یہ ضرور شامل کریں کہ یہ کیوں بہت اچھا ہے۔
</label>
<label class = "ریڈیو" > 
  <ان پٹ کی قسم = "ریڈیو" نام = "optionsRadios" id = "optionsRadios2" قدر = "option2" >    
  آپشن دو کچھ اور ہو سکتا ہے اور اسے منتخب کرنے سے آپشن ایک کو غیر منتخب کر دیا جائے گا۔
</label>

ان لائن چیک باکسز

.inlineایک ہی لائن پر ظاہر ہونے والے کنٹرولز کے لیے چیک باکسز یا ریڈیوز کی سیریز میں کلاس شامل کریں ۔

<لیبل کلاس = "چیک باکس ان لائن" > 
  <input type = "checkbox " id = "inlineCheckbox1" value = "option1" > 1   
</label>
<لیبل کلاس = "چیک باکس ان لائن" > 
  <input type = "checkbox " id = "inlineCheckbox2" value = "option2" > 2   
</label>
<لیبل کلاس = "چیک باکس ان لائن" > 
  <input type = "checkbox " 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عناصر یہاں تعاون یافتہ نہیں ہیں۔

پہلے سے طے شدہ اختیارات

.add-onمتن کو ان پٹ میں شامل کرنے یا شامل کرنے کے لیے an اور an inputکو دو کلاسوں میں سے ایک کے ساتھ لپیٹیں ۔

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Username" >      
</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>متن کے ساتھ a کی بجائے ، .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" type = "button" > اختیارات </button>        
</div>

فارم تلاش کریں۔

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > تلاش کریں </ بٹن>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > تلاش کریں </ بٹن>  
    <input type = "text" class = "span2 search-query" >  
  </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" >   
< class = "span1" > منتخب کریں۔ 
  ...
منتخب کریں>
<سلیکٹ کلاس = "span2" > 
  ...
منتخب کریں>
<سلیکٹ کلاس = "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" > 
  <بٹن کی قسم = "جمع کروائیں" کلاس = "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 کلاس = "کنٹرول گروپ وارننگ" > 
  <label class = "control-label" for = "inputWarning" > ان پٹ کے ساتھ انتباہ </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > ہو سکتا ہے کچھ غلط ہو گیا ہو </span> 
  </div>
</div>
<div کلاس = "کنٹرول گروپ ایرر" > 
  <label class = "control-label" for = "inputError" > غلطی کے ساتھ ان پٹ </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > براہ کرم غلطی کو درست کریں </span> 
  </div>
</div>
<div class = "کنٹرول گروپ کامیابی" > 
  <label class = "control-label" for = "inputSuccess" > کامیابی کے ساتھ ان پٹ </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

پہلے سے طے شدہ بٹن

بٹن کی طرزیں .btnکلاس کے ساتھ کسی بھی چیز پر لاگو کی جا سکتی ہیں۔ <a>تاہم، عام طور پر آپ ان کو صرف اور <button>بہترین رینڈرنگ کے لیے عناصر پر لاگو کرنا چاہیں گے ۔

بٹن	class=""	تفصیل
	`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" type = "button" > منی بٹن </ بٹن>  
</p>

بلاک لیول کے بٹن بنائیں — جو کہ والدین کی پوری چوڑائی پر محیط ہوں— شامل کر .btn-blockکے۔

<بٹن کلاس = "btn btn-large btn-block btn-primary" type = "button" > بلاک لیول بٹن </button>  
<بٹن کلاس = "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>

<بٹن کی قسم = "بٹن" کلاس = "btn btn-large btn-primary disabled" disabled = "disabled" > بنیادی بٹن </button>   
<بٹن کی قسم = "بٹن" کلاس = "btn btn-large" غیر فعال > بٹن </ بٹن>

ایک کلاس، متعدد ٹیگز

.btnکلاس کو کسی <a>، <button>یا <input>عنصر پر استعمال کریں ۔

<a class="btn" href=""> لنک </a> _ _ _ _ _  
<button class = "btn" type = "submit" > بٹن </ بٹن>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "جمع کروائیں" >

ایک بہترین عمل کے طور پر، اپنے سیاق و سباق کے عنصر کو ملانے کی کوشش کریں تاکہ مماثل کراس براؤزر رینڈرنگ کو یقینی بنایا جا سکے۔ اگر آپ کے پاس ہے تو اپنے بٹن کے لیے inputایک استعمال کریں۔<input type="submit">

<img>کسی بھی پروجیکٹ میں تصاویر کو آسانی سے اسٹائل کرنے کے لیے کسی عنصر میں کلاسز شامل کریں ۔

<img src = "..." کلاس = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." کلاس = "img-polaroid" >

سنو! .img-roundedاور سپورٹ .img-circleکی کمی کی وجہ سے IE7-8 میں کام نہیں border-radiusکرتے۔

آئیکن گلائف

اسپرائٹ شکل میں 140 شبیہیں، گہرے سرمئی (پہلے سے طے شدہ) اور سفید میں دستیاب ہیں، جو Glyphicons کے ذریعے فراہم کیے گئے ہیں۔

آئکن گلاس
آئیکن میوزک
icon-تلاش
آئیکن لفافہ
آئکن دل
icon-star
icon-star-empty
آئیکن صارف
آئکن فلم
icon-th-بڑا
icon-th
icon-th-list
آئیکن - ٹھیک ہے
آئیکن ہٹائیں
آئیکن زوم ان
آئیکن زوم آؤٹ
آئیکن آف
آئیکن سگنل
icon-cog
آئکن کوڑے دان
icon-home
آئیکن فائل
آئکن ٹائم
آئکن روڈ
icon-download-alt
icon-download
آئیکن اپ لوڈ
icon-inbox
آئیکن پلے سرکل
icon-repeیٹ
icon-refresh
icon-list-alt
آئیکن لاک
آئیکن پرچم
آئیکن ہیڈ فون
آئکن والیوم آف
آئکن والیوم کم
آئیکن والیوم اپ
icon-qrcode
icon-barcode
آئیکن ٹیگ
آئیکن ٹیگز
آئیکن بک
آئیکن بک مارک
آئیکن پرنٹ
آئیکن کیمرہ
آئیکن فونٹ
آئیکن بولڈ
icon-italic
icon-text-height
icon-text-width
آئیکن-سیدھ میں-بائیں
icon-align-center
icon-align- right
icon-align-justify
آئیکن کی فہرست
آئیکن-انڈینٹ-بائیں
icon-indent-right
icon-facetime-video
آئیکن تصویر
آئیکن پنسل
icon-map-marker
آئیکن ایڈجسٹ کریں۔
icon-tint
آئیکن میں ترمیم کریں
icon-share
آئیکن چیک
icon-move
آئیکن قدم پیچھے کی طرف
icon-fast-backward
icon-پسماندہ
آئیکن پلے
icon-pause
icon-stop
آئکن فارورڈ
icon-fast-forward
آئیکن قدم آگے
icon-eject
آئیکن-شیورون-بائیں
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-Question-sign
icon-info-sign
آئیکن اسکرین شاٹ
icon-remove-circle
icon-ok-circle
icon-ban-circle
آئیکن-تیر-بائیں
آئیکن-تیر-دائیں
icon-ar-up
icon-ar-down
icon-share-alt
icon-resize-full
icon-resize-small
آئیکن پلس
icon-minus
icon-asterisk
icon-exclamation-sign
آئیکن گفٹ
icon-leaf
آئکن فائر
آئیکن آنکھ کھلی
آئیکن آنکھ بند
آئیکن وارننگ سائن
icon-plane
آئیکن کیلنڈر
آئکن بے ترتیب
icon-تبصرہ
icon-magnet
icon-chevron-up
icon-chevron-down
آئیکن ریٹویٹ
icon-shopping-cart
icon-folder-close
آئکن فولڈر کھولیں۔
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
آئیکن سرٹیفکیٹ
icon-thumbs-up
icon-thumbs-down
آئیکن-ہاتھ-دائیں
آئیکن-ہاتھ-بائیں
آئیکن ہینڈ اپ
icon-hand-down
آئیکن-سرکل-تیر-دائیں
آئیکن-سرکل-تیر-بائیں
icon-circle-ar-up
icon-circle-arrow-down
icon-globe
آئیکن رینچ
آئیکن کے کام
آئیکن فلٹر
آئیکن بریف کیس
آئیکن فل سکرین

Glyphicons انتساب

Glyphicons Halflings عام طور پر مفت میں دستیاب نہیں ہوتے ہیں، لیکن Bootstrap اور Glyphicons کے تخلیق کاروں کے درمیان ایک انتظام نے یہ ممکن بنا دیا ہے جو آپ کے لیے بطور ڈیولپرز کی لاگت کے بغیر ہے۔ آپ کے شکریہ کے طور پر، ہم آپ سے کہتے ہیں کہ جب بھی عملی ہو تو Glyphicons پر واپس ایک اختیاری لنک شامل کریں۔

استعمال کرنے کا طریقہ

تمام آئیکنز کو <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 کلاس = "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 = "ڈراپ ڈاؤن مینو" > 
    <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> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</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>

نوع ٹائپ

عنوانات

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

اختیاری قطار کی کلاسیں۔

تائید شدہ ٹیبل مارک اپ

فارمز

پہلے سے طے شدہ انداز

اختیاری لے آؤٹ

فارم تلاش کریں۔

ان لائن فارم

افقی شکل

تائید شدہ فارم کنٹرولز

ان پٹ

ٹیکسٹیریا

چیک باکس اور ریڈیو

ڈیفالٹ (اسٹیکڈ)

ان لائن چیک باکسز

منتخب کرتا ہے۔

فارم کنٹرول کو بڑھانا

پہلے سے منسلک اور منسلک ان پٹ

پہلے سے طے شدہ اختیارات

مشترکہ

متن کے بجائے بٹن

فارم تلاش کریں۔

کنٹرول سائزنگ

رشتہ دار سائزنگ

گرڈ کا سائز

ناقابل ترمیم آدانوں

فارم کے اعمال

مدد کا متن

ان لائن مدد

مدد کو بلاک کریں۔

فارم کنٹرول ریاستوں

ان پٹ فوکس

غیر فعال ان پٹس

توثیق ریاستیں۔

بٹن

پہلے سے طے شدہ بٹن

کراس براؤزر مطابقت

بٹن کے سائز

معذور حالت

اینکر عنصر

`<small>`

`<strong>`

`<em>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`