الترحيل من Bootstrap إلى قُرْطُبَة
قُرْطُبَة تتشرّب مفاهيم Bootstrap المألوفة (الأصناف، نقاط التوقّف، الشبكة) لكنها تضيف بادئة q- وتُعيد التركيز على العربية والإسلام. هذه الخريطة تُسخّن الانتقال.
1. اختلافات جوهرية
| النقطة | Bootstrap | قُرْطُبَة |
|---|---|---|
| البادئة | بدون (btn) | q- (q-btn) |
| الاتجاه | RTL إضافة ثانوية | RTL أصلي بخصائص منطقية |
| الثيمات | متغيّرات Sass فقط | متغيّرات CSS وقت التشغيل + ثيمات جاهزة |
| التباين النصي | يدوي | محسوب تلقائياً (color-contrast) |
| المكوّنات الإسلامية | غير متوفرة | قرآن، هجري، صلاة، قبلة، زكاة… |
| الاعتماديات | Popper في بعض المكوّنات | صفر |
2. خريطة الأصناف (Class Mapping)
ابحث عن صنف Bootstrap واستبدله بنظيره في قُرْطُبَة.
| Bootstrap | قُرْطُبَة | ملاحظة |
|---|---|---|
container | q-container | عرض أقصى متجاوب |
row / col-* | q-row / q-col-* | شبكة CSS Grid بـ 12 عمود |
btn | q-btn | — |
btn-primary | q-btn-primary | + secondary, gold, ghost |
btn-outline-primary | q-btn-outline-primary | — |
btn-sm / btn-lg | q-btn-sm / q-btn-lg | — |
card | q-card | + q-card-body, q-card-title |
alert alert-success | q-alert q-alert-success | + warning, danger, info |
badge | q-badge | + q-badge-pill, q-badge-* |
form-control | q-form-control | + q-form-select, q-form-label |
form-check | q-form-check | + q-form-check-input/label |
navbar | q-navbar | + q-navbar-brand, q-navbar-nav |
nav-link active | q-nav-link q-active | active ← q-active |
table | q-table | — |
accordion | q-accordion | data-API مماثل |
progress / progress-bar | q-progress / q-progress-bar | — |
spinner-border | q-spinner | + q-spinner-grow |
modal | q-modal | — |
dropdown | q-dropdown | — |
toast | q-toast | — |
breadcrumb | q-breadcrumb | — |
text-muted | q-text-muted | — |
text-center | q-text-center | — |
d-flex | q-d-flex | + q-items-center, q-gap-* |
mt-3 / mb-2 | q-mt-3 / q-mb-2 | مقياس مسافة موحّد |
الحالة النشطة
Bootstrap يستخدم .active؛ قُرْطُبَة تستخدم .q-active لتفادي التعارض مع أدوات أخرى. انتبه لهذا عند الترحيل.3. مثال قبل وبعد
نفس البطاقة مكتوبة بالأسلوبين:
Bootstrap
<div class="card" style="max-width:18rem">
<div class="card-body">
<h5 class="card-title">عنوان</h5>
<p class="card-text text-muted">وصف.</p>
<a href="#" class="btn btn-primary">تفاصيل</a>
</div>
</div>قُرْطُبَة
<div class="q-card" style="max-width:18rem">
<div class="q-card-body">
<h5 class="q-card-title">عنوان</h5>
<p class="q-text-muted">وصف.</p>
<a href="#" class="q-btn q-btn-primary">تفاصيل</a>
</div>
</div>النتيجة
4. تغيير استدعاء JavaScript
<!-- Bootstrap -->
<script src="bootstrap.bundle.min.js"></script>
<!-- قُرْطُبَة (ملف واحد، صفر اعتماديات) -->
<script src="dist/js/qrtoba.js"></script>معظم الإضافات تعمل عبر Data-API بنفس منطق Bootstrap (مثل data-bs-toggle ↔ data-q-toggle).
خطوة إضافية للعرب
بعد الترحيل، فعّل ثيم قُرْطُبَة المناسب (data-q-theme="...") ومكوّنات الإسلام (القرآن، الهجري) التي لا نظير لها في Bootstrap — وهنا تظهر قوة الإطار فعلاً.5. ما بعد الترحيل
- راجع التوثيق الكامل لكل المكوّنات.
- تصفّح معرض الثيمات واختر هويتك.
- جرّب أكوادك في ساحة التجربة.