ٹائپوگرافک پیمانہ

پوری ٹائپوگرافک گرڈ ہماری variables.less فائل میں دو کم متغیرات پر مبنی ہے: @baseFontSizeاور @baseLineHeight. پہلا بنیادی فونٹ سائز ہے جو بھر میں استعمال ہوتا ہے اور دوسرا بیس لائن کی اونچائی ہے۔

ہم ان متغیرات، اور کچھ ریاضی کا استعمال کرتے ہیں، اپنی تمام قسم کے مارجن، پیڈنگ، اور لائن ہائٹس بنانے کے لیے۔

جسم کے متن کی مثال

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

زور کا استعمال کرتے ہوئے

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

نوٹ: بلا جھجھک <b>اور <i>HTML5 میں استعمال کریں، لیکن ان کا استعمال تھوڑا سا بدل گیا ہے۔ <b>اضافی اہمیت کے بغیر الفاظ یا جملے کو نمایاں کرنا ہے جبکہ <i>زیادہ تر آواز، تکنیکی اصطلاحات وغیرہ کے لیے ہے۔

مثال کے پتے

یہاں دو مثالیں ہیں کہ <address>ٹیگ کیسے استعمال کیا جا سکتا ہے:

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

پورا نام
[email protected]

مثال کے مخففات

انتساب کے ساتھ مخففات میں titleہلکے نقطے والے نیچے کی سرحد اور ہوور پر ایک مددگار کرسر ہوتا ہے۔ اس سے صارفین کو اضافی اشارہ ملتا ہے کہ ہوور پر کچھ دکھایا جائے گا۔

initialismمتن کا تھوڑا سا سائز دے کر ٹائپوگرافک ہم آہنگی بڑھانے کے لیے کلاس کو مخفف میں شامل کریں ۔

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

لفظ وصف کا مخفف attr ہے۔

<blockquote>بلاک کوٹ شامل کرنے کے لیے، کسی بھی HTML کو اقتباس کے طور پر لپیٹ دیں۔ براہ راست اقتباسات کے لیے ہم تجویز کرتے ہیں a <p>.

<small>اپنے ماخذ کا حوالہ دینے کے لیے ایک اختیاری عنصر شامل کریں اور آپ —کو اسٹائلنگ کے مقاصد کے لیے اس سے پہلے ایک ایم ڈیش ملے گا۔

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> کوئی مشہور </small>
</blockquote>

پہلے سے طے شدہ بلاک کوٹس کو اس طرح ترتیب دیا گیا ہے:

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

کام کے جسم میں مشہور کوئی

اپنے بلاک کوٹ کو دائیں طرف فلوٹ کرنے کے لیے، شامل کریں class="pull-right":

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

کام کے جسم میں مشہور کوئی

بے ترتیب

<ul>

• 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">

• 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

حکم دیا

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. ماسا میں انٹیجر مولیسٹی لورم
4. پریٹیم نسل ایلیکیٹ میں فیسلیسس
5. nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

تفصیل

<dl>

تفصیل کی فہرستیں۔

وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

افقی تفصیل

<dl class="dl-horizontal">

تفصیل کی فہرستیں۔

وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔

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.

---

سنو! افقی تفصیل کی فہرستیں ایسی اصطلاحات کو تراشیں گی جو بائیں کالم میں فٹ ہونے کے لیے بہت لمبی ہیں text-overflow۔ تنگ ویو پورٹ میں، وہ ڈیفالٹ اسٹیکڈ لے آؤٹ میں تبدیل ہو جائیں گے۔

لائن میں

کوڈ کے ان لائن ٹکڑوں کو کے ساتھ لپیٹیں <code>۔

مثال کے طور پر ، <code> سیکشن </ code > کو ان لائن کے طور پر لپیٹنا چاہیے ۔  

بنیادی بلاک

<pre>کوڈ کی متعدد لائنوں کے لیے استعمال کریں ۔ مناسب رینڈرنگ کے لیے کوڈ میں کسی بھی زاویہ بریکٹ سے بچنا یقینی بنائیں۔

<p> نمونہ متن یہاں...</p>

<pre>
  <p>نمونہ متن یہاں...</p>
</pre>

نوٹ:<pre> ٹیگز کے اندر کوڈ کو ہر ممکن حد تک بائیں طرف رکھنا یقینی بنائیں ۔ یہ تمام ٹیبز کو رینڈر کرے گا۔

آپ اختیاری طور پر اس .pre-scrollableکلاس کو شامل کر سکتے ہیں جو 350px کی زیادہ سے زیادہ اونچائی سیٹ کرے گی اور ایک y-axis اسکرول بار فراہم کرے گی۔

