يبحث التمرين التالي في طرق عرض المحتوى على صفحة الويب الخاصة بنا.
ينظرون إلى كيف يمكننا تضمين الجداول في صفحة الويب الخاصة بنا وكيف يمكننا
تصميم تلك الجداول باستخدام فصول Bootstrap لجداول التصميم،
بما في ذلك تصميم الجداول المتجاوب.
سننظر أيضًا في مكون آخر متعدد الاستخدامات
متوفر في Bootstrap يسمى كبطاقة.
تسمح لك البطاقة بعرض المحتوى بملايين الطرق.
لذلك سننظر في طريقتين مختلفتين لاستخدام بطاقة لعرض المحتوى.
في وقت لاحق، سوف نرى استخدام البطاقات مرارا وتكرارا
للتصاميم المستقبلية لأجزاء معينة من موقعنا على الانترنت.
للبدء، افتح صفحة aboutus.html.
نحن ذاهبون لإدراج جدول ورقتين
في صفحة aboutus.html لعرض بعض البطاقة.
أولا، دعونا انتقل ببطء إلى أسفل حتى بعد تلك البطاقة للحصول على معلومات القيادة،
وهناك الحق أنا ذاهب لتقديم ديف آخر
الذي أنا ذاهب إلى أرفق الجدول هنا.
لذلك، سوف أعرض صفًا جديدًا هنا،
مع الفصل كصف صف المحتوى.
وداخل هذا div،
سنقدم عمودًا يستضيف الجدول هنا.
لذلك، سوف أعرض عمود، العمود 12،
العمود سم-9 وإغلاق ديف.
وداخل div، اسمحوا لي أن أعطي عنوان هنا
حقائق وأرقام وإغلاق h2.
مباشرة بعد ذلك، اسمحوا لي أن أعرض ديف آخر،
أن العمود الطبقات سم والعمود سم-3 وإغلاق هذا ديف هناك.
الآن نحن ذاهبون إلى ترك div الثاني فارغة.
أنا ذاهب لملء الجدول في ديف الأول هنا
وبعد ذلك سوف نلقي نظرة سريعة على الجدول بعد أن أضيف في التعليمات البرمجية للجدول.
حتى هنا لقد أدرجت في التعليمات البرمجية للجدول.
دعونا نلقي نظرة سريعة على الطاولة ومن ثم سنعود لمناقشة هذا الرمز هنا.
الذهاب إلى صفحة «حول» التي كنا نعمل عليها بالفعل من وقت سابق،
بعد قسم قيادة الشركات،
سترى صف جديد هنا يقدم الجدول.
لذلك، لاحظ كيف يتم تصميم الجدول،
لذلك لدينا رأس مع h2 المدرجة هناك،
ولكن دعونا نركز خصيصا على هذا الجدول.
لذلك ترى أن هذا الجدول قد تم تصميمه
باستخدام بعض فئات Bootstrap المستخدمة لتحسين الجدول.
تم تقديم رأس مع خلفية داكنة،
ومن ثم تم تصميم جميع القواعد في مثل هذه الطريقة أن الصفوف البديلة هي
في لون مختلف بحيث يمكنك التمييز بوضوح بين صفوف هذا الجدول.
هذا هو ما يشار إليه في شروط Bootstrap كجدول مخطط.
هذا مثال واحد على كيفية تصميم جدول. من
المثير للاهتمام الآن، إذا نظرت إلى نفس الجدول في جهاز صغير،
ستلاحظ أن الجدول لا يزال
مرئيًا باستثناء أن هذا الجدول يصبح الآن قابلاً للتمرير.
لذلك، سيتم عرض أي شيء يمكن عرضه داخل المحتوى
ويمكن تمرير بقية الجدول أفقيا في مكانه.
لذلك هذا هو المكون المتجاوب لدعم Bootstrap للجداول في العمل.
الآن دعونا نذهب ونلقي نظرة على التعليمات البرمجية نفسها.
الآن من الواضح أن هذا الجدول هو واضح إلى حد
ما، لديه مجموعة من الصفوف وبعض الأعمدة.
لذلك عليك أن تتوقع مني استخدام
علامات th، td و tr النموذجية هناك.
التبديل مرة أخرى إلى التعليمات البرمجية،
ستلاحظ أنني أرفق هذا الجدول داخل
div الذي قمت بتطبيق جدول الفئة استجابة.
لذلك هذا هو ما يجعل هذا الجدول يستجيب بحيث على
شاشات أصغر يمكنك تمرير أفقيا الجدول.
الآن للجدول نفسه،
لاحظ كيف طبقت فئتين.
واحد هو فئة الجدول،
لذلك هذا هو تجاوز
عرض الجدول الافتراضي على المتصفحات من خلال توفير فئات Bootstrap الخاصة.
والثاني يقول الجدول مخطط.
لذلك هذا هو ما يصمم جدول مع صفوف بديلة بألوان مختلفة هنا.
ثم الرأس نفسه،
حتى تتمكن من رؤية أن الرؤوس الموصوفة هنا مع الطبقة thead-dark،
لذلك هذا يجعل الرأس مظلمة.
ثم سترى الجدول رسم نفسه وصفها هنا مع العلامات عشر هنا.
لذلك هذا هو تعريف الجدول القياسي.
إن جسم الجدول نفسه هو استخدام html القياسي لـ tr،
و td، والعناصر التي كنت معتادًا عليها بالفعل في html5.
لذلك، هذا هو ما يتم بناء الجدول مع،
ومن ثم إغلاق الجسم الجدول. لذا هذا حول هذا الموضوع
لذلك نحن كل ما هو فريد من نوعه حول Bootstrap نفسه هو تطبيق
فئات Bootstrap المحددة هذه على
عنصر الجدول نفسه لتصميمه بشكل أكبر،
لتتناسب مع صفحة ويب تصميم Bootstrap.
المكون التالي الذي سأقوم بإضافته إلى
صفحة aboutus.html هو مكون بطاقة في Bootstrap.
يسمح لنا مكون البطاقة بعرض المحتوى
عن طريق تعيينه بعيدًا عن باقي المحتوى.
الآن هنا، التمرير إلى الصف الأول هنا،
هناك لدينا تاريخنا في استخدام div الثاني،
لاحظ أن div الأول يشغل بالفعل col-sM-6،
div الثاني فارغ حاليًا.
لذا إلى هذا div،
سأضيف في الفصل باسم col-sm.
بعد ذلك، الخوض في هذا div سأعرض div آخر إلى بطاقة الفصل هنا.
حتى داخل تلك ديف،
وأنا ذاهب لبناء بطاقة بلدي لعرض بعض المحتوى هنا.
حتى في هذا div، سوف نقدم h3 أن
الطبقة كما بطاقة رأس bg-الابتدائي.
لذلك سترى أنه سيتم عرض هذا h3
كرأس بطاقة مع تلك الخلفية كأساسي
ثم النص الأبيض الذي ستحدد فئة Bootstrap النص ليكون أبيض اللون.
ثم داخل هذا H3،
أنا ذاهب لتقديم عنوان هذه البطاقة هنا
وهو «حقائق في لمحة».
حتى أتمكن من عرض بعض المحتوى داخل هذا div هنا.
الآن، إلى هذه البطاقة،
بعد ذلك أنا ذاهب إلى إضافة في div الداخلية آخر
هنا مع الطبقة كما بطاقة الجسم،
وداخل هذه البطاقة الجسم سيكون
المحتوى الفعلي الذي تم عرضه في هذه البطاقة.
دعونا حفظ التغييرات ثم انتقل وإلقاء نظرة بسرعة على صفحة الويب الخاصة بنا.
الذهاب إلى صفحة الويب الخاصة بنا،
يمكننا أن نرى بالفعل البطاقة تتشكل في صفحة الويب الخاصة بنا،
حتى تتمكن من رؤية أن النصف الأيسر يشغله التاريخ
والنصف الأيمن سترى البطاقة وضعت في مكانها.
دعونا نضيف بعض المحتوى إلى هذه البطاقة.
الذهاب إلى كتلة البطاقة هذه،
والآن سأستخدم قائمة وصف
وهذه القائمة الوصف في Bootstrap تسمح لي
بتطبيق فئات الصف والعمود عليها وبالتالي تنسيق المحتوى في الداخل.
حتى داخل هذه القائمة الوصف،
وأنا ذاهب لإضافة
في dt أن الطبقة و col-6 هنا،
وهذا يعني أن هذا سوف تحتل ستة أعمدة
داخل هذه القائمة الوصف التي هي في حد ذاتها صف هنا.
حتى التعشيش كما ترون القادمة إلى الصورة هنا.
لذا إلى هذا dt،
سأقوم بإضافة عنوان الوصف هذا هنا،
ثم أدناه سأضيف في dd مع
الفصل col-6 هنا وبعد ذلك يمكنني أن أضيف في بعض السياق هنا.
و هنا
دعونا حفظ التغييرات ونلقي نظرة سريعة على بطاقتنا.
الذهاب إلى بطاقتنا، يمكنك الآن أن ترى كيف
تسمح لي قائمة الوصف بعرض المعلومات.
داخل بطاقتي، يمكنك أن ترى الجانب الأيسر والجانب الأيمن عرض بوضوح.
هنا نحن الاستفادة من قائمة الوصف،
وإضافة في المعلومات هناك.
اسمحوا لي أن أنهي الأجزاء المتبقية هنا بإضافة في التعليمات البرمجية،
ثم أعود وألقي نظرة على النسخة النهائية من هذه البطاقة.
هنا، يمكنك أن ترى أنني قد أكملت إضافة
في الأجزاء المتبقية من قائمة الوصف الخاصة بي.
دعونا نذهب ونلقي نظرة سريعة على النسخة النهائية من تلك البطاقة.
إلقاء نظرة على البطاقة،
وكيف تتشكل.
هنا، يمكنك الآن أن ترى كيف يمكننا الاستفادة من بطاقة لعرض
بعض المحتوى في صفحة الويب الخاصة بنا
وتمييزه عن بقية المحتوى إلى صفحة الويب.
لذا، فإن البطاقة عبارة عن مكون متعدد الاستخدامات يسمح لنا بعرض محتوى كهذا.
دعونا نواصل مع هذا التمرين،
مضيفا في بطاقة أخرى إلى صفحة الويب هذه.
دعونا الآن نعود مرة أخرى إلى صفحة aboutus.html لدينا.
والحق تحت البطاقة التي قمنا بإضافتها سابقا،
وأنا ذاهب لإضافة في ديف آخر مع فئة «كول-12" هنا.
ثم، داخل هذا div،
سأقوم ببناء بطاقة أخرى هنا لعرض بعض المعلومات الإضافية.
حتى داخل هذا ديف،
وسوف بناء بطاقة مع
فئة «بطاقة الجسم bg-light بطاقة.»
لذلك، سترى أنني أطبق كل من البطاقة وجسم البطاقة إلى نفس div هنا.
وهذا يعني أن هذه البطاقة معينة لن يكون لها
أي رأس بطاقة ولكن بدلا من ذلك يحتوي فقط على بطاقة الجسم هنا.
وبعد ذلك، أيضا، يعني ضوء bg أن الخلفية ستكون في لون تلاشى.
إلى حد ما من لون رمادي إضافة إلى الخلفية.
لذلك هذا أيضا تسعى هذه البطاقة بغض النظر عن بقية المحتوى هنا.
الآن، داخل هذه البطاقة،
سأستفيد من رمز كتلة لعرض
بعض المعلومات المضحكة المثيرة للاهتمام هناك.
لذلك سأستخدم blockquote.
هذا هو أيضا علامة HTML هنا.
ثم إلى هذا، سأقوم بتطبيق فئة blockquote من Bootstrap.
لذلك يقوم Bootstrap بتصميم هذا blockquote بطريقته الخاصة.
لذلك دعونا نغلق هذا القلوب.
وداخل هذا blockquote،
سأقوم بتضمين اقتباس هنا.
لذلك سأبدأ مع p،
وتطبيق فئة تسمى mb-0.
و mb-0 هي فئة الأداة المساعدة التي يوفرها Bootstrap.
ما يعنيه هذا هو الهامش السفلي صفر.
لهذا على وجه الخصوص، أيا كان تضمينه في هذه العلامة p،
سيكون لدينا هامش سفلي من الصفر.
وهذا يساعدني على عرض المحتوى بشكل صحيح هنا.
حتى هنا أنا ذاهب لإضافة في المحتوى الفعلي هناك،
ومن ثم إغلاق هذا ص لذلك هذا ص يحتوي على الاقتباس الفعلي.
الآن، إلى هذا الاقتباس،
بحيث ترى أنه في المحتوى الخاص بك،
يمكنك أيضًا تضمين عروض الأسعار في شفرتك هناك.
لذلك، يمكنني أيضًا إضافة تذييل مع الفصل الدراسي.
لذلك اسمحوا لي أن دفع المسافة البادئة للتذييل.
لذا فإن هذا التذييل هو أيضًا فئة يدعمها blockquote.
لذلك كل ما قمت بتضمينه في blockquote،
جنبا إلى جنب مع تذييل الصفحة،
سوف تمكنك من عرض مؤلف هذا الاقتباس.
لذلك أنا هنا بما في ذلك المؤلف،
ثم واحد آخر.
باستخدام الاستشهاد، يمكنني حتى الاستشهاد بمصدر هذا الاقتباس.
لذا يمكنك أن ترى ذلك
مرة أخرى، هذا هو مجرد بعض الاقتباس الذي أستخدمه فقط للمتعة لتظهر لك،
وأيضا في نفس الوقت توضيح،
كيف يعمل blockquote،
وأيضا كيف يمكننا إنشاء نوع آخر من البطاقة في Bootstrap.
لذلك مع هذا، أضفنا في التعليمات البرمجية لعرض blockquote هنا.
لذلك اسمحوا لي أن أرى إذا كان هذا التغيير،
وبعد ذلك سوف نذهب ونلقي نظرة على كيفية عرض هذا الاقتباس في صفحتنا على شبكة الإنترنت.
الذهاب إلى المتصفح، في صفحتنا،
يمكنك أن ترى أن تاريخنا والحقائق في لمحة يتم عرضها جنبا إلى جنب.
أسفل ذلك، لدي هذه القطعة الطويلة من المحتوى هنا.
دعونا نلقي نظرة على نفس الصفحة في شاشة صغيرة إضافية.
لذلك في شاشة صغيرة إضافية،
يمكنك أن ترى أن التاريخ والحقائق مكدسة في الأعلى،
والاقتباس هو أسفل هنا في بطاقتها الخاصة.
حتى تتمكن من رؤية ورقتين،
واحدة أسفل أخرى هنا،
ومن ثم الجدول نفسه عرض في الجزء السفلي.
وبالتالي فإن الجدول نفسه هو جدول للتمرير هنا.
لذلك مع هذا، نكمل هذا التمرين.
لذلك في هذا التمرين،
تعلمنا كيف يمكننا استخدام الجداول والبطاقات لعرض المحتوى في صفحة الويب الخاصة بنا.
الآن بعد أن أكملنا هذا التمرين
، حان الوقت للقيام بالتزام git.