گليفيڪن

موجود گليفس

Glyphicon Halflings سيٽ مان 250 کان وڌيڪ گليفس فونٽ فارميٽ ۾ شامل آهن. Glyphicons Halflings عام طور تي مفت ۾ دستياب نه آهن، پر انهن جي خالق انهن کي بوٽ اسٽريپ لاء مفت ۾ دستياب ڪيو آهي. توهان جي مهرباني، اسان صرف اهو پڇو ٿا ته توهان هڪ لنڪ شامل ڪريو واپس Glyphicons ڏانهن جڏهن به ممڪن هجي.

  • glyphicon glyphicon- asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-يورو
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-مائنس
  • گليفيڪون گلفيڪون بادل
  • glyphicon glyphicon- لفافو
  • glyphicon glyphicon- پنسل
  • گليفيڪون گليفيڪون گلاس
  • گليفيڪون گلفيڪون-موسيقي
  • glyphicon glyphicon- ڳولا
  • گليفيڪون گليفيڪون دل
  • گليفيڪون گليفيڪون تارو
  • glyphicon glyphicon-star-خالي
  • glyphicon glyphicon- استعمال ڪندڙ
  • glyphicon glyphicon-فلم
  • glyphicon glyphicon- وڏي
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • گليفيڪون گليفيڪون- ٺيڪ
  • glyphicon glyphicon- هٽائڻ
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-زوم آئوٽ
  • گليفيڪون گلفيڪون بند
  • glyphicon glyphicon-سگنل
  • glyphicon glyphicon-cog
  • گليفيڪون گليفيڪون- ڪچرو
  • glyphicon glyphicon- گھر
  • glyphicon glyphicon-file
  • glyphicon glyphicon-وقت
  • گليفيڪون گليفيڪون روڊ
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ڊائون لوڊ
  • glyphicon glyphicon-اپ لوڊ
  • glyphicon glyphicon-inbox
  • گليفيڪون گليفيڪون-پلي-سرڪل
  • glyphicon glyphicon- ورجائي
  • glyphicon glyphicon- ريفريش
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • گليفيڪون گليفيڪون- پرچم
  • گليفيڪون گليفيڪون- هيڊفون
  • glyphicon glyphicon-حجم بند
  • گليفيڪون گليفيڪون-حجم-گهٽ
  • glyphicon glyphicon-حجم وڌائڻ
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-بارڪوڊ
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon- ڪتاب
  • glyphicon glyphicon- بک مارڪ
  • glyphicon glyphicon-پرنٽ
  • glyphicon glyphicon- ڪئميرا
  • glyphicon glyphicon-فونٽ
  • glyphicon glyphicon- بولڊ
  • glyphicon glyphicon- italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align- right
  • glyphicon glyphicon- align- justify
  • glyphicon glyphicon- فهرست
  • glyphicon glyphicon-Indent-کاٻي
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-تصوير
  • glyphicon glyphicon-نقشي-مارڪر
  • glyphicon glyphicon- ترتيب ڏيڻ
  • گليفيڪون گليفيڪون رنگ
  • glyphicon glyphicon- ايڊٽ
  • glyphicon glyphicon-share
  • glyphicon glyphicon- چيڪ
  • glyphicon glyphicon- حرڪت
  • glyphicon glyphicon- قدم پوئتي- پوئتي
  • glyphicon glyphicon-تيز-پسمانده
  • glyphicon glyphicon- پٺتي
  • glyphicon glyphicon-play
  • glyphicon glyphicon- pause
  • گليفيڪون گليفيڪون- اسٽاپ
  • glyphicon glyphicon- اڳتي
  • glyphicon glyphicon- تيزي سان اڳتي وڌڻ
  • glyphicon glyphicon- قدم اڳتي
  • گليفيڪون گليفيڪون- خارج ڪرڻ
  • گليفيڪون گليفيڪون-شيورون-کاٻي
  • گليفيڪون گليفيڪون-شيورون-ساڄي
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon- هٽائڻ- نشان
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-سوال-سائل
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-اسڪرين شاٽ
  • گليفيڪون گليفيڪون-هٽائڻ-حلقو
  • گليفيڪون گليفيڪون-اوڪ-سرکل
  • glyphicon glyphicon-ban-sircle
  • glyphicon glyphicon-تير-کاٻي
  • glyphicon glyphicon-تير-ساڄي
  • glyphicon glyphicon- تير- مٿي
  • glyphicon glyphicon- تير- هيٺ
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-ننڍو
  • glyphicon glyphicon- عجب جي نشاني
  • glyphicon glyphicon- تحفو
  • glyphicon glyphicon- پتي
  • گليفيڪون گليفيڪون- فائر
  • glyphicon glyphicon-اکيون کليل
  • glyphicon glyphicon-اکيون بند ڪرڻ
  • glyphicon glyphicon- وارننگ- نشاني
  • glyphicon glyphicon- جهاز
  • glyphicon glyphicon-ڪلينڊر
  • گليفيڪون گلفيڪون- بي ترتيب
  • glyphicon glyphicon- تبصرو
  • glyphicon glyphicon- مقناطيس
  • گليفيڪون گليفيڪون-شيورون-اپ
  • گليفيڪون گليفيڪون-شيورون-ڊائون
  • glyphicon glyphicon-retweet
  • گليفيڪون گلفيڪون-شاپنگ ڪارٽ
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-فولڊر-اوپن
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • گليفيڪون گليفيڪون- بل هارن
  • گليفيڪون گليفيڪون بيل
  • glyphicon glyphicon-سرٽيفڪيٽ
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-هٿ-ساڄي
  • glyphicon glyphicon-هٿ-کاٻي
  • glyphicon glyphicon- هٿ مٿي ڪرڻ
  • glyphicon glyphicon- هٿ هيٺ
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-دائرو-تير-کاٻي
  • گليفيڪون گليفيڪون-دائرو-تير- مٿي
  • glyphicon glyphicon-circle-arrow-down
  • گليفيڪون گليفيڪون- گلوب
  • glyphicon glyphicon- رنچ
  • glyphicon glyphicon- ڪم
  • گليفيڪون گليفيڪون فلٽر
  • glyphicon glyphicon- briefcase
  • glyphicon glyphicon-پوري اسڪرين
  • glyphicon glyphicon-ڊيش بورڊ
  • glyphicon glyphicon- پيپر ڪلپ
  • گليفيڪون گلفيڪون- دل- خالي
  • glyphicon glyphicon-link
  • glyphicon glyphicon-فون
  • گليفيڪون گليفيڪون- پشپن
  • glyphicon glyphicon-USd
  • گليفيڪون گليفيڪون-جي بي پي
  • گليفيڪون گليفيڪون- ترتيب
  • glyphicon glyphicon-حرف جي ترتيب سان
  • glyphicon glyphicon-sorrt-by-alphabet-alt
  • glyphicon glyphicon- ترتيب سان
  • glyphicon glyphicon-سانٽ-جي-آرڊر-alt
  • glyphicon glyphicon-صفت-صفت
  • glyphicon glyphicon-sorrt-by-attributes-alt
  • glyphicon glyphicon- اڻ چيڪ ٿيل
  • گليفيڪون گليفيڪون- وسعت
  • گليفيڪون گليفيڪون- گرڻ- هيٺ
  • گليفيڪون گليفيڪون- ٽٽڻ
  • glyphicon glyphicon-log-in
  • گليفيڪون گليفيڪون- فليش
  • glyphicon glyphicon-لاگ آئوٽ
  • glyphicon glyphicon-نئين-ونڊو
  • glyphicon glyphicon- رڪارڊ
  • glyphicon glyphicon- بچايو
  • glyphicon glyphicon- کليل
  • glyphicon glyphicon محفوظ ٿيل
  • glyphicon glyphicon- درآمد
  • glyphicon glyphicon- برآمد
  • glyphicon glyphicon- موڪليو
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-فلاپي-محفوظ ٿيل
  • گليفيڪون گليفيڪون- فلاپي- هٽائڻ
  • glyphicon glyphicon-فلاپي-محفوظ
  • گليفيڪون گليفيڪون-فلاپي-اوپن
  • glyphicon glyphicon-ڪريڊٽ ڪارڊ
  • glyphicon glyphicon- منتقلي
  • glyphicon glyphicon-ڪٽلري
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • گليفيڪون گليفيڪون- ائرفون
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon- ٽاور
  • glyphicon glyphicon-status
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-وڊيو
  • glyphicon glyphicon-ذيلي عنوان
  • glyphicon glyphicon-sound-stereo
  • گليفيڪون گليفيڪون-آواز-ڊولبي
  • گليفيڪون گليفيڪون-آواز-5-1
  • گليفيڪون گليفيڪون-آواز-6-1
  • گليفيڪون گليفيڪون-آواز-7-1
  • glyphicon glyphicon- ڪاپي رائيٽ- نشان
  • glyphicon glyphicon-رجسٽريشن-نشان
  • glyphicon glyphicon-Cloud-download
  • glyphicon glyphicon-Cloud-upload
  • گليفيڪون گليفيڪون-وڻ-ڪونيفر
  • گليفيڪون گليفيڪون- وڻ-پراڻ
  • گليفيڪون گليفيڪون-سي ڊي
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-اوپن-فائل
  • glyphicon glyphicon-سطح مٿي
  • glyphicon glyphicon- ڪاپي
  • گليفيڪون گليفيڪون پيسٽ
  • glyphicon glyphicon- خبردار
  • glyphicon glyphicon- برابر ڪندڙ
  • گليفيڪون گلفيڪون بادشاهه
  • glyphicon glyphicon-راڻي
  • گليفيڪون گلفيڪون- پيون
  • گليفيڪون گليفيڪون- بشپ
  • گليفيڪون گليفيڪون نائٹ
  • glyphicon glyphicon-ٻار-فارمولا
  • glyphicon glyphicon- خيمو
  • گليفيڪون گليفيڪون- بليڪ بورڊ
  • glyphicon glyphicon- بستر
  • glyphicon glyphicon- Apple
  • glyphicon glyphicon- مٽڻ
  • گليفيڪون گليفيڪون- ڪلاڪ گلاس
  • گليفيڪون گليفيڪون- چراغ
  • glyphicon glyphicon- نقل
  • گليفيڪون گليفيڪون-گليفيڪون
  • glyphicon glyphicon- اسڪيسر
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon- rub
  • گليفيڪون گليفيڪون اسڪيل
  • گليفيڪون گليفيڪون-آئس-لولي
  • glyphicon glyphicon- برف-لولي-چٺو
  • glyphicon glyphicon- تعليم
  • glyphicon glyphicon-اختيار-افقي
  • glyphicon glyphicon-اختيار-عمودي
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon- تيل
  • glyphicon glyphicon- اناج
  • glyphicon glyphicon- سن گلاسس
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-Object-align-top
  • glyphicon glyphicon-آبجیکٹ-سطح- هيٺان
  • glyphicon glyphicon-آبجیکٹ-سطح-افقي
  • glyphicon glyphicon-آبجیکٹ-ساڄي-کاٻي
  • glyphicon glyphicon-Object-align-vertical
  • glyphicon glyphicon-آبجیکٹ-سائيٽ-سائيٽ
  • glyphicon glyphicon- مثلث- ساڄي
  • glyphicon glyphicon- مثلث- کاٻي
  • glyphicon glyphicon- مثلث- هيٺان
  • glyphicon glyphicon- مثلث- مٿي
  • glyphicon glyphicon-console
  • glyphicon glyphicon- سپر اسڪرپٽ
  • glyphicon glyphicon- سبسڪرپشن
  • glyphicon glyphicon-مينيو-کاٻي
  • glyphicon glyphicon-مينيو-ساڄي
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