گوگل پریٹیفائی

وہی <pre>عنصر لیں اور بہتر رینڈرنگ کے لیے دو اختیاری کلاسیں شامل کریں۔

<p> نمونہ متن یہاں... </p>

<پری کلاس = "پریٹی پرنٹ 
     linenums" >
  <p>نمونہ متن یہاں...</p>
</pre>

google-code-prettify ڈاؤن لوڈ کریں اور استعمال کرنے کا طریقہ کے لیے ریڈمی دیکھیں۔

ٹیگ	تفصیل
<table>	ٹیبلر فارمیٹ میں ڈیٹا ڈسپلے کرنے کے لیے ریپنگ عنصر
<thead>	<tr>ٹیبل کالموں کو لیبل کرنے کے لیے ٹیبل ہیڈر قطاروں ( ) کے لیے کنٹینر عنصر
<tbody>	<tr>ٹیبل کے باڈی میں ٹیبل کی قطاروں ( ) کے لیے کنٹینر کا عنصر
<tr>	ٹیبل سیلز ( <td>یا <th>) کے سیٹ کے لیے کنٹینر عنصر جو ایک قطار پر ظاہر ہوتا ہے۔
<td>	ڈیفالٹ ٹیبل سیل
<th>	کالم کے لیے خصوصی ٹیبل سیل (یا قطار، دائرہ کار اور جگہ کے لحاظ سے) لیبلز کو ایک کے اندر استعمال کیا جانا چاہیے۔<thead>
<caption>	جدول میں جو کچھ ہے اس کی تفصیل یا خلاصہ، خاص طور پر اسکرین ریڈرز کے لیے مفید ہے۔

<ٹیبل>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

پڑھنے کی اہلیت کو یقینی بنانے اور ساخت کو برقرار رکھنے کے لیے میزیں خود بخود صرف چند بارڈرز کے ساتھ اسٹائل کی جاتی ہیں۔ 2.0 کے ساتھ، .tableکلاس درکار ہے۔

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

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

زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .table-stripedکلاس شامل کریں۔

نوٹ: دھاری دار میزیں :nth-childCSS سلیکٹر استعمال کرتی ہیں اور IE7-IE8 میں دستیاب نہیں ہیں۔

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

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

جمالیاتی مقاصد کے لیے پوری میز کے گرد بارڈرز اور گول کونوں کو شامل کریں۔

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

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

.table-condensedٹیبل سیل پیڈنگ کو آدھے حصے میں (8px سے 4px تک) کاٹنے کے لیے کلاس شامل کر کے اپنے ٹیبلز کو مزید کمپیکٹ بنائیں ۔

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

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

دستیاب کلاسوں میں سے کسی کو استعمال کرکے مختلف شکلیں حاصل کرنے کے لیے کسی بھی ٹیبل کلاس کو بلا جھجھک یکجا کریں۔

<ٹیبل کلاس = "ٹیبل ٹیبل سٹرپڈ ٹیبل بارڈرڈ ٹیبل گاڑھا" > 
  ...
</table>

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

لچکدار HTML اور CSS

بوٹسٹریپ میں فارم کے بارے میں سب سے اچھی بات یہ ہے کہ آپ کے تمام ان پٹ اور کنٹرولز بہت اچھے لگتے ہیں چاہے آپ انہیں اپنے مارک اپ میں کیسے بنائیں۔ ضرورت سے زیادہ HTML کی ضرورت نہیں ہے، لیکن ہم ان لوگوں کے لیے نمونے فراہم کرتے ہیں جنہیں اس کی ضرورت ہے۔

آسان اسٹائلنگ اور ایونٹ بائنڈنگ کے لیے مزید پیچیدہ لے آؤٹ مختصر اور توسیع پذیر کلاسز کے ساتھ آتے ہیں، لہذا آپ ہر قدم پر محیط ہیں۔

چار لے آؤٹ شامل ہیں۔

بوٹسٹریپ چار قسم کے فارم لے آؤٹ کے لیے سپورٹ کے ساتھ آتا ہے:

• عمودی (پہلے سے طے شدہ)
• تلاش کریں۔
• لائن میں
• افقی

مختلف قسم کے فارم لے آؤٹ کو مارک اپ میں کچھ تبدیلیوں کی ضرورت ہوتی ہے، لیکن کنٹرول خود ہی رہتے ہیں اور وہی برتاؤ کرتے ہیں۔

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

