آئیکنوگرافی، ڈراپ ڈاؤن، ان پٹ گروپس، نیویگیشن، الرٹس، اور بہت کچھ فراہم کرنے کے لیے بنائے گئے ایک درجن سے زیادہ دوبارہ قابل استعمال اجزاء۔
گلیفیکنز
دستیاب گلائف
Glyphicon Halflings سیٹ سے فونٹ کی شکل میں 250 سے زیادہ گلائف شامل ہیں۔ Glyphicons Halflings عام طور پر مفت میں دستیاب نہیں ہوتے ہیں، لیکن ان کے خالق نے انہیں Bootstrap کے لیے مفت دستیاب کرایا ہے۔ آپ کے شکریہ کے طور پر، ہم صرف یہ کہتے ہیں کہ جب بھی ممکن ہو آپ سے Glyphicons کا لنک شامل کریں۔
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon-لفافہ
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-موسیقی
glyphicon glyphicon-تلاش
glyphicon glyphicon-دل
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-صارف
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon بند
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon- ردی کی ٹوکری
glyphicon glyphicon-گھر
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-دہرائیں۔
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon- پرچم
glyphicon glyphicon-headphones
glyphicon glyphicon-volum-off
glyphicon glyphicon-volum-down
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-بک مارک
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
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-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-تصویر
glyphicon glyphicon-map-marker
glyphicon glyphicon-ایڈجسٹ
glyphicon glyphicon-tint
glyphicon glyphicon-ترمیم
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon - اقدام
glyphicon glyphicon-step-backward
glyphicon glyphicon-تیزی سے پیچھے کی طرف
glyphicon glyphicon-پسماندہ
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-آگے
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-Eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-سوال کا نشان
glyphicon glyphicon-info-sign
glyphicon glyphicon-اسکرین شاٹ
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-تیر-بائیں
glyphicon glyphicon-arrow-right
glyphicon glyphicon-ar-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-تحفہ
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-آنکھیں کھولنا
glyphicon glyphicon- آنکھ بند
glyphicon glyphicon-انتباہی-سائن
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-تبصرہ
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-سرٹیفکیٹ
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon- hand- right
glyphicon glyphicon- ہاتھ سے بائیں
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-ar-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-بریف کیس
glyphicon glyphicon-فل سکرین
glyphicon glyphicon-deshboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-دل خالی
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-USD
glyphicon glyphicon-gbp
glyphicon glyphicon کی ترتیب
glyphicon glyphicon-حروف تہجی کے لحاظ سے ترتیب دیں۔
glyphicon glyphicon-shart-by-alphabet-alt
glyphicon glyphicon- ترتیب بہ ترتیب
glyphicon glyphicon- ترتیب بہ ترتیب- Alt
glyphicon glyphicon-صفات کے لحاظ سے ترتیب دیں۔
glyphicon glyphicon-sort-by-atributes-alt
glyphicon glyphicon-غیر نشان زد
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collaps-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-ریکارڈ
glyphicon glyphicon-save
glyphicon glyphicon-اوپن
glyphicon glyphicon محفوظ شدہ
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-منتقلی
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-status
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-درخت پرنپتی
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon پیسٹ
glyphicon glyphicon- الرٹ
glyphicon glyphicon-equizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-night
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-بلیک بورڈ
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-Erease
glyphicon glyphicon-hourglass
glyphicon glyphicon - چراغ
glyphicon glyphicon- نقل
glyphicon glyphicon-piggy-bank
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-ice-lolly
glyphicon glyphicon-ice-lolly-چکھا۔
glyphicon glyphicon-تعلیم
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon- oil
glyphicon glyphicon-grain
glyphicon glyphicon- دھوپ کے چشمے
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-مثلث-دائیں
glyphicon glyphicon-مثلث-بائیں
glyphicon glyphicon-مثلث-نیچے
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-مینیو-بائیں
glyphicon glyphicon-menu- right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
استعمال کرنے کا طریقہ
کارکردگی کی وجوہات کی بناء پر، تمام آئیکنز کو بیس کلاس اور انفرادی آئیکن کلاس کی ضرورت ہوتی ہے۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو کہیں بھی لگائیں۔ مناسب پیڈنگ کے لیے آئیکن اور ٹیکسٹ کے درمیان جگہ چھوڑنا یقینی بنائیں۔
دوسرے اجزاء کے ساتھ مکس نہ کریں۔
آئیکن کلاسز کو براہ راست دوسرے اجزاء کے ساتھ جوڑا نہیں جا سکتا۔ انہیں ایک ہی عنصر پر دوسری کلاسوں کے ساتھ استعمال نہیں کیا جانا چاہئے۔ اس کے بجائے، ایک نیسٹڈ شامل کریں <span>اور آئیکن کلاسز کو پر لاگو کریں <span>۔
صرف خالی عناصر پر استعمال کے لیے
آئیکن کلاسز صرف ان عناصر پر استعمال کی جانی چاہئیں جن میں کوئی متنی مواد نہ ہو اور ان میں بچوں کے عناصر نہ ہوں۔
آئیکن فونٹ کا مقام تبدیل کرنا
بوٹسٹریپ فرض کرتا ہے کہ آئیکن فونٹ فائلیں ../fonts/ڈائرکٹری میں موجود ہوں گی، مرتب کردہ سی ایس ایس فائلوں کے نسبت۔ ان فونٹ فائلوں کو منتقل کرنے یا ان کا نام تبدیل کرنے کا مطلب ہے CSS کو تین طریقوں میں سے ایک میں اپ ڈیٹ کرنا:
@icon-font-pathاور/یا کو تبدیل کریں۔@icon-font-name متغیرات کو
جو بھی آپشن آپ کے مخصوص ڈیولپمنٹ سیٹ اپ کے مطابق ہو اسے استعمال کریں۔
قابل رسائی شبیہیں
معاون ٹیکنالوجیز کے جدید ورژن CSS سے تیار کردہ مواد کے ساتھ ساتھ مخصوص یونیکوڈ حروف کا بھی اعلان کریں گے۔ اسکرین ریڈرز میں غیر ارادی اور مبہم آؤٹ پٹ سے بچنے کے لیے (خاص طور پر جب شبیہیں خالصتاً سجاوٹ کے لیے استعمال کی جاتی ہیں)، ہم انہیں aria-hidden="true"خصوصیت کے ساتھ چھپاتے ہیں۔
اگر آپ معنی بیان کرنے کے لیے آئیکن کا استعمال کر رہے ہیں (صرف آرائشی عنصر کے طور پر)، اس بات کو یقینی بنائیں کہ اس معنی کو معاون ٹیکنالوجیز تک بھی پہنچایا گیا ہے – مثال کے طور پر، .sr-onlyکلاس کے ساتھ بصری طور پر چھپا ہوا اضافی مواد شامل کریں۔
اگر آپ کسی دوسرے متن کے بغیر کنٹرولز بنا رہے ہیں (جیسے <button>کہ صرف ایک آئیکن پر مشتمل ہے)، تو آپ کو کنٹرول کے مقصد کی شناخت کے لیے ہمیشہ متبادل مواد فراہم کرنا چاہیے، تاکہ یہ معاون ٹیکنالوجیز کے صارفین کو سمجھ میں آجائے۔ اس صورت میں، آپ aria-labelکنٹرول پر ہی ایک وصف شامل کر سکتے ہیں۔
مثالیں
انہیں بٹن، بٹن گروپس میں ٹول بار، نیویگیشن، یا پہلے سے منسلک فارم ان پٹ میں استعمال کریں۔
اس اشارے کو معاون ٹیکنالوجیز کے صارفین تک پہنچانے کے لیے اضافی متن کے ساتھ یہ بتانے کے لیے کہ یہ ایک خرابی کا پیغام ہے ایک الرٹ میں استعمال ہونے والا آئیکن ۔.sr-only
خرابی:درست ای میل کا اندراج کریں
ڈراپ ڈاؤن
لنکس کی فہرستیں دکھانے کے لیے ٹوگل ایبل، سیاق و سباق کا مینو۔ ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ انٹرایکٹو بنایا گیا ۔
مثال
ڈراپ ڈاؤن کے محرک اور ڈراپ ڈاؤن مینو کو اندر لپیٹیں .dropdown، یا کوئی اور عنصر جو اعلان کرتا ہے position: relative;۔ پھر مینو کا HTML شامل کریں۔
پہلے سے طے شدہ طور پر، ایک ڈراپ ڈاؤن مینو خود بخود 100% اوپر سے اور اس کے والدین کے بائیں جانب کھڑا ہوتا ہے۔ ڈراپ ڈاؤن مینو کو دائیں سیدھ میں لائیں .dropdown-menu-right۔.dropdown-menu
اضافی پوزیشننگ کی ضرورت ہو سکتی ہے۔
ڈراپ ڈاؤنز خود بخود سی ایس ایس کے ذریعے دستاویز کے عام بہاؤ کے اندر رکھے جاتے ہیں۔ اس کا مطلب ہے کہ والدین کی طرف سے کچھ خاص خصوصیات کے ساتھ ڈراپ ڈاؤنز کاٹا جا سکتا ہے overflowیا ویو پورٹ کی حدود سے باہر ظاہر ہو سکتا ہے۔ ان مسائل کو اپنے طور پر حل کریں جیسے ہی وہ پیدا ہوتے ہیں۔
فرسودہ .pull-rightسیدھ
v3.1.0 تک، ہم نے .pull-rightڈراپ ڈاؤن مینو کو فرسودہ کر دیا ہے۔ مینو کو دائیں سیدھ میں کرنے کے لیے، استعمال کریں .dropdown-menu-right۔ navbar میں دائیں سیدھ والے nav اجزاء مینو کو خود بخود سیدھ میں لانے کے لیے اس کلاس کے مکس ورژن کا استعمال کرتے ہیں۔ اسے اوور رائڈ کرنے کے لیے، استعمال کریں .dropdown-menu-left۔
ہیڈرز
کسی بھی ڈراپ ڈاؤن مینو میں کارروائیوں کے سیکشن کو لیبل کرنے کے لیے ایک ہیڈر شامل کریں۔
بٹن گروپ کے ساتھ ایک لائن پر بٹنوں کی ایک سیریز کو ایک ساتھ گروپ کریں۔ ہمارے بٹن پلگ ان کے ساتھ اختیاری JavaScript ریڈیو اور چیک باکس طرز کا رویہ شامل کریں ۔
بٹن گروپس میں ٹول ٹپس اور پاپ اوور خاص ترتیب کی ضرورت ہوتی ہے۔
ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .btn-group، آپ کو container: 'body'ناپسندیدہ ضمنی اثرات سے بچنے کے لیے آپشن کی وضاحت کرنا ہو گی (جیسے کہ ٹول ٹِپ یا پاپ اوور کے متحرک ہونے پر عنصر کا وسیع تر ہو جانا اور/یا اپنے گول کونوں کو کھو دینا)۔
درست کو یقینی بنائیں roleاور لیبل فراہم کریں۔
معاون ٹیکنالوجیز - جیسے اسکرین ریڈرز - یہ بتانے کے لیے کہ بٹنوں کی ایک سیریز کو گروپ کیا گیا ہے، ایک مناسب roleوصف فراہم کرنے کی ضرورت ہے۔ بٹن گروپس کے لیے، یہ ہوگا role="group"، جبکہ ٹول بار میں ایک ہونا چاہیے role="toolbar"۔
ایک استثناء گروپس ہیں جن میں صرف ایک کنٹرول ہوتا ہے (مثال کے طور پر عناصر کے ساتھ جواز والے بٹن گروپ<button> ) یا ڈراپ ڈاؤن۔
اس کے علاوہ، گروپس اور ٹول بارز کو ایک واضح لیبل دیا جانا چاہیے، کیونکہ زیادہ تر معاون ٹیکنالوجیز صحیح roleوصف کی موجودگی کے باوجود ان کا اعلان نہیں کریں گی۔ یہاں فراہم کردہ مثالوں میں، ہم استعمال کرتے ہیں aria-label، لیکن متبادل aria-labelledbyبھی استعمال کیے جا سکتے ہیں۔
بنیادی مثال
.btnاندر کے ساتھ بٹنوں کی ایک سیریز لپیٹیں .btn-group۔
بٹن ٹول بار
مزید پیچیدہ اجزاء کے لیے سیٹوں کو <div class="btn-group">a میں جوڑیں۔<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>عناصر کے ساتھ جائز بٹن گروپس کو استعمال کرنے کے لیے، آپ کو ہر بٹن کو بٹن گروپ میں لپیٹنا ہوگا ۔ زیادہ تر براؤزرز عناصر کے جواز کے لیے ہمارے CSS کو صحیح طریقے سے لاگو نہیں کرتے ہیں <button>، لیکن چونکہ ہم بٹن ڈراپ ڈاؤن کو سپورٹ کرتے ہیں، اس لیے ہم اس پر کام کر سکتے ہیں۔
بٹن ڈراپ ڈاؤنز
ڈراپ ڈاؤن مینو کو ایک کے اندر رکھ کر .btn-groupاور مناسب مینو مارک اپ فراہم کر کے کسی بھی بٹن کا استعمال کریں۔
پلگ ان انحصار
بٹن ڈراپ ڈاؤن کے لیے ڈراپ ڈاؤن پلگ ان کو بوٹسٹریپ کے آپ کے ورژن میں شامل کرنے کی ضرورت ہوتی ہے۔
سنگل بٹن ڈراپ ڈاؤنز
کچھ بنیادی مارک اپ تبدیلیوں کے ساتھ بٹن کو ڈراپ ڈاؤن ٹوگل میں تبدیل کریں۔
کسی بھی ٹیکسٹ بیسڈ کے پہلے، بعد میں یا دونوں طرف ٹیکسٹ یا بٹن شامل کرکے فارم کنٹرولز کو بڑھائیں <input>۔ .input-groupایک کے ساتھ استعمال کریں .input-group-addonیا .input-group-btnکسی ایک میں عناصر کو پہلے سے جوڑنے یا جوڑنے کے لیے .form-control۔
صرف متنی <input>s
یہاں عناصر کے استعمال سے گریز <select>کریں کیونکہ انہیں WebKit براؤزر میں مکمل طور پر اسٹائل نہیں کیا جا سکتا۔
<textarea>یہاں عناصر کے استعمال سے گریز کریں کیونکہ rowsبعض صورتوں میں ان کی صفت کا احترام نہیں کیا جائے گا۔
ان پٹ گروپس میں ٹول ٹپس اور پاپ اوور کو خاص ترتیب کی ضرورت ہوتی ہے۔
ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .input-group، آپ کو container: 'body'ناپسندیدہ ضمنی اثرات سے بچنے کے لیے آپشن کی وضاحت کرنی ہوگی (جیسے کہ ٹول ٹِپ یا پاپ اوور کے متحرک ہونے پر عنصر کا وسیع تر ہوتا جانا اور/یا اپنے گول کونوں کو کھو جانا)۔
دوسرے اجزاء کے ساتھ مکس نہ کریں۔
فارم گروپس یا گرڈ کالم کلاسز کو براہ راست ان پٹ گروپس کے ساتھ نہ ملا دیں۔ اس کے بجائے، ان پٹ گروپ کو فارم گروپ یا گرڈ سے متعلق عنصر کے اندر گھوںسلا کریں۔
ہمیشہ لیبلز شامل کریں۔
اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو اسکرین ریڈرز کو آپ کے فارمز میں پریشانی ہوگی۔ ان پٹ گروپس کے لیے، اس بات کو یقینی بنائیں کہ کوئی اضافی لیبل یا فعالیت معاون ٹیکنالوجیز تک پہنچائی جائے۔
استعمال کی جانے والی قطعی تکنیک (مرئی <label>عناصر، طبقے <label>کا استعمال کرتے ہوئے چھپے ہوئے عناصر ، یا , , یا انتساب کا استعمال ) اور کون سی اضافی معلومات پہنچانے کی ضرورت ہوگی اس بات پر منحصر ہے کہ آپ جس انٹرفیس ویجیٹ کو لاگو کر رہے ہیں اس کے مطابق مختلف ہوگی۔ اس سیکشن میں دی گئی مثالیں چند تجویز کردہ، کیس سے متعلق مخصوص نقطہ نظر فراہم کرتی ہیں۔.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
بنیادی مثال
ان پٹ کے دونوں طرف ایک ایڈ آن یا بٹن رکھیں۔ آپ ان پٹ کے دونوں طرف ایک بھی رکھ سکتے ہیں۔
ہم ایک ہی طرف متعدد ایڈ آنز ( .input-group-addonیا .input-group-btn) کو سپورٹ نہیں کرتے ہیں۔
ہم ایک ان پٹ گروپ میں متعدد فارم کنٹرولز کو سپورٹ نہیں کرتے ہیں۔
سائز کرنا
متعلقہ فارم سائزنگ کلاسز کو .input-groupخود میں شامل کریں اور اندر موجود مواد کا خود بخود سائز تبدیل ہو جائے گا — ہر عنصر پر فارم کنٹرول سائز کلاسز کو دہرانے کی ضرورت نہیں ہے۔
چیک باکسز اور ریڈیو ایڈونز
ٹیکسٹ کی بجائے کسی بھی چیک باکس یا ریڈیو آپشن کو ان پٹ گروپ کے ایڈون میں رکھیں۔
بٹن ایڈونز
ان پٹ گروپس میں بٹن کچھ مختلف ہوتے ہیں اور ان کے لیے ایک اضافی لیول کی ضرورت ہوتی ہے۔ اس کے بجائے .input-group-addon، آپ کو .input-group-btnبٹنوں کو لپیٹنے کے لیے استعمال کرنے کی ضرورت ہوگی۔ یہ پہلے سے طے شدہ براؤزر اسٹائلز کی وجہ سے درکار ہے جسے اوور رائڈ نہیں کیا جاسکتا۔
ڈراپ ڈاؤن کے ساتھ بٹن
منقسم بٹن
متعدد بٹن
اگرچہ آپ کے پاس ہر طرف صرف ایک ایڈ آن ہو سکتا ہے، آپ کے پاس ایک ہی کے اندر متعدد بٹن ہو سکتے ہیں .input-group-btn۔
نیوس
Bootstrap میں دستیاب Navs نے مشترکہ مارک اپ کیا ہے، جس کا آغاز بیس .navکلاس کے ساتھ ساتھ مشترکہ ریاستوں سے ہوتا ہے۔ ہر سٹائل کے درمیان سوئچ کرنے کے لیے موڈیفائر کی کلاسز کو تبدیل کریں۔
ٹیب پینلز کے لیے navs استعمال کرنے کے لیے JavaScript ٹیبز پلگ ان کی ضرورت ہوتی ہے۔
ٹیب ایبل ایریاز والے ٹیبز کے لیے، آپ کو ٹیبز JavaScript پلگ ان استعمال کرنا چاہیے ۔ مارک اپ کے لیے اضافی اور ARIA صفات کی بھی ضرورت ہوگی – مزید تفصیلات کے لیے roleپلگ ان کی مثال مارک اپ دیکھیں۔
نیویگیشن کے بطور استعمال ہونے والے navs کو قابل رسائی بنائیں
اگر آپ نیویگیشن بار فراہم کرنے کے لیے navs کا استعمال کر رہے ہیں تو، role="navigation"کے سب سے زیادہ منطقی پیرنٹ کنٹینر میں ایک شامل کرنا یقینی بنائیں، یا پوری نیویگیشن کے گرد <ul>ایک عنصر لپیٹ دیں۔ <nav>کردار کو <ul>خود میں شامل نہ کریں، کیونکہ یہ معاون ٹیکنالوجیز کے ذریعے اسے حقیقی فہرست کے طور پر اعلان کرنے سے روک دے گا۔
ٹیبز
نوٹ کریں کہ .nav-tabsکلاس کو .navبیس کلاس کی ضرورت ہے۔
کے ساتھ 768px سے زیادہ چوڑی اسکرینوں پر آسانی سے ٹیبز یا گولیوں کو ان کے والدین کے برابر چوڑائی بنائیں .nav-justified۔ چھوٹی اسکرینوں پر، نیوی لنکس اسٹیک ہوتے ہیں۔
جائز navbar nav لنکس فی الحال تعاون یافتہ نہیں ہیں۔
سفاری اور جوابی جائز نیوی
v9.1.2 کے مطابق، سفاری ایک ایسے بگ کی نمائش کرتا ہے جس میں آپ کے براؤزر کو افقی طور پر تبدیل کرنے سے جائز NAV میں رینڈرنگ کی خرابیاں پیدا ہوتی ہیں جو ریفریش ہونے پر صاف ہو جاتی ہیں۔ یہ بگ بھی جائز NAV مثال میں دکھایا گیا ہے ۔
Navbars ریسپانسیو میٹا اجزاء ہیں جو آپ کی ایپلیکیشن یا سائٹ کے لیے نیویگیشن ہیڈر کے طور پر کام کرتے ہیں۔ وہ موبائل ویوز میں منہدم ہونا شروع ہو جاتے ہیں (اور ٹوگل کیے جا سکتے ہیں) اور دستیاب ویو پورٹ کی چوڑائی بڑھنے کے ساتھ ہی افقی ہو جاتے ہیں۔
جائز navbar nav لنکس فی الحال تعاون یافتہ نہیں ہیں۔
بہتا ہوا مواد
چونکہ بوٹسٹریپ نہیں جانتا کہ آپ کے نیوبار میں موجود مواد کو کتنی جگہ کی ضرورت ہے، اس لیے آپ کو مواد کو دوسری قطار میں لپیٹنے میں مسائل کا سامنا کرنا پڑ سکتا ہے۔ اسے حل کرنے کے لیے، آپ یہ کر سکتے ہیں:
نوبار آئٹمز کی مقدار یا چوڑائی کو کم کریں۔
ریسپانسیو یوٹیلیٹی کلاسز کا استعمال کرتے ہوئے اسکرین کے مخصوص سائز پر کچھ نیوبار آئٹمز کو چھپائیں ۔
اس نقطہ کو تبدیل کریں جس پر آپ کا نیوبار منہدم اور افقی موڈ کے درمیان سوئچ کرتا ہے۔ متغیر کو حسب ضرورت بنائیں @grid-float-breakpointیا اپنا میڈیا استفسار شامل کریں۔
جاوا اسکرپٹ پلگ ان کی ضرورت ہے۔
اگر JavaScript غیر فعال ہے اور ویو پورٹ اتنا تنگ ہے کہ navbar ٹوٹ جاتا ہے، تو navbar کو پھیلانا اور مواد کو کے اندر دیکھنا ناممکن ہو جائے گا .navbar-collapse۔
جب ویو پورٹ سے تنگ ہوتا ہے تو نیوبار اپنے عمودی موبائل منظر میں سمٹ جاتا ہے ، اور جب ویو پورٹ کم از کم چوڑائی میں @grid-float-breakpointہوتا ہے تو اس کے افقی غیر موبائل منظر میں پھیل جاتا ہے ۔ @grid-float-breakpointنیوبار کے گرنے/پھیلنے پر کنٹرول کرنے کے لیے اس متغیر کو کم سورس میں ایڈجسٹ کریں۔ ڈیفالٹ قدر ہے 768px(سب سے چھوٹی "چھوٹی" یا "ٹیبلیٹ" اسکرین)۔
نیوبارز کو قابل رسائی بنائیں
کسی عنصر کا استعمال کرنے کو یقینی بنائیں <nav>یا، اگر کوئی زیادہ عام عنصر استعمال کر رہے ہیں جیسے کہ a <div>، ہر navbar میں a کا اضافہ کریں role="navigation"تاکہ اسے معاون ٹیکنالوجیز کے صارفین کے لیے ایک تاریخی خطے کے طور پر واضح طور پر شناخت کیا جا سکے۔
برانڈ کی تصویر
ایک کے لیے متن کو تبدیل کرکے navbar برانڈ کو اپنی تصویر سے تبدیل کریں <img>۔ چونکہ .navbar-brandاس کی اپنی پیڈنگ اور اونچائی ہے، اس لیے آپ کو اپنی تصویر کے لحاظ سے کچھ CSS کو اوور رائڈ کرنے کی ضرورت پڑ سکتی ہے۔
فارمز
مناسب عمودی سیدھ کے لیے فارم کے مواد کو اندر رکھیں .navbar-formاور تنگ ویو پورٹس میں منہدم رویہ۔ یہ فیصلہ کرنے کے لیے الائنمنٹ کے اختیارات استعمال کریں کہ یہ navbar مواد میں کہاں رہتا ہے۔
بطور ہیڈ اپ، .navbar-formاپنے کوڈ کا زیادہ تر حصہ .form-inlineمکسین کے ذریعے شیئر کرتا ہے۔ کچھ فارم کنٹرولز، جیسے ان پٹ گروپس، کو نیوبار کے اندر مناسب طریقے سے ظاہر ہونے کے لیے مقررہ چوڑائی کی ضرورت پڑ سکتی ہے۔
اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو اسکرین ریڈرز کو آپ کے فارمز میں پریشانی ہوگی۔ ان ان لائن فارمز کے لیے، آپ .sr-onlyکلاس کا استعمال کرتے ہوئے لیبلز کو چھپا سکتے ہیں۔ معاون ٹیکنالوجیز کے لیے لیبل فراہم کرنے کے مزید متبادل طریقے ہیں، جیسے کہ aria-label، aria-labelledbyیا titleوصف۔ اگر ان میں سے کوئی بھی موجود نہیں ہے تو، اسکرین ریڈرز placeholderاگر موجود ہو تو اس وصف کو استعمال کرنے کا سہارا لے سکتے ہیں، لیکن یاد رکھیں کہ placeholderلیبلنگ کے دیگر طریقوں کے متبادل کے طور پر استعمال کی سفارش نہیں کی جاتی ہے۔
بٹن
.navbar-btnکلاس کو ان <button>عناصر میں شامل کریں جو a میں نہیں رہتے ہیں <form>تاکہ انہیں navbar میں عمودی طور پر مرکز میں رکھیں۔
سیاق و سباق سے متعلق مخصوص استعمال
معیاری بٹن کلاسز کی طرح ، پر اور عناصر .navbar-btnکو استعمال کیا جا سکتا ہے ۔ تاہم، اندر موجود عناصر پر نہ تو معیاری بٹن کلاسز کا استعمال کیا جانا چاہیے ۔<a><input>.navbar-btn<a>.navbar-nav
متن
متن کے اسٹرنگ کو کسی عنصر کے ساتھ لپیٹیں .navbar-text، عام طور پر <p>مناسب لیڈنگ اور رنگ کے لیے ٹیگ پر۔
غیر نیوی لنکس
معیاری لنکس استعمال کرنے والے لوگوں کے لیے جو کہ باقاعدہ navbar نیویگیشن جزو کے اندر نہیں ہیں، .navbar-linkپہلے سے طے شدہ اور inverse navbar کے اختیارات کے لیے مناسب رنگ شامل کرنے کے لیے کلاس کا استعمال کریں۔
اجزاء کی سیدھ
.navbar-leftیا .navbar-rightیوٹیلیٹی کلاسز کا استعمال کرتے ہوئے NAV لنکس، فارم، بٹن، یا ٹیکسٹ کو سیدھ میں کریں ۔ دونوں کلاسیں مخصوص سمت میں ایک CSS فلوٹ شامل کریں گی۔ مثال کے طور پر، nav لنکس کو سیدھ میں <ul>لانے کے لیے، متعلقہ یوٹیلیٹی کلاس کے ساتھ ان کو الگ میں رکھیں۔
یہ کلاسز .pull-leftاور کے مکس-ایڈ ورژن ہیں .pull-right، لیکن ان کا دائرہ میڈیا کے سوالات کے لیے ہے تاکہ آلے کے سائز میں navbar اجزاء کو آسانی سے ہینڈل کیا جا سکے۔
متعدد اجزاء کو دائیں سیدھ میں لانا
.navbar-rightNavbars کی فی الحال متعدد کلاسوں کے ساتھ ایک حد ہے۔ .navbar-rightمواد کو مناسب طریقے سے جگہ دینے کے لیے، ہم آخری عنصر پر منفی مارجن استعمال کرتے ہیں ۔ جب اس کلاس کو استعمال کرنے والے متعدد عناصر ہوتے ہیں، تو یہ مارجن حسب منشا کام نہیں کرتے ہیں۔
جب ہم اس جزو کو v4 میں دوبارہ لکھ سکتے ہیں تو ہم اس پر دوبارہ غور کریں گے۔
اوپر سے طے شدہ
مرکز اور پیڈ نیوبار مواد .navbar-fixed-topمیں ایک .containerیا شامل کریں اور شامل کریں۔.container-fluid
باڈی پیڈنگ درکار ہے۔
فکسڈ نیوبار آپ کے دوسرے مواد کو اوورلے کر دے گا، جب تک کہ paddingآپ <body>. اپنی اقدار کو آزمائیں یا ذیل میں ہمارا ٹکڑا استعمال کریں۔ ٹپ: بطور ڈیفالٹ، navbar 50px اونچا ہے۔
بنیادی بوٹسٹریپ CSS کے بعد اس کو شامل کرنا یقینی بنائیں ۔
نیچے سے طے شدہ
مرکز اور پیڈ نیوبار مواد .navbar-fixed-bottomمیں ایک .containerیا شامل کریں اور شامل کریں۔.container-fluid
باڈی پیڈنگ درکار ہے۔
فکسڈ نیوبار آپ کے دوسرے مواد کو اوورلے کرے گا، جب تک کہ آپ paddingنچلے حصے میں شامل نہ کریں <body>۔ اپنی اقدار کو آزمائیں یا ذیل میں ہمارا ٹکڑا استعمال کریں۔ ٹپ: بطور ڈیفالٹ، navbar 50px اونچا ہے۔
بنیادی بوٹسٹریپ CSS کے بعد اس کو شامل کرنا یقینی بنائیں ۔
جامد ٹاپ
ایک مکمل چوڑائی والا navbar بنائیں جو صفحہ کے ساتھ اسکرول کر کے .navbar-static-topa .containeror .container-fluidto center اور pad navbar کے مواد کو شامل کر لے۔
کلاسوں کے برعکس .navbar-fixed-*، آپ کو پر کوئی پیڈنگ تبدیل کرنے کی ضرورت نہیں ہے body۔
الٹا نوبار
شامل کرکے navbar کی شکل میں ترمیم کریں .navbar-inverse۔
بریڈ کرمبس
نیویگیشنل درجہ بندی کے اندر موجودہ صفحہ کے مقام کی نشاندہی کریں۔
:beforeسی ایس ایس میں اور کے ذریعے الگ کرنے والے خود بخود شامل ہو جاتے ہیں content۔
اپنی سائٹ یا ایپ کے لیے صفحہ بندی کے لنکس کثیر صفحہ صفحہ بندی کے جزو، یا آسان پیجر متبادل کے ساتھ فراہم کریں ۔
پہلے سے طے شدہ صفحہ بندی
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">لنکس، Bootstrap navs، اور مزید میں شامل کر کے آسانی سے نئی یا بغیر پڑھی ہوئی اشیاء کو نمایاں کریں۔
جمبوٹرون کو پوری چوڑائی، اور گول کونوں کے بغیر بنانے کے لیے، اسے تمام .containers کے باہر رکھیں اور اس کے بجائے .containerاندر کا اضافہ کریں۔
صفحہ کا ہیڈر
h1صفحہ پر مواد کے حصوں کو مناسب طریقے سے خالی کرنے اور سیکشن کرنے کے لیے ایک سادہ شیل ۔ یہ h1پہلے سے طے شدہ smallعنصر کے ساتھ ساتھ زیادہ تر دیگر اجزاء (اضافی طرزوں کے ساتھ) استعمال کر سکتا ہے۔
ہیڈر کے لیے مثال صفحہ ہیڈر ذیلی متن
تھمب نیلز
بوٹسٹریپ کے گرڈ سسٹم کو تھمب نیل جزو کے ساتھ بڑھائیں تاکہ آسانی سے تصاویر، ویڈیوز، ٹیکسٹ وغیرہ کے گرڈ ڈسپلے کریں۔
اگر آپ مختلف اونچائیوں اور/یا چوڑائیوں کے تھمب نیلز کی Pinterest جیسی پیشکش تلاش کر رہے ہیں، تو آپ کو ایک فریق ثالث پلگ ان جیسے Masonry ، Isotope ، یا 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.
مٹھی بھر دستیاب اور لچکدار انتباہی پیغامات کے ساتھ عام صارف کی کارروائیوں کے لیے متعلقہ تاثرات کے پیغامات فراہم کریں۔
مثالیں
بنیادی انتباہی پیغامات کے لیے کسی بھی متن اور اختیاری برخاست کے بٹن کو لپیٹیں اور .alertچار سیاق و سباق کی کلاسوں میں سے ایک (مثلاً )۔.alert-success
کوئی ڈیفالٹ کلاس نہیں۔
انتباہات میں ڈیفالٹ کلاسز نہیں ہوتی ہیں، صرف بیس اور موڈیفائر کلاسز ہوتی ہیں۔ ڈیفالٹ گرے الرٹ زیادہ معنی نہیں رکھتا، لہذا آپ کو سیاق و سباق کی کلاس کے ذریعے ایک قسم کی وضاحت کرنے کی ضرورت ہے۔ کامیابی، معلومات، انتباہ، یا خطرے میں سے انتخاب کریں۔
بہت اچھے! آپ نے اس اہم انتباہی پیغام کو کامیابی سے پڑھ لیا۔
ہیڈ اپ! اس الرٹ کو آپ کی توجہ کی ضرورت ہے، لیکن یہ زیادہ اہم نہیں ہے۔
وارننگ! بہتر ہے اپنے آپ کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
اوہ سنیپ! کچھ چیزیں تبدیل کریں اور دوبارہ جمع کرانے کی کوشش کریں۔
مسترد کیے جانے والے انتباہات
.alert-dismissibleاختیاری اور بند بٹن شامل کرکے کسی بھی الرٹ پر بنائیں ۔
جاوا اسکرپٹ الرٹ پلگ ان کی ضرورت ہے۔
مکمل طور پر کام کرنے کے لیے، مسترد کیے جانے والے انتباہات، آپ کو الرٹس JavaScript پلگ ان کا استعمال کرنا چاہیے ۔
وارننگ! بہتر ہے اپنے آپ کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
تمام آلات پر مناسب برتاؤ کو یقینی بنائیں
ڈیٹا انتساب <button>کے ساتھ عنصر کا استعمال یقینی بنائیں ۔data-dismiss="alert"
الرٹس میں لنکس
.alert-linkکسی بھی الرٹ کے اندر تیزی سے مماثل رنگین لنکس فراہم کرنے کے لیے یوٹیلیٹی کلاس کا استعمال کریں ۔
سادہ لیکن لچکدار پروگریس بارز کے ساتھ ورک فلو یا کارروائی کی پیشرفت پر تازہ ترین تاثرات فراہم کریں۔
کراس براؤزر مطابقت
پروگریس بار اپنے کچھ اثرات حاصل کرنے کے لیے CSS3 ٹرانزیشن اور اینیمیشن کا استعمال کرتے ہیں۔ یہ خصوصیات Internet Explorer 9 اور Firefox کے نیچے یا پرانے ورژن میں تعاون یافتہ نہیں ہیں۔ اوپیرا 12 متحرک تصاویر کو سپورٹ نہیں کرتا ہے۔
مواد کی حفاظت کی پالیسی (CSP) مطابقت
اگر آپ کی ویب سائٹ میں مواد کی حفاظت کی پالیسی (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 اور اس سے نیچے میں دستیاب نہیں ہے۔
40% مکمل (کامیابی)
20% مکمل
60% مکمل (انتباہ)
80% مکمل (خطرہ)
متحرک
دائیں سے بائیں پٹیوں کو متحرک کرنے کے لیے میں .activeشامل کریں ۔ .progress-bar-stripedIE9 اور اس سے نیچے میں دستیاب نہیں ہے۔
45% مکمل
ڈھیر لگا ہوا
ایک سے زیادہ سلاخوں .progressکو اسٹیک کرنے کے لیے ایک ہی جگہ پر رکھیں۔
35% مکمل (کامیابی)
20% مکمل (انتباہ)
10% مکمل (خطرہ)
میڈیا اعتراض
مختلف قسم کے اجزاء (جیسے بلاگ کے تبصرے، ٹویٹس، وغیرہ) بنانے کے لیے تجریدی آبجیکٹ کی طرزیں جو متنی مواد کے ساتھ بائیں یا دائیں سیدھ والی تصویر کو نمایاں کرتی ہیں۔
ڈیفالٹ میڈیا
ڈیفالٹ میڈیا مواد کے بلاک کے بائیں یا دائیں طرف میڈیا آبجیکٹ (تصاویر، ویڈیو، آڈیو) دکھاتا ہے۔
میڈیا ہیڈنگ
Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
میڈیا ہیڈنگ
Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
نیسٹڈ میڈیا ہیڈنگ
Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
میڈیا ہیڈنگ
Cras sit amet nibh libero, in 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, in 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 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, in 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 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, in 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 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
نیسٹڈ میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
نیسٹڈ میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
نیسٹڈ میڈیا ہیڈنگ
Cras sit amet nibh libero, in 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
موربی لیو ریسس
پورٹا اے سی کنیکٹیٹور اے سی
ویسٹیبولم اور ایروز
بیجز
بیجز کے اجزاء کو کسی بھی فہرست گروپ آئٹم میں شامل کریں اور یہ خود بخود دائیں طرف کھڑا ہو جائے گا۔
14Cras justo odio
2Dapibus ac facilisis in
1موربی لیو ریسس
منسلک اشیاء
لسٹ آئٹمز کے بجائے اینکر ٹیگز استعمال کرکے لسٹ گروپ آئٹمز کو لنک کریں (اس کا مطلب ہے کہ والدین <div>کی بجائے <ul>)۔ ہر عنصر کے ارد گرد انفرادی والدین کی ضرورت نہیں ہے.
فہرست گروپ آئٹمز فہرست آئٹمز کے بجائے بٹن ہو سکتے ہیں (اس کا مطلب ہے کہ والدین <div>کی بجائے ایک <ul>)۔ ہر عنصر کے ارد گرد انفرادی والدین کی ضرورت نہیں ہے. یہاں معیاری .btnکلاسیں استعمال نہ کریں۔
غیر فعال اشیاء
غیر فعال ظاہر کرنے کے لیے اسے خاکستری .disabledکرنے کے لیے a میں شامل کریں ۔.list-group-item
اگرچہ ہمیشہ ضروری نہیں ہوتا ہے، بعض اوقات آپ کو اپنے DOM کو ایک باکس میں ڈالنے کی ضرورت ہوتی ہے۔ ان حالات کے لیے، پینل کا جزو آزمائیں۔
بنیادی مثال
پہلے سے طے شدہ طور پر، تمام .panelکام کچھ بنیادی بارڈر اور پیڈنگ کا اطلاق ہوتا ہے تاکہ کچھ مواد شامل ہو۔
بنیادی پینل کی مثال
سرخی کے ساتھ پینل
آسانی سے اپنے پینل میں ہیڈنگ کنٹینر شامل کریں .panel-heading۔ آپ پہلے سے طرز کی سرخی شامل کرنے کے لیے کلاس <h1>کے <h6>ساتھ کوئی بھی شامل کر سکتے ہیں ۔ .panel-titleتاہم، فونٹ کے سائز کو <h1>- کے <h6>ذریعے اوور رائیڈ کر دیا گیا .panel-headingہے۔
مناسب لنک کلرنگ کے لیے، لنکس کو ہیڈنگز میں رکھنا یقینی بنائیں .panel-title۔
بغیر عنوان کے پینل کی سرخی
پینل کا مواد
پینل کا عنوان
پینل کا مواد
فوٹر کے ساتھ پینل
بٹن یا ثانوی متن میں لپیٹیں .panel-footer۔ نوٹ کریں کہ پینل فوٹر سیاق و سباق کے تغیرات کا استعمال کرتے وقت رنگوں اور سرحدوں کے وارث نہیں ہوتے ہیں کیونکہ ان کا مقصد پیش منظر میں ہونا نہیں ہے۔
پینل کا مواد
سیاق و سباق کے متبادل
دوسرے اجزاء کی طرح، کسی بھی سیاق و سباق کی ریاستی کلاسز کو شامل کر کے آسانی سے پینل کو کسی خاص سیاق و سباق کے لیے زیادہ معنی خیز بنائیں۔
پینل کا عنوان
پینل کا مواد
پینل کا عنوان
پینل کا مواد
پینل کا عنوان
پینل کا مواد
پینل کا عنوان
پینل کا مواد
پینل کا عنوان
پینل کا مواد
میزوں کے ساتھ
.tableبغیر کسی ہموار ڈیزائن کے لیے پینل کے اندر کوئی بھی غیر سرحدی شامل کریں ۔ اگر کوئی ہے تو .panel-body، ہم جدول کے اوپری حصے میں ایک اضافی بارڈر شامل کرتے ہیں۔
پینل کی سرخی
کچھ ڈیفالٹ پینل مواد یہاں۔ Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id Nibh ultricies vehicula ut id elit.
#
پہلا نام
آخری نام
صارف نام
1
نشان
اوٹو
@mdo
2
جیکب
تھورنٹن
چربی
3
لیری
پرندہ
ٹویٹر
اگر کوئی پینل باڈی نہیں ہے تو، جزو بغیر کسی رکاوٹ کے پینل ہیڈر سے ٹیبل پر منتقل ہو جاتا ہے۔
کچھ ڈیفالٹ پینل مواد یہاں۔ Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id Nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
موربی لیو ریسس
پورٹا اے سی کنیکٹیٹور اے سی
ویسٹیبولم اور ایروز
قبول سرایت
براؤزرز کو ان کے شامل بلاک کی چوڑائی کی بنیاد پر ویڈیو یا سلائیڈ شو کے طول و عرض کا تعین کرنے کی اجازت دیں ایک اندرونی تناسب بنا کر جو کسی بھی ڈیوائس پر مناسب طریقے سے پیمانہ ہو۔
اصول براہ راست <iframe>, <embed>, <video>, اور <object>عناصر پر لاگو ہوتے ہیں۔ .embed-responsive-itemجب آپ دیگر صفات کے لیے اسٹائل سے مماثل ہونا چاہتے ہیں تو اختیاری طور پر ایک واضح ڈیسنڈنٹ کلاس استعمال کریں ۔
پرو ٹپ! frameborder="0"آپ کو اپنے ایس میں شامل کرنے کی ضرورت نہیں ہے <iframe>کیونکہ ہم اسے آپ کے لیے اوور رائیڈ کرتے ہیں۔
ویلز
پہلے سے طے شدہ اچھی طرح سے
کسی عنصر کو انسیٹ اثر دینے کے لیے اس پر ایک سادہ اثر کے طور پر کنویں کا استعمال کریں۔
دیکھو، میں کنویں میں ہوں!
اختیاری کلاسز
دو اختیاری ترمیمی کلاسوں کے ساتھ پیڈنگ اور گول کونوں کو کنٹرول کریں۔