یہ مضمون آپ کو ہدایت دے گا:
- بوٹسٹریپ میں بٹن کیسے بنائیں؟
- بوٹسٹریپ میں آؤٹ لائن بٹن کیسے بنائیں؟
- بوٹسٹریپ بٹن کے سائز کو کیسے ایڈجسٹ کریں؟
- بوٹسٹریپ میں بلاک لیول کا بٹن کیسے بنایا جائے؟
- بوٹسٹریپ میں ایکٹو اسٹیٹ بٹن کیسے بنائیں؟
- بوٹسٹریپ میں غیر فعال اسٹیٹ بٹن کیسے بنائیں؟
بوٹسٹریپ میں بٹن کیسے بنائیں؟
بوٹسٹریپ ' بی ٹی این بٹن بنانے کے لیے کلاس کا استعمال کیا جاتا ہے۔ اسٹائل والے بٹنوں کو شامل کرنے کے لیے، آپ ' بی ٹی این 'کلر کلاس کے ساتھ کلاس، جیسے' btn-کامیابی سبز بٹن بنانے کے لیے۔
ایچ ٹی ایم ایل میں، ' <بٹن> '،' '، اور ' 'قسم کے ساتھ ٹیگ' بٹن بٹن بنانے کے لیے استعمال کیا جاتا ہے۔ ' بی ٹی این کلاس میں پہلے سے طے شدہ اسٹائل ہے جو بٹن کے عناصر میں بنیادی اسٹائل کا اضافہ کرتی ہے۔
واضح تصور کے لیے، نیچے دی گئی مثال کو دیکھیں۔
مثال
ایچ ٹی ایم ایل فائل میں، مختلف ٹیگز استعمال کرکے بٹن بنانے کے لیے درج ذیل مراحل پر عمل کریں:
- شامل کریں ' <بٹن> 'اور' ' عناصر اور انہیں تفویض کریں ' بی ٹی این 'اور' بی ٹی این پرائمری 'کلاسز.
- پھر، ایک شامل کریں ' 'قسم کے ساتھ ٹیگ کریں' بٹن ' اسے تفویض کریں ' بی ٹی این 'اور' btn-کامیابی ” اسٹائل کرنے کے لیے پہلے دو بٹن نیلے کے طور پر، اور تیسرے کو سبز کے طور پر:
< a کلاس = 'btn btn-پرائمری' href = '#' > کھولیں۔ < / a >
< ان پٹ قسم = 'بٹن' کلاس = 'btn btn-کامیابی' قدر = 'تلاش' >
آؤٹ پٹ
بوٹسٹریپ میں آؤٹ لائن بٹن کیسے بنائیں؟
بٹن کی خاکہ شامل کرنے کے لیے، بوٹسٹریپ ' btn-outline-* کلاس استعمال کیا جاتا ہے۔ اس کی ترکیب میں، ' * ” یہاں خاکہ رنگ کی نمائندگی کرتا ہے۔ مثال کے طور پر، ' btn-آؤٹ لائن-خطرہ 'سرخ خاکہ رکھتا ہے،' btn-outline-primary ” نیلی خاکہ سیٹ کرتا ہے، اور مزید۔
ذیل میں دیئے گئے کوڈ کا تجزیہ کریں:
< بٹن قسم = 'بٹن' کلاس = 'btn btn-آؤٹ لائن-پرائمری' >اگلا< / بٹن >< بٹن قسم = 'بٹن' کلاس = 'btn btn-آؤٹ لائن-خطرہ' >منسوخ کریں< / بٹن >
< بٹن قسم = 'بٹن' کلاس = 'btn btn-آؤٹ لائن-کامیابی' >کامیابی< / بٹن >
یہ دیکھا جا سکتا ہے کہ ' اگلے ' بٹن پر نیلے رنگ کا خاکہ ہے، ' منسوخ کریں۔ سرخ خاکہ کے ساتھ بٹن، اور ' کامیابی ” بٹن کو سبز خاکہ کے ساتھ اسٹائل کیا گیا ہے:
بوٹسٹریپ بٹن کے سائز کو کیسے ایڈجسٹ کریں؟
بٹن کے سائز کو ایڈجسٹ کرنے کے لیے کچھ بوٹسٹریپ کلاسز کا اطلاق ہوتا ہے، جیسے:
- ' btn-lg ایک بڑا بٹن بنانے کے لیے کلاس کا اطلاق ہوتا ہے۔ یہ کلاس فونٹ کا سائز اور پیڈنگ بڑھا سکتی ہے۔
- ' btn-md ایک درمیانے سائز کا بٹن بناتا ہے۔
- ' btn-sm ایک چھوٹا بٹن بناتا ہے۔
مثال
اب، ہم مختلف سائز اور خود وضاحتی ناموں کے ساتھ تین بٹن بنائیں گے:
< بٹن قسم = 'بٹن' کلاس = 'btn btn-ثانوی btn-lg' >بڑا< / بٹن >< بٹن قسم = 'بٹن' کلاس = 'btn btn-انتباہ btn-md' درمیانی < / بٹن >
< بٹن قسم = 'بٹن' کلاس = 'btn btn-خطرہ btn-sm' >چھوٹا< / بٹن >
آؤٹ پٹ
بوٹسٹریپ میں بلاک لیول کا بٹن کیسے بنایا جائے؟
بلاک سطح کے بٹن وہ ہیں جو پوری چوڑائی کے سائز کو رکھتے ہیں۔ بلاک سطح کے بٹن بنانے کے لیے، ' btn-بلاک 'کلاس کو مندرجہ ذیل طور پر استعمال کیا جاتا ہے۔
< بٹن قسم = 'بٹن' کلاس = 'بی ٹی این بی ٹی این وارننگ بی ٹی این بلاک' > بٹن< / بٹن >< بٹن قسم = 'بٹن' کلاس = 'btn btn-ثانوی btn-بلاک' > بٹن< / بٹن >
آؤٹ پٹ
بوٹسٹریپ میں ایکٹو اسٹیٹ بٹن کیسے بنائیں؟
فعال ریاست کے بٹن ان بٹنوں کا حوالہ دیتے ہیں جو فی الحال فعال ہیں۔ یہ بٹن معمول سے قدرے گہرے ہیں۔ ایسے بٹن بنانے کے لیے بوٹسٹریپ ' فعال 'کلاس استعمال کیا جاتا ہے.
مثال
نیچے کا کوڈ دو بٹن بناتا ہے۔ پہلا معمول کی حالت میں ہے جبکہ دوسرا '' کے ساتھ لگایا جاتا ہے۔ فعال کلاس:
< بٹن قسم = 'بٹن' کلاس = 'btn btn - کامیابی' >کامیابی< / بٹن >< بٹن قسم = 'بٹن' کلاس = 'btn btn - کامیابی فعال' >کامیابی< / بٹن >
آؤٹ پٹ
بوٹسٹریپ میں غیر فعال اسٹیٹ بٹن کیسے بنائیں؟
غیر فعال ریاست کے بٹن ان بٹنوں کا حوالہ دیتے ہیں جو ناقابل استعمال اور ناقابل استعمال ہیں۔ بوٹسٹریپ میں، ' معذور ' کلاس کا استعمال ایک غیر فعال اسٹیٹ بٹن بنانے کے لیے کیا جاتا ہے۔ ' معذور اس مقصد کے لیے ” وصف بھی استعمال کیا جا سکتا ہے۔
مثال
ذیل میں دی گئی مثال کو دیکھیں:
- پہلا بٹن غیر فعال حالت میں نہیں ہے۔
- دوسرا استعمال کرتا ہے ' معذور ایک معذور اسٹیٹ بٹن بنانے کے لیے کلاس۔
- تیسرا استعمال کرتا ہے ' معذور ' وصف:
< بٹن قسم = 'بٹن' کلاس = 'btn btn-کامیابی کو غیر فعال کر دیا گیا' >کامیابی< / بٹن >
< بٹن قسم = 'بٹن' کلاس = 'btn btn - کامیابی' غیر فعال> کامیابی< / بٹن >
آؤٹ پٹ
ہم نے CSS میں بوٹسٹریپ بٹنوں اور ان کے اسٹائل سے متعلق مختلف پہلوؤں کا احاطہ کیا ہے۔
نتیجہ
' بی ٹی این ایک سادہ ڈیزائن کے ساتھ بوٹسٹریپ بٹن بنانے کے لیے کلاس کا استعمال کیا جاتا ہے۔ رنگین اور آؤٹ لائن بٹن بنانے کے لیے، ' btn-* 'اور' btn-outline-* 'کلاسوں کا استعمال کیا جاتا ہے جہاں' * کسی بھی رنگ کی کلاس کی علامت ہے۔ مثال کے طور پر، ' btn-انتباہ 'پیلا بٹن بناتا ہے،' btn-outline-انتباہ ” ایک پیلے رنگ کا خاکہ والا بٹن بناتا ہے، اور بہت کچھ۔ بٹنوں کو فعال یا غیر فعال کرنے کے لیے، بالترتیب 'فعال' اور 'غیر فعال' کلاسز کا اطلاق ہوتا ہے۔ اس پوسٹ نے بوٹسٹریپ بٹنوں پر ایک جامع گائیڈ فراہم کیا ہے۔