تصميم مواقع ويب تفاعلية باستخدام Bootstrap

Bootstrap هو إطار عمل HTML وCSS وJavaScript شائع ومجاني لتطوير مواقع الويب التفاعلية والمتنقلة. ويتضمن إطار العمل قوالب HTML و CSS تفاعلية للأزرار والجداول والتنقل ودوارات الصور والعناصر الأخرى التي يمكنك استخدامها في صفحة الويب الخاصة بك. كما تتوفر بعض مكونات JavaScript الإضافية، مما يوفر للمطورين من ذوي المعرفة الأساسية بالتعليمات البرمجية تطوير مواقع الويب التفاعلية بشكل أكبر.

يتيح لك Dreamweaver إنشاء مستندات Bootstrap وكذلك تحرير صفحات الويب الحالية التي تم إنشاؤها باستخدام Bootstrap. وسواءٌ كانت ملفات Bootstrap تم تصميمها بالكامل أو كانت عملية التصميم قيد التنفيذ، يمكنك تحريرها في Dreamweaver ليس لتحرير التعليمات البرمجية فحسب، بل لاستخدام ميزات التحرير المرئية أيضًا مثل التحرير "بطريقة العرض Live" ومصمم CSS المرئي واستعلامات الوسائط المرئية وExtract لإجراء تغييرات في التصميم.

استخدم الشبكات المرنة في Dreamweaver. كيف يمكنني البدء في استخدام Bootstrap؟

عندما قمت بإنشاء مستندات الشبكة المرنة، جعل Dreamweaver صفحات الويب الخاصة بك تفاعلية من خلال تطبيق الفئات المناسبة بشكل تلقائي. كل ما عليك القيام به هو التركيز على المحتوى الخاص بك وتحديد كيفية إعادة تدفقه بشكل مختلف.

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

يدعم Dreamweaver حاليًا الإصدارين 3.4.1 و4.4.1 من Bootstrap:

"يتضمن Bootstrap 3.4.1 نظام شبكة مرنة تفاعلي على الجوال والذي يعمل على تغيير حجم 12 عمودًا لتناسب الجهاز أو زيادات حجم إطار العرض. كما يتضمن فئات معرفة مسبقًا لخيارات تخطيط سهلة، وكذلك فئات Mixin فعالة لإنشاء تخطيطات أكثر دلالية." - وثائق Bootstrap.

"يشمل Bootstrap 4.4.1، الذي تم عمل تغييرات كبيرة به، شبكة مربعات قوية للأجهزة الجوالة لإنشاء تخطيطات بجميع الأشكال والأحجام بفضل نظام الاثني عشر عمودًا، والطبقات الافتراضية التفاعلية الخمس، ومتغيرات وفئات Mixin في Sass، وعشرات الفئات المحددة مسبقًا." - وثائق Bootstrap.

لبدء استخدام مستندات Bootstrap في Dreamweaver، جرّب استخدام قوالب بدء تشغيل Bootstrap. يتضمن Dreamweaver مجموعة من القوالب التي تهدف إلى الأنواع المختلفة من مواقع الويب التي قد تحتاج إلى إنشائها، على سبيل المثال، التجارة الإلكترونية أو قائمة المشاريع.

هل يمكنني ترحيل مستندات الشبكة المرنة الموجودة لمستندات Bootstrap في Dreamweaver؟

لا، لا يوجد طريقة مباشرة لتحويل مستندات الشبكة المرنة الموجودة لمستندات Bootstrap. ومع ذلك، تجربة المستخدم في Dreamweaver أثناء إنشاء مستندات Bootstrap وتصميمها مشابهة لمستندات الشبكة المرنة. على سبيل المثال، يمكنك البدء بإنشاء مستند Bootstrap مباشرة من مربع الحوار New Document. أثناء قيامك بإنشاء مستندات الشبكة المرنة لثلاثة عوامل أساسية – الجوال والكمبيوتر اللوحي وجهاز سطح المكتب، لـ Bootstrap، يمكنك البدء بإنشاء مستند بأحجام الشاشة الأساسية – الصغيرة والمتوسطة والكبيرة والكبيرة للغاية. خيارات تحرير التخطيط التي يتم عرضها عند النقر فوق العناصر الموجودة في مستندات Bootstrap أيضًا مشابهة لمستندات الشبكة المرنة.

هل يمكنني استيراد المواقع القديمة في الإصدار الأخير من Dreamweaver؟

نعم، يمكنك استيراد المواقع القديمة في الإصدار الأخير من Dreamweaver. عند القيام بذلك، يبحث Dreamweaver عن ملف Bootstrap CSS في مجلد site root/css/.

