بلما کے ساتھ شروع کریں

Sep 11, 2025
کيسے
Bulma
(تصویری کریڈٹ: بلما)

بلما کا استعمال کرتے ہوئے شروع کرنا چاہتے ہیں؟ آپ صحیح جگہ میں ہیں. بلما ایک سادہ فلیکس باکس گرڈ سسٹم کے ساتھ ایک مقبول سی ایس ایس فریم ورک ہے. یہ ایک ہلکے نقطہ نظر کو لے کر دوسرے فریم ورک سے مختلف ہے اور کسی بھی جاوا اسکرپٹ بھی شامل نہیں ہے - اس فیصلے کو مکمل طور پر ڈویلپر تک چھوڑ کر (دوسرے اختیارات کو تلاش کرنے کے لئے، ہمارے انتخاب کے لۓ دیکھتے ہیں بہترین سی ایس ایس فریم ورک ).

اس ٹیوٹوریل میں، ہم بلما انسٹال کرنے کے لئے کس طرح کا مظاہرہ کریں گے، اور اس کی مختلف کلاسوں کے ساتھ ایک ویب سائٹ بنانا. ثابت کرنے کے لئے کہ کس طرح ورسٹائل کلاسیں بلما میں ہیں، پورے ٹیوٹوریل پیج کو سی ایس ایس کی ایک واحد لائن لکھنے کے بغیر بنایا گیا ہے. دوسرے اختیارات چاہتے ہیں؟ ایک بہترین کوشش کریں ویب سائٹ بلڈر . اور اس بات کا یقین کرنے کے لئے کہ آپ کی سائٹ اس کی پوری کوشش کرتی ہے، حق کا انتخاب کریں ویب میزبانی سروس.

Generate flash sale

(تصویری کریڈٹ: مستقبل)

سی ایس ایس پیدا کریں شہر میں سب سے زیادہ گرم ویب ایونٹ ہے. 20-22 ستمبر سے آپ کوڈ کا استعمال کرتے ہوئے نصف قیمت کے لئے ایک ٹکٹ اٹھا سکتے ہیں فلیشسیل 5. مزید جاننے کے لئے تصویر پر کلک کریں.

01. شروع کرو

Bulma: get started

(تصویری کریڈٹ: بلما)

ایک نئی ڈائرکٹری بنائیں، اور اس کے اندر، ایک تخلیق کریں index.html. فائل. اس فائل کو ایک کوڈ ایڈیٹر میں کھولیں اور ایک آسان سٹارٹر ایچ ٹی ایم ایل دستاویز بنائیں، ایک ڈیوٹائپ ایچ ٹی ایم ایل کے ساتھ اور ایک ذمہ دار Viewport ٹیگ کے ساتھ. 

 اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ میٹا نام = "Viewport" مواد =
"چوڑائی = ڈیوائس چوڑائی، ابتدائی پیمانے = 1" اور جی ٹی؛
& lt؛ عنوان اور GT؛ صفحہ عنوان اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

02. بلما انسٹال

بلما کا استعمال کرتے ہوئے باکس ایک سی ایس ایس فائل کو شامل کرنے کے طور پر تیزی سے ہے. سی ڈی این کا استعمال کرتے ہوئے ایچ ٹی ایم ایل میں ایک لنک شامل کریں. اگر متغیرات کو تبدیل کرنا ضروری ہے اور فریم ورک پر زیادہ کنٹرول ہے، این پی ایم انسٹال بلما استعمال کیا جا سکتا ہے (دیکھیں مکمل دستاویزات ). مکمل تجربے کے لئے، فونٹ بہت اچھے 5 کو بھی شامل ہونا چاہئے. 

 & lt؛ لنک REL = "Stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt؛
& lt؛ سکرپٹ defer src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt؛ & lt؛ / script & gt؛

03. ایک صفحہ کی تعمیر

Bulma: hello world

(تصویری کریڈٹ: بلما)

جسم کے ٹیگ کے اندر، کلاس کے ساتھ ایک سیکشن عنصر اور ایک ڈیو بنائیں کنٹینر . کنٹینر کے اندر اندر، کلاس کے ساتھ H1 بنائیں عنوان پھر کلاس کے ساتھ ایک پیراگراف ذیلی عنوان . اب کے لئے، ان پٹ 'ہیلو ورلڈ' عنوان اور پیراگراف میں کچھ متن میں. اب ہمارے پاس بلما کے لئے بنیادی سٹارٹر ٹیمپلیٹ ہے. 

 اور ایل ٹی؛ سیکشن کلاس = "سیکشن" اور جی ٹی؛