ڪيئن استعمال ڪجي

ڪارڪردگي جي سببن لاء، سڀني آئڪن کي بنيادي ڪلاس ۽ انفرادي آئڪن ڪلاس جي ضرورت آھي. استعمال ڪرڻ لاءِ، ھيٺ ڏنل ڪوڊ کي ڪٿي به رکي. پڪ ڪريو ته آئڪن ۽ متن جي وچ ۾ هڪ جاء ڇڏي ڏيو مناسب پيڊنگ لاء.

ٻين اجزاء سان گڏ نه ڪريو

آئڪن طبقن کي سڌو سنئون ٻين حصن سان گڏ نه ٿو ڪري سگھجي. انهن کي ساڳئي عنصر تي ٻين طبقن سان گڏ استعمال نه ڪيو وڃي. ان جي بدران، هڪ nested شامل ڪريو <span>۽ آئڪن ڪلاس کي لاڳو ڪريو <span>.

صرف خالي عناصر تي استعمال لاء

آئڪن ڪلاس صرف انهن عناصرن تي استعمال ٿيڻ گهرجن جن ۾ ڪوبه متن وارو مواد نه هجي ۽ نه ئي ٻاراڻو عنصر هجي.

آئڪن فونٽ جي جڳھ کي تبديل ڪندي

بوٽ اسٽريپ فرض ڪري ٿو آئڪن فونٽ فائلون ../fonts/ڊاريڪٽري ۾ موجود هونديون، مرتب ڪيل CSS فائلن سان واسطو رکندڙ. انهن فونٽ فائلن کي منتقل ڪرڻ يا ان جو نالو تبديل ڪرڻ جو مطلب آهي CSS کي اپڊيٽ ڪرڻ ٽن طريقن مان:

  • مٽايو @icon-font-path۽/يا @icon-font-nameمتغير ماخذ ۾ گھٽ فائلون.
  • استعمال ڪريو لاڳاپو URLs اختيار جيڪو گھٽ مرتب ڪندڙ طرفان مهيا ڪيل آھي.
  • url()مرتب ڪيل CSS ۾ رستن کي تبديل ڪريو .

توهان جي مخصوص ڊولپمينٽ سيٽ اپ لاءِ جيڪو به اختيار مناسب هجي استعمال ڪريو.

رسائي لائق آئڪن

مددگار ٽيڪنالاجيز جا جديد ورجن CSS ٺاهيل مواد، گڏوگڏ مخصوص يونيڪوڊ ڪردارن جو اعلان ڪندا. اسڪرين ريڊرز ۾ غير ارادي ۽ مونجهاري واري پيداوار کان بچڻ لاءِ (خاص طور تي جڏهن آئڪن خالص طور تي سجاڳي لاءِ استعمال ڪيا ويندا آهن)، اسان انهن کي خصوصيت سان لڪائيندا آهيون aria-hidden="true".

جيڪڏهن توهان هڪ آئڪن استعمال ڪري رهيا آهيو مطلب پهچائڻ لاءِ (صرف هڪ آرائشي عنصر جي بجاءِ)، پڪ ڪريو ته اهو مطلب پڻ مددگار ٽيڪنالاجي تائين پهچايو ويو آهي - مثال طور، اضافي مواد شامل ڪريو، بصري طور .sr-onlyڪلاس سان لڪايو ويو.

جيڪڏهن توهان ڪنهن ٻئي متن سان ڪنٽرول ٺاهي رهيا آهيو (جهڙوڪ <button>جنهن ۾ صرف هڪ آئڪن هجي)، توهان کي هميشه متبادل مواد مهيا ڪرڻ گهرجي ڪنٽرول جي مقصد کي سڃاڻڻ لاءِ، ته جيئن مددگار ٽيڪنالاجي جي استعمال ڪندڙن کي سمجهه ۾ اچي. انهي حالت ۾، توهان aria-labelڪنٽرول تي هڪ خاصيت شامل ڪري سگهو ٿا.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

مثال

انھن کي بٽڻن ۾ استعمال ڪريو، ٽول بار لاءِ بٽڻ گروپ، نيويگيشن، يا اڳي ٿيل فارم ان پٽ.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

هڪ آئڪن خبردار ڪرڻ لاءِ استعمال ڪيو ويو آهي ته اهو هڪ غلط پيغام آهي، اضافي .sr-onlyمتن سان گڏ هي اشارو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين پهچائڻ لاءِ.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ڊراپ ڊائونز

ڳنڍڻ لائق، ڳنڍين جي لسٽ ڏيکارڻ لاءِ لاڳاپيل مينيو. ڊراپ ڊائون JavaScript پلگ ان سان انٽرايڪٽو ٺاهيو .

ڊراپ ڊائون جي ٽرگر ۽ ڊراپ ڊائون مينيو کي لفاف ڪريو اندر .dropdown، يا ٻيو عنصر جيڪو اعلان ڪري ٿو position: relative;. پوءِ مينيو جو HTML شامل ڪريو.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ڊراپ ڊائون مينيو تبديل ڪري سگھجي ٿو مٿي وڌائڻ لاءِ (هيٺ جي بدران) .dropupوالدين ۾ شامل ڪندي.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ڊفالٽ طور، هڪ ڊراپ ڊائون مينيو خود بخود 100٪ مٿي کان مٿي ۽ ان جي والدين جي کاٻي پاسي سان رکيل آهي. شامل ڪريو .dropdown-menu-righta .dropdown-menu۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو.