• إذا كان الموقع يحتوي على ملف Bootstrap v3 CSS، فيتم تعيين إصدار Bootstrap في Manage Site > Advanced Settings > Bootstrap إلى 3.4.1.
• إذا كان الموقع يحتوي على ملف Bootstrap v4 CSS، فيتم تعيين إصدار Bootstrap في Manage Site > Advanced Settings > Bootstrap إلى 4.4.1.
• إذا كان الموقع لا يحتوي على ملف Bootstrap CSS في مسار site root/css، يتم تعيين Bootstrap Version في Manage Site > Advanced Settings > Bootstrap إلى 4.4.1.

إنشاء مستندات Bootstrap

يمكنك البدء في تصميم موقع ويب Bootstrap الخاص بك باستخدام أحد الخيارات التالية في مربع الحوار New Document:

• قوالب بادئ Bootstrap‬ (Starter Templates > Bootstrap Templates) - استخدم هذا الخيار إذا أردت بدء التشغيل بشكل سريع بدون الحاجة إلى تخطيط الصفحات من البداية. ببساطة قم بتحرير النص واستبدال الأصول، إذا لزم الأمر، وموقع الويب التفاعلي الخاص بك جاهز. راجع استخدام قوالب بدء تشغيل Bootstrap للحصول على مزيد من المعلومات.
• إنشاء مستند HTML استنادًا إلى إطار عمل Bootstrap (New Document > HTML > Bootstrap) - استخدم هذا الخيار إذا أردت إنشاء موقع الويب الخاص بك خطوة بخطوة باستخدام CSS ومكونات Bootstrap داخل Dreamweaver. لمزيد من المعلومات، راجع إنشاء مستندات HTML استنادًا إلى إطار عمل Bootstrap.
  

استخدام قوالب بدء تشغيل Bootstrap

تتيح لك قوالب بدء تشغيل Bootstrap إنشاء صفحات ويب للنسق الشائعة في لمح البصر. يتم حفظ جميع الملفات المستقلة في إطار العمل تلقائيًا.

إنشاء مستندات HTML استنادًا إلى إطار عمل Bootstrap

يمكنك البدء في إنشاء موقع الويب التفاعلي الخاص بك بإنشاء مستند HTML يستند إلى إطار عمل Bootstrap. يمكنك اختيار إنشاء مجموعة من ملفات إطار عمل Bootstrap أو استخدام الملفات الموجودة. وبمجرد إنشاء المستند، يمكنك إضافة مكونات Bootstrap مثل الأكورديونات والدوارات باستخدام لوحة الإدراج في Dreamweaver. أو، إذا كان لديك تركيبات Photoshop، فيمكنك استخدام Extract لاستخراج الصور والخطوط والأنماط والنص والمزيد في مستند Bootstrap.

فتح ملفات تمهيد التشغيل

يمكنك فتح ملفات تمهيد التشغيل باستخدام إحدى الطرق التالية:

• انقر فوق File > Open واستعرض حتى تصل إلى ملف Bootstrap HTML.
• (مستحسن) قم بإنشاء موقع Dreamweaver وحدد مجلد الموقع إلى المجلد الذي يحتوي على كل ملفات Bootstrap الخاصة بك.

عند فتح ملف Bootstrap HTML في Dreamweaver:

• يتم تمييز الصفوف بأسطر رمادية متقطعة بزوايا دائرية
• ويتم تمييز الأعمدة بأسطر زرقاء متقطعة

يقوم Dreamweaver بتمييز ملفات CSS المرتبطة بأيّ من ملفات Bootstrap HTML إذا احتوى اسم ملف CSS على 'ملفات تمهيد التشغيل'. يمكن أن يكون مرجع ملف CSS أيّ من أو كل مما يلي:

• المسار المحلي:

  ملف CSS المصغّر أو غير المصغّر موجود محليًا. على سبيل المثال:

  <link href="css/bootstrap.css" rel="stylesheet"> أو
  <link href="css/bootstrap.min.css" rel="stylesheet">

• المسار البعيد:

ملف CSS بعيد مصغّر أو غير مصغّر. على سبيل المثال:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

إخفاء عناصر تمهيد التشغيل المخفية وإظهارها وإدارتها

في بعض الأحيان، قد يتطلب عنصر ليتم عرضه في إطار عرض واحد أثناء عرضه في إطار آخر، وربما تحتاج إلى إخفاء العنصر لأغراض التصميم. 

لإخفاء أحد عناصر تمهيد التشغيل، انقر بزر الماوس الأيمن وحدد Hide Element. يتم إخفاء العنصر مؤقتًا من طريقة العرض.

لعرض العناصر المخفية وإظهارها، انقر بزر الماوس الأيمن وحدد Manage Hidden Elements. تظهر العناصر المخفية في خلفية رمادية اللون ومتقطعة. انقر فوق رمز العين لإظهار العنصر.

إضافة مكونات تمهيد التشغيل

