في المحاضرات السابقة،
تعلمنا عن التصميم المتجاوب ونظام الشبكة bootstrap.
لقد رأينا كيف تسمح لنا شبكة bootstrap بتصميم مواقع ويب متجاوبة.
حان الوقت لننتقل إلى التمرين التالي
سنبدأ في العمل مع صفحة html الفهرس التي أنشأناها في
ممارستنا السابقة وتطبيق فئات الشبكة bootstrap لجعلها تستجيب.
نلقي نظرة سريعة على صفحة الويب الخاصة بنا في المتصفح نرى
أنه لا يزال رهيبا على الرغم من أن الخطوط قد تحسنت قليلا،
ونحن الآن نستخدم الخطوط الافتراضية التمهيد.
دعونا الآن نحاول تطبيق فئات الشبكة بوتستراب إلى index.html لتحسين تخطيطها.
الذهاب إلى صفحة index.html،
اسمحوا لي أن ألفت انتباهكم بسرعة إلى هذا الخط بالذات في
صفحة index.html التي أدرجناها بالفعل في التمرين السابق.
كنت قد أشرت إلى هذا الخط،
ثم كنا نتحدث عن نظام شبكة التمهيد.
حتى هنا، نرى أننا حددنا العلامات الوصفية مع منفذ عرض والمحتوى،
والعرض كعرض الجهاز،
والمقياس الأولي واحد ويتقلص لتناسب لا.
لذلك هذه العلامة الوصفية تسمح لنا لجعل
صفحة الويب لدينا استجابة من خلال النظر إلى حرف منفذ العرض.
المضي قدما إلى الخطوة التالية.
سنقوم بالتراجع إلى نص صفحة index.html هذه،
ثم البحث عن div الأول الذي يأتي أسفل علامة الرأس هناك،
إلى هذا div ستقوم بتطبيق حاوية الفئة.
لقد تعلمنا بالفعل عن فئة الحاويات في المحاضرة السابقة.
لذلك بمجرد أن نطبق فئة الحاوية،
ثم نلقي نظرة على صفحة الويب الخاصة بنا، نرى
أن جزءًا من المحتوى هناك قد تكيف بالفعل.
انظر إلى الفرق بين المحتوى هنا والمحتوى أدناه هنا.
الآن هذا المحتوى أسفل هنا،
هو في تذييل صفحة index.html لدينا وهذا المحتوى هو في رأس.
ولكن هذا المحتوى في الوسط هو المحتوى الفعلي لصفحة الويب الخاصة بنا،
وهذا هو داخل div الذي نطبق عليه الحاوية.
لذا، عند تطبيق فئة الحاوية، يمكنك أن ترى على الفور أن عرض الصفحة
التي يتم وضع محتوياتنا فيها قد
تقلص الآن، ثم لديك بعض المساحة الإضافية المتبقية على كلا الجانبين،
لذلك مع عرض الحاوية هذا حاوية ذات حجم ثابت،
سيتم إصلاح المحتوى الخاص بنا إلى هذا عرض معين
على الشاشة ترك هامش كاف على كلا الجانبين كمساحة بيضاء.
دعونا نطبق نفس فئة الحاوية على كل من الرأس والتذييل أيضًا،
ثم نرى كيف يتغير المحتوى.
بالعودة إلى صفحة الويب الخاصة بنا،
ما سأفعله الآن هو المحتوى الداخلي هنا،
div الداخلي داخل الحاوية،
سأقوم بتطبيق الفصل كفئة الصف هنا،
إلى هذا الأول،
وسأقوم ببساطة بنسخ هذا.
سأقوم بتطبيق نفس الشيء على div الثاني هنا الذي يصطف إلى div،
وكذلك قم بالتمرير لأسفل ثم إلى div الثالث هنا،
أقوم أيضًا بتطبيق فئة الصف هنا.
حتى الآن، يتم
تقسيم المحتوى داخل هذه الطبقة الحاوية الخارجية، الآن إلى ثلاثة صفوف،
لذلك كل ما هو داخل هنا سيكون صف واحد
، مهما كان داخل هنا،
سيكون الصف الثاني والثاني واحد هنا سيكون الصف الثالث.
سنقوم لاحقا بتطبيق فئات العمود على هذا.
دعونا ننتقل الآن إلى رأس في الجسم index.html لدينا.
وإلى الرأس، سأقوم بتطبيق فئة تسمى jumbotron.
يسمح لك مكون jumbotron بتجميع
المحتوى داخل jumbotron من بقية الصفحة.
سوف نرى النتيجة في فترة قصيرة عندما كنا في صفحة الويب الناتجة.
الآن، إلى div داخل هذا الرأس،
سأقوم بتطبيق الفئة كحاوية،
بحيث يتم
تقييد أي شيء داخل المحتوى الآن بعرض الحاوية هناك.
وبالمثل، الانتقال إلى التذييل هنا،
في التذييل أيضًا،
أول div داخل التذييل،
سأقوم بتطبيق الفصل كحاوية.
و div داخل هناك،
سأقوم بتطبيق الفصل كصف هناك،
إلى div داخل هناك.
لذلك هذا ديف سوف يأخذنا على طول الطريق إلى هذا ديف معين هنا.
ثم div التالي أيضًا أقل من ذلك مباشرة،
سأطبق الفصل كصف.
حتى الآن يحتوي التذييل الخاص بي على صفين هنا،
سنقوم بتصميم المحتوى باستخدام العمود،
والطبقات في فترة قصيرة.
الذهاب إلى الرأس أيضا،
وسوف تطبيق فئة الصف إلى div الثاني داخل div الحاوية هنا.
لذلك هذا div الذي يتطابق مع هذا،
سيكون صف واحد في الرأس.
دعونا نلقي نظرة على صفحة الويب الناتجة لدينا.
الذهاب إلى صفحة الويب الخاصة بنا،
يمكنك الآن أن ترى أن محتوى الرأس يتم الآن تعيين بعيدا
عن بقية داخل هذا المربع الرمادي في الأعلى هنا.
ولكن المحتوى نفسه اصطف الآن مع المحتوى أدناه هنا.
الآن، هذا هو نتيجة استخدام الحاوية.
الانتقال إلى التذييل،
يمكنك الآن أن ترى أن محتوى التذييل هو أيضا اصطف الآن داخل الحاوية.
ولكن الصفحة لا تزال تبدو غير كبيرة،
سنقوم الآن بتطبيق فئات العمود على divs الداخلية الآن.
بالعودة إلى صفحة index.html،
سنبدأ الآن في تطبيق فئات الأعمدة.
لذا، فالذهاب إلى الرأس، إلى div الداخلي الثاني داخل jumbotron هنا،
دعني أطبق فصلاً كعمود 12، عمود sm-6.
لذا،
سيشغل المحتوى في هذا div الأول الصف بأكمله لأحجام الشاشة الصغيرة الإضافية،
ثم سيشغل نصف الصف لهذا السبب العمود
sm-6 لأحجام الشاشة الصغيرة إلى الكبيرة جدًا.
الآن، وبالمثل بالنسبة إلى div الثاني هنا، على
الرغم من أنه لا يحتوي على أي محتوى هناك،
سأقوم بتعريف فئات العمود هنا كعمود 12 ثم عمود sm.
لذلك، لاحظ أنه هنا من خلال تحديد العمود 12،
أنا أذكر صراحة أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،
سيتم تكديس المحتوى الموجود داخل هذا div أسفل المحتوى حول هنا.
ثم بالنسبة لأحجام الشاشة الصغيرة إلى الكبيرة جدًا،
سيشغل هذا المحتوى الكمية المتبقية من
الأعمدة في الصف لأحجام الشاشة الصغيرة إلى الكبيرة جدًا.
حتى هنا في هذه الحالة منذ ستة أعمدة مشغولة من قبل هذا المحتوى،
وهذا سوف تحصل على ستة أعمدة المتبقية هناك.
الانتقال إلى صفوف المحتوى هنا،
للمحتوى هنا،
لذلك لهذا المحتوى الأول،
وهو تسمية هنا،
سأقوم بتطبيق الطبقات كعمود 12،
العمود سم-4، العمود مد-3.
لذلك، مشيرا إلى أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،
فإن هذا سيشغل الصف بأكمله، بالنسبة للصغيرة،
فإنه سيشغل أعمدة كاملة،
ومن ثم بالنسبة للمتوسط إلى الكبير،
فإنه سيشغل ثلاثة أعمدة في الصف.
الآن، لذلك سيتم احتلال الجزء المتبقي من المحتوى أسفل هنا،
لذلك، سأقوم بتطبيق الطبقات كعمود،
مشيرا إلى أن هذا سيتم تكديسه تحت
المحتوى هنا في أحجام الشاشة الصغيرة الإضافية،
وبعد ذلك سأقول عمود sm،
مما يعني أن هذا سيشغل المتبقية ثمانية أعمدة هنا،
لأنه يتم أخذ أربعة أعمدة من قبل هذا واحد،
وبعد ذلك سنقول العمود md،
مما يعني أن هذا سوف تحتل
الأعمدة التسعة المتبقية لأنه يتم
أخذ ثلاثة أعمدة لأحجام الشاشة المتوسطة إلى الكبيرة جدا من قبل المحتوى أعلاه هنا.
الآن بعد أن قمت بتعريف صف المحتوى
الأول، سآخذ نفس تطبيق فئة العمود هنا،
ثم قم بتطبيق ذلك على الصف الثاني هنا،
وكذلك صف المحتوى الثالث هنا.
وبالمثل، سأقوم بنسخ هذا واحد ثم تطبيق نفسه
على divs المحتوى أدناه هنا.
حتى الآن قمنا بتكوين كل من رأس وأعمدة المحتوى هناك.
دعونا ننتقل الآن إلى التذييل.
في التذييل، ستلاحظ أن هذا div يحتوي على ثلاثة div داخلي هنا،
لذلك لكل من هذه divs الداخلية الثلاثة هنا،
سأقوم بتطبيق فئات الأعمدة المقابلة.
لذلك بالنسبة لأول واحد،
والذي يحتوي على روابط إلى الصفحات المختلفة التي ستشكل جزءًا من هذا الموقع،
سأقوم بتطبيق فئة عمود،
كعمود أربعة، عمود sm-2 هنا.
وهذا يعني أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،
فإن هذا سيشغل أربعة أعمدة وللصغير إلى كبير جدًا،
فإنه سيشغل عمودين هنا فقط.
ثم بالنسبة للثاني،
فإن div الثاني هناك سأقوم بتطبيق الطبقات كعمود سبعة.
لذلك لاحظ أن لدي أربعة هنا ثم سبعة هنا،
بحيث المجموع يحتل 11 عمودا.
لقد تركت عموداً واحداً فارغاً
سأعود لاحقًا لتطبيق إزاحة لرعاية العمود الإضافي.
إذن هذا هو العمود السابع،
ثم كول-سم-5 إلى الثاني.
إذا هذا هو اثنين زائد خمسة، سبعة.
لذلك لا يزال لدي خمسة أعمدة متبقية،
والتي يمكنني استخدامها في div الثالث هنا.
الآن لأحجام الشاشة الصغيرة الإضافية،
سيتم وضع هذين المحتويين جنبًا
إلى جنب، ومن ثم
سيكون هذا div الذي يحتوي على روابط لموقع وسائل التواصل الاجتماعي في صف منفصل مكدس أدناه.
ولكن بالنسبة لأحجام الشاشة الصغيرة إلى الكبيرة،
فإن الأول سيشغل عمودين،
والثاني سيشغل خمسة، وسيتم
تناول الباقي من خلال روابط وسائل التواصل الاجتماعي هنا.
لذلك بالنسبة للثالث،
سأقوم بتطبيق الفصل
كـ col-12 col-sM-4 هنا.
لذا، فإن col-12 col-sm-4، مما يعني أن هذا سيشغل
مجموعة منفصلة من 12 عمودًا
مكدسة أسفل المحتوى السابق لأحجام الشاشة الصغيرة الإضافية،
ولكن بالنسبة إلى الحجم الصغير إلى الكبير جدًا، سيشغل أربعة أعمدة.
لذلك نحن هنا أربعة زائد خمسة،
تسعة زائد اثنين 11.
لذلك لا يزال عمود واحد بقايا صغيرة إلى كبيرة جدا.
إذن هذه هي الطريقة التي سأطبق بها هذا العمود الأقرب إلى هذا.
الآن، لا يزال لدينا واحد أدناه هنا حيث نحن تحتوي على حقوق التأليف والنشر لهذا.
سأقوم بتطبيق الفصل كعمود تلقائي،
مما يعني أن هذا المحتوى سيشغل
أعمدة كافية فقط كما هو مطلوب من قبل المحتوى هناك.
في وقت لاحق سترى أنني سأضع هذا المحتوى في وسط
الشاشة وبالتالي باستخدام فئة CSS bootstrap أخرى.
سنأتي إلى ذلك في التمرين التالي
لذلك مع هذا قمنا بتطبيق فئات العمود المختلفة
على الرأس والمحتوى والتذييل.
هذا هو الوقت المناسب بالنسبة لنا لحفظ التغييرات ومن ثم الذهاب
وإلقاء نظرة على الصفحة المفهرسة أو HTML المحدثة.
إلقاء نظرة على صفحة index.html الخاصة بنا،
ستلاحظ كيف في الرأس الذي هو Jumbotron،
يحتل المحتوى الآن نصف الشاشة هناك فقط.
النصف الآخر من الشاشة من هذا الصف معين هو الآن ترك فارغة.
النزول إلى صفوف المحتوى،
ترى أن التسمية على الجانب الأيسر تحتل
ثلاثة أو أربعة أعمدة اعتمادا على حجم الشاشة التي كانت تستخدم،
والباقي يشغلها بقية المحتوى.
حتى هنا لدينا صف واحد،
الصف الثاني، والصف الثالث.
ثم تذييل الصفحة هنا يمكنك أن ترى أن الروابط على الجانب الأيسر،
والآخرين في الوسط،
ومن ثم وصلات وسائل الاعلام الاجتماعية على الجانب الأيمن.
لذلك هذا هو لشاشة متوسطة الحجم.
الآن إذا كنت ترغب في النظر إلى نفس العرض لأحجام شاشة صغيرة أو صغيرة إضافية،
إذا كنت تستخدم
Chrome، فإن Chrome لديه أدوات المطور التي يمكنك
تشغيلها بالنقر فوق أدوات مطوري البرامج،
وعندما تظهر أدوات المطور،
ستلاحظ، دعني أقوم بتقليل حجم هنا.
ستلاحظ هذه الصغيرة إلى النوافذ هناك.
لذا سيؤدي النقر على ذلك إلى تشغيل العرض المتجاوب لهذه المواقع هناك.
لذلك يمكنك أن ترى أن هنا عرض صفحة الويب نفسها على بكسل إلى موقع،
وهو 411 من 731 في وضع عمودي،
لذلك الذي يتوافق مع حجم شاشة صغيرة إضافية،
حتى تتمكن من رؤية كيف يتم وضع المحتوى بها.
حتى تتمكن من رؤية محتوى Jumbotron هناك
ثم الجزء المتبقي من المحتوى أسفل هنا.
ثم وصولا الى تذييل الصفحة.
حتى في التذييل يمكنك أن ترى كيف الروابط والإعلان وضعت جنبا إلى جنب.
الآن تقليل حجم الشاشة بحيث يمكننا أن نرى كيف يتم وضع هذا التذييل هنا.
لذلك الجزء المتبقي، لديك الروابط على الجانب الأيسر،
لديك العنوان على الجانب الأيمن،
ثم روابط وسائل التواصل الاجتماعي أسفل في صف منفصل هنا،
ثم حقوق الطبع والنشر في الأسفل هناك.
لذلك هذا هو الرأي المثير للاهتمام الذي نراه لأحجام الشاشة الصغيرة الإضافية.
بالعودة إلى شفرتنا هنا،
سأقوم الآن بتطبيق الترتيب وفئات الإزاحة على
هذا المحتوى من أجل عرض المحتوى بطريقة مختلفة قليلاً.
حتى الذهاب إلى صف المحتوى هنا،
بالنسبة إلى اثنين من divs هنا التي تحتوي على المحتوى،
وأنا ذاهب لتطبيق الطبقات كما
order-sm-last للصف الأول هنا.
ثم لذلك واحد أسفل هنا سوف تطبيق النظام sm أولا إلى الصف أسفل هنا.
وهذا يعني أنه عند عرض هذا المحتوى،
سيتم سحب هذا المحتوى إلى الجانب الأيسر من الشاشة ومن ثم
سيتم دفع هذا العمود إلى الجانب الأيمن من الشاشة.
لذلك سيتم طلب هذا إلى الجانب الأيمن وسيتم طلب هذا إلى الجانب الأيسر.
كما شرحت حول بنود النظام في المحاضرة السابقة.
وبالمثل من الصف الثاني،
سأتركه على هذا النحو ولكن من الصف الثالث سأقوم بتطبيق
نفس المجموعة من فئات النظام.
لذلك أنا ذاهب للذهاب إلى الصف الثالث هنا،
ومن ثم تطبيق النظام سم-الأخير على هذا واحد،
وبعد ذلك سوف تطبيق النظام سم-أولا على هذا واحد.
وهكذا سيتم إعادة ترتيب هذا مرة أخرى
بحيث يظهر هذا المحتوى إلى
الجانب الأيسر وسيظهر هذا المحتوى إلى الجانب الأيمن.
هذه مجرد طريقة لتحديد موقع المحتوى بطريقة أكثر إثارة للاهتمام.
الآن الانتقال إلى أسفل إلى تذييل هنا،
والآن أنا ذاهب لتطبيق فئة إزاحة هنا.
لذا لاحظ أنني ذكرت أن هذين العمودين سيحتلان أربعة زائد سبعة، 11.
لذلك عمود واحد هو بقايا.
لذلك أنا ذاهب لتطبيق فصل إزاحة 1 لهذا واحد.
مما يعني أن هذا المحتوى على هذا div سيتم دفعه مباشرة بواسطة عمود واحد هنا.
وبالمثل منذ أن قلت إزاحة واحدة،
سيتم تطبيق هذا على صغيرة إضافية على طول الطريق حتى أحجام الشاشة الكبيرة الإضافية.
وهكذا هذا هو استخدام فئة الإزاحة.
حتى الآن بعد أن قمنا بإجراء التغييرات،
دعونا حفظ التغييرات ثم نذهب ونلقي نظرة على صفحة الويب لدينا في المتصفح.
بالعودة إلى هذا المتصفح،
ترى الآن كيف يكون الرأس كما كان من قبل،
ولكن في صف المحتوى الأول،
ترى أن هذا المحتوى قد تم دفعه إلى
الجانب الأيسر والتسمية إلى الجانب الأيمن.
الصف الثاني مختلف تم الحفاظ عليه تماما كما كان من قبل.
ولكن بالنسبة للثالث سترى أن هذا قد
دفع إلى اليمين وهذا قد دفع إلى اليسار.
لذلك هذا هو استخدام النظام سم-لاست وترتيب سم-فيرست الدرجة هناك.
الآن الذهاب إلى التذييل،
ترى الآن أن المحتوى في div الأول هنا قد تم دفعه مباشرة بواسطة عمود واحد،.
لذلك يمكنك أن ترى أن هناك عمودًا واحدًا من المسافات البيضاء هنا،
ولم يتم دفعه إلى اليمين وتم تنسيق الأجزاء المتبقية وفقًا لذلك.
لذلك مع هذا نحن استكمال التغييرات
على صفحة index.html لدينا أو صفحة إضافية لهذا التمرين معين. و
بهذا نكمل هذه العملية بالذات.
في هذا التمرين نظرنا إلى استخدام
فئات الحاوية والصف والعمود من أجل تصميم صفحة الويب الخاصة بنا أجمل قليلاً.
في الجزء الثاني من التمرين الذي سيتبع هذا،
سنقوم بإضافة المزيد لمحاولة تحسين طريقة عرض صفحات الويب هذه.
هذا لا يزال غير مرتاح لي.
ومن الواضح أنه لا يزال هناك مجال لل تحسين.
قد يكون هذا وقتًا مناسبًا لك للقيام بتعليق git مع
الرسالة Bootstrap Grid Part One.