یہ مضمون بوٹسٹریپ بیجز کے استعمال کو ظاہر کرنے کے لیے درج ذیل نقطہ نظر کا احاطہ کرے گا:
- اضافی معلومات کے لیے بوٹسٹریپ بیج کا استعمال کیسے کریں؟
- سیاق و سباق کی معلومات کے لیے بوٹسٹریپ بیج کا استعمال کیسے کریں؟
- بوٹسٹریپ بیج میں کسٹم اسٹائلز کیسے شامل کریں؟
- بوٹسٹریپ بیج میں شبیہیں کیسے شامل کریں؟
- بوٹسٹریپ بیج کو دوسرے ماخذ سے کیسے جوڑیں؟
- بیجز کو گول کیسے بنایا جائے؟
- بوٹسٹریپ بیج کو کاؤنٹر کے طور پر کیسے استعمال کریں؟
بوٹسٹریپ بیجز کیا ہیں؟
بیج بنیادی اجزاء ہیں جو اشارے دکھانے کے لیے استعمال ہوتے ہیں۔ مثال کے طور پر، انہیں اطلاعات یا پیغامات کی تعداد دکھانے کے لیے عددی کاؤنٹر کے طور پر استعمال کیا جا سکتا ہے:
انہیں اضافی معلومات ظاہر کرنے کے لیے بھی استعمال کیا جا سکتا ہے، جیسا کہ دی گئی تصویر میں دکھایا گیا ہے:
اضافی معلومات کے لیے بوٹسٹریپ بیج کا استعمال کیسے کریں؟
اضافی معلومات کے طور پر استعمال کرنے کے لیے بوٹسٹریپ بیجز کو HTML عناصر میں شامل کیا جا سکتا ہے۔ مظاہرے کے لیے ذیل میں دی گئی مثال کو دیکھیں۔
مثال
اضافی معلومات کے لیے بوٹسٹریپ بیج استعمال کرنے کے لیے، سب سے پہلے:
- شامل کریں ' 'اور' ' عناصر.
- رکھیں ' 'عنصر کے ساتھ' بیج 'اور' بیج-* 'کلاسز. 'بیج-*' کلاس سے مراد مخصوص رنگ کے ساتھ بیج ہے:
< h6 > وظائف < مدت کلاس = 'بیج بیج-ثانوی' > نئی < / مدت >< / h6 >
یہ دیکھا جا سکتا ہے کہ متعلقہ عنوانات میں دو بیجز شامل کیے گئے ہیں:
سیاق و سباق کی معلومات کے لیے بوٹسٹریپ بیج کا استعمال کیسے کریں؟
بوٹسٹریپ بیجز کو متعلقہ معلومات فراہم کرنے کے لیے بھی استعمال کیا جا سکتا ہے جیسے ' بیج خطرہ ” بیج کو سرخ رنگ میں دکھاتا ہے اور اسے کچھ ناکام پیغامات جیسے منسوخ، غلط، یا مزید دکھانے کے لیے استعمال کیا جا سکتا ہے۔ ' بیج - کامیابی ” استعمال کیا جاتا ہے جہاں ہم کچھ کامیابی کا پیغام دکھانا چاہتے ہیں۔
مثال
زیر بحث منظر نامے کو سمجھنے کے لیے دیے گئے کوڈ کو دیکھیں:
< مدت کلاس = 'بیج بیج-خطرہ' >اکاؤنٹ کی تصدیق نہیں ہوئی< / مدت >< مدت کلاس = 'بیج بیج کی معلومات' >یہ بیج ہے< / مدت >
< مدت کلاس = 'بیج بیج وارننگ' >اکاؤنٹ زیر التواء کے لیے منظوری < / مدت >
< مدت کلاس = 'بیج بیج - کامیابی' >اکاؤنٹ کی تصدیق ہوگئی< / مدت >
آؤٹ پٹ
بوٹسٹریپ بیج میں کسٹم اسٹائلز کیسے شامل کریں؟
بوٹسٹریپ بیجز میں کچھ منفرد اسٹائل شامل کرنے کے لیے آپ CSS کا استعمال بھی کر سکتے ہیں۔ بہتر تفہیم کے لیے، نام کے ساتھ ایک کلاس ' اپنی مرضی کے مطابق ' کے اندر شامل کیا جاتا ہے ' ' عنصر. اس کے بعد، مندرجہ ذیل خصوصیات کو لاگو کیا جاتا ہے:
< مدت کلاس = 'بیج بیج خطرے کی حسب ضرورت' >اکاؤنٹ کی تصدیق نہیں ہوئی < / مدت >< مدت کلاس = 'بیج بیج معلومات حسب ضرورت' >یہ بیج ہے< / مدت >
< مدت کلاس = 'بیج بیج-انتباہی حسب ضرورت' >اکاؤنٹ زیر التواء کے لیے منظوری < / مدت >
< مدت کلاس = 'بیج بیج - کامیابی اپنی مرضی کے مطابق' >اکاؤنٹ کی تصدیق ہوگئی< / مدت >
سٹائل 'اپنی مرضی کے مطابق' کلاس
.اپنی مرضی کے مطابق {حرف کا سائز : 18px ;
فونٹ کا وزن : 100 ;
خط وقفہ کاری : 1px ;
بھرتی : 8px 15px ;
}
' .اپنی مرضی کے مطابق تک رسائی کے لیے استعمال کیا جاتا ہے اپنی مرضی کے مطابق 'کلاس. اس پر درج ذیل خصوصیات کا اطلاق ہوتا ہے۔
- ' حرف کا سائز فونٹ سائز کو ایڈجسٹ کرتا ہے۔
- ' فونٹ کا وزن فونٹ کی موٹائی بیان کرتا ہے۔
- ' خط وقفہ کاری ” حروف کے درمیان جگہ جوڑتا ہے۔
- ' بھرتی ' عنصر کے مواد کے ارد گرد جگہ فراہم کرتا ہے۔
آؤٹ پٹ
بوٹسٹریپ بیج میں شبیہیں کیسے شامل کریں؟
ہم بیجز میں مختلف شبیہیں بھی شامل کر سکتے ہیں۔ ایسا کرنے کے لیے، کئی کلاسیں ہیں جو اس مقصد کے لیے استعمال کی جا سکتی ہیں۔ مزید معلومات کے لیے، ملاحظہ کریں۔ فونٹ بہت اچھے ویب سائٹ
مثال
ایچ ٹی ایم ایل میں، ایک شامل کریں ' ' عنصر. اس عنصر کے اندر، آئکن کلاس داخل کرنے کے لیے ان لائن عنصر ' ' یا '' رکھیں:
< مدت کلاس = 'بیج بیج خطرے کی حسب ضرورت' > اکاؤنٹ کی تصدیق نہیں ہوئی۔< میں کلاس = 'دور فا ٹائم حلقہ' >< / میں >
< / مدت >
< مدت کلاس = 'بیج بیج - کامیابی اپنی مرضی کے مطابق' > اکاؤنٹ کی تصدیق ہو گئی۔
< میں کلاس = 'fas fa-user-check' >< / میں >
< / مدت >
آؤٹ پٹ
بوٹسٹریپ بیج کو دوسرے ماخذ سے کیسے جوڑیں؟
بوٹسٹریپ بیجز کو قابل کلک بنانے کے لیے، ' بیج 'HTML کے اندر کلاسز' ٹیگ کریں اور لنک شدہ صفحہ کا حوالہ فراہم کریں href ' وصف:
< a href = '#' کلاس = 'بیج بیج خطرے کی حسب ضرورت' >منسوخ کریں< / a >< a href = '#' کلاس = 'بیج بیج معلومات حسب ضرورت' >جمع کروائیں< / a >
آؤٹ پٹ
بیجز کو گول کیسے بنایا جائے؟
بیج کے کناروں کو مزید گول بنانے کے لیے، ایک کلاس شامل کریں ' بیج کی گولی ' یہ کلاس ایک بڑے کی حمایت کرتی ہے سرحدی رداس 'اور افقی' بھرتی خصوصیات:
< مدت کلاس = 'بیج بیج-گولی بیج-خطرہ اپنی مرضی کے مطابق' >اکاؤنٹ کی تصدیق نہیں ہوئی < / مدت >< مدت کلاس = 'بیج بیج-گولی بیج-انتباہی اپنی مرضی کے مطابق' >اکاؤنٹ زیر التواء کے لیے منظوری < / مدت >
< مدت کلاس = 'بیج بیج-گولی بیج- کامیابی اپنی مرضی کے مطابق' >اکاؤنٹ تصدیق شدہ < / مدت >
آؤٹ پٹ
بوٹسٹریپ بیج کو کاؤنٹر کے طور پر کیسے استعمال کریں؟
کاؤنٹر کے ساتھ بٹن بنانے کے لیے، ایک HTML شامل کریں “ <بٹن> 'ٹائپ کے ساتھ ٹیگ' بٹن 'اور اسے بٹن کلاسز تفویض کریں' بی ٹی این 'اور' btn-کامیابی ' پھر، شامل کریں ' کاؤنٹر لگانے کے لیے عنصر:
< بٹن قسم = 'بٹن' کلاس = 'btn btn-کامیابی' >اطلاعات < مدت کلاس = 'بیج بیج روشنی' > 4 < / مدت >
< / بٹن >
آؤٹ پٹ
یہ سب بوٹسٹریپ بیجز اور بوٹسٹریپ میں ان کے متعلقہ لیبلز کے بارے میں تھا۔
نتیجہ
بوٹسٹریپ ' بیج ویب سائٹ پر بیجز شامل کرنے کے لیے کلاس کا استعمال کیا جاتا ہے۔ مثال کے طور پر، کلاسز جیسے ' بیج خطرہ '،' بیج کی معلومات ”، اور مزید کا استعمال بیجز میں متعلقہ معلومات کو ان کے لیبل کے طور پر شامل کرنے کے لیے کیا جا سکتا ہے۔ بیجز میں شبیہیں شامل کرنے کے لیے کچھ کلاسیں لگائی جاتی ہیں، جیسے ' فاور فا ٹائم سرکل کراس سرکل آئیکن رکھنے کے لیے۔ اس پوسٹ نے بوٹسٹریپ بیجز اور لیبلز پر ایک جامع گائیڈ فراہم کیا ہے۔