العمل باستخدام Bootstrap في Dreamweaver

سوف تتعلم في هذا الدرس كيفية إنشاء صفحة فارغة جديدة باستخدام إطار عمل bootstrap الآن، أول شيء يتعين علينا القيام به قبل أن نبدأ في استخدام bootstrap هو إنشاء موقع لذلك سننتقل إلى القائمة موقع سننشئ موقعًا جديدًا وسنضغط على التصفح للبحث عن المجلد ولقد قمت بحفظ ملفات الدرس لهذه الوحدة على سطح المكتب الخاص بي ولذا سأدخل وسأختار الدرس الأول في الوحدة الثانية وسيكون هذا هو مجلدي ولاسم موقعنا سأقوم فقط بكتابة في العمل باستخدام bootstrap وسأضغط حفظ لذلك عندما ننظر إلى لوحة الملفات الخاصة بنا يمكننا أن نرى أن هناك مجلد الصور ومجلد الوسائط والمجلد متنوع لا توجد أي ملفات HTML حتى الآن في مجلدنا ولذا فمن المهم أن نفهم ما هي المجلدات الموجودة لدينا لأنه في غضون لحظات عندما ننشئ صفحتنا باستخدام Bootstrap سينشئ دريم ويفر تلقائيًا بضع مجلدات أخرى لنا لذلك سننتقل إلى القائمة ملف ثم جديد وعندما ننشئ مستند HTML الجديد فإن مستندات HTML التي قمنا بإنشائها من البداية تستخدم إطار عمل لا يوجد لكن هذه المرة سنستخدم إطار عمل Bootstrap إذن ما هو Bootstrap بالضبط؟ حسنًا، Bootstrap هو ما نسميه إطار العمل وهو مجموعة من المكونات مسبقة البناء التي يمكنك استخدامها بسهولة أكبر لإنشاء الصفحات موقع الويب الخاص بك الآن، كل هذه المكونات مبنية على ترميز 5 HTML الجديد ويستخدمون 3CSS أحدث إصدار من أوراق الأنماط المتتالية الآن لا يحتوي Bootstrap على HTML5 وCSS3 فقط ولكنه يستخدم أيضًا جافا سكريبت وهكذا عندما تنشئ صفحتك الأولى بناءً على إطار عمل Bootstrap فإن دريم ويفر سيقوم بإنشاء مجلدات إضافية للاحتفاظ بـ CSS بالإضافة إلى جافا سكريبت لذلك سنضغط على الزر إنشاء وعندما نفعل ذلك، يمكنك الاطلاع على لوحة الملفات الخاصة بنا لدينا مجلد CSS ومجلد جافا سكريبت وفي جافا سكريبت لدينا لدينا ثلاث ملفات جافا سكريبت مختلفة في CSS لدينا، لدينا ملف CSS واحد وسننتقل إلى القائمة ملف وسنقوم بحفظ هذا المستند الآن وسنسميه index.HTML ونحفظه أريد التحدث قليلاً عن الملف ذي الصلة لذا، هنا في الجزء العلوي من صفحتنا لدينا كود المصدر الخاص بنا وإذا نقرنا على هذا الزر في الأعلى يمكننا أن نرى أن هذا هو كود المصدر لصفحتنا وحاليًا، لا يوجد أي شيء هنا حقًا ولكن لدينا تعليق يقول النص الأساسي هنا ولكن تم إعداد روابطنا هنا لذلك لدينا هذا الرابط إلى ملف إطار عمل bootstrap لدينا أيضًا رابط لملفات جافا سكريبت الثلاثة لذلك في أي من المكونات التي نستخدمها بعض المكونات التفاعلية التي لدينا إنها تعتمد على هذه التكنولوجيا تقنية جافا سكريبت، لذا فهي موجودة بالفعل على صفحتنا وإذا نظرنا إلى الأعلى فإن كل هذه الملفات التي يمكننا استخدامها وإذا كنت تفهم القليل عن HTML وCSS يمكنك الدخول وتخصيص هذه الملفات وبعد قول ذلك، إنها فكرة جيدة إذا كنت ستعمل بإطار عمل Bootstrap إنها فكرة جيدة أن يكون لديك أساس في لغتي HTML وCSS لتكون قادرًا على إلقاء نظرة على التعليمات البرمجية وإجراء التغييرات على التعليمات البرمجية عند الحاجة مع هذه الملفات ذات الصلة أريد أن ألفت انتباهك وهما bootstrap، هما bootstrap 4.4 0.1 هذه هي التكنولوجيا التي ظهرت في عام 2019 لذلك فهو ليس أحدث إصدار من bootstrap لا يعمل دريم ويفر مع أحدث إصدار لكنها لا تزال نسخة مستقرة للغاية من bootstrap للبدء بها الآن، إذا انتقلنا إلى علامة التبويب إدراج الخاصة بنا لدينا في علامة التبويب إدراج، لدينا قوائم منسدلة مختلفة وإحدى تلك القوائم المنسدلة هي مكونات bootstrap من هنا يمكننا أن نضيف الكثير من التخطيطات المختلفة المصممة مسبقًا لصفحتنا وسنتعلم كيفية القيام بذلك في الدروس اللاحقة لكن في الوقت الحالي، سنضع حاوية فقط وستلاحظ، لدي العرض live محدد هنا في الأعلى عندما تعمل في bootstrap العمل في العرض live هو في الواقع فكرة أفضل من العمل في العرض design تأكد من أن لدينا المؤشر في جسم الصفحة هنا على اليسار، سنضغط هناك وسنضغط على هذه الحاوية والآن داخل جسم الصفحة، لدينا الحاوية وفي تلك الحاوية حيث سنضع جميع المكونات الأخرى لصفحتنا لذلك سنذهب إلى القائمة ملف ونقوم بالحفظ ولدينا الآن صفحة بها حاوية جاهزة لوضع المحتوى الخاص بنا في هذا الدرس، تعلمت كيفية إنشاء صفحة باستخدام إطار عمل bootstrap في أدوبي دريم ويفر