& lt؛ ڈوی کلاس = "کنٹینر" اور جی ٹی؛
& lt؛ H1 کلاس = "عنوان" اور جی ٹی؛
ہیلو دنیا
& lt؛ / h1 & gt؛
& lt؛ p class = "subtitle" & gt؛
یہ بنیادی سٹارٹر ہے
بلما کے لئے سانچہ
& lt؛ / p & gt؛
& lt؛ / div & gt؛
& lt؛ / سیکشن اور GT؛

04. اوپر ہیرو بار بنائیں

پچھلے ایک کے اوپر، اور کلاس کے بجائے ایک نیا سیکشن بنائیں سیکشن ، اسے کلاس دو ہیرو . ہیرو کلاس کو مکمل چوڑائی بینر کی تخلیق کی اجازت دیتا ہے، اس کی اونچائی کو کنٹرول کرنے کے مختلف اختیارات کے ساتھ. اس نئے حصے کے اندر اندر کلاس کے ساتھ ایک ڈیوڈ بنائیں ہیرو جسم اور پھر اے کنٹینر یہ مواد منعقد کرے گا. 

 & lt؛ سیکشن کلاس = "ہیرو" اور جی ٹی؛
& lt؛ ڈوی کلاس = "ہیرو جسم" اور جی ٹی؛
& lt؛ div class = "کنٹینر" & gt؛ ... & lt؛ / div & gt؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛

05. عنوان اور ذیلی مضامین شامل کریں

کنٹینر ڈیو کے اندر، کلاسوں کے ساتھ H1 اور H2 ٹیگ شامل کریں عنوان اور ذیلی عنوان . یہ نوع ٹائپ کلاس ہیں جو ان کے مواد کے سائز میں اضافہ کریں گے. بلما جاننے کے لئے ہوشیار ہے جب ایک عنوان اور ذیلی عنوان مشترکہ ہے، اور انہیں ایک دوسرے کے قریب لے آئے گا.

06. رنگ کا ایک ٹکڑا شامل کریں

Bulma: colour

(تصویری کریڈٹ: بلما)

کلاس شامل کریں ہے پرائمری ہیرو سیکشن میں. یہ پس منظر پر بنیادی رنگ کو لاگو کرے گا، اور متن کو ہلکے مختلف قسم میں تبدیل کرے گا. بجائے پرائمری ، معلومات ، کامیابی ، انتباہ ، خطرہ ، روشنی اور اندھیرے بھی منتخب کیا جا سکتا ہے 

 اور ایل ٹی؛ سیکشن کلاس = "ہیرو ہے پرائمری" اور جی ٹی؛

07. مواد کو کالم میں تقسیم کریں

ویب سائٹ کے پہلے مواد کے علاقے میں دو کالموں میں تقسیم کیا جاتا ہے. کلاس سیکشن کے ساتھ ایک نیا حصہ بنائیں اور ایک کنٹینر شامل کریں. کالم قائم کرنے کے لئے، ایک ڈی وی ڈی کے ساتھ شامل کیا جاتا ہے کالم کلاس. والدین کنٹینر کے اندر ہر کالم شامل ہے. کالم خود کو دستیاب جگہ میں خود کو ایک چھوٹا سا خلا کے ساتھ مخصوص طور پر مخصوص جگہ میں جگہ لے جائے گا.

اگر آپ کو بہت سے مواد مل گئے ہیں، تو یقینی بنائیں کہ آپ اپنے اثاثے کو قابل اعتماد بادل اسٹوریج میں واپس لے جائیں. 

 اور ایل ٹی؛ سیکشن کلاس = "سیکشن" اور جی ٹی؛
& lt؛ ڈوی کلاس = "کنٹینر" اور جی ٹی؛
& lt؛ div class = "کالم ہے- ventered" & gt؛
& lt؛ div class = "کالم" & gt؛
...
& lt؛ / div & gt؛
& lt؛ div class = "کالم" & gt؛
...
& lt؛ / div & gt؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛
& lt؛ / سیکشن اور GT؛

08. ذمہ دار تصاویر بنائیں

