هڪ درجن کان وڌيڪ ٻيهر استعمال جي قابل اجزاء ٺاهيا ويا آهن جيڪي آئڪنگرافي، ڊراپ ڊائونز، ان پٽ گروپن، نيويگيشن، الرٽ، ۽ گهڻو ڪجهه مهيا ڪن ٿا.
گليفيڪن
موجود گليفس
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 کي اپڊيٽ ڪرڻ ٽن طريقن مان:
توهان جي مخصوص ڊولپمينٽ سيٽ اپ لاءِ جيڪو به اختيار مناسب هجي استعمال ڪريو.
رسائي لائق آئڪن
مددگار ٽيڪنالاجيز جا جديد ورجن CSS ٺاهيل مواد، گڏوگڏ مخصوص يونيڪوڊ ڪردارن جو اعلان ڪندا. اسڪرين ريڊرز ۾ غير ارادي ۽ مونجهاري واري پيداوار کان بچڻ لاءِ (خاص طور تي جڏهن آئڪن خالص طور تي سجاڳي لاءِ استعمال ڪيا ويندا آهن)، اسان انهن کي خصوصيت سان لڪائيندا آهيون aria-hidden="true".
جيڪڏهن توهان هڪ آئڪن استعمال ڪري رهيا آهيو مطلب پهچائڻ لاءِ (صرف هڪ آرائشي عنصر جي بجاءِ)، پڪ ڪريو ته اهو مطلب پڻ مددگار ٽيڪنالاجي تائين پهچايو ويو آهي - مثال طور، اضافي مواد شامل ڪريو، بصري طور .sr-onlyڪلاس سان لڪايو ويو.
جيڪڏهن توهان ڪنهن ٻئي متن سان ڪنٽرول ٺاهي رهيا آهيو (جهڙوڪ <button>جنهن ۾ صرف هڪ آئڪن هجي)، توهان کي هميشه متبادل مواد مهيا ڪرڻ گهرجي ڪنٽرول جي مقصد کي سڃاڻڻ لاءِ، ته جيئن مددگار ٽيڪنالاجي جي استعمال ڪندڙن کي سمجهه ۾ اچي. انهي حالت ۾، توهان aria-labelڪنٽرول تي هڪ خاصيت شامل ڪري سگهو ٿا.
مثال
انھن کي بٽڻن ۾ استعمال ڪريو، ٽول بار لاءِ بٽڻ گروپ، نيويگيشن، يا اڳي ٿيل فارم ان پٽ.
هڪ آئڪن خبردار ڪرڻ لاءِ استعمال ڪيو ويو آهي ته اهو هڪ غلط پيغام آهي، اضافي .sr-onlyمتن سان گڏ هي اشارو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين پهچائڻ لاءِ.
ڊفالٽ طور، هڪ ڊراپ ڊائون مينيو خود بخود 100٪ مٿي کان مٿي ۽ ان جي والدين جي کاٻي پاسي سان رکيل آهي. شامل ڪريو .dropdown-menu-righta .dropdown-menu۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو.
اضافي پوزيشن جي ضرورت ٿي سگھي ٿي
ڊراپ ڊائونز خودڪار طريقي سان سي ايس ايس ذريعي دستاويز جي عام وهڪري جي اندر رکيل آهن. overflowهن جو مطلب آهي ته ڊراپ ڊائونز شايد والدين طرفان ڪجهه خاص ملڪيتن سان ڪٽيل هجن يا ويوپورٽ جي حدن کان ٻاهر ظاهر ٿين. انهن مسئلن کي پاڻ پتوڙيو جيئن اهي پيدا ٿين.
نامناسب .pull-rightترتيب
v3.1.0 جي طور تي، اسان ڊراپ ڊائون مينيو کي ختم .pull-rightڪري ڇڏيو آهي. مينيو کي ساڄي طرف ترتيب ڏيڻ لاءِ، استعمال ڪريو .dropdown-menu-right. navbar ۾ ساڄي طرف ترتيب ڏنل nav اجزاء هن طبقي جو هڪ mixin ورجن استعمال ڪن ٿا خودڪار طريقي سان مينيو کي ترتيب ڏيڻ لاءِ. ان کي ختم ڪرڻ لاء، استعمال ڪريو .dropdown-menu-left.
مٿو
ڪنهن به ڊراپ ڊائون مينيو ۾ عملن جي سيڪشن کي ليبل ڪرڻ لاءِ هيڊر شامل ڪريو.
ھڪڙي ھڪڙي لائن تي بٽڻ جي ھڪڙي گروپ سان گڏ بٽڻ جو ھڪڙو سلسلو گروپ ڪريو. اختياري جاوا اسڪرپٽ ريڊيو تي شامل ڪريو ۽ چيڪ باڪس طرز جو رويو اسان جي بٽڻ پلگ ان سان .
ٽول ٽائپس ۽ پاپ اوور بٽڻ گروپن ۾ خاص سيٽنگ جي ضرورت آهي
جڏهن ٽول ٽِپ يا پاپ اوور استعمال ڪندي عناصرن تي a. جي اندر .btn-group، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وسيع ٿيڻ ۽/يا ان جي گول ڪنڊن کي وڃائڻ جڏهن ٽول ٽِپ يا پاپ اوور شروع ٿئي ٿو).
صحيح کي يقيني بڻايو role۽ هڪ ليبل مهيا ڪريو
مددي ٽيڪنالاجيز لاءِ - جيئن ته اسڪرين ريڊرز - اهو ٻڌائڻ لاءِ ته بٽڻن جو هڪ سلسلو گروپ ٿيل آهي، هڪ مناسب roleوصف مهيا ڪرڻ جي ضرورت آهي. بٽڻ واري گروپن لاءِ، هي هوندو role="group"، جڏهن ته ٽول بار کي هڪ هجڻ گهرجي role="toolbar".
هڪ استثنا اهي گروپ آهن جن ۾ صرف هڪ واحد ڪنٽرول شامل آهي (مثال طور عناصر سان جواز ٿيل بٽڻ گروپ<button> ) يا ڊراپ ڊائون.
ان کان علاوه، گروپن ۽ ٽول بارن کي هڪ واضح ليبل ڏنو وڃي، جيئن سڀ کان وڌيڪ مددگار ٽيڪنالاجيون ٻي صورت ۾ انهن جو اعلان نه ڪنديون، صحيح roleخاصيت جي موجودگي جي باوجود. هتي مهيا ڪيل مثالن ۾، اسان استعمال ڪريون ٿا aria-label، پر متبادل جهڙوڪ aria-labelledbyپڻ استعمال ڪري سگهجن ٿيون.
بنيادي مثال
.btnان سان گڏ بٽڻ جو هڪ سلسلو لپي .btn-group.
بٽڻ ٽول بار
وڌيڪ پيچيده اجزاء لاء سيٽن کي <div class="btn-group">گڏ ڪريو.<div class="btn-toolbar">
ماپڻ
ھڪڙي گروپ ۾ ھر بٽڻ تي بٽڻ جي سائز جا ڪلاس لاڳو ڪرڻ بدران، صرف .btn-group-*ھر ھڪ ۾ شامل ڪريو .btn-group، بشمول گھڻن گروپن کي نستي ڪرڻ وقت.
نستو
.btn-groupھڪ ٻئي جي اندر رکو جڏھن توھان چاھيو ٿا ڊراپ ڊائون .btn-groupمينيو ملائي بٽڻن جي ھڪڙي سيريز سان.
بٽڻن جو ھڪڙو گروپ ٺاھيو برابر سائز تي ان جي والدين جي پوري چوٽي کي وڌائڻ لاء. پڻ ڪم ڪري ٿو بٽڻ واري گروپ اندر بٽڻ ڊراپ ڊائونز سان.
سرحدون سنڀالڻ
خاص HTML ۽ CSS جي ڪري بٽڻن کي درست ڪرڻ لاءِ استعمال ڪيو ويو (يعني display: table-cell)، انهن جي وچ ۾ سرحدون ٻيڻو ٿي ويون آهن. باقاعده بٽڻ گروپن ۾، margin-left: -1pxانهن کي هٽائڻ بدران سرحدن کي اسٽيڪ ڪرڻ لاء استعمال ڪيو ويندو آهي. بهرحال، marginسان ڪم نٿو ڪري display: table-cell. نتيجي طور، بوٽ اسٽراپ تي توهان جي ڪسٽمائيزيشن تي منحصر ڪري، توهان شايد سرحدن کي هٽائڻ يا ٻيهر رنگ ڪرڻ چاهيندا.
IE8 ۽ سرحدون
انٽرنيٽ ايڪسپلورر 8 هڪ جواز ٿيل بٽڻ گروپ ۾ بٽن تي سرحدون نه ٿو ڏئي، ڇا اهو آهي <a>يا <button>عناصر. انهي جي چوڌاري حاصل ڪرڻ لاء، هر بٽڻ کي ٻئي ۾ لپايو .btn-group.
جيڪڏهن <a>عناصر استعمال ڪيا وڃن بٽڻ طور ڪم ڪرڻ لاءِ - صفحي جي ڪارڪردگي کي متحرڪ ڪرڻ بجاءِ موجوده صفحي جي ڪنهن ٻئي دستاويز يا سيڪشن ڏانهن وڃڻ جي بجاءِ - انهن کي پڻ ڏنو وڃي مناسب role="button".
<button>عناصر سان
<button>عناصر سان جواز ٿيل بٽڻ گروپن کي استعمال ڪرڻ لاء ، توھان کي لازمي طور تي ھر بٽڻ کي ھڪڙي بٽڻ واري گروپ ۾ لپائڻ گھرجي . گھڻا برائوزر اسان جي سي ايس ايس کي صحيح طريقي سان لاڳو نٿا ڪن <button>عنصرن جي جواز لاءِ، پر جيئن ته اسان بٽڻ دٻائڻ جي حمايت ڪندا آهيون، اسان ان جي چوڌاري ڪم ڪري سگهون ٿا.
بٽڻ دٻائڻ
ڊراپ ڊائون مينيو کي ٽرگر ڪرڻ لاءِ ڪو به بٽڻ استعمال ڪريو ان کي اندر رکڻ سان .btn-group۽ مناسب مينيو مارڪ اپ مهيا ڪريو.
پلگ ان انحصار
بٽڻ ڊراپ ڊائونز جي ضرورت آهي ڊراپ ڊائون پلگ ان کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ڪيو وڃي.
سنگل بٽڻ ڊراپ ڊائونز
ڪجھ بنيادي مارڪ اپ تبديلين سان ھڪڙي بٽڻ کي ڊراپ ڊائون ٽوگل ۾ ڦيرايو.
ڪنهن به متن جي بنياد تي، اڳ، بعد، يا ٻنهي پاسن تي ٽيڪسٽ يا بٽڻ شامل ڪندي فارم ڪنٽرول کي وڌايو <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۽ اندر موجود مواد پاڻمرادو ريسائيز ڪندو - هر عنصر تي فارم ڪنٽرول سائيز ڪلاس کي ورجائڻ جي ڪا ضرورت ناهي.
چيڪ بڪس ۽ ريڊيو اضافو
ڪنهن به چيڪ بڪس يا ريڊيو آپشن کي رکو ان پٽ گروپ جي ايڊون اندر ٽيڪسٽ جي بدران.
بٽڻ اضافو
ان پٽ گروپن ۾ بٽڻون ڪجھ مختلف آھن ۽ ھڪڙي اضافي سطح جي نستي جي ضرورت آھي. ان جي بدران .input-group-addon، توهان کي .input-group-btnبٽڻ کي لپڻ لاء استعمال ڪرڻ جي ضرورت پوندي. اھو گھربل آھي ڊفالٽ برائوزر جي طرز جي ڪري جنھن کي اوور رائيڊ نٿو ڪري سگھجي.
بٽڻ دٻائڻ سان
ورهايل بٽڻ
گھڻن بٽڻ
جڏهن ته توهان وٽ هر پاسي صرف هڪ اضافو ٿي سگهي ٿو، توهان وٽ هڪ واحد اندر ڪيترائي بٽڻ هوندا .input-group-btn.
نيوس
Bootstrap ۾ موجود Navs حصيداري ڪيل مارڪ اپ، بنيادي .navطبقي سان شروع ٿيندڙ، گڏوگڏ گڏيل رياستون. هر انداز جي وچ ۾ مٽائڻ لاءِ مٽائيندڙ طبقن کي تبديل ڪريو.
ٽيب پينلز لاءِ navs استعمال ڪرڻ لاءِ JavaScript tabs پلگ ان جي ضرورت آهي
نيويگيشن جي رسائي جي طور تي استعمال ٿيندڙ نيوي کي ٺاهيو
جيڪڏھن توھان نيويگيشن بار مهيا ڪرڻ لاءِ navs استعمال ڪري رھيا آھيو، پڪ ڪريو ته ھڪڙو شامل ڪريو ھڪڙو role="navigation"سڀ کان وڌيڪ منطقي والدين ڪنٽينر ۾ <ul>، يا ھڪڙي <nav>عنصر کي سڄي نيويگيشن جي چوڌاري لپي. ڪردار کي پاڻ ۾ شامل نه ڪريو <ul>، ڇاڪاڻ ته اهو ان کي مددگار ٽيڪنالاجي جي حقيقي فهرست طور اعلان ٿيڻ کان روڪيندو.
ٽيب
نوٽ ڪريو ڪلاس کي بنيادي ڪلاس .nav-tabsجي ضرورت آھي..nav
Navbars جوابي ميٽا اجزاء آهن جيڪي توهان جي ايپليڪيشن يا سائيٽ لاءِ نيويگيشن هيڊر طور ڪم ڪن ٿا. اهي موبائيل نظارن ۾ ختم ٿيڻ شروع ٿي وڃن ٿا (۽ ٽوگل ڪري سگهجن ٿا) ۽ افقي ٿي وڃن ٿا جيئن دستياب ويوپورٽ جي چوٽي وڌي ٿي.
جائز نيوبار نيوي لنڪس في الحال سپورٽ نه آهن.
اڀرندڙ مواد
جيئن ته بوٽ اسٽريپ کي خبر ناهي ته توهان جي نيوبار ۾ مواد کي ڪيتري جاءِ جي ضرورت آهي، توهان شايد مسئلن کي منهن ڏئي سگهو ٿا مواد کي ٻئي قطار ۾ لپائڻ سان. هن کي حل ڪرڻ لاء، توهان ڪري سگهو ٿا:
نيوبار شيون جي مقدار يا چوٽي کي گھٽايو.
جوابي يوٽيلٽي ڪلاس استعمال ڪندي ڪجهه اسڪرين جي سائزن تي ڪجهه نيوبار شيون لڪايو .
ان نقطي کي تبديل ڪريو جتي توھان جو نيوبار ڪلپس ٿيل ۽ افقي موڊ جي وچ ۾ سوئچ ڪري ٿو. متغير کي ترتيب @grid-float-breakpointڏيو يا پنهنجو ميڊيا سوال شامل ڪريو.
جاوا اسڪرپٽ پلگ ان جي ضرورت آهي
جيڪڏهن جاوا اسڪرپٽ غير فعال آهي ۽ ويو پورٽ ڪافي تنگ آهي ته نيوبار ختم ٿي وڃي، اهو ناممڪن هوندو ته نيوبار کي وڌائڻ ۽ مواد کي ڏسڻ.navbar-collapse .
جوابي نيوبار کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ٿيڻ لاءِ کولاپس پلگ ان جي ضرورت آهي.
ختم ٿيل موبائل نيوبار بريڪ پوائنٽ کي تبديل ڪندي
نيوبار ان جي عمودي موبائيل ڏيک ۾ تباھ ٿي ويندو آھي جڏھن ويوپورٽ کان تنگ ھوندو آھي @grid-float-breakpoint، ۽ ان جي افقي غير موبائيل ڏيک ۾ وڌندو آھي جڏھن وييو پورٽ گھٽ @grid-float-breakpoint۾ گھٽ ويڪر ۾ ھوندو آھي. ھن متغير کي گھٽ ماخذ ۾ ترتيب ڏيو ڪنٽرول ڪرڻ لاءِ جڏھن نيوبار ختم ٿئي ٿو/وڃي ٿو. ڊفالٽ قدر آهي 768px(ننڍو "ننڍو" يا "ٽيبلٽ" اسڪرين).
نيوبارز کي رسائي لائق بڻايو
هڪ عنصر کي استعمال ڪرڻ جي پڪ ڪريو <nav>يا، جيڪڏهن وڌيڪ عام عنصر استعمال ڪري رهيا آهيو جهڙوڪ a <div>، هر نيوبار ۾ هڪ شامل ڪريو role="navigation"واضح طور تي ان کي مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاءِ هڪ تاريخي علائقي جي طور تي سڃاڻڻ لاءِ.
برانڊ تصوير
نيوبار برانڊ کي پنهنجي تصوير سان تبديل ڪريو متن کي تبديل ڪندي <img>. جيئن ته .navbar-brandان جي پنهنجي پيڊنگ ۽ اونچائي آهي، توهان کي شايد توهان جي تصوير جي لحاظ کان ڪجهه سي ايس ايس کي ختم ڪرڻ جي ضرورت پوندي.
فارم
مناسب عمودي ترتيب لاءِ اندر اندر فارم جي مواد کي جاءِ .navbar-form۽ تنگ نظرين ۾ خراب ٿيل رويي. ترتيب ڏيڻ جا اختيار استعمال ڪريو فيصلو ڪرڻ لاءِ ته اهو نيوبار مواد ۾ ڪٿي رهي ٿو.
جيئن مٿي مٿي، .navbar-formان جي ڪوڊ جو گهڻو حصو .form-inlinemixin ذريعي. ڪجهه فارم ڪنٽرول، جهڙوڪ انپٽ گروپن کي، نيوبار ۾ صحيح طور تي ظاهر ٿيڻ لاءِ مقرر ويڪر جي ضرورت ٿي سگھي ٿي.
جيڪڏهن توهان هر ان پٽ لاءِ ليبل شامل نه ڪيو آهي ته اسڪرين پڙهندڙن کي توهان جي فارمن سان پريشاني ٿيندي. .sr-onlyانهن ان لائن فارمن لاءِ، توهان ڪلاس استعمال ڪندي ليبل لڪائي سگهو ٿا . مددگار ٽيڪنالاجيز لاءِ ليبل مهيا ڪرڻ جا وڌيڪ متبادل طريقا آهن، جهڙوڪ aria-label، aria-labelledbyيا titleصفت. جيڪڏهن انهن مان ڪو به موجود نه آهي، اسڪرين پڙهندڙن کي استعمال ڪرڻ جي ڪوشش ڪري سگهن ٿا placeholderخاصيت، جيڪڏهن موجود هجي، پر ياد رکو ته placeholderٻين ليبلنگ طريقن جي متبادل طور استعمال ڪرڻ جي صلاح نه ڏني وئي آهي.
بٽڻ
.navbar-btnڪلاس کي شامل ڪريو <button>عناصرن ۾ جيڪي نه <form>رھيا آھن انھن کي نيوبار ۾ عمودي مرڪز ڏانھن.
حوالي سان مخصوص استعمال
معياري بٽڻ ڪلاس وانگر ، .navbar-btnاستعمال ڪري سگھجن ٿيون <a>۽ <input>عناصر. جڏهن ته، نه ۽ نه ئي معياري بٽڻ طبقن اندر عناصر .navbar-btnتي استعمال ٿيڻ گهرجي .<a>.navbar-nav
متن
متن جي تارن کي هڪ عنصر ۾ لفاف ڪريو .navbar-text، عام طور تي <p>صحيح ليڊنگ ۽ رنگ لاءِ ٽيگ تي.
غير نيوي لنڪس
معياري لنڪ استعمال ڪندڙ ماڻهن لاءِ جيڪي باقاعده نيويبار نيويگيشن جزو ۾ نه آهن، .navbar-linkڊفالٽ ۽ انورس نيوبار آپشنز لاءِ مناسب رنگ شامل ڪرڻ لاءِ ڪلاس استعمال ڪريو.
اجزاء جي ترتيب
.navbar-leftيا .navbar-rightافاديت طبقن کي استعمال ڪندي نيوي لنڪس، فارم، بٽڻ، يا متن کي ترتيب ڏيو . ٻئي ڪلاس شامل ڪندا سي ايس ايس فلوٽ مقرر ڪيل هدايت ۾. مثال طور، نيوي لنڪس کي ترتيب ڏيڻ لاء، انهن کي الڳ ۾ رکيل <ul>لاڳاپيل يوٽيلٽي ڪلاس سان لاڳو ڪيو ويو آهي.
.pull-leftاهي ڪلاسز ۽ ڪلاس جا mixin-ed ورجن آهن .pull-right، پر انهن کي ميڊيا جي سوالن لاءِ اسڪوپ ڪيو ويو آهي ته جيئن ڊوائيس جي سائزن ۾ نيوبار اجزاء کي آسانيءَ سان سنڀالي سگهجي.
ڪيترن ئي اجزاء کي صحيح ترتيب ڏيڻ
Navbars في الحال ڪيترن ئي .navbar-rightطبقن سان هڪ حد آهي. مواد کي صحيح طور تي خلا ڪرڻ لاء، اسان آخري .navbar-rightعنصر تي منفي مارجن استعمال ڪندا آهيون. جڏهن اهڙا ڪيترائي عنصر آهن جيڪي انهي طبقي کي استعمال ڪندا آهن، اهي مارجن ڪم نه ڪندا آهن جيئن ارادو ڪيو وڃي.
اسان ان تي ٻيهر نظرثاني ڪنداسين جڏهن اسان ان جزو کي v4 ۾ ٻيهر لکي سگھون ٿا.
مٿي تي مقرر
شامل ڪريو .navbar-fixed-top۽ شامل ڪريو ھڪڙو .containerيا .container-fluidمرڪز ۽ پيڊ نيوبار مواد.
جسم جي ڇت جي ضرورت آهي
مقرر ٿيل نيوبار توهان جي ٻين مواد کي اوورلي ڪندو، جيستائين توهان paddingمٿي ۾ شامل نه ڪيو <body>. ڪوشش ڪريو پنهنجون قيمتون يا هيٺ ڏنل اسان جو ٽڪرو استعمال ڪريو. ھدايت: ڊفالٽ طور، نيوبار 50px اعلي آھي.
هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ .
هيٺئين طرف مقرر ٿيل
شامل ڪريو .navbar-fixed-bottom۽ شامل ڪريو ھڪڙو .containerيا .container-fluidمرڪز ۽ پيڊ نيوبار مواد.
جسم جي ڇت جي ضرورت آهي
paddingمقرر ٿيل نيوبار توهان جي ٻين مواد کي اوورلي ڪندو، جيستائين توهان <body>. ڪوشش ڪريو پنهنجون قيمتون يا هيٺ ڏنل اسان جو ٽڪرو استعمال ڪريو. ھدايت: ڊفالٽ طور، نيوبار 50px اعلي آھي.
هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ .
جامد مٿي
هڪ مڪمل ويڊٿ نيوبار ٺاهيو جيڪو صفحو سان گڏ اسڪرول ڪري ٿو .navbar-static-top۽ شامل ڪري هڪ .containerيا .container-fluidسينٽر ۽ پيڊ نيوبار مواد شامل ڪري.
طبقن جي برعڪس .navbar-fixed-*، توهان کي ڪنهن به پيڊنگ کي تبديل ڪرڻ جي ضرورت ناهي body.
اُلٽي نيوبار
شامل ڪندي نيوبار جي نظر کي تبديل ڪريو .navbar-inverse.
Breadcrumbs
موجوده صفحي جي جڳھ کي نيويگيشنل hierarchy ۾ ڏيکاريو.
سادي صفحو Rdio کان متاثر، ايپس ۽ ڳولا جي نتيجن لاءِ زبردست. وڏي بلاڪ کي ياد ڪرڻ ڏکيو آهي، آساني سان اسپيبلبل، ۽ وڏي ڪلڪ وارا علائقا مهيا ڪري ٿي.
صفحو لڳائڻ واري حصي کي ليبل ڪرڻ
صفحي جو حصو هڪ عنصر ۾ لپي وڃي <nav>ته جيئن ان کي اسڪرين ريڊرز ۽ ٻين مددگار ٽيڪنالاجيز لاءِ نيويگيشن سيڪشن طور سڃاڻي سگهجي. ان کان علاوه، جيئن ته هڪ صفحي تي اڳ ۾ ئي هڪ کان وڌيڪ اهڙن نيويگيشن سيڪشن هجڻ جو امڪان آهي (جهڙوڪ هيڊر ۾ پرائمري نيويگيشن، يا سائڊبار نيويگيشن)، اهو مشورو ڏنو ويندو آهي وضاحتي مهيا ڪرڻ aria-labelلاءِ <nav>جيڪو ان جي مقصد کي ظاهر ڪري. مثال طور، جيڪڏهن صفحو جو حصو ڳولها نتيجن جي هڪ سيٽ جي وچ ۾ نيويگيٽ ڪرڻ لاء استعمال ڪيو ويندو آهي، هڪ مناسب ليبل ٿي سگهي ٿو aria-label="Search results pages".
معذور ۽ فعال رياستون
لنڪس مختلف حالتن لاء حسب ضرورت آهن. .disabledغير ڪلڪ ڪرڻ واري لنڪ لاءِ استعمال ڪريو ۽ .activeموجوده صفحي کي ظاهر ڪرڻ لاءِ.
اسان سفارش ڪريون ٿا ته توهان لاءِ فعال يا غير فعال اينڪرز <span>کي مٽايو، يا اڳئين/اڳيون تيرن جي صورت ۾ لنگر کي ختم ڪريو، ارادي انداز کي برقرار رکڻ دوران ڪلڪ ڪارڪردگي کي هٽائڻ لاءِ.
ماپڻ
فينسي وڏو يا ننڍو صفحو؟ شامل ڪريو .pagination-lgيا .pagination-smاضافي سائيز لاء.
پيجر
ھلڪي مارڪ اپ ۽ اسلوب سان سادو صفحو لڳائڻ لاءِ تڪڙا پوئين ۽ ايندڙ لنڪ. اهو سادي سائيٽن جهڙوڪ بلاگن يا رسالن لاءِ تمام سٺو آهي.
ڊفالٽ مثال
ڊفالٽ طور، پيجر مرڪز لنڪس.
ترتيب ڏنل لنڪس
متبادل طور تي، توھان ھر ھڪڙي لنڪ کي پاسن سان ترتيب ڏئي سگھو ٿا:
اختياري معذور رياست
پيجر لنڪس پڻ استعمال ڪن ٿا عام .disabledيوٽيلٽي ڪلاس کي صفحو مان.
ليبلز
مثال
مثال عنوان نئون
مثال عنوان نئون
مثال عنوان نئون
مثال عنوان نئون
مثال عنوان نئون
مثال عنوان نئون
دستياب تبديليون
ليبل جي ظاهر کي تبديل ڪرڻ لاءِ ھيٺ ڏنل ذڪر ڪيل ترميمي طبقن مان ڪو به شامل ڪريو.
ڊفالٽ پرائمري ڪاميابي جي ڄاڻ ڊيڄاريندڙ خطري
ڇا توهان وٽ ڪيترائي ليبل آهن؟
رينڊرنگ مسئلا تڏهن پيدا ٿي سگهن ٿا جڏهن توهان وٽ هڪ تنگ ڪنٽينر اندر ان لائن ليبل جا درجن آهن، هر هڪ ۾ پنهنجو inline-blockعنصر هوندو آهي (جهڙوڪ هڪ آئڪن). هن جي چوڌاري رستو سيٽنگ آهي display: inline-block;. حوالي ۽ مثال لاءِ، ڏسو #13219 .
بيج
نون يا اڻ پڙهيل شيون آسانيءَ سان نمايان <span class="badge">ڪريو لنڪس ۾ شامل ڪرڻ سان، بوٽ اسٽريپ نيوس، ۽ وڌيڪ.
جمبوٽرون کي پوري ويڪر ۽ گول ڪنڊن کان سواءِ، ان کي سڀني .containers کان ٻاهر رکو ۽ ان جي بدران .containerاندر شامل ڪريو.
صفحو هيڊر
ھڪڙو سادو شيل ھڪڙي h1لاءِ مناسب طور تي جاءِ ڏيڻ لاءِ ۽ ھڪڙي صفحي تي مواد جي حصن کي ورهايو. اهو استعمال ڪري سگھي ٿو h1'جي ڊفالٽ smallعنصر، ۽ گڏوگڏ ٻين اجزاء (اضافي انداز سان).
هيڊر لاءِ مثال صفحو هيڊر Subtext
ٺٺوليون
تصويرن، وڊيوز، ٽيڪسٽ ۽ وڌيڪ جي گرڊ کي آسانيءَ سان ڊسپلي ڪرڻ لاءِ تھمب نيل جزو سان بوٽ اسٽريپ جي گرڊ سسٽم کي وڌايو.
جيڪڏھن توھان ڳولي رھيا آھيو Pinterest جھڙو تھمب نيل جي مختلف اونچائي ۽/يا چوٽي جي پيشڪش، توھان کي ھڪڙي ٽئين پارٽي پلگ ان استعمال ڪرڻ جي ضرورت پوندي جھڙوڪ Masonry , Isotope , or Salvattore .
ٿوري اضافي مارڪ اپ سان، اهو ممڪن آهي ته ڪنهن به قسم جو HTML مواد شامل ڪيو وڃي جهڙوڪ هيڊنگس، پيراگرافس، يا بٽڻن کي ٿامبنيلز ۾.
ٿمبنيل ليبل
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.
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.
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.
سادي اڃان لچڪدار پيش رفت بارن سان ڪم فلو يا عمل جي ترقي تي تازه ترين راءِ ڏيو.
ڪراس برائوزر مطابقت
پروگريس بار استعمال ڪن ٿا CSS3 ٽرانزيڪشن ۽ اينيميشنز انهن جي ڪجهه اثرن کي حاصل ڪرڻ لاءِ. اهي خاصيتون انٽرنيٽ ايڪسپلورر 9 ۽ هيٺيون يا فائر فاڪس جي پراڻن ورزن ۾ سهڪار نه ٿيون ڪن. اوپيرا 12 اينيميشن کي سپورٽ نٿو ڪري.
مواد سيڪيورٽي پاليسي (سي ايس پي) مطابقت
جيڪڏهن توهان جي ويب سائيٽ تي مواد سيڪيورٽي پاليسي (CSP) آهي جيڪا اجازت نٿي ڏئي style-src 'unsafe-inline'، ته پوءِ توهان ترقي واري بار جي چوٽي کي سيٽ ڪرڻ لاءِ ان لائن خاصيتون استعمال ڪرڻ جي قابل نه هوندا styleجيئن هيٺ ڏنل مثالن ۾ ڏيکاريل آهي. چوٿون سيٽ ڪرڻ لاءِ متبادل طريقا جيڪي سخت CSPs سان مطابقت رکن ٿا، شامل آھن ٿورڙو ڪسٽم JavaScript استعمال ڪرڻ (جيڪو سيٽ ڪري ٿو element.style.width) يا ڪسٽم CSS ڪلاس استعمال ڪرڻ.
بنيادي مثال
ڊفالٽ ترقي بار.
60% مڪمل
ليبل سان
ڏيکاريندڙ سيڪڙو ڏيکارڻ لاءِ ترقي واري بار جي اندر <span>سان ڪلاس کي هٽايو ..sr-only
60%
انهي کي يقيني بڻائڻ لاءِ ته ليبل جو متن گهٽ فيصد لاءِ به جائز رهي ٿو min-width، ترقي واري بار ۾ شامل ڪرڻ تي غور ڪريو.
0%
2 سيڪڙو
لاڳاپيل متبادل
پروگريس بار استعمال ڪن ٿا ڪجھ ساڳيا بٽڻ ۽ الرٽ ڪلاسز مسلسل اسٽائلز لاءِ.
40% مڪمل (ڪاميابي)
20٪ مڪمل
60% مڪمل (خبردار)
80٪ مڪمل (خطرو)
پٽي ٿيل
پٽي ٿيل اثر پيدا ڪرڻ لاء گريجوئيٽ استعمال ڪري ٿو. IE9 ۽ هيٺ ڏنل ۾ دستياب ناهي.
.progressانهن کي اسٽيڪ ڪرڻ لاءِ هڪ ئي جاءِ تي ڪيترائي بار رکو .
35٪ مڪمل (ڪاميابي)
20٪ مڪمل (خبردار)
10٪ مڪمل (خطرو)
ميڊيا اعتراض
مختلف قسمن جي اجزاء (جهڙوڪ بلاگ تبصرا، ٽوئيٽس، وغيره) تعمير ڪرڻ لاءِ خلاصو اعتراض انداز جيڪي متن جي مواد سان گڏ کاٻي يا ساڄي طرف واري تصوير جي خصوصيت رکن ٿا.
ڊفالٽ ميڊيا
ڊفالٽ ميڊيا ڏيکاري ٿو ميڊيا اعتراض (تصويرون، وڊيو، آڊيو) مواد بلاڪ جي کاٻي يا ساڄي طرف.
ميڊيا جي عنوان
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.
ڪلاس .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.
ميڊيا لسٽ
ٿوري اضافي مارڪ اپ سان، توهان فهرست جي اندر ميڊيا استعمال ڪري سگهو ٿا (تبصري جي سلسلي يا مضمونن جي فهرستن لاءِ مفيد).
ميڊيا جي عنوان
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.
فهرست گروپ
لسٽ گروپ هڪ لچڪدار ۽ طاقتور جزو آهن جيڪي نه رڳو عناصر جي سادي فهرستن کي ظاهر ڪرڻ لاء، پر پيچيده مواد سان گڏ.
بنيادي مثال
سڀ کان وڌيڪ بنيادي لسٽ گروپ صرف هڪ غير ترتيب ڏنل فهرست آهي لسٽ جي شين، ۽ مناسب طبقن سان. ان تي تعمير ڪريو اختيارن سان جيڪي پيروي ڪريو، يا توهان جي پنهنجي CSS جي ضرورت مطابق.
Cras justo odio
Dapibus ac facilisis in
موربي ليو ريس
Porta ac consectetur ac
eros تي ويسٽيبولم
بيج
بيج جو حصو شامل ڪريو ڪنھن به لسٽ گروپ جي شيءِ ۾ ۽ اھو پاڻمرادو ساڄي پاسي رکيل ھوندو.
14Cras justo odio
2Dapibus ac facilisis in
1موربي ليو ريس
ڳنڍيل شيون
لسٽ آئٽمز جي بدران لنگر ٽيگ استعمال ڪندي لسٽ گروپ آئٽمز کي ڳنڍيو (جنهن جو مطلب پڻ والدين <div>بدران هڪ <ul>). هر عنصر جي چوڌاري انفرادي والدين جي ضرورت ناهي.
لسٽ گروپ جون شيون لسٽ آئٽمز جي بدران بٽڻون ٿي سگھن ٿيون (ان جو مطلب آھي ھڪڙو والدين <div>جي بدران <ul>). هر عنصر جي چوڌاري انفرادي والدين جي ضرورت ناهي. هتي معياري ڪلاس استعمال نه ڪريو ..btn
معذور شيون
.disableda ۾ شامل ڪريو .list-group-itemگري ڪرڻ لاءِ ان کي غير فعال ڏسڻ لاءِ.
جڏهن ته هميشه ضروري ناهي، ڪڏهن ڪڏهن توهان کي پنهنجي DOM کي دٻي ۾ رکڻ جي ضرورت آهي. انهن حالتن لاءِ، ڪوشش ڪريو پينل جزو.
بنيادي مثال
ڊفالٽ طور، سڀ .panelڪجھ لاڳو ٿئي ٿو ڪجھ بنيادي سرحد ۽ پيڊنگ کي ڪجھ مواد شامل ڪرڻ لاء.
بنيادي پينل مثال
سر سان پينل
آساني سان توهان جي پينل ۾ هڪ هيڊنگ ڪنٽينر شامل ڪريو .panel-heading. توھان پڻ شامل ڪري سگھو ٿا ڪو به شامل ڪريو <h1>- <h6>ھڪڙي .panel-titleطبقي سان گڏ اڳ-اسٽائل ٿيل عنوان شامل ڪرڻ لاء. تنهن هوندي به، فونٽ جي سائيز <h1>- <h6>کي ختم ڪيو ويو آهي .panel-heading.
لفافي بٽڻ يا ثانوي متن ۾ .panel-footer. نوٽ ڪريو ته پينل فوٽر رنگن ۽ سرحدن کي ورثي ۾ نه ٿا ڏين جڏهن لاڳاپيل تبديليون استعمال ڪندا آهن جيئن اهي پيش منظر ۾ نه هجن.
پينل مواد
لاڳاپيل متبادل
ٻين حصن وانگر، آساني سان ھڪڙي پينل کي ھڪڙي خاص حوالي سان وڌيڪ بامعني بنائڻ سان لاڳاپيل رياستي طبقن مان ڪنھن کي شامل ڪندي.
پينل عنوان
پينل مواد
پينل عنوان
پينل مواد
پينل عنوان
پينل مواد
پينل عنوان
پينل مواد
پينل عنوان
پينل مواد
ٽيبل سان
.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
جيڪڏهن ڪو پينل باڊي نه آهي، جزو پينل هيڊر کان ٽيبل تائين بغير ڪنهن رڪاوٽ جي منتقل ٿئي ٿو.
پينل سرنگ
#
پهريون نالو
آخري نالو
يوزر نالو
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري
پکي
@twitter
لسٽ گروپن سان
آساني سان شامل ڪريو مڪمل-چوٽي لسٽ گروپن جي اندر اندر.
پينل سرنگ
ڪجھ ڊفالٽ پينل مواد هتي. 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 تي ويسٽيبولم
جوابي ايمبيڊ
برائوزرن کي اجازت ڏيو ته وڊيو يا سلائڊ شو جي طول و عرض کي طئي ڪرڻ جي بنياد تي انهن جي بلاڪ جي چوٽي جي بنياد تي هڪ اندروني تناسب ٺاهي جيڪا ڪنهن به ڊوائيس تي صحيح طور تي ماپي ويندي.
ضابطا سڌو سنئون لاڳو ٿين ٿا <iframe>, <embed>, <video>, and <object>عناصر؛ اختياري طور تي هڪ واضح نسلي ڪلاس استعمال ڪريو .embed-responsive-itemجڏهن توهان ٻين خاصيتن لاءِ اسٽائل سان ملائڻ چاهيو ٿا.
پرو-ٽيپ! frameborder="0"توهان کي توهان جي ايس ۾ شامل ڪرڻ جي ضرورت ناهي <iframe>جيئن اسان توهان جي لاء ان کي ختم ڪريون ٿا.
کوهه
ڊفالٽ چڱي طرح
هڪ عنصر تي هڪ سادي اثر جي طور تي استعمال ڪريو ان کي هڪ inset اثر ڏي.