اضافي پوزيشن جي ضرورت ٿي سگھي ٿي

ڊراپ ڊائونز خودڪار طريقي سان سي ايس ايس ذريعي دستاويز جي عام وهڪري جي اندر رکيل آهن. overflowهن جو مطلب آهي ته ڊراپ ڊائونز شايد والدين طرفان ڪجهه خاص ملڪيتن سان ڪٽيل هجن يا ويوپورٽ جي حدن کان ٻاهر ظاهر ٿين. انهن مسئلن کي پاڻ پتوڙيو جيئن اهي پيدا ٿين.

نامناسب .pull-rightترتيب

v3.1.0 جي طور تي، اسان ڊراپ ڊائون مينيو کي ختم .pull-rightڪري ڇڏيو آهي. مينيو کي ساڄي طرف ترتيب ڏيڻ لاءِ، استعمال ڪريو .dropdown-menu-right. navbar ۾ ساڄي طرف ترتيب ڏنل nav اجزاء هن طبقي جو هڪ mixin ورجن استعمال ڪن ٿا خودڪار طريقي سان مينيو کي ترتيب ڏيڻ لاءِ. ان کي ختم ڪرڻ لاء، استعمال ڪريو .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

ڪنهن به ڊراپ ڊائون مينيو ۾ عملن جي سيڪشن کي ليبل ڪرڻ لاءِ هيڊر شامل ڪريو.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ڊراپ ڊائون مينيو ۾ لنڪ جي الڳ سيريز لاءِ ورهائيندڙ شامل ڪريو.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

لنڪ کي بند ڪرڻ لاءِ ڊراپ ڊائون ۾ .disabledشامل ڪريو .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

بٽڻ گروپ

ھڪڙي ھڪڙي لائن تي بٽڻ جي ھڪڙي گروپ سان گڏ بٽڻ جو ھڪڙو سلسلو گروپ ڪريو. اختياري جاوا اسڪرپٽ ريڊيو تي شامل ڪريو ۽ چيڪ باڪس طرز جو رويو اسان جي بٽڻ پلگ ان سان .

ٽول ٽائپس ۽ پاپ اوور بٽڻ گروپن ۾ خاص سيٽنگ جي ضرورت آهي

جڏهن ٽول ٽِپ يا پاپ اوور استعمال ڪندي عناصرن تي a. جي اندر .btn-group، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وسيع ٿيڻ ۽/يا ان جي گول ڪنڊن کي وڃائڻ جڏهن ٽول ٽِپ يا پاپ اوور شروع ٿئي ٿو).

صحيح کي يقيني بڻايو role۽ هڪ ليبل مهيا ڪريو

مددي ٽيڪنالاجيز لاءِ - جيئن ته اسڪرين ريڊرز - اهو ٻڌائڻ لاءِ ته بٽڻن جو هڪ سلسلو گروپ ٿيل آهي، هڪ مناسب roleوصف مهيا ڪرڻ جي ضرورت آهي. بٽڻ واري گروپن لاءِ، هي هوندو role="group"، جڏهن ته ٽول بار کي هڪ هجڻ گهرجي role="toolbar".

هڪ استثنا اهي گروپ آهن جن ۾ صرف هڪ واحد ڪنٽرول شامل آهي (مثال طور عناصر سان جواز ٿيل بٽڻ گروپ<button> ) يا ڊراپ ڊائون.

ان کان علاوه، گروپن ۽ ٽول بارن کي هڪ واضح ليبل ڏنو وڃي، جيئن سڀ کان وڌيڪ مددگار ٽيڪنالاجيون ٻي صورت ۾ انهن جو اعلان نه ڪنديون، صحيح roleخاصيت جي موجودگي جي باوجود. هتي مهيا ڪيل مثالن ۾، اسان استعمال ڪريون ٿا aria-label، پر متبادل جهڙوڪ aria-labelledbyپڻ استعمال ڪري سگهجن ٿيون.

بنيادي مثال

.btnان سان گڏ بٽڻ جو هڪ سلسلو لپي .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

بٽڻ ٽول بار

وڌيڪ پيچيده اجزاء لاء سيٽن کي <div class="btn-group">گڏ ڪريو.<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ماپڻ

ھڪڙي گروپ ۾ ھر بٽڻ تي بٽڻ جي سائز جا ڪلاس لاڳو ڪرڻ بدران، صرف .btn-group-*ھر ھڪ ۾ شامل ڪريو .btn-group، بشمول گھڻن گروپن کي نستي ڪرڻ وقت.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

نستو

.btn-groupھڪ ٻئي جي اندر رکو جڏھن توھان چاھيو ٿا ڊراپ ڊائون .btn-groupمينيو ملائي بٽڻن جي ھڪڙي سيريز سان.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

عمودي تغير

بٽڻ جو هڪ سيٽ ٺاهيو عمودي طور تي اسٽيڪ ٿيل نه بلڪه افقي طور تي. Split Button dropdowns هتي سپورٽ نه آهن.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

جواز ٿيل بٽڻ گروپ

بٽڻن جو ھڪڙو گروپ ٺاھيو برابر سائز تي ان جي والدين جي پوري چوٽي کي وڌائڻ لاء. پڻ ڪم ڪري ٿو بٽڻ واري گروپ اندر بٽڻ ڊراپ ڊائونز سان.

سرحدون سنڀالڻ

خاص HTML ۽ CSS جي ڪري بٽڻن کي درست ڪرڻ لاءِ استعمال ڪيو ويو (يعني display: table-cell)، انهن جي وچ ۾ سرحدون ٻيڻو ٿي ويون آهن. باقاعده بٽڻ گروپن ۾، margin-left: -1pxانهن کي هٽائڻ بدران سرحدن کي اسٽيڪ ڪرڻ لاء استعمال ڪيو ويندو آهي. بهرحال، marginسان ڪم نٿو ڪري display: table-cell. نتيجي طور، بوٽ اسٽراپ تي توهان جي ڪسٽمائيزيشن تي منحصر ڪري، توهان شايد سرحدن کي هٽائڻ يا ٻيهر رنگ ڪرڻ چاهيندا.

IE8 ۽ سرحدون

انٽرنيٽ ايڪسپلورر 8 هڪ جواز ٿيل بٽڻ گروپ ۾ بٽن تي سرحدون نه ٿو ڏئي، ڇا اهو آهي <a>يا <button>عناصر. انهي جي چوڌاري حاصل ڪرڻ لاء، هر بٽڻ کي ٻئي ۾ لپايو .btn-group.

وڌيڪ معلومات لاءِ ڏسو #12476 .

<a>عناصر سان

صرف .btns جي هڪ سيريز لپي ۾ .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

لنڪس بٽڻ طور ڪم ڪري رهيا آهن

جيڪڏهن <a>عناصر استعمال ڪيا وڃن بٽڻ طور ڪم ڪرڻ لاءِ - صفحي جي ڪارڪردگي کي متحرڪ ڪرڻ بجاءِ موجوده صفحي جي ڪنهن ٻئي دستاويز يا سيڪشن ڏانهن وڃڻ جي بجاءِ - انهن کي پڻ ڏنو وڃي مناسب role="button".

<button>عناصر سان

<button>عناصر سان جواز ٿيل بٽڻ گروپن کي استعمال ڪرڻ لاء ، توھان کي لازمي طور تي ھر بٽڻ کي ھڪڙي بٽڻ واري گروپ ۾ لپائڻ گھرجي . گھڻا برائوزر اسان جي سي ايس ايس کي صحيح طريقي سان لاڳو نٿا ڪن <button>عنصرن جي جواز لاءِ، پر جيئن ته اسان بٽڻ دٻائڻ جي حمايت ڪندا آهيون، اسان ان جي چوڌاري ڪم ڪري سگهون ٿا.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

بٽڻ دٻائڻ

ڊراپ ڊائون مينيو کي ٽرگر ڪرڻ لاءِ ڪو به بٽڻ استعمال ڪريو ان کي اندر رکڻ سان .btn-group۽ مناسب مينيو مارڪ اپ مهيا ڪريو.

پلگ ان انحصار

بٽڻ ڊراپ ڊائونز جي ضرورت آهي ڊراپ ڊائون پلگ ان کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ڪيو وڃي.

سنگل بٽڻ ڊراپ ڊائونز