بوٹسٹریپ کے فارمز میں تمام بیس فارم کنٹرولز جیسے ان پٹ، ٹیکسٹیریا، اور وہ انتخاب شامل ہیں جن کی آپ توقع کریں گے۔ لیکن یہ متعدد حسب ضرورت اجزاء کے ساتھ بھی آتا ہے جیسے اپنڈڈ اور پری پینڈڈ ان پٹ اور چیک باکسز کی فہرستوں کے لیے سپورٹ۔

ہر قسم کے فارم کنٹرول کے لیے غلطی، انتباہ، اور کامیابی جیسی ریاستیں شامل ہیں۔ اس کے علاوہ معذور کنٹرول کے لیے اسٹائل بھی شامل ہیں۔

بنیادی شکل

اضافی مارک اپ کے بغیر اسمارٹ اور ہلکے وزن کے ڈیفالٹس۔

لیبل کا نام

مثال کے طور پر بلاک سطح کے مددی متن یہاں۔

مجھے دیکھو جمع کرائیں

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

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

.form-searchفارم اور میں .search-queryشامل کریں input۔

تلاش کریں۔

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

ان لائن فارم

.form-inlineفارم کنٹرولز کی عمودی سیدھ اور وقفہ کاری کو بہتر بنانے کے لیے شامل کریں ۔

مجھے پہچانتے ہو سائن ان

<form کلاس = "اچھی طرح سے فارم ان لائن" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <لیبل کلاس = "چیک باکس" > 
    <ان پٹ قسم = "چیک باکس" > مجھے یاد رکھیں 
  </label>
  <button type = "submit" class = "btn" > سائن ان کریں </button>  
</form>

دائیں طرف دکھائے گئے تمام ڈیفالٹ فارم کنٹرولز ہیں جن کی ہم حمایت کرتے ہیں۔ گولیوں والی فہرست یہ ہے:

• ٹیکسٹ ان پٹ (متن، پاس ورڈ، ای میل، وغیرہ)
• چیک باکس
• ریڈیو
• منتخب کریں
• متعدد منتخب کریں
• فائل ان پٹ
• ٹیکسٹیریا

ٹیکسٹ ان پٹ

فریفارم ٹیکسٹ کے علاوہ، کوئی بھی HTML5 ٹیکسٹ پر مبنی ان پٹ اس طرح ظاہر ہوتا ہے۔

چیک باکس

آپشن ایک یہ ہے اور وہ - یہ ضرور شامل کریں کہ یہ کیوں بہت اچھا ہے۔

فہرست منتخب کریں۔

کچھ 2 3 4 5

ملٹی کان سلیکٹ

1 2 3 4 5

فائل ان پٹ

ٹیکسٹیریا

تبدیلیاں محفوظ کرو منسوخ کریں۔

مارک اپ کی مثال

مندرجہ بالا مثال کے فارم لے آؤٹ کو دیکھتے ہوئے، یہاں پہلے ان پٹ اور کنٹرول گروپ سے وابستہ مارک اپ ہے۔ اسٹائلنگ کے لیے .control-group،، .control-labelاور .controlsکلاسز سبھی درکار ہیں۔

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Legend text </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ٹیکسٹ ان پٹ </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > سپورٹنگ ہیلپ ٹیکسٹ </p> 
      </div>
    </div>
  </fieldset>
</form>

بوٹسٹریپ میں براؤزر سے تعاون یافتہ فوکسڈ اور اسٹیٹس کے لیے اسٹائل کی خصوصیات ہیں disabled۔ ہم پہلے سے طے شدہ ویب کٹ کو ہٹاتے ہیں اور اس کی جگہ پر outlineایک لاگو کرتے ہیں ۔box-shadow:focus

---

فارم کی توثیق

اس میں غلطیوں، انتباہات اور کامیابی کے لیے توثیق کے انداز بھی شامل ہیں۔ استعمال کرنے کے لیے، ایرر کلاس کو ارد گرد میں شامل کریں .control-group۔

<fieldset
  کلاس = "کنٹرول گروپ کی خرابی" >
  …
</fieldset>

فوکسڈ ان پٹ

ناقابل ترمیم ان پٹ

یہاں کچھ قدر

غیر فعال ان پٹ

غیر فعال چیک باکس

یہ ایک غیر فعال چیک باکس ہے۔

انتباہ کے ساتھ ان پٹ

ہو سکتا ہے کچھ گڑبڑ ہو گئی ہو۔

غلطی کے ساتھ ان پٹ

براہ کرم غلطی کو درست کریں۔

کامیابی کے ساتھ ان پٹ

ووہو!

کامیابی کے ساتھ منتخب کریں۔

1 2 3 4 5 ووہو!

تبدیلیاں محفوظ کرو منسوخ کریں۔

ان پٹ کو پیش کریں اور شامل کریں۔