Bulma: responsive images

(تصویری کریڈٹ: بلما)

دوسرا کالم ایک تصویر پر مشتمل ہوگا. تصویر کو ایک اعداد و شمار عنصر میں لپیٹ کریں، اور اگر ممکن ہو تو، تصویر کی پہلو تناسب کی شکل کو ایک طبقے دے. مثال کے طور پر، 16by9. استعمال کیا گیا ہے (دیکھیں دستیاب شرحوں کی مکمل فہرست ). 

 & lt؛ ڈوی کلاس = "کالم" اور جی ٹی؛
& lt؛ شکل کلاس = "تصویر IS-16BY9" اور GT؛
& lt؛ img src = "img / dog.jpg" & gt؛
& lt؛ / شکل اور جی ٹی؛
& lt؛ / div & gt؛

09. بٹن کے ساتھ کارروائی کا مشورہ

بٹن کی کلاس رنگا رنگ بٹن بناتا ہے اور لاگو کیا جا سکتا ہے & lt؛ a & gt؛ عناصر یا & lt؛ بٹن اور جی ٹی؛ فارموں میں عناصر. پہلے کالم میں دو بٹن شامل کریں اور ان کو رنگ موڈفائرز کو لاگو کریں. اگر ایک سے زیادہ بٹن کا استعمال کرتے ہوئے، کلاس کے ساتھ ایک ڈیو میں ان کو لپیٹ کریں بٹن ، جو خلا کو درست کرتا ہے اور کلاس کی درخواست ایک گروپ کے طور پر دیتا ہے. 

 اور ایل ٹی؛ ڈوی کلاس = "بٹن" اور جی ٹی؛
& lt؛ ایک کلاس = "بٹن IS-INFO" & GT؛
مزید جانیں اور ایل ٹی؛ / A & GT؛
& lt؛ ایک کلاس = "بٹن خطرہ ہے" اور GT؛
اب خریدیں & lt؛ / & gt؛
& lt؛ / div & gt؛

10. باکسڈ مواد بنائیں

Bulma: boxed content

(تصویری کریڈٹ: بلما)

تین کالم کے ساتھ صفحے کے نچلے حصے میں ایک نیا سیکشن شامل کریں. کالموں کے اندر، ایک باکس عنصر شامل ہے. باکس عناصر ان کے ارد گرد ایک سرحد کے ساتھ سادہ کنٹینرز ہیں جو انہیں صفحہ کے پس منظر سے الگ کر دیتے ہیں. 

 & lt؛ ڈوی کلاس = "کالم" اور جی ٹی؛
& lt؛ ڈوی کلاس = "باکس" اور جی ٹی؛
پرکھ
& lt؛ / div & gt؛
& lt؛ / div & gt؛

11. آئکن بکس کا استعمال کریں

بلما فونٹ بہت اچھے 5 کے ساتھ ضم کرتا ہے، لیکن تمام فونٹ لائبریریوں کے ساتھ مطابقت رکھتا ہے، اور سب سے زیادہ دستیاب شبیہیں کال کرنے کے لئے کلاس ہیں. ہر باکس کے اندر، ایک مواد کنٹینر شامل کریں، اس کے بعد کلاس کے ساتھ ایک اسپین عنصر آئکن . اسپین کے اندر، استعمال کریں & lt؛ i & gt؛ مطلوبہ کلاس کو مطلوبہ آئکن کے لئے کال کرنے کے عنصر. شبیہیں اسی طرح متن کے طور پر رنگ رہے ہیں. 

 اور ایل ٹی؛ ڈوی کلاس = "مواد" اور جی ٹی؛
& lt؛ اسپین کلاس = "آئکن" اور جی ٹی؛
& lt؛ i کلاس = "fas fa-lg fa-home
کیا ٹیکسٹ کامیابی "اور جی ٹی؛ & lt؛ / i & gt؛
& lt؛ / span & gt؛
& lt؛ div class = "عنوان ہے سائز 6" & gt؛ ... & lt؛ / div & gt؛
& lt؛ div class = "subtitle is-side-6" & gt؛ ... & lt؛ / div & gt؛
& lt؛ / div & gt؛

12. بولڈ

Bulma: Be bold

(تصویری کریڈٹ: بلما)