ڪجھ بنيادي مارڪ اپ تبديلين سان ھڪڙي بٽڻ کي ڊراپ ڊائون ٽوگل ۾ ڦيرايو.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ورهايو بٽڻ دٻايو

ساڳي طرح، ساڳي مارڪ اپ تبديلين سان ورهايل بٽڻ ڊراپ ڊائونز ٺاهيو، صرف الڳ بٽڻ سان.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ماپڻ

بٽڻ دٻائڻ وارا ڪم سڀني سائزن جي بٽڻن سان.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ڊراپ اپ تبديلي

ٽريگر ڊراپ ڊائون مينيو مٿين عناصر کي شامل ڪندي .dropupوالدين کي.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ان پٽ گروپ

ڪنهن به متن جي بنياد تي، اڳ، بعد، يا ٻنهي پاسن تي ٽيڪسٽ يا بٽڻ شامل ڪندي فارم ڪنٽرول کي وڌايو <input>. .input-groupھڪڙي سان استعمال ڪريو .input-group-addonيا .input-group-btnاڳي ڪرڻ يا ھڪڙي ھڪڙي ۾ عناصر شامل ڪرڻ لاء .form-control.

صرف متني <input>ايس

هتي عناصر استعمال ڪرڻ کان پاسو <select>ڪريو جيئن اهي مڪمل طور تي WebKit برائوزرن ۾ اسٽائل نٿا ٿي سگهن.

<textarea>هتي عناصر کي استعمال ڪرڻ کان پاسو ڪريو جيئن ته انهن جي rowsخاصيت کي ڪجهه ڪيسن ۾ احترام نه ڪيو ويندو.

ٽول ٽائپس ۽ ان پٽ گروپن ۾ پاپ اوور خاص سيٽنگ جي ضرورت آهي

جڏهن ٽول ٽائپس يا پاپ اوور استعمال ڪندي عناصرن تي هڪ اندر .input-group، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'ناپسنديده ضمني اثرن کان بچڻ لاءِ (جهڙوڪ عنصر وسيع ٿيڻ ۽/يا ان جي گول ڪنڊن کي وڃائڻ جڏهن ٽول ٽائپ يا پاپ اوور شروع ٿئي ٿو).

ٻين اجزاء سان گڏ نه ڪريو

فارم گروپن يا گرڊ ڪالمن ڪلاس کي سڌو سنئون ان پٽ گروپن سان نه ملايو. ان جي بدران، ان پٽ گروپ کي فارم گروپ يا گرڊ سان لاڳاپيل عنصر اندر داخل ڪريو.

هميشه ليبل شامل ڪريو

جيڪڏهن توهان هر ان پٽ لاءِ ليبل شامل نه ڪيو آهي ته اسڪرين پڙهندڙن کي توهان جي فارمن سان پريشاني ٿيندي. انهن ان پٽ گروپن لاءِ، پڪ ڪريو ته ڪنهن به اضافي ليبل يا ڪارڪردگيءَ کي مددگار ٽيڪنالاجيز تائين پهچايو ويو آهي.

استعمال ٿيڻ واري صحيح ٽيڪنڪ (ڏسڻ وارا <label>عناصر، ڪلاس <label>استعمال ڪندي لڪيل عناصر ، يا , , , يا خاصيت جو استعمال) ۽ ڪهڙي اضافي معلومات پهچائڻ جي ضرورت پوندي، ان تي منحصر هوندو ته انٽرفيس ويجيٽ جي صحيح قسم تي منحصر آهي جيڪو توهان لاڳو ڪري رهيا آهيو. ھن سيڪشن ۾ مثال ڪجھ تجويز ڪيل، ڪيس-مخصوص طريقا مهيا ڪن ٿا..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

بنيادي مثال

ھڪڙي ان پٽ جي ٻئي پاسي ھڪڙو اضافو يا بٽڻ رکو. توهان هڪ ان پٽ جي ٻنهي پاسن تي پڻ رکي سگهو ٿا.

اسان ھڪڙي پاسي کان گھڻن اضافو ( .input-group-addonيا ) کي سپورٽ نٿا ڪريون..input-group-btn

اسان ھڪڙي ان پٽ گروپ ۾ گھڻن فارم-ڪنٽرول کي سپورٽ نٿا ڪريون.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ماپڻ

پاڻ ۾ لاڳاپو فارم سيزنگ ڪلاس شامل ڪريو .input-group۽ اندر موجود مواد پاڻمرادو ريسائيز ڪندو - هر عنصر تي فارم ڪنٽرول سائيز ڪلاس کي ورجائڻ جي ڪا ضرورت ناهي.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

چيڪ بڪس ۽ ريڊيو اضافو

ڪنهن به چيڪ بڪس يا ريڊيو آپشن کي رکو ان پٽ گروپ جي ايڊون اندر ٽيڪسٽ جي بدران.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

بٽڻ اضافو

ان پٽ گروپن ۾ بٽڻون ڪجھ مختلف آھن ۽ ھڪڙي اضافي سطح جي نستي جي ضرورت آھي. ان جي بدران .input-group-addon، توهان کي .input-group-btnبٽڻ کي لپڻ لاء استعمال ڪرڻ جي ضرورت پوندي. اھو گھربل آھي ڊفالٽ برائوزر جي طرز جي ڪري جنھن کي اوور رائيڊ نٿو ڪري سگھجي.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

بٽڻ دٻائڻ سان

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ورهايل بٽڻ

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

گھڻن بٽڻ

جڏهن ته توهان وٽ هر پاسي صرف هڪ اضافو ٿي سگهي ٿو، توهان وٽ هڪ واحد اندر ڪيترائي بٽڻ هوندا .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

نيوس

Bootstrap ۾ موجود Navs حصيداري ڪيل مارڪ اپ، بنيادي .navطبقي سان شروع ٿيندڙ، گڏوگڏ گڏيل رياستون. هر انداز جي وچ ۾ مٽائڻ لاءِ مٽائيندڙ طبقن کي تبديل ڪريو.

ٽيب پينلز لاءِ navs استعمال ڪرڻ لاءِ JavaScript tabs پلگ ان جي ضرورت آهي

ٽيبل جي قابل علائقن سان ٽيب لاء، توهان کي ٽيب استعمال ڪرڻ گهرجي JavaScript پلگ ان . مارڪ اپ کي اضافي role۽ ARIA خاصيتن جي ضرورت پوندي - وڌيڪ تفصيل لاءِ پلگ ان جو مثال مارڪ اپ ڏسو.

نيويگيشن جي رسائي جي طور تي استعمال ٿيندڙ نيوي کي ٺاهيو

جيڪڏھن توھان نيويگيشن بار مهيا ڪرڻ لاءِ navs استعمال ڪري رھيا آھيو، پڪ ڪريو ته ھڪڙو شامل ڪريو ھڪڙو role="navigation"سڀ کان وڌيڪ منطقي والدين ڪنٽينر ۾ <ul>، يا ھڪڙي <nav>عنصر کي سڄي نيويگيشن جي چوڌاري لپي. ڪردار کي پاڻ ۾ شامل نه ڪريو <ul>، ڇاڪاڻ ته اهو ان کي مددگار ٽيڪنالاجي جي حقيقي فهرست طور اعلان ٿيڻ کان روڪيندو.

نوٽ ڪريو ڪلاس کي بنيادي ڪلاس .nav-tabsجي ضرورت آھي..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

اهو ساڳيو HTML وٺو، پر .nav-pillsان جي بدران استعمال ڪريو:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

pills به vertically stackable آهن. بس شامل ڪريو .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

768px کان وڌيڪ ويڪرو اسڪرين تي آساني سان ٽيب يا گوليون پنھنجي والدين جي برابر ويڪرو ٺاھيو .nav-justified. ننڍي اسڪرين تي، نيوي لنڪس اسٽيڪ ٿيل آهن.

جائز نيوبار نيوي لنڪس في الحال سپورٽ نه آهن.

سفاري ۽ جوابدار جواز navs

v9.1.2 جي طور تي، سفاري هڪ بگ ڏيکاري ٿو جنهن ۾ توهان جي برائوزر کي افقي طور تي ريزائيز ڪرڻ سان درست نيوي ۾ رينجرنگ غلطيون پيدا ٿين ٿيون جيڪي ريفريش ڪرڻ تي صاف ڪيون وينديون آهن. اهو بگ پڻ ڏيکاريل آهي جواز واري نيوي مثال ۾ .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ڪنهن به نيوي جزو لاءِ (ٽيب يا گوليون)، گرين لنڪس .disabledلاءِ شامل ڪريو ۽ نه هوور اثرات .