ان پٹ گروپس—ضمنی یا پہلے سے منسلک متن کے ساتھ—آپ کے ان پٹس کو مزید سیاق و سباق دینے کا ایک آسان طریقہ فراہم کرتے ہیں۔ بہترین مثالوں میں ٹویٹر کے صارف نام کے لیے @ نشان یا مالیات کے لیے $ شامل ہیں۔

---

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

v1.4 تک، بوٹسٹریپ کو چیک باکسز اور ریڈیوز کو اسٹیک کرنے کے لیے اضافی مارک اپ کی ضرورت ہوتی ہے۔ اب، اس کو دہرانا ایک سادہ سا معاملہ ہے <label class="checkbox">جو لپیٹ دیتا ہے <input type="checkbox">۔

ان لائن چیک باکسز اور ریڈیوز بھی معاون ہیں۔ بس کسی میں شامل کریں .inlineیا .checkboxاور .radioآپ کا کام ہو گیا۔

---

ان لائن فارم اور جوڑیں/پیش کریں۔

ان لائن فارم میں ان پٹ کو پری پینڈ یا شامل کرنے کے لیے، رکھنا یقینی بنائیں.add-oninput ، خالی جگہوں کے بغیر اور کو ایک ہی لائن پر رکھنا یقینی بنائیں۔

---

مدد کا متن فارم کریں۔

اپنے فارم ان پٹس کے لیے ہیلپ ٹیکسٹ شامل کرنے کے لیے، ان لائن ہیلپ ٹیکسٹ کے ساتھ یا ان پٹ عنصر <span class="help-inline">کے بعد ہیلپ ٹیکسٹ بلاک شامل کریں۔<p class="help-block">

فارم گرڈ سائز

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

.span*ان پٹ سائز کے لیے گرڈ سسٹم سے وہی کلاسز استعمال کریں ۔

متبادل سائز

آپ جامد کلاسز بھی استعمال کر سکتے ہیں جو گرڈ پر نقشہ نہیں بناتے، جوابی CSS طرزوں کے مطابق بناتے ہیں، یا مختلف قسم کے کنٹرولز (مثلاً، inputبمقابلہ select) کے لیے اکاؤنٹ بناتے ہیں۔

پیشگی متن

@

یہاں کچھ مدد کا متن ہے۔

منسلک متن

.00

یہاں مزید مدد کا متن ہے۔

شامل کریں اور پیش کریں۔

$ .00

بٹن کے ساتھ شامل کریں۔

جاؤ!

دو بٹن جوڑیں۔

تلاش کریں۔ اختیارات

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

1 2 3

چیک باکسز

آپشن ایک یہ ہے اور وہ - یہ ضرور شامل کریں کہ یہ کیوں بہت اچھا ہے۔ آپشن دو کو بھی چیک کیا جا سکتا ہے اور فارم کے نتائج میں شامل کیا جا سکتا ہے۔ آپشن تین ہو سکتا ہے—ہاں، آپ نے اندازہ لگایا—اسے بھی چیک کیا جائے اور فارم کے نتائج میں شامل کیا جائے۔

نوٹ: لیبل بہت بڑے کلک ایریاز اور زیادہ قابل استعمال شکل کے لیے تمام اختیارات کو گھیرے ہوئے ہیں۔

ریڈیو بٹن

آپشن ایک یہ ہے اور وہ - یہ ضرور شامل کریں کہ یہ کیوں بہت اچھا ہے۔ آپشن ٹو کین کچھ اور ہے اور اسے منتخب کرنے سے آپشن ون کو غیر منتخب کر دیا جائے گا۔

تبدیلیاں محفوظ کرو منسوخ کریں۔

اعمال کے لیے بٹن

ایک کنونشن کے طور پر، بٹنوں کو صرف ایکشن کے لیے استعمال کیا جانا چاہیے جبکہ ہائپر لنکس کو اشیاء کے لیے استعمال کیا جانا چاہیے۔ مثال کے طور پر، "ڈاؤن لوڈ" ایک بٹن ہونا چاہیے جبکہ "حالیہ سرگرمی" ایک لنک ہونا چاہیے۔

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

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

IE9 گول کونوں پر پس منظر کے میلان نہیں تراشتا ہے، لہذا ہم اسے ہٹا دیتے ہیں۔ متعلقہ، IE9 غیر فعال buttonعناصر کو جانکی بناتا ہے، متن کو ایک گندے ٹیکسٹ شیڈو کے ساتھ گرے بناتا ہے جسے ہم ٹھیک نہیں کر سکتے۔

متعدد سائز

بڑے یا چھوٹے بٹن پسند ہیں؟ شامل کریں .btn-large، .btn-smallیا .btn-miniدو اضافی سائز کے لیے۔

