بیس سی ایس ایس

سہاروں کے اوپری حصے میں، بنیادی HTML عناصر کو ایک تازہ، مستقل شکل اور احساس فراہم کرنے کے لیے قابل توسیع کلاسوں کے ساتھ اسٹائل اور بڑھایا جاتا ہے۔

عنوانات اور باڈی کاپی

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

پوری ٹائپوگرافک گرڈ ہماری 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.

لیڈ باڈی کاپی

ایک پیراگراف کو شامل کرکے نمایاں بنائیں .lead۔

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

h1. سرخی 1

h2. سرخی 2

h3. سرخی 3

h4. سرخی 4

h5. سرخی 5
h6. سرخی 6

زور، پتہ، اور مخفف

عنصر استعمال اختیاری
<strong> اہم کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے کوئی نہیں۔
<em> تناؤ کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے کوئی نہیں۔
<abbr> ہوور پر توسیع شدہ ورژن دکھانے کے لیے مخففات اور مخففات کو لپیٹتا ہے۔

titleتوسیع شدہ متن کے لیے اختیاری وصف شامل کریں۔

.initialismبڑے حروف کے مخففات کے لیے کلاس استعمال کریں ۔
<address> اس کے قریبی آباؤ اجداد یا کام کے پورے جسم کے لیے رابطہ کی معلومات کے لیے کے ساتھ تمام لائنوں کو ختم کرکے فارمیٹنگ کو محفوظ کریں۔<br>

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

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> دوسرے ماخذ سے مواد کا حوالہ دینے کے لیے بلاک سطح کا عنصر

citeسورس یو آر ایل کے لیے وصف شامل کریں ۔

تیرے ہوئے اختیارات کے لیے استعمال .pull-leftاور .pull-rightکلاسز
<small> صارف کا سامنا کرنے والا حوالہ شامل کرنے کے لیے اختیاری عنصر، عام طور پر کام کے عنوان کے ساتھ مصنف <cite>ماخذ کے عنوان یا نام کے ارد گرد رکھیں

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

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

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> کوئی مشہور </small>
  4. </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>۔

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

بنیادی بلاک

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

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

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

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

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

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

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

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

ٹیبل مارک اپ

ٹیگ تفصیل
<table> ٹیبلر فارمیٹ میں ڈیٹا ڈسپلے کرنے کے لیے ریپنگ عنصر
<thead> <tr>ٹیبل کالموں کو لیبل کرنے کے لیے ٹیبل ہیڈر قطاروں ( ) کے لیے کنٹینر عنصر
<tbody> <tr>ٹیبل کے باڈی میں ٹیبل کی قطاروں ( ) کے لیے کنٹینر کا عنصر
<tr> ٹیبل سیلز ( <td>یا <th>) کے سیٹ کے لیے کنٹینر عنصر جو ایک قطار پر ظاہر ہوتا ہے۔
<td> ڈیفالٹ ٹیبل سیل
<th> کالم کے لیے خصوصی ٹیبل سیل (یا قطار، دائرہ کار اور جگہ کے لحاظ سے) لیبلز
کو ایک کے اندر استعمال کیا جانا چاہیے۔<thead>
<caption> جدول میں جو کچھ ہے اس کی تفصیل یا خلاصہ، خاص طور پر اسکرین ریڈرز کے لیے مفید ہے۔
  1. <ٹیبل>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

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

نام کلاس تفصیل
طے شدہ کوئی نہیں۔ کوئی سٹائل نہیں، صرف کالم اور قطار
بنیادی .table قطاروں کے درمیان صرف افقی لکیریں۔
سرحدی .table-bordered کونوں کو گول کرتا ہے اور بیرونی سرحد جوڑتا ہے۔
زیبرا کی پٹی .table-striped طاق قطاروں میں ہلکے سرمئی پس منظر کا رنگ شامل کرتا ہے (1، 3، 5، وغیرہ)
گاڑھا ۔ .table-condensed عمودی پیڈنگ کو نصف میں کاٹتا ہے، 8px سے 4px تک، تمام tdاور thعناصر کے اندر

مثال کی میزیں۔

1. پہلے سے طے شدہ ٹیبل کے انداز

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

  1. <ٹیبل کلاس = "ٹیبل" >
  2. </table>
# پہلا نام آخری نام صارف نام
1 نشان اوٹو @mdo
2 جیکب تھورنٹن چربی
3 لیری پرندہ ٹویٹر

2. دھاری دار میز

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

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

  1. <table class = "table table-striped" >
  2. </table>
# پہلا نام آخری نام صارف نام
1 نشان اوٹو @mdo
2 جیکب تھورنٹن چربی
3 لیری پرندہ ٹویٹر

3. سرحدی میز

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

  1. <ٹیبل کلاس = "ٹیبل ٹیبل بارڈرڈ" >
  2. </table>
# پہلا نام آخری نام صارف نام
1 نشان اوٹو @mdo
نشان اوٹو @getbootstrap
2 جیکب تھورنٹن چربی
3 لیری برڈ ٹویٹر