لنڪ ڪارڪردگي متاثر نه ٿيو

هي طبقو صرف <a>ان جي ظاهر کي تبديل ڪندو، نه ان جي ڪارڪردگي. هتي لنڪس کي بند ڪرڻ لاءِ ڪسٽم جاوا اسڪرپٽ استعمال ڪريو.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

شامل ڪريو ڊراپ ڊائون مينيو ٿورڙو اضافي HTML ۽ ڊراپ ڊائونز جاوا اسڪرپٽ پلگ ان سان.

ڊراپ ڊائونز سان ٽيب

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ڊراپ ڊائونز سان گڏ گوليون

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

نوبار

Navbars جوابي ميٽا اجزاء آهن جيڪي توهان جي ايپليڪيشن يا سائيٽ لاءِ نيويگيشن هيڊر طور ڪم ڪن ٿا. اهي موبائيل نظارن ۾ ختم ٿيڻ شروع ٿي وڃن ٿا (۽ ٽوگل ڪري سگهجن ٿا) ۽ افقي ٿي وڃن ٿا جيئن دستياب ويوپورٽ جي چوٽي وڌي ٿي.

جائز نيوبار نيوي لنڪس في الحال سپورٽ نه آهن.

اڀرندڙ مواد

جيئن ته بوٽ اسٽريپ کي خبر ناهي ته توهان جي نيوبار ۾ مواد کي ڪيتري جاءِ جي ضرورت آهي، توهان شايد مسئلن کي منهن ڏئي سگهو ٿا مواد کي ٻئي قطار ۾ لپائڻ سان. هن کي حل ڪرڻ لاء، توهان ڪري سگهو ٿا:

  1. نيوبار شيون جي مقدار يا چوٽي کي گھٽايو.
  2. جوابي يوٽيلٽي ڪلاس استعمال ڪندي ڪجهه اسڪرين جي سائزن تي ڪجهه نيوبار شيون لڪايو .
  3. ان نقطي کي تبديل ڪريو جتي توھان جو نيوبار ڪلپس ٿيل ۽ افقي موڊ جي وچ ۾ سوئچ ڪري ٿو. متغير کي ترتيب @grid-float-breakpointڏيو يا پنهنجو ميڊيا سوال شامل ڪريو.

جاوا اسڪرپٽ پلگ ان جي ضرورت آهي

جيڪڏهن جاوا اسڪرپٽ غير فعال آهي ۽ ويو پورٽ ڪافي تنگ آهي ته نيوبار ختم ٿي وڃي، اهو ناممڪن هوندو ته نيوبار کي وڌائڻ ۽ مواد کي ڏسڻ.navbar-collapse .

جوابي نيوبار کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ٿيڻ لاءِ کولاپس پلگ ان جي ضرورت آهي.

ختم ٿيل موبائل نيوبار بريڪ پوائنٽ کي تبديل ڪندي

نيوبار ان جي عمودي موبائيل ڏيک ۾ تباھ ٿي ويندو آھي جڏھن ويوپورٽ کان تنگ ھوندو آھي @grid-float-breakpoint، ۽ ان جي افقي غير موبائيل ڏيک ۾ وڌندو آھي جڏھن وييو پورٽ گھٽ @grid-float-breakpoint۾ گھٽ ويڪر ۾ ھوندو آھي. ھن متغير کي گھٽ ماخذ ۾ ترتيب ڏيو ڪنٽرول ڪرڻ لاءِ جڏھن نيوبار ختم ٿئي ٿو/وڃي ٿو. ڊفالٽ قدر آهي 768px(ننڍو "ننڍو" يا "ٽيبلٽ" اسڪرين).

نيوبارز کي رسائي لائق بڻايو

هڪ عنصر کي استعمال ڪرڻ جي پڪ ڪريو <nav>يا، جيڪڏهن وڌيڪ عام عنصر استعمال ڪري رهيا آهيو جهڙوڪ a <div>، هر نيوبار ۾ هڪ شامل ڪريو role="navigation"واضح طور تي ان کي مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاءِ هڪ تاريخي علائقي جي طور تي سڃاڻڻ لاءِ.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

نيوبار برانڊ کي پنهنجي تصوير سان تبديل ڪريو متن کي تبديل ڪندي <img>. جيئن ته .navbar-brandان جي پنهنجي پيڊنگ ۽ اونچائي آهي، توهان کي شايد توهان جي تصوير جي لحاظ کان ڪجهه سي ايس ايس کي ختم ڪرڻ جي ضرورت پوندي.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

مناسب عمودي ترتيب لاءِ اندر اندر فارم جي مواد کي جاءِ .navbar-form۽ تنگ نظرين ۾ خراب ٿيل رويي. ترتيب ڏيڻ جا اختيار استعمال ڪريو فيصلو ڪرڻ لاءِ ته اهو نيوبار مواد ۾ ڪٿي رهي ٿو.

جيئن مٿي مٿي، .navbar-formان جي ڪوڊ جو گهڻو حصو .form-inlinemixin ذريعي. ڪجهه فارم ڪنٽرول، جهڙوڪ انپٽ گروپن کي، نيوبار ۾ صحيح طور تي ظاهر ٿيڻ لاءِ مقرر ويڪر جي ضرورت ٿي سگھي ٿي.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

موبائل ڊوائيس جي خبرداري

موبائل ڊوائيسز تي مقرر ٿيل عناصر جي اندر فارم ڪنٽرول استعمال ڪرڻ جي حوالي سان ڪجھ احتياط آھن. تفصيل لاءِ اسان جا برائوزر سپورٽ ڊاڪس ڏسو.

هميشه ليبل شامل ڪريو

جيڪڏهن توهان هر ان پٽ لاءِ ليبل شامل نه ڪيو آهي ته اسڪرين پڙهندڙن کي توهان جي فارمن سان پريشاني ٿيندي. .sr-onlyانهن ان لائن فارمن لاءِ، توهان ڪلاس استعمال ڪندي ليبل لڪائي سگهو ٿا . مددگار ٽيڪنالاجيز لاءِ ليبل مهيا ڪرڻ جا وڌيڪ متبادل طريقا آهن، جهڙوڪ aria-label، aria-labelledbyيا titleصفت. جيڪڏهن انهن مان ڪو به موجود نه آهي، اسڪرين پڙهندڙن کي استعمال ڪرڻ جي ڪوشش ڪري سگهن ٿا placeholderخاصيت، جيڪڏهن موجود هجي، پر ياد رکو ته placeholderٻين ليبلنگ طريقن جي متبادل طور استعمال ڪرڻ جي صلاح نه ڏني وئي آهي.

.navbar-btnڪلاس کي شامل ڪريو <button>عناصرن ۾ جيڪي نه <form>رھيا آھن انھن کي نيوبار ۾ عمودي مرڪز ڏانھن.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

حوالي سان مخصوص استعمال

معياري بٽڻ ڪلاس وانگر ، .navbar-btnاستعمال ڪري سگھجن ٿيون <a>۽ <input>عناصر. جڏهن ته، نه ۽ نه ئي معياري بٽڻ طبقن اندر عناصر .navbar-btnتي استعمال ٿيڻ گهرجي .<a>.navbar-nav

متن جي تارن کي هڪ عنصر ۾ لفاف ڪريو .navbar-text، عام طور تي <p>صحيح ليڊنگ ۽ رنگ لاءِ ٽيگ تي.

<p class="navbar-text">Signed in as Mark Otto</p>

معياري لنڪ استعمال ڪندڙ ماڻهن لاءِ جيڪي باقاعده نيويبار نيويگيشن جزو ۾ نه آهن، .navbar-linkڊفالٽ ۽ انورس نيوبار آپشنز لاءِ مناسب رنگ شامل ڪرڻ لاءِ ڪلاس استعمال ڪريو.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftيا .navbar-rightافاديت طبقن کي استعمال ڪندي نيوي لنڪس، فارم، بٽڻ، يا متن کي ترتيب ڏيو . ٻئي ڪلاس شامل ڪندا سي ايس ايس فلوٽ مقرر ڪيل هدايت ۾. مثال طور، نيوي لنڪس کي ترتيب ڏيڻ لاء، انهن کي الڳ ۾ رکيل <ul>لاڳاپيل يوٽيلٽي ڪلاس سان لاڳو ڪيو ويو آهي.

