في المحاضرة السابقة،
تعلمنا عن التصميم المتجاوب.
كما ذكرنا بإيجاز أن نظام شبكة Bootstrap
مصمم لدعم مواقع الويب المتجاوبة.
كيف تدعم شبكة بوتسترابس هذا؟
وما الذي تنطوي عليه شبكة Bootstrap بالضبط،
والتي تمكننا من تصميم مواقع استجابة؟
دعونا نتحدث قليلا المزيد من التفاصيل حول نظام شبكة Bootstrap،
وكيف يدعم الاستجابة بعد ذلك.
رأينا استخدام العلامة الوصفية لإطار العرض في الدرس السابق،
عندما قمنا بالتمرين الأولي على إعداد Bootstrap في صفحة index.html الخاصة بنا.
أشرت بإيجاز إلى هذا السطر بالذات في التعليمات البرمجية ثم.
دعونا نحاول أن نفهم لماذا نستخدم هذا في صفحة index.html لدينا.
ما نحدده هنا هو أنه
عندما يتم
تقديم صفحة الويب الخاصة بنا من قبل المتصفح في جهاز معين، فإن عرضه في المتصفح سيأخذ في الاعتبار حجم الشاشة
ويكيف تلقائيًا عرض الصفحة إلى عرض شاشة الأجهزة.
وبهذه الطريقة، لدينا فصول متجاوبة،
وفصول CSS المضمنة في إطار واجهة المستخدم لدينا،
ثم يضمن ذلك أن صفحة الويب الخاصة بنا يتم
تقديمها بشكل صحيح لحجم الشاشة المحدد هذا.
هذا هو المكان الذي يأتي نظام الشبكة Bootstrap لإنقاذنا
ويمكننا من تصميم مواقع استجابة.
لذلك مرة أخرى، مع التأكيد على هذه النقطة،
تم تصميم شبكة Bootstrap لتكون استجابة.
لقد رأيت بالفعل ما يعنيه هذا في المحاضرة السابقة،
والمتنقلة أولاً، والتي ناقشناها بالفعل في المحاضرة السابقة ثم السوائل،
والتكيف تلقائيًا مع عرض الشاشة.
تستفيد شبكة Bootstrap من تخطيط CSS flexbox.
تخطيط CSS flexbox الذي يتم دعمه
من قبل الإصدارات الأحدث من المتصفحات المختلفة،
يتيح خيارات تخطيط أكثر بساطة ومرونة في CSS.
الآن، فإن المناقشة الفعلية
لكيفية عمل تخطيط CSS flexbox خارج نطاق هذه الدورة،
وسوف نقيد أنفسنا على كيفية استخدام CSS
flexbox بواسطة Bootstrap لنظام الشبكة الخاص به. في
وقت سابق كان Bootstrap نظام الشبكة الخاص به الذي كان يسبق تخطيط CSS flexbox،
ولكن أحدث إصدار من Bootstrap
جعل تخطيط CSS flexbox كمعيار لشبكة Bootstrap.
هذا التخطيط فليكسبوكس يمكن التعامل بسهولة مع
المحتوى الديناميكي ويمكن تكييف الحاويات مع المحتوى الديناميكي،
وأيضا يمكن أن تتكيف بسهولة مع حجم غير معروف من
المحتوى الفعلي المغلقة داخل الحاويات.
كما يدعم تخطيط flexbox تخطيط الاتجاه الملحد.
ما يجلبه تخطيط flexbox إلى شبكات Bootstrap هو القدرة على
القيام بمحاذاة رأسية سهلة للمحتوى داخل عنصر الأصل.
سنرى إستخدام هذا فى التمرين الذى يليه
أيضا، فإنه يسمح بسهولة إعادة ترتيب المحتوى
عبر الأجهزة المختلفة ودقة الشاشة مع مساعدة من استعلامات وسائل الإعلام.
مرة أخرى سنرى قليلا من ذلك في التمرين على كيفية تعزيز
Bootstrap ذلك لدعم طرق مثيرة للاهتمام لوضع المحتوى.
أيضا، هذا المحتوى نفسه،
يمكن أيضا أن تكون حاويات المحتوى مصممة لتكون أعمدة ارتفاع متساوية بحيث
حاوية المحتوى مع أكبر
ارتفاع يحدد ارتفاع جميع الحاويات المتبقية التي وضعت في نفس الصف.
دعونا الآن نتحدث عن مزيد من التفاصيل حول شبكة Bootstrap وكيف تعمل في الواقع.
الطريقة التي تعمل بها شبكة Bootstrap،
هي عن طريق تطبيق حاوية بالإضافة إلى الطبقة الخارجية.
قد نستخدم div
لتحديد العنصر الذي نطبق عليه فئة الحاوية بشكل عام.
الحاوية هي الوحدة الخارجية التي يتم فيها وضع المحتوى الفعلي.
يدعم Bootstrap كل من فئة الحاوية التي هي تخطيط عرض ثابت،
مما يعني أن المحتوى نفسه يقتصر على عرض ثابت على الشاشة.
تمكن فئة الحاوية هذه هذا العرض الثابت
من التكيف تلقائيًا مع حجم الشاشة باستخدام استعلامات الوسائط بحيث
يأتي التصميم المتجاوب في عملية الإنقاذ الخاصة بنا.
في وقت لاحق، سنرى كيف ستتكيف هذه الحاوية مع أحجام الشاشة المختلفة.
الآن، لدينا أيضا مرونة استخدام في
السائل حاوية الكلاسيكية الأخرى
التي تمكن الحاوية من التكيف تلقائيا مع حجم الشاشة.
لكن حاوية العرض الثابتة،
تعمل على إصلاح حجم عرض التخطيط الفعلي.
داخل الحاوية، سيتم وضع المحتوى في شكل صفوف،
لذلك عادة ما نقوم به هو داخل
وخارج div الذي نطبق عليه فئة الحاوية، ونحن
«سوف تشمل div الداخلي الذي سنطبق عليه فئة الصف.
لذلك، سيتم تقسيم المحتوى نفسه عموديا إلى صفوف متعددة.
وبمجرد تقسيم هذا إلى صفوف، داخل كل صف،
يمكنك بعد ذلك تخطيط المحتوى باستخدام الأعمدة.
لذلك،
سيتم تقسيم كل صف في Bootstrap، إلى 12 عمودًا متساويًا الحجم.
الآن، يمكنك تصميم المحتوى الخاص بك لاحتلال أي عدد من هذه الأعمدة ال 12.
لذلك، وحقيقة أن المحتوى نفسه يتكيف مع
عرض الشاشة والصف نفسه الذي يتم
وضعه داخل الحاوية سوف يتكيف تلقائيًا مع عرض الشاشة،
وكذلك الأعمدة،
سيتم تحديد الأعمدة الـ 12.
سيتم تحديد عرضهم من قبل الصف في حد ذاته.
لذلك، مما يعني أنه بالنسبة لأحجام شاشة مختلفة،
مهما كان المحتوى الذي تقوم بتخطيطه كل هذه الأعمدة الـ 12 سيتم ضبط
نفسه تلقائيًا إلى العرض المسموح به للمحتوى.
لذا، هذه هي الطريقة التي يتم بها
تضمين الاستجابة في طريقة شبكة Bootstrap لوضع المحتوى.
لذا، كيف نقوم بالضبط بتخطيط المحتوى؟
سنتحدث عن ذلك في الشرائح القليلة القادمة
شبكة Bootstrap نفسها،
ويتيح لنا خمس فئات لتحديد أحجام الشاشة المختلفة بشكل افتراضي.
هناك فئة افتراضية تستهدف جميع أحجام الشاشة،
بدءًا من صغيرة جدًا إلى كبيرة جدًا.
لذا فإن النطاق الكامل لعرض الشاشة في شروط Bootstrap،
ينقسم إلى
أحجام شاشة صغيرة وصغيرة ومتوسطة وكبيرة جدًا جدًا.
ثم ننظر في كيفية
تحديد هذه الفئات المختلفة من أحجام الشاشة بالتفصيل في واحدة من الشرائح اللاحقة.
لذلك، ضمن التعليمات البرمجية الخاصة
بك، سوف تحدد مواصفات التخطيط عن طريق
تحديد sm لحجم الشاشة الصغيرة،
md للمتوسط، lg للكبير،
و xl لأحجام الشاشة الكبيرة الإضافية.
لذلك، عند القيام بالتخطيط،
كما رأينا في الشريحة السابقة،
يتم تقسيم كل صف في نظام شبكة Bootstrap إلى 12 عمودًا.
الآن، سنقوم بتخطيط المحتوى باستخدام ما يسمى فئات العمود.
بالنسبة لفئات الأعمدة،
يمكننا تحديد كيفية إجراء التخطيط لعرض الشاشة المختلفة.
انظر إلى تفاصيل هذا في الشرائح اللاحقة لاحقًا.
ولكن اسمحوا لي أن ألفت انتباهكم بسرعة إلى كيفية تحديد أحجام الأعمدة.
قد يحددون أحجام الأعمدة كعمود،
وهي واحدة من الفئات التي سيقولونها col-sm
للصغيرة و col-md المتوسطة والكبيرة والكبيرة الزائدة وهلم جرا.
الآن، يتم استخدام فئات الأعمدة هذه لتحديد
بالضبط عدد الأعمدة في صف واحد سوف تشغل كل جزء من المحتوى.
كيف يعمل هذا؟
سنرى ذلك في الشريحة التالية
لذا، بالعودة إلى شبكة Bootstrap
لدينا، لنفترض أن لدينا قطعة من المحتوى ونريد وضع سلام المحتوى.
يمكننا تحديد أن هذا المحتوى مغلق داخل div آخر،
والذي نطبق
عليه فئة العمود، على سبيل المثال، col-sm-5.
لذلك، في هذه الحالة، ما نحدده هو أنه بالنسبة لأحجام الشاشات الصغيرة إلى الكبيرة، فإن
هذه القطعة من المحتوى ستشغل خمسة أعمدة من تلك الأعمدة الـ 12.
الآن، أنت سَتَسْألُني فوراً،
ماذا عن التسخينِ الإضافيِ؟
إذا لم يتم تحديده بشكل صريح للخزانة الذكية الإضافية
من خلال عرض الأعمدة الـ 12 بالكامل،
فيمكنها تحديد
النطاق الذي سيشغله تخطيط العمود عدد الأعمدة.
لذلك، في هذه الحالة بالذات،
عندما أحدد أنني أسميها فقط سم-5،
ما أعنيه هو أن هذا المحتوى المحدد الذي يتم تضمينه داخل تلك ديف،
سيشغل خمسة أعمدة لجميع أحجام الشاشة،
من الصغيرة على طول الطريق إلى كبيرة إضافية.
الآن، نرى الآن أنه من أصل 12 عمودًا،
قمنا بالفعل باحتلال خمسة أعمدة.
لا يزال هناك سبعة أعمدة أخرى متبقية.
يمكنني أخذ جزء آخر من المحتوى ثم وضعه على يمين هذا، من
خلال الدفاع عن div آخر ثم تطبيق العمود sM-7.
الآن، في هذه الحالة،
ترى أن 5 زائد 7 يساوي 12.
لذلك،
سيتم الآن وضع هذين القطعتين من المحتوى التي يتم تضمينها في divs، جنبا
إلى جنب، ومجموعهم يحتل عرض العمود 12 بأكمله.
لذا، هذه هي الطريقة التي يمكننا بها تحديد والعمل مع الأعمدة 12
في تحديد تخطيط الطبقة الحالية.
باستخدام تخطيط مربع المرن CSS،
يدعم Bootstrap أيضًا ما يسمى أعمدة التخطيط التلقائي.
لذلك، في هذه الحالة،
يمكنني ببساطة تحديد
عمود sm دون تحديد عدد الأعمدة التي من المفترض أن يشغلها.
ولكن في حالة تحديد ثلاثة عمود عرض Doobs sm في heml 5 الخاص بي،
فإن شبكة bootstrap ستضع هذه المحتويات تلقائيًا داخل تلك divs
، جنبًا إلى جنب،
بحيث يحصل كل واحد منهم على ثلث العرض الإجمالي.
لذلك، بما أن لدينا 12 عمودًا هنا،
فسيحصل كل واحد من هذه الثلاثة على أربعة أعمدة لكل منها.
ويتم الاعتناء بذلك تلقائيًا بواسطة آلية تخطيط bootstraps.
الآن، يمكننا تحديد
عدد الأعمدة التي يشغلها جزء معين من المحتوى بشكل صريح.
لذلك، على سبيل المثال، لنفترض أنني حدد ثلاث فئات أعمدة،
ولكن الطبقة الوسطى أحدد العمود sm 6.
ثم ما يحدث هو، عندما يقوم bootstrap
بالتخطيط، سيشغل الجزء الأوسط ستة أعمدة،
ثم سيشغل الجزء الأيسر والأيمن من المحتوى ما تم إيقافه.
لذلك، من أصل 12 الأعمدة التي لدينا،
إذا 6 الأعمدة التي تحتلها الجزء الأوسط من المحتوى،
ثم تركنا معنا 6 أعمدة أخرى والتي سيتم
تقسيمها بالتساوي بين محتويات والجانبين من هذا العمود الأوسط.
لذلك، كل واحد منهم سوف تحصل على أعمدة مجانية من الفضاء لكل منهما.
لذا، هذه هي الطريقة التي يتم بها التخطيط تلقائيًا باستخدام Bootstrap.
في التمرين، سنرى مجموعات مختلفة من استخدام هذا النوع من
المواصفات لعدد الأعمدة التي ستشغلها كل قطعة من المحتوى في تخطيط الألوان.
يلخص هذا الجدول الطريقة التي يعامل بها Bootstrap
شبكات الشاشة المختلفة وبالمقابل كيفية تعريف شبكات الشاشة هذه.
لذلك، كما حددت سابقًا،
يقسم Bootstrap نطاق عرض الشاشة بأكمله إلى 5 فئات.
الشاشات الصغيرة الإضافية هي تلك التي تكون شبكاتها أقل من 776 بكسل.
الشاشات الصغيرة هي تلك التي تتراوح بين 576 وأقل من 768 بكسل. يتم
التعامل مع الشاشات المتوسطة من 768 إلى 992، كبيرة من 992 إلى 1200 وأي شيء عن عرض 1200 بكسل لتكون شاشة كبيرة إضافية.
لذا، هذه هي الطريقة التي يتم بها تكوين شبكة Bootstrap الافتراضية.
الآن، بمجرد الحصول على راحة مع Bootstrap،
يمكنك أيضًا تكوين هذه الأقسام بنفسك.
ولكن بالنسبة لهذه الدورة،
سنبقى مع التكوين الافتراضي الذي يدعمه bootstrap.
الآن، سلوك الشبكة في هذه الحالة،
هو أن كل ما تم وضعه لصغيرة إضافية،
سيكون أفقيا في جميع الأوقات،
بالنسبة للبت الأعلى سيتم انهارها إلى عرض 2start،
ولكن أفقي حول نقاط الاستراحة.
سنرى كيف يعمل هذا في فترة قصيرة مع بعض الأمثلة.
الآن، رأينا استخدام الحاوية في الشريحة السابقة.
بالنسبة للشاشات الصغيرة الإضافية،
يتم تحديد عرض الحاوية تلقائيًا بواسطة عرض الشاشة.
ولكن بالنسبة للصغيرة والمتوسطة
والكبيرة والكبيرة الزائدة،
يكون عرض الحاوية كما هو محدد.
لذلك، إذا كنت تستخدم div مع حاوية فئة،
ثم للشاشات الصغيرة هو 540 بكسل.
لذلك، ستلاحظ أنه إذا كان لديك عرض شاشة بين 576 إلى 768،
فسيتم وضع المحتوى الخاص بك في 540 بكسل،
وسيتم توسيط في عرض الشاشة.
لذلك، سيتم ترك المساحة المتبقية كهوامش على جانبي هذا المحتوى.
وبالمثل، بالنسبة للوسط، يكون 720 بكسل وما إلى ذلك.
الآن، ثم يمكنك تحديد عدد الأعمدة التي يشغلها كل محتوى.
ثم البادئات فئة العمود التي ستستخدمها
هي.col صغيرة جدًا، .col-sm للصغيرة،
على طول الطريق إلى كبيرة جدًا.
إذا قمت بتحديد شيء مع.col-md،
فهذا ينطبق على الشاشات المتوسطة إلى الكبيرة الإضافية.
لذلك، كلما قمت بتحديد أي col وبعض الأرقام،
فإن ذلك ينطبق على حجم الشاشة المحدد وكل شيء عن حجم الشاشة هذا.
الآن، في جميع حالات حجم الشاشة،
يتم تعريف عدد الأعمدة ليكون 12 عمودًا.
تم تصميم الشبكة في حالة bootstrap لتكون 12 عمودًا وهذا قابل للتكوين،
ولكن القيمة الافتراضية هي 12 عمودًا.
السبب في اختيار 12 هو أن 12 هو مضاعف جيد من اثنين، ثلاثة،
أربعة وهلم جرا.
لذلك يمنحك الكثير من المرونة من حيث
عدد الأعمدة التي تختارها لوضع المحتوى الخاص بك.
بين كل عمود، لذلك إذا قمت بوضع
قطعتين من المحتوى جنبًا إلى جنب مع divs الخاصة بهم،
فبين هاتين القطعتين من المحتوى سيكونان مزراب صغير سيتم تركه.
المساحة البيضاء الفارغة التي سيتم تركها بعيدًا عن عرض المزراب،
وهو 30 بكسل فقط افتراضيًا.
لذلك، 15 بكسل هو من قطعة واحدة من المحتوى و 15 بكسل من جزء آخر من المحتوى.
سيتم ترك SumTotal معًا 30 بكسل من المساحة البيضاء بين قطعتي المحتوى.
فكر في كيفية
إجراء تخطيط عمود الصحيفة وتبدأ في رؤية المراسلات بين
تخطيط عمود الصحيفة وكيف تقوم
شبكة bootstrap بتخطيط المحتوى على ذلك الملعب.
تتيح لك شبكة Bootastrap القيام بمحتوى المستوى التالي،
بحيث يمكنك تضمين المحتوى داخل المحتوى ثم القيام بتخطيط المحتوى المتداخل.
أيضا، فإنه يدعم الإزاحات.
سنرى استخدام الإزاحات أيضًا في بعض الأمثلة لاحقًا.
لذلك دعونا ننظر إلى المثال الأول لدينا لكيفية تطبيق فئات العمود بوتسترابس،
وكيف سيتم تقديمها في الواقع على أحجام الشاشة المختلفة.
في ما يلي مثال على الحالة التي تقدمت بها إلى اثنين من divs،
واصلة العمود 12 ثم عمود واصلة sm خمسة
للقطعة الحمراء من المحتوى
وللآخر قمت بتطبيق واصلة العمود 12 والعمود sm سبعة.
وبالتالي فإن الطريقة التي سيتم بها وضع هذا المحتوى هي لشاشات صغيرة إضافية،
سيتم تكديس قطعتين من المحتوى واحدة فوق الأخرى.
لذلك سيتم تكديس واحد أحمر على رأس البحر الأخضر اللون واحد.
ولكن بالنسبة للشاشات الصغيرة إلى الكبيرة،
سيتم وضع قطعتين من المحتوى جنبًا إلى جنب.
والسبب في ذلك هو لأننا قلنا عمود sm خمسة والعمود sm سبعة للاثنين.
لذلك بالنسبة للصغيرة إلى الكبيرة جدًا، يتم وضعها جنبًا إلى جنب
بحيث يحتل المحتوى الأحمر
خمسة أعمدة في أقصى اليسار وسيشغل المحتوى الأخضر البحري الأعمدة السبعة الصحيحة من الصف الخاص بك، على
طول الطريق من أحجام الشاشة الصغيرة إلى الكبيرة جدًا.
إذن هذه هي الطريقة التي نحدد بها تخطيط المحتوى لأحجام الشاشة المختلفة.
يوفر Bootstrap أيضًا فئات إضافية تسمى
فئات الواصلة Order والتي تسمح لك بإعادة ترتيب المحتوى على الشاشة.
على سبيل المثال، إذا قمت بتطبيق أمر sm أولاً، فسيتم دفع
طلب بعض الطبقة الأخيرة إلى divs،
كما هو موضح في المثال هنا، في هذه الحالة،
سيتم دفع div الذي تقوم بتطبيق النظام sm الأخير عليه إلى
الجانب الأيمن من الشاشة
وسيتم دفع الأمر sm div الأول إلى الجانب الأيسر من الشاشة.
لذا، يسمح لك تطبيق فئات الترتيب هذه بإعادة ترتيب المحتوى على البرنامج النصي.
ليس هذا فقط، يسمح لك النظام sm أيضًا بتحديد نفس الترتيب
sm واحد لطلب sm 12 لتحديد الترتيب الذي يحتاج المحتوى إلى عرضه على الشاشة.
لذا باستخدام رقم أكبر،
يمكنك تحويل المحتوى إلى الجانب الأيمن
من الصف وسيحول عدد أصغر المحتوى إلى الجانب الأيسر من الصف.
سنرى مثالا على ذلك أيضا في التمرين.
الدعم المختلط المثير للاهتمام الذي يجلبه Bootstrap Grid مع استخدام
تخطيط Flexbox هو المحاذاة الرأسية للمحتوى.
لم يكن لدى إصدارات Bootstrap السابقة، مثل Bootstrap 3 والإصدارات السابقة، القدرة على إجراء محاذاة رأسية للمحتوى.
مع استخدام Flexbox لتصميم شبكة Bootstrap في Bootstrap أربعة،
نحصل على المرونة التي يجلبها CSS Flexbox من حيث القيام المحاذاة الرأسية.
لذلك إذا كنت تريد أن يكون المحتوى مركزًا عموديًا،
فعندئذ إلى الصف،
يمكنك تطبيق الفئة المسماة «محاذاة مركز العناصر».
لذلك في هذه الحالة، أيا كان المحتوى الذي تم
وضعه، سيتم وضعه بشكل عمودي داخل هذا الصف معين.
وبالتالي فإن المحتوى الذي يحتل
أكبر ارتفاع سيكون هو المحتوى الذي سيتم
محاذاة ما تبقى منه عندما يتم وضعه في هذا الصف أو إذا قمت بتحديد ارتفاع الصف مسبقًا،
فسيتم تركيز كل المحتوى عموديًا داخل هذا الصف المحدد هناك.
ليس ذلك فقط، تدعم شبكة Bootstrap أيضًا المحاذاة الأفقية للمحتوى.
دعونا ننظر إلى مثال.
لذلك إذا قمت بتحديد المحتوى الخاص بك مثل هذا.
قل، لديك ثلاثة أعمدة وأول واحد تقوم بتحديد عمود فئة div ثلاثة،
ثم العمود الأوسط الذي ستقوله عمود فئة div تلقائي.
سأعود إلى ذلك العمود التلقائي في فترة قصيرة.
واليمين يقول عمود فئة div 3.
لذلك في هذه الحالة، ما نحدده هو أن
الأجزاء اليسرى واليمنى من المحتوى ستشغل ثلاثة أعمدة لكل منهما.
الوسط، عندما أقول، «عمود تلقائي»،
فهذا يعني أن عدد الأعمدة التي
يشغلها هذا div معين سيتم تحديده تلقائيًا من خلال المحتوى الذي يتم تضمينه داخل هناك.
وبناءً على المحتوى،
سيقوم عدد الأعمدة التي يشغلها div بضبط نفسه تلقائيًا.
في هذه الحالة بالذات، في هذا المخطط،
يتم استيعاب هذا المحتوى الخاص ضمن أربعة أعمدة.
حتى الآن لديك أربعة أعمدة يتم استخدامها من قبل div المركز،
وثلاثة أعمدة على اليسار وثلاثة أعمدة على اليمين.
حتى مجموع المجموع، لديك 10 أعمدة.
لذلك لديك عمودين يتم تركهما فارغين.
الآن، إذا قمت بتحديد الصف،
فإنك تحدد ضبط مركز المحتوى، ثم،
سيتم توسيط المحتوى بأكمله في هذا الصف معين فيما
يتعلق بالصف الأفقي.
يمكنك أيضًا الحصول على المحتوى المبرر لليسار،
ومبرر لليمين، واثنين من الخيارات الأخرى.
التفاصيل موجودة في وثائق bootstraps.
يتيح لك Bootstrap أيضًا القيام بإزاحة الأعمدة.
كيف يعمل هذا؟ دعونا ننظر إلى مثال.
في هذا العمود إزاحة،
يمكننا تحديد جزء من المحتوى،
إضافة إلى ذلك إذا قمنا بتطبيق الفئة كوصلة إزاحة sm واصلة واحدة.
ما نحدده هو للشاشات الصغيرة إلى الكبيرة الإضافية،
يجب أن يتم تحويل جزء المحتوى هذا إلى اليمين بواسطة عمود واحد.
لذلك عندما يتم وضع هذا المحتوى، كما ترون،
يتم ترك عمود واحد في أقصى اليسار فارغًا ويتم تحويل المحتوى إلى اليمين بواسطة عمود واحد.
ويمكنك تخطيط المحتوى المتبقي على الجانب الأيمن.
لذلك مجموع المجموع، يمكنك أن ترى أن اثنين من divs سوف
تحتل 11 عمودا ولكن عمود واحد إزاحة إلى اليمين.
إذن هذه هي الطريقة التي يمكننا بها التحكم في تخطيط المحتوى باستخدام إزاحة العمود.
لذلك كما ترون،
باستخدام مواصفات حجم العمود،
والمحاذاة الرأسية والأفقية،
والإزاحة، والدفع والسحب،
والمرن الأول والمرن الأخير،
ونحن قادرون على الحصول على الكثير من السيطرة على كيفية وضع
محتويات لعرض الشاشة المختلفة وأحجام الشاشة المختلفة .
يذهب Bootstrap إلى أبعد من ذلك من خلال السماح لك بتضمين المحتوى داخل divs.
على سبيل المثال، إذا قمت بتحديد اثنين من divs،
كما ترى مع العمود sm خمسة والعمود sm سبعة،
سيتم وضع اثنين من المحتويات كما هو موضح هنا.
الآن، داخل div الأيمن،
يمكنني مرة أخرى
الدخول وتقسيم عرض div إلى صف ثم سيعطيني هذا الصف تلقائيًا
12 عمودًا آخر لهذا الجزء من الشاشة ثم يمكنني بعد ذلك القيام بالتخطيط باستخدام
تعشيش divs والقيام بالتخطيط لأجزاء مختلفة من هذا العمود .
لذلك التعشيش مثل هذا،
يجلب لك المزيد من المرونة في الطريقة التي تضع بها المحتوى في الملعب الخاص بك.
مع كل النقاش حول نظام شبكة Bootstrap وكيف
تدعم شبكة Bootstrap طرقًا مختلفة لوضع المحتوى،
سنقوم الآن، ننتقل إلى مجموعتنا التالية من التمارين.
سنقوم بتطبيق شبكة Bootstrap على صفحة index.html الخاصة بنا
من أجل القيام بتخطيط المحتوى داخل أو صفحة index.html.
سنستخدم أيضًا بعض فئات CSS المخصصة.