سنواصل ممارسة شبكة bootstrap
التي بدأنا بها في التمرين السابق.
سنقوم ببعض الأشياء الأخرى
لصفحة index.html الخاصة بنا من أجل تحسين تخطيطها.
سنقوم باستخدام بعض فئات CSS المخصصة وإضافة بعض الألوان
إلى صفحة index.html الخاصة بنا باستخدام فئات CSS المخصصة.
الشيء التالي الذي سأقوم به هو النزول إلى التذييل وبالنسبة لهذا UL هنا،
ستلاحظ أن هذه القائمة عندما تنظر إلى
صفحة الويب الخاصة بنا يتم عرضها في صفحة الويب باستخدام هذه القائمة النقطية هنا.
أنا لست سعيدا جدا مع هذه القائمة النقطية،
أريد إزالة هذه النقاط النقطية ثم ببساطة تظهر لهم فقط الروابط هناك.
لذلك للقيام بذلك، سأستخدم نمط قائمة آخر يسمى
قائمة- unstyled وتطبيق ذلك على علامة UL هناك.
بالعودة إلى صفحة الويب الخاصة بنا،
إلى علامة UL هذه في التذييل،
سأقوم بتطبيق الفصل الدراسي على أنه قائمة غير مصقول،
وهذا من شأنه إزالة تلك الرموز أمام هذه الروابط هناك.
الآن، اسمحوا لي أن أضيف بعض فئات CSS المخصصة إلى صفحة index.html.
للقيام بذلك، سنقوم الآن بإنشاء مجلد هنا وتسميته كمجلد CSS هنا.
داخل مجلد CSS،
سأقوم بإنشاء ملف جديد وتسمية الملف باسم styles.css.
الآن، داخل ملف styles.css،
يمكنني الآن إضافة بعض فئات CSS من أجل تصميم صفحتنا.
اسمحوا لي أن أضيف بعض فئات CSS هنا.
لذلك، أود إضافة صفي الأول كرأس صف.
لذا كما يوحي الاسم، فإن
هذه الفئة أتقدم بطلب إلى الرأس.
وبعد ذلك، سأقوم بتطبيق الهامش
كصفر بكسل تلقائي
ثم الحشو كصفر بكسل تلقائي.
لذلك، هذا هو لرأس الصف.
لذا، سأحصل على هامش صفر وحشو صفر لرأس الصف.
ثم لمحتويات الصف،
لذلك سأقوم بإضافة فئة CSS أخرى تسمى محتوى الصف.
ثم لهذا، سوف أضيف الهامش صفر بكسل السيارات،
ومن ثم الحشو يكون في 50 بكسل،
صفر بكسل، 50 و صفر بكسل.
ثم سأقوم بإضافة حد في
أسفل الصف الخاص بي هنا.
وبعد ذلك، الحدود سأعطيها بكسل واحد ومن ثم نسميها التلال.
وسأقوم بتعيين الحد الأدنى للارتفاع ليكون 400 بكسل للمحتوى هنا.
بهذه الطريقة، ستبدو صفحة الويب الخاصة بي أجمل على الشاشة.
الآن هذا مرة أخرى، عليك أن تحاول أن
ترى حتى تكون راضيا عن الطريقة التي وضعت بها الصفحة.
الآن أيضًا، سأقوم بتضمين
فئة أخرى تسمى التذييل الذي قد يكون قد خمنت بالفعل،
سأقوم بتطبيق على التذييل
وسأقوم بتطبيق لون خلفية على التذييل باسم D1C4E9.
إذا سألتني كيف اخترت اللون،
نظرت فقط إلى اللون ثم كنت سعيدًا بهذا اللون.
يمكنك اختيار أي لون تريد تطبيقه،
ولكن يبدو أن هذا اللون جيد بالنسبة لي.
لذلك، أضفت هذا اللون.
وبالنسبة للحشو، للتذييل،
أود أن أضيف 20 بكسل وصفر بكسل.
الآن، بمجرد إضافة هذه الأنماط إلى ملف CSS الخاص بي،
دعني أطبق ملف CSS على صفحة index.html.
أنا ذاهب إلى صفحة index.html.
من الواضح أنني بحاجة إلى استخدام ملف CSS هذا داخل صفحة index.html الخاصة بي.
حتى مباشرة بعد ملف CSS bootstrap،
سأقوم بعمل رابط وورقة أنماط،
وهذا هو ملف style.css هناك.
لذلك يتم تخزين ملف CSS الخاص بي.
لذلك، سأقوم بتضمين ذلك في صفحة index.html الخاصة بي.
الآن، أنا ذاهب للذهاب إلى الجسم وتطبيق الطبقات التي قمت بإنشائه للتو.
حتى الذهاب إلى الرأس،
وسوف تطبيق فئة رأس الصف إلى ديف في الرأس.
بعد ذلك، بالنسبة للمحتوى،
سأقوم بتطبيق فئات محتوى الصف على الصفوف هناك.
لذلك، إلى الصفوف الثلاثة في المحتوى،
أقوم بتطبيق فئة محتوى الصف ثم الانتقال إلى التذييل،
إلى علامة التذييل،
سأقوم بتطبيق تذييل الفصل هنا،
ثم قم بحفظ التغييرات.
لنذهب ونلقي نظرة على تلك الصفحة الآن
بالانتقال إلى صفحة الويب الخاصة بك،
بدأنا بالفعل نرى بعض التغييرات المثيرة للاهتمام على صفحة الويب.
لذلك، يمكنك الآن أن ترى أن المحتوى
في صفحة الويب قد وضعت أكثر نظافة قليلا.
هذا هو أسفل الحدود التي أضفناها إلى محتوى الصف،
بحيث يمكنك أن ترى أن هناك فصلاً كافيًا بين الصفوف على الرغم
من أن محتويات الصفوف لا تزال موضوعة نحو الأعلى في الصفوف،
بحيث يكون لديك هذه الصفوف الثلاثة ثم انظر إلى التذييل،
يحتوي التذييل الآن على اكتسب لون الخلفية الذي قمت بتطبيقه،
ولاحظ كيف يتم تصميم الروابط مع القائمة غير المصقولة على الجانب الأيسر هنا.
لم ننتهي بعد، وصلنا إلى القيام ببعض التغييرات الأخرى على صفحة index.html،
ومن ثم العودة وإلقاء نظرة على النتيجة النهائية لهذا التمرين.
بالعودة إلى المحرر الخاص بك،
سأقوم بإضافة عدد قليل من فئات CSS إلى بنية أسلوبي،
وهو ملف، لذلك سأذهب إلى هناك ثم أضف فئة تسمى Jumbotron.
لذا، سترى أننا قد طبقنا بالفعل Jumbotron لرأسنا هناك.
الآن، إذا قمت بإضافة المزيد من الخصائص إلى فئة Jumbotron هذه هنا،
فسيتم تطبيق هذا على Jumbotron،
بالإضافة إلى Jumbotron الافتراضي القياسي الذي يتضمن بالفعل bootstrap.
أنا ذاهب لإضافة في عدد قليل من الأشياء الأخرى،
وأنا ذاهب لإضافة في الحشو من
70 و 30 بكسل على محيطها،
ثم هامش صفر بكسل في كل مكان،
وسوف تعيين خلفية هذا إلى 9575CD.
هذا هو إلى حد ما من اللون الأرجواني الداكن الذي يبدو أن تسير بشكل جيد جدا على Jumbotron.
مرة أخرى، عن طريق التجربة والخطأ
، اخترت هذا اللون،
وأيضا لون النص كما أبيض الأزهار.
لذا بالنسبة لـ Jumbotron،
سنقوم بتطبيق تلك الفصول، وأيضًا،
سأقوم بتطبيق فئة أخرى على فئة العنوان.
لدينا عنوان في التذييل،
لذلك أنا ذاهب لتغيير حجم الخط من ذلك إلى 80 في المئة،
خط أصغر قليلا من الخط العادي،
والهامش، وسوف أعطيه صفر بكسل،
واللون، وأنا ذاهب إلى استخدام صفر F، صفر F،
صفر F، صفر F،
ثم حفظ التغييرات.
لذلك إضافة المزيد من فئات CSS
، والعودة إلى index.html.
ما سأقوم به الآن،
هو الانتقال إلى صفوف المحتوى ثم
سأحاول وضع هذا المحتوى في الوسط،
عموديًا في هذا الصف.
هذا هو المكان الذي سوف تأخذ مساعدة من
المحاذاة الرأسية التي تدعم شبكة التمهيد من خلال دعم فليكسبوكس.
للقيام بذلك، أود أن أقول محاذاة مركز العناصر،
لذلك هذا هو الطبقة الأخرى التي أحتاج إلى إضافتها، محاذاة عناصر-مركز.
وسأضيف ذلك إلى الصفين المتبقيين أيضًا، قم
بمحاذاة مركز العناصر إلى الصف الثاني والثالث،
ويجب أن يقوم ذلك بتبرير رأسي لمحتوى الصفوف.
سنرى النتيجة خلال دقيقة
الذهاب إلى أسفل إلى تذييل الصفحة.
في التذييل، ترى أننا استخدمنا
عمود السيارات لمحتوى حقوق الطبع والنشر هذا هناك.
الآن، سأقوم بوضع هذا الحق في الوسط أفقيا
باستخدام فئة مركز المحتوى المبرر،
لذلك هناك محتوى مبرر وعدد قليل من الطبقات الأخرى هناك.
سأستخدم لتبرير فئة مركز المحتوى لذلك.
سيؤدي ذلك بشكل أساسي إلى وضع هذا العمود في وسط الصف هناك.
التي تنطبق على ذلك، وبعد ذلك،
تغيير واحد صغير سأقوم به،
هو هذا div الداخلي هناك،
سأقوم بتطبيق فصل دراسي كمركز نص
لذلك، بحيث تتمحور هذه الروابط على الشاشة.
مع هذه التغييرات، دعونا نذهب ونلقي نظرة على صفحة الويب،
في نهاية هذا التمرين.
الذهاب إلى
صفحتنا على شبكة الإنترنت، بدأت بالفعل تبدو أفضل الآن،
لذلك يمكنك أن ترى الآن أن Jumbotron هو الآن على غرار لون خلفية جديد،
وهو الأرجواني الداكن قليلا هناك،
والحروف هو الآن في اللون الأبيض الأزهار،
قليلا بادئة هناك،
ثم يمكنك الآن أن ترى أن المحتوى في صفوف المحتوى يتم توسيطه عموديًا،
لصفوف المحتوى الثلاثة.
هذا هو استخدام مركز عناصر المحاذاة الذي قمنا بتطبيقه على الصفوف هناك.
ثم الذهاب إلى التذييل،
يمكنك الآن أن ترى أن هذا حق المؤلف له ما يبرره الآن إلى وسط الشاشة.
انظر إلى كيفية تركيز الروابط هنا.
أدركت أنني أريد أيضا أن أضع هذا التوجه عموديا إلى هذا الصف معين،
لذلك دعونا نذهب وتطبيق فئة أخرى لنقل هذا إلى
وسط هذا الصف معين عموديا.
لذلك للقيام بذلك، والعودة إلى الفهرس.
html، في تذييل هذا العمود المحدد الذي يحتوي على تلك،
سأقوم بتطبيق الفصل كمركز محاذاة ذاتي.
يجب تطبيق هذا على div الذي يستخدم فئة العمود.
مع هذا، سيتم محاذاة هذا المحتوى معين إلى مركز الصف.
سيظل المحتوى المتبقي في الأعلى.
دعونا نلقي نظرة نهائية على تذييل الصفحة.
الذهاب إلى التذييل في صفحة الويب الخاصة بنا،
يمكنك الآن أن ترى كيف تم وضع هذا عموديا في المركز.
لا تزال هذه القطعتين من المحتوى محاذاة إلى الجزء العلوي من الصف،
وهذا أمر جيد لأن ذلك يبدو جيدا على هناك،
ولكن هذا واحد لقد سحبه عموديا إلى وسط هذا الصف معين.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، رأينا استخدام فئات CSS المخصصة،
واستخدمنا أيضًا بعض الفئات
لتبرير المحتوى أفقيًا وعموديًا في صفوفنا.
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع الرسالة،
شبكة Bootstrap، الجزء الثاني.