صفحے کے نچلے حصے میں ایک نیا دو کالم ہیرو سیکشن بنائیں IS- معلومات سیکشن میں کلاس. ایک دلچسپ اثر کے لئے، بھی لاگو ہوتا ہے ایک بولڈ اس سیکشن میں اس سیکشن کو ایک ٹھیک ٹھیک ہے. یہ ترمیم کرنے والے تمام رنگوں میں سے تمام سات کے ساتھ کام کرتا ہے.

13. سطح کو تبدیل کریں

سطحوں کو اس بات کا یقین کرنے کا ایک بڑا طریقہ ہے کہ عناصر عمودی طور پر قطار میں مرکوز ہیں. صفحے کے نچلے حصے میں ایک نیا سیکشن کے اندر، چار سطحوں کی اشیاء کے اندر سطح کی کلاس اور گھوںسلا کے ساتھ ایک ڈیو شامل کریں. کسی بھی مواد کو ایک سطح کی اشیاء کے اندر شامل کیا جاتا ہے عمودی طور پر منسلک کیا جائے گا. 

& lt؛ div class = "سطح" & gt؛
& lt؛ div class = "سطح کے آئٹم کے متن پر مبنی" & gt؛
...
& lt؛ / div & gt؛
& lt؛ div class = "سطح کے آئٹم کے متن پر مبنی" & gt؛
...
& lt؛ / div & gt؛
& lt؛ / div & gt؛

14. فارم شامل کریں اور کنٹرول کریں

صفحے کے نچلے حصے میں ایک فارم شامل کرنے کے لئے، کے ساتھ ایک نیا دو کالم ہیرو سیکشن بنائیں ہے پرائمری . اسے دو کالموں میں تقسیم کریں، اور دائیں کالم میں، ایک تخلیق کریں فیلڈ کلاس. فیلڈ کلاس کا استعمال کئی فارم آدانوں کے ساتھ مل کر استعمال کیا جاتا ہے، اس بات کو یقینی بنانا کہ وہ مناسب طریقے سے اسپیس ہیں. ہر ان پٹ کو ایک فرد میں بھی لپیٹ لیا جانا چاہئے .اختیار کلاس. 

 & lt؛ div class = "فیلڈ" & gt؛
& lt؛ div class = "کنٹرول ہے شبیہیں - بائیں
شبیہیں - دائیں "اور جی ٹی؛
& lt؛ ان پٹ کلاس = "ان پٹ" قسم = "ای میل"
پلیس ہولڈر = "آپ کا ای میل" اور جی ٹی؛
& lt؛ اسپین کلاس = "آئکن ہے
بائیں "& gt؛
& lt؛ i کلاس = "fas fa-envervelope" & gt؛ & lt؛ / i & gt؛
& lt؛ / span & gt؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛

15. صارفین کو رائے دیں

Bulma: feedback

(تصویری کریڈٹ: بلما)

ایک بار جب ایک فارم پیش کیا جاتا ہے، تو اسے صارفین کو ایک پیغام واپس آنا چاہئے تاکہ وہ جانیں کہ اگلے کیا ہوتا ہے. اگرچہ یہ پیغام ظاہر کیا جائے گا جب بلما کو کنٹرول کرنے کے قابل نہیں ہے، سامنے کے آخر میں پیغام کلاس کے ساتھ بنایا جا سکتا ہے. 

 & lt؛ آرٹیکل کلاس = "پیغام IS-INFO" & GT؛
& lt؛ ڈوی کلاس = "پیغام ہیڈر" اور جی ٹی؛
& lt؛ p & gt؛ آپ کا شکریہ! & lt؛ / p & gt؛
& lt؛ / div & gt؛
& lt؛ ڈوی کلاس = "پیغام جسم" اور جی ٹی؛
... & lt؛ / div & gt؛
& lt؛ / آرٹیکل اور جی ٹی؛

16. فوٹر شامل کریں

لچکدار فوٹر کلاس کسی بھی عنصر کو ایک صفحے کے نچلے حصے میں شامل کرنے کی اجازت دیتا ہے، کاپی رائٹ کی معلومات اور نیچے نیویگیشن کے لئے ایک جگہ فراہم کرنے کے ساتھ ساتھ ویب سائٹ پر ختم ہونے کی اجازت دیتا ہے. 

 اور ایل ٹی؛ فوٹر کلاس = "فوٹر" اور جی ٹی؛