يسرد خيار Bootstrap Components في لوحة Insert جميع مكونات Bootstrap التي يمكنك إضافتها إلى صفحة ويب في Dreamweaver. ووفقًا لإصدار Bootstrap في ملف bootstrap.css المرتبط بصفحة HTML، يتم إدراج المكونات ذات الصلة في لوحة Insert.على سبيل المثال، في Bootstrap v4.0.0، يمكنك مشاهدة المكونات الإضافية مثل Cards وBadges. وبالمثل، تتوفر مكونات Glyphicons وPanel وWells وThumbnail فقط في Bootstrap v3.7. واستنادًا إلى إصدار 3.3.7 من Bootstrap، يمكنك مشاهدة المكونات ذات الصلة في لوحة Insert. أيضًا، يتوفر عنصر Spinners فقط في Bootstrap v4.4.1.

يتم ملء المكونات في لوحة Insert استنادًا إلى المعايير التالية:

• المستند قيد التركيز: يتم ملء المكونات في لوحة Insert استنادًا إلى إصدار Bootstrap في ملف Bootstrap المرتبط بالمستند. 
• الإصدار في Site Preferences: بالنسبة للمستند غير الموجود في bootstrap، يبحث Dreamweaver عن الإصدار في Site Preferences > Advanced > Bootstrap. استنادًا إلى الإصدار في هذا الخيار، تتم تعبئة المكونات المناسبة. يكون الإصدار هو 4.4.1 بشكل افتراضي للمواقع الجديدة.
• مكان حفظ الملفات: بالنسبة للمستند غير الموجود في bootstrap الذي ليس جزءًا من أي موقع، تعرض لوحة Insert مكونات 4.4.1.

لإضافة أحد المكونات، اسحبه من اللوحة إلى صفحة الويب. قبل إسقاط المكون، قم بتدوين الأدوات البصرية مثل أدلة Live والإدراج بدقة (باستخدام DOM) ومساعدة الموضع. استخدم هذه الأدوات لوضع المكونات على الصفحة الخاصة بك بسرعة ودقة. لمزيد من المعلومات حول إدراج العناصر في صفحة الويب الخاصة بك، راجع إدراج نظرة عامة على اللوحة.

إضافة صفوف

انقر فوق الصف المطلوب الذي تريد إضافة صف جديد بعده. ثم، انقر فوق أيقونة Add new row. يتم إضافة صف تمهيد التشغيل مع عنصري العمود التابع بالإضافة إلى ستة أعمدة.

تكون التعليمة البرمجية للصف الذي تمت إضافته كما يلي:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

حيث يمثل (*) حجم الشاشة الحالية في Dreamweaver.

إضافة أعمدة

حدد العمود المرغوب ثم انقر فوق أيقونة Add new column. تم تكرار العمود المحدد دون توابعه.

تم تعيين كل الأعمدة الفارغة بارتفاع 20px كحد أدنى. ومع ذلك، لا تتم إضافة هذا الارتفاع فعليًا إلى الصفحة; ويتم إظهاره في طريقة العرض Live لتسهيل إدراج عناصر داخل الأعمدة.

الصفوف والأعمدة المتكررة

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

تغيير حجم الأعمدة وإزاحتها

يصبح تغيير الحجم الأعمدة وإزاحتها أمرًا حتميًا خاصة عندما تقوم بإنشاء تصميمات تفاعلية لزوايا مختلفة. 

تغيير حجم الأعمدة

انقر فوق العمود المطلوب واسحب لليمين لتغيير الحجم. بالنسبة لمستند Bootstrap v4.0.0، عند تغيير حجم أحد الأعمدة، تتم إضافة الفئة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (‏sm أو md أو ld أو xl) وتمثل n عدد الأعمدة الموجودة بها. بالنسبة لحجم الشاشة Extra small تتم إضافة الفئة col-n.

بالنسبة لمستند Bootstrap v3.3.7، عند تغيير حجم أحد الأعمدة، تتم إضافة الفئة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (xs أو sm أو md أو lg) وتمثل n عدد الأعمدة الموجودة بها.

يكتشف Dreamweaver الحجم الحالي للشاشة ويقوم بإضافة الفئة المناسبة. لتغيير حجم الأعمدة لكي تناسب زوايا محددة، قم بتغيير حجم إطار العرض باستخدام الخيارات الموجودة في الزاوية اليمنى السفلية أو الشريط المنزلق. ثم قم بتغيير حجم الأعمدة حسب الاقتضاء.

إزاحة الأعمدة

انقر فوق العمود المطلوب واسحبه على الجانب الأيمن لإزاحة العمود. تظهر الإزاحة كمنطقة متقطعة. بالنسبة لمستند Bootstrap v4.0.0، عند إزاحة أحد الأعمدة، تتم إضافة فئة الإزاحة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (‏sm أو md أو lg أو xl) وتمثل n عدد الأعمدة الموجودة بها.

بالنسبة لمستند Bootstrap v3.3.7، عندما تقوم بإزاحة العمود، تتم إضافة الفئة col-*-offset-n، حيث تمثل (*) استعلام الوسائط الحالي (xs أو sm أو md أو lg) وتمثل (n) عدد الأعمدة التي تم إزاحتها.

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