4. گاڑھا میز

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

  1. <ٹیبل کلاس = "ٹیبل ٹیبل کنڈینسڈ" >
  2. </table>
# پہلا نام آخری نام صارف نام
1 نشان اوٹو @mdo
2 جیکب تھورنٹن چربی
3 لیری برڈ ٹویٹر

5. ان سب کو یکجا کریں!

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

  1. <ٹیبل کلاس = "ٹیبل ٹیبل سٹرپڈ ٹیبل بارڈرڈ ٹیبل گاڑھا" >
  2. ...
  3. </table>
پورا نام
# پہلا نام آخری نام صارف نام
1 نشان اوٹو @mdo
2 جیکب تھورنٹن چربی
3 لیری برڈ ٹویٹر

لچکدار HTML اور CSS

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

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

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

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

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

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

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

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

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

چار قسم کی شکلیں۔

بوٹسٹریپ عام ویب فارم کے چار طرزوں کے لیے سادہ مارک اپ اور اسٹائل فراہم کرتا ہے۔

نام کلاس تفصیل
عمودی (پہلے سے طے شدہ) .form-vertical (ضرورت نہیں ہے) اسٹیک شدہ، کنٹرولز پر بائیں جانب سے منسلک لیبلز
لائن میں .form-inline کومپیکٹ اسٹائل کے لیے بائیں جانب سے منسلک لیبل اور ان لائن بلاک کنٹرولز
تلاش کریں۔ .form-search ایک عام تلاش کے جمالیاتی کے لیے اضافی گول ٹیکسٹ ان پٹ
افقی .form-horizontal کنٹرول کے طور پر ایک ہی لائن پر بائیں، دائیں سیدھ والے لیبلز کو فلوٹ کریں۔

صرف فارم کنٹرولز کا استعمال کرتے ہوئے مثال کے فارم ، کوئی اضافی مارک اپ نہیں۔

بنیادی شکل

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

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

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

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

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

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

ان لائن فارم

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

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

افقی شکلیں

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

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

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

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

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

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Legend text </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > ٹیکسٹ ان پٹ </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > سپورٹنگ ہیلپ ٹیکسٹ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

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


فارم کی توثیق

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

  1. <فیلڈ سیٹ
  2. کلاس = "کنٹرول گروپ کی خرابی" >
  3. </fieldset>
یہاں کچھ قدر
ہو سکتا ہے کچھ گڑبڑ ہو گئی ہو۔
براہ کرم غلطی کو درست کریں۔
ووہو!
ووہو!

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

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

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


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

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

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


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

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


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

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

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

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

@

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

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

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

بٹن class="" تفصیل
btn گریڈینٹ کے ساتھ معیاری گرے بٹن
btn btn-primary اضافی بصری وزن فراہم کرتا ہے اور بٹنوں کے سیٹ میں بنیادی کارروائی کی نشاندہی کرتا ہے۔
btn btn-info پہلے سے طے شدہ طرزوں کے متبادل کے طور پر استعمال کیا جاتا ہے۔
btn btn-success ایک کامیاب یا مثبت عمل کی نشاندہی کرتا ہے۔
btn btn-warning اس کارروائی کے ساتھ احتیاط برتنے کی نشاندہی کرتا ہے۔
btn btn-danger ایک خطرناک یا ممکنہ طور پر منفی عمل کی نشاندہی کرتا ہے۔
btn btn-inverse متبادل گہرا بھوری رنگ کا بٹن، کسی معنوی عمل یا استعمال سے منسلک نہیں ہے۔

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

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

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

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

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

متعدد سائز

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


معذور ریاست

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

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

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

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

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

لنک
  1. <a class="btn" href=""> لنک </a> _ _ _ _ _
  2. <بٹن کلاس = "btn" قسم = "جمع کروائیں" >
  3. بٹن
  4. </ بٹن>
  5. <ان پٹ کلاس = "btn" قسم = "بٹن"
  6. قدر = "ان پٹ" >
  7. <ان پٹ کلاس = "btn" قسم = "جمع کروائیں"
  8. قدر = "جمع کروائیں" >

ایک بہترین عمل کے طور پر، اپنے سیاق و سباق کے لیے عنصر کو ملانے کی کوشش کریں تاکہ مماثل کراس براؤزر رینڈرنگ کو یقینی بنایا جا سکے۔ اگر آپ کے پاس ہے تو اپنے بٹن کے لیے 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>تمام شبیہیں کے لیے ایک ٹیگ استعمال کرتا ہے، لیکن ان میں کوئی کیس کلاس نہیں ہے—صرف ایک مشترکہ سابقہ۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو تقریباً کہیں بھی رکھیں:

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

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

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

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

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

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

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

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

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

مثالیں

انہیں بٹن، بٹن گروپس میں ٹول بار، نیویگیشن، یا پہلے سے منسلک فارم ان پٹ میں استعمال کریں۔