.pull-leftاهي ڪلاسز ۽ ڪلاس جا mixin-ed ورجن آهن .pull-right، پر انهن کي ميڊيا جي سوالن لاءِ اسڪوپ ڪيو ويو آهي ته جيئن ڊوائيس جي سائزن ۾ نيوبار اجزاء کي آسانيءَ سان سنڀالي سگهجي.

ڪيترن ئي اجزاء کي صحيح ترتيب ڏيڻ

Navbars في الحال ڪيترن ئي .navbar-rightطبقن سان هڪ حد آهي. مواد کي صحيح طور تي خلا ڪرڻ لاء، اسان آخري .navbar-rightعنصر تي منفي مارجن استعمال ڪندا آهيون. جڏهن اهڙا ڪيترائي عنصر آهن جيڪي انهي طبقي کي استعمال ڪندا آهن، اهي مارجن ڪم نه ڪندا آهن جيئن ارادو ڪيو وڃي.

اسان ان تي ٻيهر نظرثاني ڪنداسين جڏهن اسان ان جزو کي v4 ۾ ٻيهر لکي سگھون ٿا.

شامل ڪريو .navbar-fixed-top۽ شامل ڪريو ھڪڙو .containerيا .container-fluidمرڪز ۽ پيڊ نيوبار مواد.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

جسم جي ڇت جي ضرورت آهي

مقرر ٿيل نيوبار توهان جي ٻين مواد کي اوورلي ڪندو، جيستائين توهان paddingمٿي ۾ شامل نه ڪيو <body>. ڪوشش ڪريو پنهنجون قيمتون يا هيٺ ڏنل اسان جو ٽڪرو استعمال ڪريو. ھدايت: ڊفالٽ طور، نيوبار 50px اعلي آھي.

body { padding-top: 70px; }

هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ .

شامل ڪريو .navbar-fixed-bottom۽ شامل ڪريو ھڪڙو .containerيا .container-fluidمرڪز ۽ پيڊ نيوبار مواد.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

جسم جي ڇت جي ضرورت آهي

paddingمقرر ٿيل نيوبار توهان جي ٻين مواد کي اوورلي ڪندو، جيستائين توهان <body>. ڪوشش ڪريو پنهنجون قيمتون يا هيٺ ڏنل اسان جو ٽڪرو استعمال ڪريو. ھدايت: ڊفالٽ طور، نيوبار 50px اعلي آھي.

body { padding-bottom: 70px; }

هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ .

هڪ مڪمل ويڊٿ نيوبار ٺاهيو جيڪو صفحو سان گڏ اسڪرول ڪري ٿو .navbar-static-top۽ شامل ڪري هڪ .containerيا .container-fluidسينٽر ۽ پيڊ نيوبار مواد شامل ڪري.

طبقن جي برعڪس .navbar-fixed-*، توهان کي ڪنهن به پيڊنگ کي تبديل ڪرڻ جي ضرورت ناهي body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

شامل ڪندي نيوبار جي نظر کي تبديل ڪريو .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Breadcrumbs

موجوده صفحي جي جڳھ کي نيويگيشنل hierarchy ۾ ڏيکاريو.

سي ايس ايس ذريعي :before۽ content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

صفحو

توھان جي سائيٽ يا ايپ لاءِ گھڻن صفحن واري صفحي جي جزن سان، يا وڌيڪ آسان پيجر جي متبادل سان صفحي لڳائڻ جون لنڪس مهيا ڪريو .

ڊفالٽ صفحو

سادي صفحو Rdio کان متاثر، ايپس ۽ ڳولا جي نتيجن لاءِ زبردست. وڏي بلاڪ کي ياد ڪرڻ ڏکيو آهي، آساني سان اسپيبلبل، ۽ وڏي ڪلڪ وارا علائقا مهيا ڪري ٿي.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

صفحو لڳائڻ واري حصي کي ليبل ڪرڻ

صفحي جو حصو هڪ عنصر ۾ لپي وڃي <nav>ته جيئن ان کي اسڪرين ريڊرز ۽ ٻين مددگار ٽيڪنالاجيز لاءِ نيويگيشن سيڪشن طور سڃاڻي سگهجي. ان کان علاوه، جيئن ته هڪ صفحي تي اڳ ۾ ئي هڪ کان وڌيڪ اهڙن نيويگيشن سيڪشن هجڻ جو امڪان آهي (جهڙوڪ هيڊر ۾ پرائمري نيويگيشن، يا سائڊبار نيويگيشن)، اهو مشورو ڏنو ويندو آهي وضاحتي مهيا ڪرڻ aria-labelلاءِ <nav>جيڪو ان جي مقصد کي ظاهر ڪري. مثال طور، جيڪڏهن صفحو جو حصو ڳولها نتيجن جي هڪ سيٽ جي وچ ۾ نيويگيٽ ڪرڻ لاء استعمال ڪيو ويندو آهي، هڪ مناسب ليبل ٿي سگهي ٿو aria-label="Search results pages".

معذور ۽ فعال رياستون

لنڪس مختلف حالتن لاء حسب ضرورت آهن. .disabledغير ڪلڪ ڪرڻ واري لنڪ لاءِ استعمال ڪريو ۽ .activeموجوده صفحي کي ظاهر ڪرڻ لاءِ.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

اسان سفارش ڪريون ٿا ته توهان لاءِ فعال يا غير فعال اينڪرز <span>کي مٽايو، يا اڳئين/اڳيون تيرن جي صورت ۾ لنگر کي ختم ڪريو، ارادي انداز کي برقرار رکڻ دوران ڪلڪ ڪارڪردگي کي هٽائڻ لاءِ.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ماپڻ

فينسي وڏو يا ننڍو صفحو؟ شامل ڪريو .pagination-lgيا .pagination-smاضافي سائيز لاء.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

پيجر

ھلڪي مارڪ اپ ۽ اسلوب سان سادو صفحو لڳائڻ لاءِ تڪڙا پوئين ۽ ايندڙ لنڪ. اهو سادي سائيٽن جهڙوڪ بلاگن يا رسالن لاءِ تمام سٺو آهي.

ڊفالٽ مثال

ڊفالٽ طور، پيجر مرڪز لنڪس.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

متبادل طور تي، توھان ھر ھڪڙي لنڪ کي پاسن سان ترتيب ڏئي سگھو ٿا:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

اختياري معذور رياست

پيجر لنڪس پڻ استعمال ڪن ٿا عام .disabledيوٽيلٽي ڪلاس کي صفحو مان.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ليبلز

مثال

مثال عنوان نئون

مثال عنوان نئون

مثال عنوان نئون

مثال عنوان نئون

مثال عنوان نئون
مثال عنوان نئون
<h3>Example heading <span class="label label-default">New</span></h3>

دستياب تبديليون

ليبل جي ظاهر کي تبديل ڪرڻ لاءِ ھيٺ ڏنل ذڪر ڪيل ترميمي طبقن مان ڪو به شامل ڪريو.

ڊفالٽ پرائمري ڪاميابي جي ڄاڻ ڊيڄاريندڙ خطري
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ڇا توهان وٽ ڪيترائي ليبل آهن؟

رينڊرنگ مسئلا تڏهن پيدا ٿي سگهن ٿا جڏهن توهان وٽ هڪ تنگ ڪنٽينر اندر ان لائن ليبل جا درجن آهن، هر هڪ ۾ پنهنجو inline-blockعنصر هوندو آهي (جهڙوڪ هڪ آئڪن). هن جي چوڌاري رستو سيٽنگ آهي display: inline-block;. حوالي ۽ مثال لاءِ، ڏسو #13219 .

بيج

نون يا اڻ پڙهيل شيون آسانيءَ سان نمايان <span class="badge">ڪريو لنڪس ۾ شامل ڪرڻ سان، بوٽ اسٽريپ نيوس، ۽ وڌيڪ.

انباڪس42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

پاڻ ٽٽڻ

جڏهن ڪو به نئون يا اڻ پڙهيل شيون نه هونديون، بيج صرف ختم ٿي ويندا (سي ايس ايس جي :emptyچونڊيندڙ ذريعي) بشرطيڪ ڪو مواد موجود نه هجي.

ڪراس برائوزر مطابقت

انٽرنيٽ ايڪسپلورر 8 ۾ بيج پاڻ کي ختم نه ڪندا ڇو ته ان ۾ :emptyچونڊيندڙ لاءِ سپورٽ نه آهي.

فعال نيو رياستن کي اپنائڻ

بلٽ-ان اسٽائل شامل آهن بيجز کي فعال رياستن ۾ پل نيويگيشن ۾ رکڻ لاءِ.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

جمبوترون