& lt؛ div class = "مواد میں متن متنوع" & gt؛
& lt؛ p & gt؛ ... & lt؛ / p & gt؛
& lt؛ / div & gt؛
& lt؛ / فوٹر اور جی ٹی؛

17. متغیرات کو اپنی مرضی کے مطابق بنائیں

پروٹوٹائپ سے باہر زیادہ تر منصوبوں، ایک برانڈ ہدایات اور رنگوں کے ساتھ کام کرنے کی ضرورت ہوگی. اسی طرح، یہ کام کرنے کے لئے محفوظ ہے کہ ایک ڈیزائنر فونٹ، رنگوں یا بلما کے دیگر پہلوؤں کو تبدیل کرنے کی ضرورت ہوگی. بلما کا ایک بڑا حصہ یہ ہے کہ یہ مرضی کے مطابق اور ماڈیولر ہے. نہ صرف ماڈیولز کو منتخب طور پر درآمد کیا جاسکتا ہے، لیکن 415 ساس متغیر تک فریم ورک کے اندر تبدیل کیا جاسکتا ہے.

متغیرات کا استعمال کا مطلب یہ ہے کہ ایک نئے رنگ کی ترتیب کے طور پر بنیادی طور پر اس منصوبے کے لئے پورے بلما فریم ورک میں اس رنگ کو تبدیل کرے گا. اس کی ترتیب سب سے پہلے مشکل ہوسکتی ہے، لیکن ہدایات کا استعمال کیا گیا ہے تین مختلف طریقوں دستاویزات میں.

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 289 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 289 خریدیں یا یہاں سبسکرائب کریں .

مزید پڑھ:

  • 5 متاثر کن ویب ڈیزائن کیس اسٹڈیز
  • بہترین UI ڈیزائن کے اوزار
  • ماسٹر minimalist ویب سائٹ کے ڈیزائن

کيسے - انتہائی مشہور مضامین

پن اپ آرٹ کیسے بنائیں

کيسے Sep 11, 2025

پن اپ آرٹ کی ابتدا 19 ویں صدی کے آخر تک واپس آسکتی ہے، لیکن یہ 1940 اور 1950 کے دہائیوں میں زیادہ وسیع پیمانے پر �..

بہتر کردار انیمیشن تخلیق کرنے کے 10 طریقے

کيسے Sep 11, 2025

سال میں 3D انڈسٹری بڑھتی ہوئی سال کے سائز کے ساتھ، یہ یقینی بنانے کے لئے کہیں زیادہ اہم ہے کہ آپ کا کام بھیڑ ..

انفینٹی ڈیزائنر: قلم کے آلے کا استعمال کیسے کریں

کيسے Sep 11, 2025

یہ تھوڑا تعارف کی ضرورت ہے، لیکن انفینٹی ڈیزائنر میک / ونڈوز کے لئے دستیاب ویکٹر آرٹ ایڈیٹنگ کے اوزار کا ا�..

Monotype پرنٹنگ کے ساتھ شروع کریں

کيسے Sep 11, 2025

کبھی کبھی آپ کو آپ کے ساتھ چیزیں ہلانے کی ضرورت ہے پنسل ڈرائنگ ،..

وی رے کے ساتھ بہتر روشنی حاصل کرنے کے لئے کس طرح

کيسے Sep 11, 2025

افراتفری گروپ لیبز کے ڈائریکٹر کرس نیکولز کلیدی باتیں کر رہے ہیں ..

لذت مند چھوٹے چھوٹے پینٹ کیسے کریں

کيسے Sep 11, 2025

چھوٹے پینٹنگ کی اصل قرون وسطی کی عمر میں بہت پیچھے پھیل گئی ہے، جب چھوٹے..

تخلیقی ڈیزائن کو پورا کرنے کے راز راز

کيسے Sep 11, 2025

میرے ٹیوٹروں میں سے ایک نے مجھے بتایا کہ اگر وہ اپنی باقی زندگیوں کے لئے جیل میں بند کر دیا گیا تھا، تو اس ک..

آپ کے آرٹ کی معیار ڈیجیٹل کاپیاں بنائیں

کيسے Sep 11, 2025

آرٹ صرف تخلیق کرنے کے بارے میں نہیں ہے، یہ بھی اشتراک کرنے کے بارے میں ہے. ایک بار جب آپ نے ایک خوبصورت کام �..

اقسام