البحث في الموقع

سيكون هذا الدرس مُتابعة لدروس Boostrap الّتي قدّمتها الأكاديميّة، وفيه سيتمّ تجهيز وتخطيط صفحة عامّة تصلح لمُختلف الأغراض والاحتياجات. يعود استخدام أُطر العمل (frameworks) بالنفع الكبير على المُطوّر، حيثُ لم يَعد على المُطوّر التفكير بالمشاكل المُتكرّرة ورُبما التافهة، وهي مشاكل قد تمّ حلها بالفعل من قبل صانعي أُطر العمل، فعلى السبيل المثال، التوافقيّة بين المُتصفّحات، دعم أبعاد أو أحجام الشاشة المُختلفة (التجاوبية)، إلى آخره من المشاكل الأخرى، ويُسرّع هذا الأسلوب أو هذا النمط من التطوير كثيرًا من عمليّة تخطيط وتطوير الموقع. يتميّز إطار العمل Bootstrap بشهرته الواسعة الّتي يتمتّع بها، الأمر الّذي يجعل من صيانة وتنقيح شيفرة أي مُطوّر سهلةً في التعديل من قِبل أي مطوّرٍ آخر، مع عدم إغفال الدعم والتوثيق القويّ الّذي يملكه على الإنترنت. تبرز مساوئ استخدام أُطر العمل في حقيقة أنّ على الصّفحة تحمّل أعباء مُجمل شيفرة الإطار (مُجمل التنسيقات الزائدة)، وحتّى عند استخدام جزء صغير من الإطار، على الجهة الأُخرى، فإن أُطر العمل هي أداةٌ فعّالة في بناء نماذج أوليّة للمشاريع (prototyping)، أو في إنشاء صفحات يكون فيها جماليّة التصميم أمرًا ثانويًّا، كما هو الأمر مع صفحات إدارة الموقع (administration pages)، ولكن عند الرغبة في إنشاء تصميم مُحدّد وذو مواصفات مُعيّنة، فإن استخدام هذه الأُطر قد يُصعب من عمليّة التصميم أكثر مما هو عليه الأمر من بناء التصميم من نقطة الصفر، ومع ذلك فهو أمرٌ مُمكن وليس مُستحيلًا. سيكون المشروع النهائيّ على الشكل التّالي: ملاحظة حول استخدام Bootstrap يوجد طرقٌ عدّة للتعامل مع تنسيقات إطار العمل Bootstrap، سواءً بدون استخدام LESS أو باستخدام LESS. استخدام Bootstrap بدون LESS يُستحسن للمُبتدئين في التعامل مع Bootstrap تنزيل نسخة Bootstrap المُترجمة/المُجمّعة (compiled) وإرفاقها في المشروع، ومن ثمّ القيام بإنشاء ملفّ CSS فارغ وربطه مع المشروع بعد ملفّ bootstrap.css: <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> ولكي يتمّ التغيير من تنسيقات bootstrap الافتراضيّة، فيجب الكتابة في الملفّ style.css: a { color: #00ff00 } block { background-color: #dddddd } إن مساوئ استخدام الأسلوب السابق كما هو واضح هو أنّ على المُطوّر البحث يدويًّا عن التنسيق الصحيح عند التغيير، ولن يكون الأمر سهلًا في مُعظم الأحيان، باعتبار أنّ بعض المُعامِلات (parameters) تُطبّق على العديد من المُحدّدات (selectors) عند التعديل، مع العلم أن أداة التخصيص الخاصّة بالإطار قد تساعد المُطوّر بعض الشيء، حيثُ أنها تستطيع ترجمة جميع تغييرات المُطوّر، ولمرّة واحدة، ولكن عند رغبة المُطوّر في تغيير مُعامل جديد، فعليه إعادة تحديث جميع قيم الحقول لكي يُعاد ترجمتها مرّةً أُخرى. استخدام Bootstrap مع LESS تعمل هذه الطريقة بجعل جميع متغيّرات Bootstrap مخزّنة في ملفّات ذات اللاحقة .less، وعلى المُطوّر العمل مع هذه المتغيّرات وترجمتها إلى ملفّات ذات اللاحقة .css (يدويًّا أو آليًّا) وكما تقتضي الضرورة. مع العلم أنّ في ملفّ HTML كل ما يجب عمله هو ربط ملفّات CSS المُترجمة، ولذلك فإن هذه الطريقة هي الطريقة الأفضل والأكثر مرونةً. يوجد العديد من الطرق في تجميع أو ترجمة ملفّات LESS، وحرية الاختيار للمطوّر، مع العلم أنّ Bootstrap نفسه يستخدم Grunt في تجميع ملفّات less، ومن الخيارات المُتاحة هو WinLess لمُستخدمي ويندوز، أو SimpLESS لمُستخدمي أنظمة Mac، أو Koala لمُستخدمي لينكس، وتعمل جميع هذه الأدوات الأمر نفسه، وذلك عبر الوصول إلى ملفّات LESS والانتظار لحدوث أي تغيير فيها، وعندما يقوم المُطوّر بإجراء هذا التغيير، ستقوم الأداة بتجميع وإنشاء ملفّ CSS الموافق، ولذلك ليس على المُطوّر إجراء التجميع أو الترجمة يدويًّا بعد كل تغيير، فبكل بساطة يتم إجراء التغييرات ومن ثم الحفظ، لتظهر النتائج بشكل مُباشر على الموقع وهي بالفعل مُترجمة (compiled) ومضغوطة (compressed). إنشاء المشروع باستخدام Bootstrap سيتمّ في البداية إنشاء بُنيان وهيكليّة ملفّات المشروع وذلك عبر: إنشاء مُجلّد باسم المشروع وليكن whitesquare-bootstrap. إنشاء مجلدان فرعيان: الأول src للملفّات المصدريّة، والثّاني www لملفّات الموقع النهائيّة. إنشاء مجلد فارغ بالاسم images وملفّ فارغ بالاسم index.html داخل المُجلّد www. تنزيل Bootstrap ونسخ مُحتويات الملفّ المضغوط إلى مُجلّد www. تنزيل الملفّات المصدريّة الخاصّة بـ Bootstrap ونَسخ منها المُجلّد less، ووضعه في المُجلّد src الخاصّ بالمشروع. إنشاء ملفان بجانب المُجلّد less/bootstrap، يحمل الأوّل الاسم styles.less ويحمل الثّاني الاسم variables.less، ليتم استخدامهم في تعديل خصائص Bootstrap الأساسيّة، وهذا يُقدّم سرعة في التحديث والتعديل على التنسيق. سيتمّ في الخطوة التّالية إعداد عمليّة ترجمة ملفّات LESS إلى CSS. سيتمّ العمل على الأداة WinLess، وهي سهلة الاستخدام، فكل ما يجب عمله هو اختيار ‘Add folder’ منها، ومن ثُمّ تحديد مسار المُجلّد الّذي يحتوي ملفّات LESS: C:\whitesquare-bootstrap\src\less يحتوي المُجلد السابق على قائمة بجميع الملفّات، سيتمّ اختيار الملفين الأخيرين: styles.less و variables.less، ومن ثُمّ الضغط بالزر الأيمن واختيار من القائمة المُنسدلة الاختيار ‘Select output file’، ومن ثُم تحديد مسار ملفّات CSS. ..\..\www\css\styles.css ..\..\www\css\variables.css بعد ذلك، وعند إجراء أي تعديل على ملفّات LESS، سيتمّ إعادة الترجمة من جديد للحصول على ملفّات CSS مُترجمة وبالتعديلات الجديدة. ملاحظات أصبحت تركيبة وبنية المشروع جاهزة بعد إنشاء الملفّات السابقة، ولكن على المُطوّر الأخذ بعين الاعتبار الأمور التّالية قبل الشروع في التصميم: كيف ستقدّم الصّور، كيف سيتمّ توزيعها وتقسيمها في أرجاء الصّفحة. كيف سيتمّ استخدام المُكوّنات (components). ما هي التنسيقات الأساسيّة. ما هو المُخطّط النهائي. بعد الإجابة على الأسئلة السابقة من المُمكن المُتابعة مع التصميم. إعداد صور الموقع سيتمّ في هذه المرحلة تجهيز الصور والّتي ستستخدم في جميع الصفحات وليس لها علاقة بالمُحتوى، وستكون هذه الصور في المشروع الحالي على الشكل التّالي: الصورة الّتي تعرض عنوان الموقع (خريطة): images/map.png صور شعار الموقع: images/logo.png images/footer-logo.png صور الخلفيّة: /images/bg.png /images/h1-bg.png صور الأيقونات الاجتماعية، وهي مُقسّمة على صورتين ليتم استخدام أسلوب sprite معهم بهدف تحميل الصّفحة بشكل أسرع: /images/social.png /images/social-small.png المُكوّنات (Components) يَكمن الاختلاف بين تصميم الموقع باستخدام Bootstrap وبين التصميم باستخدام الأدوات الأصليّة (native) في أنّ Bootstrap يُقدّم مفهوم المُكوّنات (components)، وتُمثل هذه المُكوّنات أجزاءً شائعة من HTML مُعدّة بشكل مُسبق مع تنسيقها، وتَستخدم في بعض الأحيان هذه المُكوّنات جافا سكريبت، ومن المُمكن استخدام مكوّنات Bootstrap كما هي، أو يُمكن إعادة تنسيق هذه المُكوّنات، فكل ما يحتاجه الأمر هو تغيير قيم المُتغيّرات في Bootstrap لذلك، ولكن عند الرغبة في المزيد من المرونة في التغيير، فيُمكن للمُطوّر دائمًا تغيير وتعديل HTML و CSS كما يَحلو له، وفي العودة إلى المشروع، يُمكن مُلاحظة أنّه سيتمّ الحاجة إلى المُكوّنات التّالية: من أجل تصميم الأعمدة (columns) وتوزيعها، سيتمّ استخدام النّظام الشبكي (row, col). من أجل إجراء حقل البحث، والذي هو نموذج (form) من النوع "ضمن السطر" (inline) سيتمّ استخدام (form-inline - input-group - btn) من أجل التنقّل (navigation)، سيتمّ استخدام الوسم <nav> مع الصنف (navbar). من أجل القوائم الفرعيّة، سيتمّ استخدام قائمة مُجمّعة (group list) وباستخدام الصنف list-group. من أجل لوحة الظهور (panel) سيتمّ استخدام النصف panel. من أجل لوحة ظهور كبيرة سيتمّ استخدام الصنف jumbotron. من أجل إطارات الصور، سيتمّ استخدام thumbnail. تظهر جميع المُكونات السابقة في توثيق المكوّنات الخاصّ بـ Bootstrap. تنسيق أساسي يَملك Bootstrap بالفعل مُعظم التنسيقات المطلوبة للمشروع، ولكن سيتمّ الحاجة فقط إلى التعديل عليهم عند الحاجة، ويُمكن عمل ذلك بالتعديل على الملفّ src/less/variables.css. سيتمّ أوّلًا إضافة بعض المُتغيّرات والّتي لم يتمّ إعدادها افتراضيّا في Bootstrap، ولكي يتمّ استخدامها فيما بعد: يَضبط المُتغيّر التّالي الخط المُستخدم في المشروع: @brand-font: 'Oswald',sans-serif; كما سيتمّ التعديل على خيارات Bootstrap للتوافق مع رؤية المشروع، والّتي ستكون في مُعظمها تخصّ الألوان: /* gray background of the page */ @body-bg: #f8f8f8; /* blue background */ @ brand-primary: #29c5e6; /* background of panels */ @panel-bg: #f3f3f3; /* frame color of panels */ @panel-inner-border: #e7e7e7; /* remove rounding in blocks */ @border-radius-base: 0; /* primary buttons have blue background */ @btn-primary-bg: @brand-primary; /* if the screen width is more then 992px, then the container width is 960px */ @container-md: 960px; /* if the screen width is more 1200px, then the container width is 960px again */ @container-lg: @container-md; /* main font is Tahoma */ @font-family-base: Tahoma, sans-serif; /* base font size */ @font-size-base: 12px; /* main color of text */ @text-color: #8f8f8f; /* gray background of text fields */ @input-bg: @panel-bg; /* gray frame of text fields */ @input-border: @panel-inner-border; /* gray color of the text in the fields */ @input-color: #b2b2b2; سيتمّ البدء في كتابة التنسيقات الخاصّة بالمشروع، بعد أنّ تمّ الانتهاء من المُتغيّرات، وذلك في الملفّ styles.less، لكن يجب أوّلًا استيراد ملفّ Bootstrap العامّ وملفّ المُتغيّرات: @import "bootstrap/bootstrap.less"; @import "variables.less"; يَجدر الذكر هنا، أنّ ليس جميع التنسيقات (التي تكون مُعدّة من قبل الإطار نفسه) من المُمكن تغييرها باستخدام المُتغيّرات، بل يجب تغييرها يدويًّا: p { margin: 20px 0; } .form-control { box-shadow: none; } .btn { font-family: @brand-font; } body { border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); } ستقوم السطور السابقة بإزالة ظل عناصر النموذج (form elements)، وتحديد خطّ خاصّ للنصّ داخل الزر، وإضافة صورة خلفيّة لكامل الصّفحة وحدّ (border) علوي لها. لن يتمّ بعد الآن ذكر مكان وضع التنسيقات، فستكون دائمًا على الشكل التّالي: المُتغيرات في الملفّ variables.less، وجميع التنسيقات المُخصّصة ستكون في الملفّ styles.less. هيكل HTML يبدأ مُخطط الموقع عادةً بما يُسمى هيكل HTML أو HTML skeleton، وهو على الشكل التّالي: <!DOCTYPE html> <html> <head> <title>Bootstrap 3 page layout</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/styles.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> </body> </html> تمّ في السطور السابقة العمل على بُنيان مُستند HTML5 الرئيسي، حيثُ تمّ في الوسم title الإشارة إلى عنوان الصّفحة، وهو ‘Bootstrap 3 page layout’، وفي الوسم <meta> تحديد عرض الصّفحة على أجهزة الهاتف المحمول ليكون مساويًا إلى عرض الشاشة، وضبط مُستوى التكبير (zoom level) في التحميل الأوّل للصفحة، ومن ثُم تمّ ربط صفحة التنسيق (stylesheet)، ومن أجل المُتصفّح Internet Explorer (قبل الإصدار التاسع) تم كتابة سكريبت يَسمح بعرض مُخطّط الصّفحة بشكل مُلائم. مُخطّط الصّفحة يتألّف مُخطّط الصّفحة من جزئيين: الحاوية الرئيسيّة للمُحتوى الرئيسي، والّتي تتمركز الشاشة وذيل الصّفحة (footer)، وتتألّف الحاوية الرئيسيّة من عمودين: المُحتوى الرئيسي، والشريط الجانبي (sidebar)، ويأتي من الجهة العلويّة رأس الصّفحة (header)، وشريط التنقل (nav)، وعنوان الصّفحة (heading). سيتمّ إضافة الشيفرة (الكود) التّالية إلى جذع الصّفحة (body): <body> <div class="wrapper container"> <header></header> <nav></nav> <div class="heading"></div> <div class="row"> <aside class="col-md-7"></aside> <section class="col-md-17"></section> </div> </div> <footer></footer> </body> تقدّم الشيفرة السابقة التقسيم العام الخاصّ بالأعمدة (columns)، وهي مُحتوات داخل الصنف (class) المُسمى صفّ (row)، وتبدأ أصناف الأعمدة بالبادئة col-، ومن ثم حجم الشاشة وهو أحد أربع (xs, sm, md, lg)، ومن ثم تنتهي بقيمة عرض العمود. يُمكن للأعمدة أنّ تُحدّد معًا وبقيم أصناف مُختلفة للشاشات، وتُعبّر هذه الأصناف عن عرض العمود لقياسات الشاشة المُختلفة، فمثلًا: class="col-xs-12 col-md-8" سيتمّ تطبيق الصنف col-xs-12 مع الشاشات كبيرة الحجم، وتطبيق الصنف col-md-8 على الشاشات الصغيرة، وتُطبّق هذه الأصناف على عرض الشاشات الأكبر والمساوي لقيمة الصنف المُحدّد، وعليه فإن تطبيق الصنف col-md-* على العنصر، سوف لن يؤثر على أجهزة الشاشات المُتوسطة فقط بل أيضًا على أجهزة الشاشات الكبيرة، وذلك في حال عدم حضور صنف من أصناف الشاشات الكبيرة (col-lg-*). تمّ في الشيفرة السابقة استخدام الأصناف col-md-7 و col-md-17 والّتي تُشير إلى أنّ كتلة <aside> ستستحوذ على عرض عمود ذو قياس 7 في الشاشات المُتوسطة، وستستحوذ الكتلة <section> على عرض عمود ذو قياس 17، وذلك نسبةً إلى الحاوية الأب (parent container)، مع العلم أنّ مجموع سعات الأعمدة في Bootstrap هو 12، ولكن تمّ زيادة العدد (إلى الضعف) وذلك بهدف الحصول على مزيد من المرونة في التوزيع، ولكن بشكل عام استخدام 12 عمود هو مناسب لمعظم التصاميم. سيتمّ في الشيفرة التّالية إضافة بعض الحشوة لمُلائمة التنسيق، وذلك إلى الصنف .wrapper، ورأس الصّفحة: body { ... .wrapper { padding: 0 0 50px 0; } header { padding: 20px 0; } } تمّ في الشيفرة السابقة الاستفادة من المعالج المُسبق (preprocessor) وذلك في صياغة التنسيق، حيثُ يَسمح لنا ذلك بكتابة تنسيقات مُتداخلة (nested) وبدون تكرار، والذي سيتمّ صياغتها بعد الترجمة إلى: body .wrapper {...} body header {...} يَسمح هذا الأسلوب من الإعداد في رؤية بُنيان HTML الصحيح داخل CSS، ويُقدّم نوعًا من الفرز والتنظيم في كتابة شيفرة CSS. الختام تمّ في هذا الجزء التعرّف على Bootstrap، وإعداد بيئة العمل، وكيفية بناء بُنيان ملفّات المشروع، في الجزء الثّاني سيتمّ الدخول في تصميم كل جزء من أجزاء الصّفحة. ترجمة – وبتصرّف – للمقال Page layout with Bootstrap 3.

تمّ التطرّف في الجزء الأوّل من هذا الشرح إلى الخطوات الأوّليّة في بناء صفحة باستخدام إطار عمل 3 Bootstrap، في الجزء الثّاني، سيتم استكمال تصميم الصّفحة بدءًا من الشعار وانتهاءً بذيل الصّفحة. الشعار (Logo) سيتمّ إضافة الشعار إلى رأس الصّفحة كما في التّالي: <header> <a href="/"><img src="images/logo.png" alt="Logo"></a> </header>سيتمّ الاكتفاء بإدراج صورة الشعار وبدون إضافة أية تنسيقات. نموذج البحث سيتمّ الاستفادة من بعض مُكوّنات Bootstrap بغرض إنشاء نموذج البحث، سيتمّ إنشاء نموذج ضمن السطر في رأسيّة الصّفحة، كما سيتمّ إزاحة هذا النموذج إلى جهة اليمين، على أنّ يَملك هذا الحقل الصنف form-control وعنونة (label) وسيحتوي النموذج على المُكوّن (input groups)، ومهمته إزالة الفراغ بين حقل الإدخال النصّي (input text) والزر (button)، كما لو أنّه يقوم بدمجهم كعنصر واحد، ولذلك سيتمّ استخدام الصنف input-group، ولعنصر الإدخال (input) سيتمّ استخدام الصنف form-control ولقسم الزر سيتمّ استخدام الصنف input-group-btn. ومن ثُمّ سيتمّ إضافة الصنف btn-primary للزر، والذي سيمنح الزر لونًا بارزًا وحدودًا بارزةً. <header> ... <form name="search" action="#" method="get" class="form-inline form-search pull-right"> <div class="input-group"> <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search"> <div class="input-group-btn"> <button type="submit" class="btn btn-primary">GO</button> </div> </div> </form> </header>سيتمّ في الخطوة التّالية ضبط عرض صندوق البحث إلى القيمة 200px: body { ... .wrapper { ... header { ... .form-search { width: 200px; } } } }شريط التنقل سيتمّ استخدام مُكوّنات التنقل، والّتي تحتوي على قائمة بالروابط، وسيتم استخدام الصنف navbar-nav لشريط التنقل، والذي يُطبّق تنسيقًا خاصًّا لشريط التنقل. <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li><a href="/home/">Home</a></li> <li class="active"><a href="/about/">About us</a></li> <li><a href="/services/">Services</a></li> <li><a href="/partners/">Partners</a></li> <li><a href="/customers/">Customers</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav>كما سيتمّ إضافة هذه المُتغيّرات وذلك بهدف جعل تنسيق شريط التنقل أكثر توافقيّةً مع الصّفحة. /* navigation menu height */ @navbar-height: 37px; /* additional paddings */ @nav-link-padding: 10px 30px; /* background for menu items */ @navbar-default-bg: @panel-bg; /* text color in the menu items */ @navbar-default-link-color: #b2b2b2; /* for the mouse hover - the same color */ @navbar-default-link-hover-color: @navbar-default-link-color; /* background of the active menu item */ @navbar-default-link-active-bg: @brand-primary; /* text color of the active menu item */ @navbar-default-link-active-color: #fff;كما سيتمّ إضافة التعديلات التّالية على ملفّ التنسيق الخاصّ بالمشروع، بغرض تخصيص الخط المُستخدم لشريط التنقل، وذلك بجعل الحروف كبيرة (uppercase)، وضبط نوع وحجم الخط. body { ... .wrapper { ... .navbar a { text-transform: uppercase; font: 14px @brand-font; } } }عنوان الصّفحة (Page Header) سيتمّ استخدام الصنف heading مع عنوان الصّفحة: <div class="heading"> <h1>About us</h1> </div>وبالتنسيق التّالي: body { ... .wrapper { ... .heading { height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 { display: inline-block; color: #7e7e7e; font: normal 40px/40px 'Oswald', sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; } } } }تمّ في الشيفرة السابقة تعيين صورة خلفية للعنوان (h1)، وتنسيق الخط، ليظهر العنوان بالشكل السابق. القائمة الفرعيّة (Submenu) لن يتمّ استخدام المُكوّن navigation مع القائمة الفرعيّة، حيثُ أنّه لا يناسب التنسيق، بدلًا من ذلك سيتمّ استخدام المُكوّن group list، وكل عنصر من هذا المكوّن سيملك الصنف list-group-item. مع الانتباه أنّ القائمة الفرعيّة يجب توضع داخل الوسم aside: <aside class="col-md-7"> <ul class="list-group submenu"> <li class="list-group-item active">Lorem ipsum</li> <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li> <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li> <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li> <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li> <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li> </ul> </aside>إن الإعدادات الخاصّة بالمكوّنات تظهر أنّ جميع القوائم المُجمّعة (grouped lists) تستخدم خلفيّة وحدود المكوّن panel: @list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;ومن ثُمّ سيتمّ تطبيق التنسيقات التّالية على القائمة الفرعيّة: body { ... .wrapper { ... .submenu { margin-bottom: 30px; li { display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding: 10px; text-transform: uppercase; &.active { color: @brand-primary; } a { color: @text-color; text-decoration: none; &:hover { color: @text-color; } } } } } }تمت إضافة هامش سفلي باستخدام margin-bottom، والتخفيف من حدّة الخط، وتغيير التنسيق الخاصّ بعناصر القائمة باستخدام الخاصّيّة list-style-type لتكون مُربّعة (square)، ومن أجل الروابط تمّ ضبط اللّون، والحروف لتكون حروفًا كبيرةً، الجدير بالذكر هنا أنّ الإشارة & (ampersand) هي جزء من صياغة LESS، والّتي سيتمّ استبدالها بالمُحدّد الأب (parent selector). الشريط الجانبي (Sidebar)سيتمّ إضافة صورة تُشير إلى عنوان مكتب العمل، وذلك أسفل القائمة الفرعيّة. سيتمّ استخدام المُكوّن panel من مكوّنات Bootstrap، وذلك باستخدام الأصناف الفرعيّة منه وهي panel-primary من أجل تلوين العنوان، و يحتوي هذا المكوّن على كتلة علويّة وتستخدم الصنف panel-heading، وكتلة المُحتوى وتستخدم الصنف panel-body، كما سيتمّ استخدام الصنف img-responsive لصورة خريطة الموقع، وذلك من أجل الحصول تجاوبيّة لها على مُختلف قياسات الشاشة (responsiveness). <aside class="col-md-7"> ... <div class="panel panel-primary"> <div class="panel-heading">Our offices</div> <div class="panel-body"> <img src="images/map.png" class="img-responsive" alt="Our offices"> </div> </div> </aside>تمّ بالفعل سابقًا ضبط لون لخلفيّة المكوّن panel وذلك في خصائص Bootstrap وذلك عبر المُتغيّر panel-bg، والآن ما سيتمّ عمله هو تغيير لون الحدود الخاصّة به، وسيتم استخدام اللون الرمادي المُعيّن سابقًا بالمُتغيّر @panel-inner-border: @panel-primary-border: @panel-inner-border;سيتم الحاجة أيضًا إلى تغيير بعض التنسيق الافتراضي للمكوّن panel، وهذه التغييرات لا يُمكن تغييرها بواسطة المُتغيّرات: .panel { box-shadow: none; .panel-heading { font: 14px @brand-font; text-transform: uppercase; padding: 10px; } .panel-body { padding: 10px; } }تمّ في الشيفرة السابقة إزالة الظل الخاصّ بالمكوّن panel وضبط الحشوة padding وضبط الخط. الاقتباس (Quotation)سيتمّ الشروع بالعمل على تصميم المحتوى، وفي البداية سيتمّ إضافة الاقتباس: يشبه هذا الجزء إلى حدٍ كبير المُكوّن Jumbotron، والذي سيتمّ الاستفادة منه هنا، وذلك عبر إضافته داخل عمود المُحتوى (col-md-17): <section class="col-md-17"> <div class="jumbotron"> <blockquote> <p> "Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat." </p> <small>John Doe, Lorem Ipsum</small> </blockquote> </div> </section>باستخدام مُتغيّرات المكوّن jumbotron سيتمّ تعيين اللّون الأبيض للخط، وضبط لون الخلفية إلى قيمة المُتغيّر @brand-primary وهو ذو القيمة #29c5e6: @jumbotron-bg: @brand-primary; @jumbotron-color: #fff;كما سيتمّ إضافة بعض التنسيق: body { ... .wrapper { ... .jumbotron { border-radius: 0; padding: 0; margin: 0; blockquote { border-left: none; p { font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; } small { text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before { content: ''; } } } } } }تمّ إزالة الزوايا الدائريّة باستخدام الخاصّيّة border-radius، وتنسيق الخط ليتناسق مع بقيّة التصميم. المُحتوى الرئيسي (Main content) تمّ بالفعل إتمام جميع التنسيقات اللازمة للنص الخاصّ بالمُحتوى، وعليه فإن كل ما يجب عمله هو إضافة ثلاثة فقرات (paragraphs) مع النصّ الخاصّ بها: <p>Lorem ipsum dolor sit amet...</p> <p>Donec vel nisl nibh...</p> <p>Donec vel nisl nibh...</p>سيتمّ في الخطوة التّالية إضافة صورتين، أسفل المُحتوى الكتابي السابق، ولذلك سيتمّ استخدام عمودين: <div class="row"> <div class="col-md-12"> <img src="images/about-1.png" alt="" class="thumbnail"> </div> <div class="col-md-12"> <img src="images/about-2.png" alt="" class="thumbnail"> </div> </div>يُعطي الصنف thumbnail تنسيقًا جميلًا للصور، ومن دون إضافة المزيد من التنسيق، ما سيتمّ عمله فقط هو تعديل الحشوة (padding) ولون الحدود (border): @thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;القسم الخاصّ بفريق العمل أوّلًا، سيتمّ إضافة رأسيّة هذا القسم (header): <h2>Our team</h2>وبالتنسيق التّالي: body { ... .wrapper { ... h2 { background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; } } }سيتمّ إضافة div وبالصنف team، والذي يحتوي بطاقات فريق العمل، حيثُ أنّ كل كرت هو عمود وبعرض مساوي إلى أربعة أعمدة من النّظام الشبكي، وجميعها تحتوي على إزاحة بعمود واحد ما عدا الكرت الأول من كل صفّ، وتُطبّق هذه الإزاحة باستخدام الصنف col-sm-offset-1، ويتألّف كل كرت من صورة والوصف الوظيفي لكل عضو من أعضاء الفريق. <div class="team"> <div class="row"> <div class="col col-sm-4"> <img src="images/team/Doe.jpg" alt="John Doe" class="thumbnail"> <div class="caption"> <h3>John Doe</h3> <p>ceo</p> </div> </div> <div class="col col-sm-4 col-sm-offset-1"> <img src="images/team/Pittsley.jpg" alt="Saundra Pittsley" class="thumbnail"> <div class="caption"> <h3>Saundra Pittsley</h3> <p>team leader</p> </div> </div> ... </div> <div class="row"> <div class="col col-sm-4"> <img src="images/team/Nobriga.jpg" alt="Ericka Nobriga" class="thumbnail"> <div class="caption"> <h3>Ericka Nobriga</h3> <p>art director</p> </div> </div> <div class="col col-sm-4 col-sm-offset-1"> <img src="images/team/Rousselle.jpg" alt="Cody Rousselle" class="thumbnail"> <div class="caption"> <h3>Cody Rousselle</h3> <p>senior ui designer</p> </div> </div> ... </div> </div>سيتمّ إضافة التنسيق التّالي إلى ملفّ التنسيق بهدف مُلائمة المُحتوى السابق مع التصميم: body { ... .wrapper { ... .team { .row { margin-top: 20px; .col { white-space: nowrap; .thumbnail { margin-bottom: 5px; } } .col-sm-offset-1 { margin-left: 3.7%; } .caption { h3 { font: 300 16px @brand-font; margin: 0; } p { font: 300 14px @brand-font; color: @brand-primary; margin: 0; } } } } } }تمّ التعديل في الشيفرة السابقة على الصنف col-sm-offset-1، حيثُ أنّ الهامش الخاصّ به واسعٌ نوعًا ما، ولذلك تمّ تحديده بالقيمة 3.7%. تصميم ذيل الصّفحةيتألّف ذيل الصّفحة من أربعة أجزاء رئيسية: تغذية توتير (Twitter feed)خريطة الموقع (site map)روابط الشبكات الاجتماعيّة (social links)الشعار مع نص حقّ النشر (logo with copyright text) سيتمّ في البداية إنشاء الحاوية الرئيسيّة لذيل الصّفحة، والأعمدة الخاصّة بكل جزء: <footer> <div class="container"> <div class="row"> <div class="col-md-8 col-xs-12 twitter"></div> <div class="col-md-4 col-xs-12 sitemap"></div> <div class="clearfix visible-sm visible-xs"></div> <div class="col-md-6 col-xs-12 social"></div> <div class="col-md-6 col-xs-12 footer-logo"></div> </div> </div> </footer>سيتمّ تنسيق ذيل الصّفحة على الشكل التّالي: footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; overflow: hidden; .container { height: 110px; padding: 10px 0; } }يَظهر وسم ذيل الصّفحة (footer) على كامل عرض الشاشة، بينما تظهر الحاوية الداخليّة بالمُنتصف، ولاصطفاف العناصر داخل ذيل الصّفحة تم استخدام نظام الأعمدة. تغدية توتير (Twitter feed) صياغة تغذية توتير هي على الشكل التّالي: <div class="col-md-8 col-xs-12 twitter"> <h3>Twitter feed</h3> <time datetime="2015-03-03"><a href="#">03 mar</a></time> <p>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug</p> </div>والتنسيق هو على الشكل التّالي: body { ... footer { ... .container { ... h3 { border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0 0 10px; text-transform: uppercase; } p { margin: 5px 0; } .twitter { p { padding-right: 15px; } time a { color: #b4aeae; text-decoration: underline; } } } } }تمّ تخصيص تنسيق جميع العناوين بذيل الصّفحة وذلك للخط والهوامش، واستخدام الحروف الكبيرة، وذلك باستخدام الخاصّيّة text-transform، ومن أجل الرابط الّذي يعرض التاريخ، تمّ ضبط اللّون والخطّ السفلي (underlining). خريطة الموقع (Sitemap)تتألّف خريطة الموقع من عمودين متساويين محتويان على روابط: <div class="col-md-4 col-xs-12 sitemap"> <h3>Sitemap</h3> <div class="row"> <div class="col-md-12"> <a href="/home/">Home</a> <a href="/about/">About</a> <a href="/services/">Services</a> </div> <div class="col-md-12"> <a href="/partners/">Partners</a> <a href="/customers/">Support</a> <a href="/contact/">Contact</a> </div> </div> </div>سيتمّ تطبيق التنسيق التّالي، والذي يَخصّ اللّون والخطّ والهامش الخاصّ بالروابط: body { ... footer { ... .container { ... a { color: #dbdbdb; } .sitemap a { display: block; font-size: 12px; margin-bottom: 5px; } } } }الأيقونات الاجتماعيّة سيتمّ وضع جميع الروابط (الأزرار) داخل قسم وبالصنف social: <div class="col-md-4 col-xs-12 social"> <h3>Social networks</h3> <a href="http://twitter.com/" class="social-icon twitter"></a> <a href="http://facebook.com/" class="social-icon facebook"></a> <a href="http://plus.google.com/" class="social-icon google-plus"></a> <a href="http://vimeo.com/" class="social-icon-small vimeo"></a> <a href="http://youtube.com/" class="social-icon-small youtube"></a> <a href="http://flickr.com/" class="social-icon-small flickr"></a> <a href="http://instagram.com/" class="social-icon-small instagram"></a> <a href="/rss/" class="social-icon-small rss"></a> </div>وللتنسيق الروابط ضمن ذيل الصّفحة سيتمّ تطبيق التّالي: body { ... footer { ... .container { ... .social { .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; } } } } }تمّ في الشيفرة السابقة استخدام أسلوب ما يُعرف بالاسم sprites، وهو أسلوب شائع يُستخدم في تسريع تحميل الصّفحة وذلك عن طريق جمع مجموعة من الصور في صورة واحدة، وعليه فالمتصفّح سيطلب صورة واحدة بدلًا من عدّة صور، أي طلبًا واحدًا بدلًا من طلبات عدّة، في المشروع الحالي تمّ تقسيم الأيقونات الاجتماعيّة إلى صورتين الأولى بالاسم social.png والثانية بالاسم social-small.png، واستخدام كلْ منها كخلفيّة باستخدام الخاصّيّة background وتحديد موضع كل خلفيّة باستخدام الخاصّيّة background-position، على أنّ يتمّ التبديل بين كل رابط وما يخصّه من شعار. نص حقّ النشرسيتمّ استخدام صورة ذات رابط للشعار، وفقرة (paragraph) أسفله مع نصّ حق النشر. ستكون الصياغة على الشكل التّالي: <div class="col-md-8 col-xs-12 footer-logo"> <a href="/"><img src="images/footer-logo.png" alt="Whitesquare logo"></a> <p>Copyright © 2015 Whitesquare.</p> </div>سيتمّ تنسيق هذا القسم بشكل مُشابه للقسم السابق، مع اختلاف وحيد، وهو الإزاحة إلى جهة اليمين: body { ... .footer { ... .container { ... .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; a { text-decoration: underline; } } } } }الختاميكون إلى هنا قد تمّ الانتهاء من تصميم كامل الصّفحة، يُمكن الوصول إلى الملفّات المصدريّة الخاصّة بالمشروع بتحميلها أو استعراض تصميم المشروع من هنا. ترجمة – وبتصرّف – للمقال Page layout with Bootstrap 3 part 2.