ھڪڙو ھلڪو وزن، لچڪدار جزو جيڪو اختياري طور تي توھان جي سائيٽ تي اهم مواد ڏيکارڻ لاءِ پوري ڏيک پورٽ کي وڌائي سگھي ٿو.

هيلو، دنيا!

هي هڪ سادي هيرو يونٽ آهي، خاص مواد يا معلومات ڏانهن اضافي ڌيان ڏيڻ لاءِ هڪ سادي جمبوٽرون طرز جو جزو آهي.

وڌيڪ سکو

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

جمبوٽرون کي پوري ويڪر ۽ گول ڪنڊن کان سواءِ، ان کي سڀني .containers کان ٻاهر رکو ۽ ان جي بدران .containerاندر شامل ڪريو.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

صفحو هيڊر

ھڪڙو سادو شيل ھڪڙي h1لاءِ مناسب طور تي جاءِ ڏيڻ لاءِ ۽ ھڪڙي صفحي تي مواد جي حصن کي ورهايو. اهو استعمال ڪري سگھي ٿو h1'جي ڊفالٽ smallعنصر، ۽ گڏوگڏ ٻين اجزاء (اضافي انداز سان).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ٺٺوليون

تصويرن، وڊيوز، ٽيڪسٽ ۽ وڌيڪ جي گرڊ کي آسانيءَ سان ڊسپلي ڪرڻ لاءِ تھمب نيل جزو سان بوٽ اسٽريپ جي گرڊ سسٽم کي وڌايو.

جيڪڏھن توھان ڳولي رھيا آھيو Pinterest جھڙو تھمب نيل جي مختلف اونچائي ۽/يا چوٽي جي پيشڪش، توھان کي ھڪڙي ٽئين پارٽي پلگ ان استعمال ڪرڻ جي ضرورت پوندي جھڙوڪ Masonry , Isotope , or Salvattore .

ڊفالٽ مثال

ڊفالٽ طور، بوٽ اسٽريپ جا ٿامب نيل ٺهيل آهن جڙيل تصويرون ڏيکارڻ لاءِ گهٽ ۾ گهٽ گهربل مارڪ اپ سان.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

حسب ضرورت مواد

ٿوري اضافي مارڪ اپ سان، اهو ممڪن آهي ته ڪنهن به قسم جو HTML مواد شامل ڪيو وڃي جهڙوڪ هيڊنگس، پيراگرافس، يا بٽڻن کي ٿامبنيلز ۾.

100%x200

ٿمبنيل ليبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

بٽڻ بٽڻ

100%x200

ٿمبنيل ليبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

بٽڻ بٽڻ

100%x200

ٿمبنيل ليبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

بٽڻ بٽڻ

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

خبرداري

دستياب ۽ لچڪدار خبرداري پيغامن سان گڏ عام صارف جي عملن لاءِ لاڳاپيل راءِ جا پيغام مهيا ڪريو.

مثال

بنيادي خبرداري پيغامن لاءِ ڪنهن به ٽيڪسٽ ۽ اختياري برطرفي .alertواري بٽڻ کي لپايو ۽ چئن لاڳاپيل طبقن مان هڪ (مثال طور، )..alert-success

ڪو به ڊفالٽ ڪلاس

خبردارين ۾ ڊفالٽ ڪلاس نه آھن، رڳو بنيادي ۽ تبديل ڪندڙ ڪلاس. هڪ ڊفالٽ گرين الرٽ تمام گهڻو احساس نٿو رکي، تنهنڪري توهان کي ضرورت آهي ته هڪ قسم جي حوالي سان ڪلاس ذريعي وضاحت ڪريو. ڪاميابي، ڄاڻ، ڊيڄاريندڙ، يا خطري مان چونڊيو.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

رد ڪرڻ جا اطلاع

.alert-dismissibleاختياري ۽ بند بٽڻ شامل ڪندي ڪنهن به خبرداري تي تعمير ڪريو .

JavaScript الرٽ پلگ ان جي ضرورت آهي

مڪمل طور تي ڪم ڪرڻ لاءِ، برطرف ڪيل الرٽ، توھان کي استعمال ڪرڻ گھرجي الرٽس JavaScript پلگ ان .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

سڀني ڊوائيسز تي مناسب رويي کي يقيني بڻائي

ڊيٽا جي خاصيت <button>سان عنصر کي استعمال ڪرڻ جي پڪ ڪريو .data-dismiss="alert"

استعمال ڪريو .alert-linkيوٽيليٽي ڪلاس کي جلدي مهيا ڪرڻ لاءِ ڪنهن به الرٽ اندر ملندڙ رنگين لنڪس.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ترقي بار

سادي اڃان لچڪدار پيش رفت بارن سان ڪم فلو يا عمل جي ترقي تي تازه ترين راءِ ڏيو.

ڪراس برائوزر مطابقت

پروگريس بار استعمال ڪن ٿا CSS3 ٽرانزيڪشن ۽ اينيميشنز انهن جي ڪجهه اثرن کي حاصل ڪرڻ لاءِ. اهي خاصيتون انٽرنيٽ ايڪسپلورر 9 ۽ هيٺيون يا فائر فاڪس جي پراڻن ورزن ۾ سهڪار نه ٿيون ڪن. اوپيرا 12 اينيميشن کي سپورٽ نٿو ڪري.

مواد سيڪيورٽي پاليسي (سي ايس پي) ​​مطابقت

جيڪڏهن توهان جي ويب سائيٽ تي مواد سيڪيورٽي پاليسي (CSP) آهي جيڪا اجازت نٿي ڏئي style-src 'unsafe-inline'، ته پوءِ توهان ترقي واري بار جي چوٽي کي سيٽ ڪرڻ لاءِ ان لائن خاصيتون استعمال ڪرڻ جي قابل نه هوندا styleجيئن هيٺ ڏنل مثالن ۾ ڏيکاريل آهي. چوٿون سيٽ ڪرڻ لاءِ متبادل طريقا جيڪي سخت CSPs سان مطابقت رکن ٿا، شامل آھن ٿورڙو ڪسٽم JavaScript استعمال ڪرڻ (جيڪو سيٽ ڪري ٿو element.style.width) يا ڪسٽم CSS ڪلاس استعمال ڪرڻ.

بنيادي مثال

ڊفالٽ ترقي بار.

60% مڪمل
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ليبل سان

ڏيکاريندڙ سيڪڙو ڏيکارڻ لاءِ ترقي واري بار جي اندر <span>سان ڪلاس کي هٽايو ..sr-only

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

انهي کي يقيني بڻائڻ لاءِ ته ليبل جو متن گهٽ فيصد لاءِ به جائز رهي ٿو min-width، ترقي واري بار ۾ شامل ڪرڻ تي غور ڪريو.

0%
2 سيڪڙو
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

لاڳاپيل متبادل

پروگريس بار استعمال ڪن ٿا ڪجھ ساڳيا بٽڻ ۽ الرٽ ڪلاسز مسلسل اسٽائلز لاءِ.

40% مڪمل (ڪاميابي)
20٪ مڪمل
60% مڪمل (خبردار)
80٪ مڪمل (خطرو)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

پٽي ٿيل

پٽي ٿيل اثر پيدا ڪرڻ لاء گريجوئيٽ استعمال ڪري ٿو. IE9 ۽ هيٺ ڏنل ۾ دستياب ناهي.

40% مڪمل (ڪاميابي)
20٪ مڪمل
60% مڪمل (خبردار)
80٪ مڪمل (خطرو)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

متحرڪ

ساڄي کان کاٻي پاسي واري پٽي کي متحرڪ ڪرڻ لاءِ .activeشامل ڪريو . .progress-bar-stripedIE9 ۽ هيٺ ڏنل ۾ دستياب ناهي.

45٪ مڪمل
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

اسٽيڪ ٿيل

.progressانهن کي اسٽيڪ ڪرڻ لاءِ هڪ ئي جاءِ تي ڪيترائي بار رکو .

35٪ مڪمل (ڪاميابي)
20٪ مڪمل (خبردار)
10٪ مڪمل (خطرو)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ميڊيا اعتراض

مختلف قسمن جي اجزاء (جهڙوڪ بلاگ تبصرا، ٽوئيٽس، وغيره) تعمير ڪرڻ لاءِ خلاصو اعتراض انداز جيڪي متن جي مواد سان گڏ کاٻي يا ساڄي طرف واري تصوير جي خصوصيت رکن ٿا.

ڊفالٽ ميڊيا

