تعلم Bulma CSS في 5 دقائق - برنامج تعليمي للمبتدئين

Bulma هو إطار عمل CSS بسيط وأنيق وحديث يفضله الكثير من المطورين على Bootstrap. أنا شخصياً أعتقد أن Bulma لديها تصميم أفضل بشكل افتراضي ، كما أنها تبدو أكثر خفة في الوزن.

في هذا البرنامج التعليمي ، سأقدم لك مقدمة سريعة جدًا عن المكتبة.

لقد أنشأنا أيضًا دورة مجانية حول Bulma. اضغط هنا للتحقق من ذلك!

يمكنك النقر فوق الصورة للوصول إلى الدورة

وانشاء

يعد إعداد Bulma أمرًا سهلاً للغاية ، ويمكنك القيام بذلك بعدة طرق مختلفة ، سواء كنت تفضل NPM ، أو تنزيله مباشرة من المستندات ، أو باستخدام CDN. سنقوم فقط بربط CDN من ملف HTML الخاص بنا ، مثل هذا:

سيتيح لنا ذلك الوصول إلى فصول Bulma. وهذا في الواقع كل ما يمثله Bulma - مجموعة من الفصول.

الصفات التعريفية

أول شيء يجب أن تتعلمه عن Bulma هو فئات التعديل. تسمح لك هذه بتعيين أنماط بديلة لجميع عناصر Bulma تقريبًا. كلها تبدأ بـ is-*أو has-*، ثم تستبدلها *بالنمط الذي تريده.

لفهم هذا المفهوم بشكل صحيح ، لنبدأ بالنظر إلى الأزرار.

أزرار

لتحويل زر عادي إلى زر Bulma ، سنعطيه ببساطة فئة button.

Click here 

مما ينتج عنه النمط التالي:

كما ترى ، لديها تصميم مسطح جميل بشكل افتراضي. لتغيير التصميم ، سنستخدم معدّلات Bulma. لنبدأ بجعل الزر أكبر وأخضر وزوايا دائرية:

Click here 

هذه النتيجة هي زر جميل المظهر:

يمكنك أيضًا استخدام المعدِّلات للتحكم في حالة الأزرار. دعنا ، على سبيل المثال ، نضيف الفئة is-focusedالتي تضيف حدًا حولها:

أخيرًا ، لنستخدم أيضًا أحد has-*المعدلات. تتحكم هذه عادةً في ما بداخل العنصر. في حالتنا ، النص. دعنا نضيف has-text-weight-bold.

ها هي النتيجة:

أوصيك باللعب مع مجموعات من الفئات المختلفة لفهم مدى مرونة هذا النظام. التركيبات تكاد لا تنتهي. تحقق من قسم الأزرار في المستندات لمزيد من المعلومات.

الأعمدة

يكمن جوهر أي إطار عمل CSS في كيفية حل الأعمدة ، حيث أن ذلك وثيق الصلة بكل موقع ويب تقوم بإنشائه على الإطلاق. يعتمد Bulma على Flexbox ، لذلك من السهل جدًا إنشاء أعمدة. لنقم بإنشاء صف بأربعة أعمدة.

 First column Second column Third column Fourth column 

أولاً ، نقوم بإنشاء وعاء به فئة من columns، ثم نعطي كل طفل فصلًا من column. ينتج عنه ما يلي:

لقد أضفت أيضًا حدًا حول الأعمدة لجعلها أكثر وضوحًا.

لقد أضفت أيضًا حدًا حول الأعمدة لجعلها أكثر وضوحًا.

لاحظ أنه يمكنك إضافة أي عدد تريده من الأعمدة. يعتني Flexbox بتقسيم المساحة بالتساوي بينهما.

لإعطاء ألوان الأعمدة ، يمكننا استبدال النص الموجود بداخلها بامتداد

علامة ، ومنحها notificationفئة ومعدِّل is-*. مثل هذا على سبيل المثال:

العمود الأول

دعونا نفعل ذلك باستخدام is-info، is-success، is-warningو is-dangerمعدلات الذي النتائج في ما يلي:

يهدف notificationالفصل في الواقع إلى تنبيه المستخدمين بشأن شيء ما ، حيث يتيح لك ملء الخلفية بلون باستخدام is-*المعدِّلات. هنا تعمل بشكل جيد لفصل الأعمدة.

يمكننا أيضًا التحكم بسهولة في عرض العمود. دعنا نضيف is-halfالمعدل إلى العمود الأخضر.

مما ينتج عنه احتلال العمود الثاني الآن نصف العرض ، بينما يشغل الثلاثة الآخر ثلث النصف المتبقي لكل منهم.

فيما يلي الخيارات التي يمكنك استخدامها للتحكم في عرض الأعمدة:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

بطل

أخيرًا ، دعنا نتعلم أيضًا كيفية إنشاء بطل في Bulma. سنستخدم الدلالي ، وإعطائها فئة heroو is-infoلاعطائها بعض اللون. نحتاج أيضًا إلى إضافة طفل مع الفصل hero-body.

من أجل جعل هذا البطل يفعل شيئًا ذا مغزى ، سنضيف عنصر حاوية داخل الجسم ونضيف عنوانًا وعنوان فرعيًا.

Primary title

Primary subtitle

الآن بدأت تبدو جيدة! إذا كنا نريد أن تكون أكبر، يمكننا ببساطة إضافة is-mediumعلى العلامة نفسها.

 ... 

وهذا كل شيء!

لقد حصلت الآن على طعم أساسي لكيفية عمل بولما. وأفضل جزء هو أن بقية المكتبة بديهية وسهلة مثل المفاهيم التي رأيتها حتى الآن. لذلك إذا فهمت هذا ، فستفهم بقية الأمر دون مشاكل.

تأكد من إطلاعك على دورة Bulma المجانية على Scrimba إذا كنت تريد معرفة المزيد!

شكرا للقراءة! اسمي بير بورجن ، أنا المؤسس المشارك لـ Scrimba - أسهل طريقة لتعلم البرمجة. يجب عليك التحقق من المعسكر التدريبي لتصميم الويب سريع الاستجابة إذا كنت تريد تعلم كيفية إنشاء موقع ويب حديث على مستوى احترافي.