ورقة مساعدة لإطار العمل Bulma CSS

Bulma Bulma هو إطار عمل CSS حديث ومفتوح المصدر مبني بالكامل على تقنية Flexbox.

نقاط التوقف المتجاوبة (Responsive Breakpoints)

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• الهاتف المحمول: حتى 768 بكسل
• الجهاز اللوحي: من 769 بكسل
• سطح المكتب: من 1024 بكسل
• الشاشات العريضة: من 1216 بكسل
• الشاشات فائقة الدقة (FullHD): من 1408 بكسل

---

نظام شبكة الأعمدة (Columns Grid)

قم بتغليف عناصر .column الفرعية داخل حاوية مرنة تحمل فئة .columns:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

معدلات عرض الأعمدة

<div class="column is-half">نصف العرض</div>
<div class="column is-one-third">ثلث العرض</div>
<div class="column is-three-quarters">ثلاثة أرباع العرض</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

المعدلات الأساسية (Core Modifiers)

الألوان

• .is-primary: فيروزي (Turquoise)
• .is-link: أزرق (Blue)
• .is-info: سماوي (Cyan)
• .is-success: أخضر (Green)
• .is-warning: أصفر (Yellow)
• .is-danger: أحمر (Red)

الأحجام

• .is-small
• .is-normal
• .is-medium
• .is-large

الحالات

• .is-outlined: خلفية شفافة مع حدود ملونة
• .is-loading: مؤشر تحميل متحرك مدمج
• .is-disabled: معطل بصريا

---

مساعدات الطباعة والخطوط

أحجام الخطوط

المحاذاة وتحويل النصوص

• .has-text-centered: محاذاة في المنتصف
• .has-text-left: محاذاة إلى اليسار
• .has-text-right: محاذاة إلى اليمين
• .has-text-justified: ضبط النص
• .is-capitalized: حرف كبير لأول حرف من كل كلمة
• .is-lowercase: أحرف صغيرة بالكامل
• .is-uppercase: أحرف كبيرة بالكامل

---

حاوية تنسيق المحتوى (WYSIWYG)

استخدم الفئة .content لتنسيق محتوى نصوص markdown أو محتوى CMS للمستخدم:

<div class="content">
  <h1>العنوان الرئيسي</h1>
  <p>فقرة قياسية مع ضبط قياس الخط الطباعي التلقائي.</p>
  <ul>
    <li>عنصر القائمة النقطية 1</li>
    <li>عنصر القائمة النقطية 2</li>
  </ul>
</div>