ڊفالٽ ميڊيا ڏيکاري ٿو ميڊيا اعتراض (تصويرون، وڊيو، آڊيو) مواد بلاڪ جي کاٻي يا ساڄي طرف.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ڪلاس .pull-left۽ .pull-rightپڻ موجود آهن ۽ اڳ ۾ ميڊيا جزو جي حصي طور استعمال ڪيا ويا، پر ان استعمال لاءِ رد ٿيل آهن جيئن v3.3.0. اهي لڳ ڀڳ برابر آهن .media-left۽ .media-right، سواءِ ان جي html ۾ .media-rightرکيل هجي ..media-body

ميڊيا جي ترتيب

تصويرن يا ٻين ميڊيا کي مٿي، وچ، يا هيٺان ترتيب ڏئي سگهجي ٿو. ڊفالٽ مٿين ترتيب ڏنل آهي.

مٿاهين جڙيل ميڊيا

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

وچ ۾ ترتيب ڏنل ميڊيا

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

هيٺيون ترتيب ڏنل ميڊيا

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

ميڊيا لسٽ

ٿوري اضافي مارڪ اپ سان، توهان فهرست جي اندر ميڊيا استعمال ڪري سگهو ٿا (تبصري جي سلسلي يا مضمونن جي فهرستن لاءِ مفيد).

  • ميڊيا جي عنوان

    Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

فهرست گروپ

لسٽ گروپ هڪ لچڪدار ۽ طاقتور جزو آهن جيڪي نه رڳو عناصر جي سادي فهرستن کي ظاهر ڪرڻ لاء، پر پيچيده مواد سان گڏ.

بنيادي مثال

سڀ کان وڌيڪ بنيادي لسٽ گروپ صرف هڪ غير ترتيب ڏنل فهرست آهي لسٽ جي شين، ۽ مناسب طبقن سان. ان تي تعمير ڪريو اختيارن سان جيڪي پيروي ڪريو، يا توهان جي پنهنجي CSS جي ضرورت مطابق.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • eros تي ويسٽيبولم
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

بيج

بيج جو حصو شامل ڪريو ڪنھن به لسٽ گروپ جي شيءِ ۾ ۽ اھو پاڻمرادو ساڄي پاسي رکيل ھوندو.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1موربي ليو ريس
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ڳنڍيل شيون

لسٽ آئٽمز جي بدران لنگر ٽيگ استعمال ڪندي لسٽ گروپ آئٽمز کي ڳنڍيو (جنهن جو مطلب پڻ والدين <div>بدران هڪ <ul>). هر عنصر جي چوڌاري انفرادي والدين جي ضرورت ناهي.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

بٽڻ جون شيون

لسٽ گروپ جون شيون لسٽ آئٽمز جي بدران بٽڻون ٿي سگھن ٿيون (ان جو مطلب آھي ھڪڙو والدين <div>جي بدران <ul>). هر عنصر جي چوڌاري انفرادي والدين جي ضرورت ناهي. هتي معياري ڪلاس استعمال نه ڪريو ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

معذور شيون

.disableda ۾ شامل ڪريو .list-group-itemگري ڪرڻ لاءِ ان کي غير فعال ڏسڻ لاءِ.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

لاڳاپيل طبقن

اسٽائل لسٽ شيون، ڊفالٽ يا ڳنڍيل ڪرڻ لاء لاڳاپيل ڪلاس استعمال ڪريو. رياست پڻ شامل .activeآهي.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • eros تي ويسٽيبولم
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

حسب ضرورت مواد

شامل ڪريو تقريبن ڪنهن به HTML اندر، جيتوڻيڪ ڳنڍيل لسٽ گروپن لاءِ جيئن هيٺ ڏنل.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

پينل

جڏهن ته هميشه ضروري ناهي، ڪڏهن ڪڏهن توهان کي پنهنجي DOM کي دٻي ۾ رکڻ جي ضرورت آهي. انهن حالتن لاءِ، ڪوشش ڪريو پينل جزو.

بنيادي مثال

ڊفالٽ طور، سڀ .panelڪجھ لاڳو ٿئي ٿو ڪجھ بنيادي سرحد ۽ پيڊنگ کي ڪجھ مواد شامل ڪرڻ لاء.

بنيادي پينل مثال
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

سر سان پينل

آساني سان توهان جي پينل ۾ هڪ هيڊنگ ڪنٽينر شامل ڪريو .panel-heading. توھان پڻ شامل ڪري سگھو ٿا ڪو به شامل ڪريو <h1>- <h6>ھڪڙي .panel-titleطبقي سان گڏ اڳ-اسٽائل ٿيل عنوان شامل ڪرڻ لاء. تنهن هوندي به، فونٽ جي سائيز <h1>- <h6>کي ختم ڪيو ويو آهي .panel-heading.

مناسب لنڪ رنگن لاءِ، پڪ ڪريو ته لنڪس جي اندر عنوانن ۾ .panel-title.

عنوان کان سواءِ پينل هيڊنگ
پينل مواد

پينل عنوان

پينل مواد
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

لفافي بٽڻ يا ثانوي متن ۾ .panel-footer. نوٽ ڪريو ته پينل فوٽر رنگن ۽ سرحدن کي ورثي ۾ نه ٿا ڏين جڏهن لاڳاپيل تبديليون استعمال ڪندا آهن جيئن اهي پيش منظر ۾ نه هجن.

پينل مواد
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

لاڳاپيل متبادل

ٻين حصن وانگر، آساني سان ھڪڙي پينل کي ھڪڙي خاص حوالي سان وڌيڪ بامعني بنائڻ سان لاڳاپيل رياستي طبقن مان ڪنھن کي شامل ڪندي.

پينل عنوان

پينل مواد

پينل عنوان

پينل مواد

پينل عنوان

پينل مواد

پينل عنوان

پينل مواد

پينل عنوان

پينل مواد
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ٽيبل سان

.tableبيحد ڊيزائن لاءِ پينل جي اندر ڪنهن به بي سرحد شامل ڪريو . جيڪڏهن اتي آهي .panel-body، اسان جدول جي چوٽي تي هڪ اضافي سرحد شامل ڪندا آهيون جدائي لاءِ.

پينل سرنگ

ڪجھ ڊفالٽ پينل مواد هتي. Nulla vitae elit libero، a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit.

# پهريون نالو آخري نالو يوزر نالو
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

جيڪڏهن ڪو پينل باڊي نه آهي، جزو پينل هيڊر کان ٽيبل تائين بغير ڪنهن رڪاوٽ جي منتقل ٿئي ٿو.

پينل سرنگ
# پهريون نالو آخري نالو يوزر نالو
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

لسٽ گروپن سان

آساني سان شامل ڪريو مڪمل-چوٽي لسٽ گروپن جي اندر اندر.

پينل سرنگ

ڪجھ ڊفالٽ پينل مواد هتي. Nulla vitae elit libero، a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • eros تي ويسٽيبولم
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

جوابي ايمبيڊ

برائوزرن کي اجازت ڏيو ته وڊيو يا سلائڊ شو جي طول و عرض کي طئي ڪرڻ جي بنياد تي انهن جي بلاڪ جي چوٽي جي بنياد تي هڪ اندروني تناسب ٺاهي جيڪا ڪنهن به ڊوائيس تي صحيح طور تي ماپي ويندي.

ضابطا سڌو سنئون لاڳو ٿين ٿا <iframe>, <embed>, <video>, and <object>عناصر؛ اختياري طور تي هڪ واضح نسلي ڪلاس استعمال ڪريو .embed-responsive-itemجڏهن توهان ٻين خاصيتن لاءِ اسٽائل سان ملائڻ چاهيو ٿا.

پرو-ٽيپ! frameborder="0"توهان کي توهان جي ايس ۾ شامل ڪرڻ جي ضرورت ناهي <iframe>جيئن اسان توهان جي لاء ان کي ختم ڪريون ٿا.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

کوهه

ڊفالٽ چڱي طرح

هڪ عنصر تي هڪ سادي اثر جي طور تي استعمال ڪريو ان کي هڪ inset اثر ڏي.

ڏس، مان کوهه ۾ آهيان!
<div class="well">...</div>

اختياري ڪلاس

ڪنٽرول پيڊنگ ۽ گول ڪنڊن کي ٻن اختياري ترميمي طبقن سان.

ڏس، مان هڪ وڏي کوهه ۾ آهيان!
<div class="well well-lg">...</div>
ڏس، مان هڪ ننڍڙي کوهه ۾ آهيان!
<div class="well well-sm">...</div>