بنیادی کارروائی عمل

بنیادی کارروائی عمل

بنیادی کارروائی عمل

معذور حالت

غیر فعال بٹنوں کے لیے، .disabledلنکس میں کلاس اور عناصر disabledکے لیے انتساب شامل کریں۔<button>

بنیادی لنک لنک

بنیادی بٹن بٹن

سنو! ہم .disabledیہاں یوٹیلیٹی کلاس کے طور پر استعمال کرتے ہیں، عام .activeکلاس کی طرح، اس لیے کسی سابقہ ​​کی ضرورت نہیں ہے۔

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

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

لنک بٹن

<a class="btn" href=""> لنک </a> _ _ _ _ _  
<بٹن کلاس = "btn" قسم = "جمع کروائیں" >  
  بٹن
</ بٹن>
<ان پٹ کلاس = "btn" قسم = "بٹن"  
         قدر = "ان پٹ" >
<ان پٹ کلاس = "btn" قسم = "جمع کروائیں"  
         قدر = "جمع کروائیں" >

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

• آئکن گلاس
• آئیکن میوزک
• 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
• آئیکن رینچ
• آئیکن ٹاسکس
• آئیکن فلٹر
• آئیکن بریف کیس
• آئیکن فل سکرین

سپرائٹ کے طور پر بنایا گیا ہے۔

ہر آئیکن کو اضافی درخواست بنانے کے بجائے، ہم نے انہیں ایک اسپرائٹ میں مرتب کیا ہے—ایک فائل میں تصاویر کا ایک گروپ جو تصاویر کو پوزیشن میں رکھنے کے لیے CSS کا استعمال کرتا ہے background-position۔ یہ وہی طریقہ ہے جسے ہم Twitter.com پر استعمال کرتے ہیں اور اس نے ہمارے لیے اچھا کام کیا ہے۔

تمام شبیہیں کی کلاسیں .icon-ہمارے دوسرے اجزاء کی طرح مناسب نام کی جگہ اور اسکوپنگ کے لیے پہلے سے لگائی گئی ہیں۔ اس سے دوسرے ٹولز کے ساتھ تنازعات سے بچنے میں مدد ملے گی۔

Glyphicons نے ہمیں اپنی اوپن سورس ٹول کٹ میں سیٹ Halflings کے استعمال کی اجازت دی ہے جب تک کہ ہم یہاں دستاویزات میں لنک اور کریڈٹ فراہم کرتے ہیں۔ براہ کرم اپنے منصوبوں میں بھی ایسا ہی کرنے پر غور کریں۔

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

بوٹسٹریپ <i>تمام شبیہیں کے لیے ایک ٹیگ استعمال کرتا ہے، لیکن ان میں کوئی کیس کلاس نہیں ہے—صرف ایک مشترکہ سابقہ۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو تقریباً کہیں بھی رکھیں:

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

الٹی (سفید) شبیہیں کے لیے بھی اسٹائل دستیاب ہیں، جو ایک اضافی کلاس کے ساتھ تیار ہیں:

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

آپ کے شبیہیں کے لیے منتخب کرنے کے لیے 120 کلاسز ہیں۔ بس <i>صحیح کلاسز کے ساتھ ایک ٹیگ شامل کریں اور آپ سیٹ ہو جائیں۔ آپ پوری فہرست sprites.less میں یا یہاں اس دستاویز میں تلاش کر سکتے ہیں۔

سنو! متن کے ساتھ والے تاروں کو استعمال کرتے وقت، جیسا کہ بٹن یا نیوی لنکس میں، <i>مناسب وقفہ کے لیے ٹیگ کے بعد جگہ چھوڑنا نہ بھولیں۔

کیسز استعمال کریں۔

شبیہیں بہت اچھے ہیں، لیکن کوئی انہیں کہاں استعمال کرے گا؟ یہاں چند خیالات ہیں:

• آپ کے سائڈبار نیویگیشن کے لیے بصری کے طور پر
• مکمل طور پر آئیکن پر مبنی نیویگیشن کے لیے
• بٹنوں کے لیے ایک عمل کے معنی بتانے میں مدد کرنے کے لیے
• صارف کی منزل پر سیاق و سباق کا اشتراک کرنے کے لنکس کے ساتھ

بنیادی طور پر، جہاں بھی آپ <i>ٹیگ لگا سکتے ہیں، آپ ایک آئیکن لگا سکتے ہیں۔

ریفریش کریں۔ اس کو دیکھو حذف کریں۔

تبصرہ ترتیبات مزید معلومات

ای میل اڈریس