لوحة المتصدرين

تعرّفنا فيما سبق من دروس هذه السلسلة على أساسيات لغة بايثون، من مُتغيّرات وحلقات تكرار إلى الدوال، وقد حان الوقتُ للدخول إلى أساسيات البرمجة كائنية التوجّه Object Oriented Programming وهي ببساطة طريقة أخرى للبرمجة بحيث تكون أجزاء الشّيفرة مجموعة داخل دوال تُسمّى التوابع methods والدوال تكون داخل صنف معيّن Class. عند إنشاء كائن object من هذا الصنف فإنّنا نستطيع أن نُنفّذ عليه مُختلف العمليات الموجودة داخل التوابع والتي بدورها توجد داخل الصنف. هناك تسميّات عربية أخرى لهذا النّوع من البرمجة، لذا لا تقلق إذا صادَفتَ أحد هذه التّسميات في أماكن أخرى، فكلّها تُشير إلى نفس المعنى: برمجة غرضيّة التوجه برمجة شيئية المنحى برمجة كائنيّة المنحى بنية الصنف Class الصنف ببساطة يحتوي على أجزاء مُختلفة من الشيفرة تماما مثل الدالة، الفرق هنا هو أنّ الصنف يحتوي على دوال كذلك، وهذه الدوال تُسمى التّوابع، ويحتوي كذلك على مُتغيّرات وتنقسم هذه الأخيرة إلى نوعين، مُتغيّر الصنف، والمُتغيّر العادي، الفرق بينهما هو أنّك تستطيع الوصول إلى مُتغيّر الصنف في أي مكان داخل الصنف (سواء داخل التوابع أو خارجها). إنشاء صنف لإنشاء صنف في لغة بايثون كلّ ما عليك فعله هو كتابة كلمة class وبعدها اسم الصنف ثمّ إلحاق نقطتين، بعدها اكتب الشيفرة بإزاحة أربع مسافات: >>> class My_class: ... pass أنشأنا أعلاه صنفًا بسيطا باسم My_class وهو لا يفعل أي شيء يُذكر (كلمة pass تُخبر بايثون بالمرور دون تنفيذ أي شيء). إذا كتبت اسم الصنف على مفسّر بايثون فستجد مُخرجا كالتّالي: >>> My_class <class __main__.My_class at 0x7fd0efc41460> لاحظ بأنّ الكلمة الأولى من المُخرج هي class أي أنّنا أصبحنا نمتلك صنفًا جديدًا، ما يتبع at هو المكان في الذاكرة الذي وُضع فيه الصنف ويتغيّر بين الحين والآخر. إنشاء كائن من صنف بعد أن أنشأنا الصنف سنتمكّن الآن من إنشاء كائن من هذا الصنف، والكائن مُجرّد اسم تماما كالمُتغيّر: my_object = My_class() الآن الكائن my_object هو من صنف My_class. تعريف المتغيرات داخل صنف يُمكننا أن نُعرّف مُتغيّرات في الصنف تماما كما نُعرّف المُتغيّرات بشكل عادي. class My_class: my_variable = 'This is my variable' للوصول إلى المُتغيّر ننشئ أولا كائنا من الصنف وبعدها نكتب اسم الكائن ثمّ نقطة ثمّ اسم المُتغيّر: my_object = My_class() print my_object.my_variable المُخرج: This is my variable يُمكن كذلك الحصول على النّتيجة ذاتها في سطر واحد: print My_class().my_variable إنشاء التوابع التوابع هي دوال خاصّة بالصنف، ويُمكننا إنشاء التابع بنفس الطّريقة التي نُنشئ بها الدالة، الإختلاف هنا هو أنّ جميع التوابع يجب أن تُعرّف مع مُعامل باسم self وذلك للإشارة إلى أنّ الدالة/التابع تابع للصنف، لننشئ تابعا داخل صنف الآن. class My_class: my_variable = 'This is my variable' def my_method(self): print 'This is my method' الآن إذا أنشأنا كائنا فإنّنا سنتمكّن من الوصول إلى التابع، وتذكّر بأنّ التابع تلحقه الأقواس: my_object = My_class() my_object.my_method() المُخرج: This is my method يُمكن كذلك الحصول على النّتيجة ذاتها في سطر واحد: My_class().my_method() كما تُلاحظ فقد نُفّذت الشيفرة الموجودة داخل التّابع my_method ويُمكننا كذلك أن نجعل التّابع يقبل المُعاملات، لكن تذكّر الحفاظ على الكلمة self كمُتغيّر أول. class My_class: my_variable = 'This is my variable' def my_method(self, my_parameter): print 'This is my method ; {} is my parameter'.format(my_parameter) يُمكنك استدعاء التّابع كالتّالي: my_object = My_class() my_object.my_method('Parameter1') my_object.my_method('Parameter2') المُخرج: This is my method ; Parameter1 is my parameter This is my method ; Parameter2 is my parameter في البرنامج السّابق، أنشأنا أولا صنفًا باسم My_class وقُمنا بتعريف مُتغيّر، ثمّ بتعريف تابع باسم my_method يقبل مُعاملين self و my_parameter، بالنّسبة لاستدعاء التّابع، فنحتاج فقط إلى تمرير المُعاملات الموجودة بعد المُعامل selfولا نحتاج إلى تعيين قيمة لهذا المُعامل. مُلاحظة: يُمكنك إعادة تسميّة المُعامل الأول كما تشاء، أي أنّ البرنامج التّالي سيعمل دون مشاكل. class My_class: def my_method(this, my_parameter): print '{} is my parameter'.format(my_parameter) ولكن رغم ذلك فالمُتعارف عليه بين مُبرمجي لغة بايثون هو استعمال self، وفي كثير من اللغات الأخرى تُستعمل this عوضا عن self، أما في برامِجك فمن المُفضّل الإبقاء على هذه التّسميّة المُتعارف عنها، وذلك لتكون شيفراته سهلة القراءة. الوصول إلى متغيرات الصنف داخل التوابع تأمّل الصنف التّالي: class Person: lastname = 'Dyouri' job = 'Writer, Developer' def say_hello(self): name = 'Abdelhadi' print 'Hello, My name is {}'.format(name) البرنامج أعلاه بسيط جدا، أولا نعرّف صنف باسم Person وبعدها نقوم بتعيين قيمتين للمُتغيّرين name و lastname، وبعدها عرّفنا تابعا باسم say_hello يطبع جملة Hello, My name is Abdelhadi. كلّ شيء جيد، لكن ماذا لو أردنا أن نصل إلى المُتغيّرات الأخرى الموجودة خارج التّابع، فلا يُمكننا مثلا أن نقوم بالأمر كالتّالي: class Person: lastname = 'Dyouri' job = 'Writer, Developer' def say_hello(self): name = 'Abdelhadi' print 'Hello, My name is {}'.format(name) print lastname print job ستحصل على الخطأ التّالي: global name 'lastname' is not defined لتفادي هذا الخطأ سنستعمل كلمة self قبل المُتغيّر. class Person: lastname = 'Dyouri' job = 'Writer, Developer' def say_hello(self): name = 'Abdelhadi' print 'Hello, My name is {}'.format(name) print 'My Last name is {} '.format(self.lastname) print 'I am a {}'.format(self.job) استدعاء التّابع: me = Person() me.say_hello() المُخرج: Hello, My name is Abdelhadi My Last name is Dyouri I am a Writer, Developer لاحظ بأنّنا قُمنا بالوصول إلى مُتغيّر lastname عن طريق استدعائه بـ self.lastname وكذا الحال مع المُتغيّر job، وهذه الطّريقة مُشابهة لاستخدام كلمة global الفرق هنا أنّ هذه الأخيرة تُمكن من الوصول إلى المُتغيّر في كامل البرنامج، أمّا كلمة self فتُشير إلى المُتغيّر المُعرّف في الصنف الحاليّة فقط. لتفهم أكثر كيفيّة عمل الكلمة self فقط تخيّل بأنّها تحمل نفس اسم الصنف، مثلا: class Person: lastname = 'Dyouri' job = 'Writer, Developer' def say_hello(self): name = 'Abdelhadi' print 'Hello, My name is {}'.format(name) print 'My Last name is {} '.format(Abd.lastname) print 'I am a {}'.format(Abd.job) لاحظ بأنّنا غيّرنا كلمة self إلى اسم الصنف واستمرّ عمل البرنامج دون مشاكل. وبنفس الطّريقة يُمكنك أن تستدعي تابعا داخل تابع آخر في نفس الصنف: class Person: def say_name(self): print 'Abdelhadi' def say_hello(self): print 'Hello My name is:' self.say_name() المُخرج: Hello My name is: Abdelhadi ما حدث هو أنّ التّابع say_hello قام بطباعة جملة :Hello My name is ثمّ قام باستدعاء التّابع say_name الذي قام بدوره بطباعة الاسم Abdelhadi. لماذا تستعمل البرمجة الكائنية، ومتى يجب علي استخدامها قد تُلاحظ بأنّ ما يُمكنك فعله بالبرمجة الكائنيّة يُمكن القيام به بالدوال والمُتغيّرات فقط. هذا صحيح، وهو أمر واضح، البرمجة الكائنيّة تُستعمل أساسا إذا كان البرنامج الذي تبنيه مُعقّدا مع العديد من الوظائف المُتعلّقة ببعضها (كمكتبة برمجيّة)، مثلا لنقل بأنّك تُطوّر برنامجا مسؤولا عن جلب بيانات من موقع مُعيّن، وبعدها التّعديل عليها، ثمّ إخراج مستند PDF يحتوي على هذه البيانات بشكل يُسهّل قراءتها، هنا ستحتاج إلى صنف لجلب البيانات والتّعديل عليها، وصنف أخرى لتحويل البيانات إلى نصّ مقروء واضح ثمّ إلى ملفّ PDF. إذا نشرت برنامجك مع صديقك وأراد أن يعمل على الجزء الثاني لإضافة وظيفة تُمكن المُستخدم من طباعة المُستند فلا يُعقل أن يضطر للمرور على كل ما يتعلّق بجلب البيانات فقط لأنّه يريد أن يضيف خاصيّة لا علاقة لها بجلب البيانات. استعمال البرمجة الكائنيّة في هذا المشروع سيسمح لك بالتّركيز على الجزء الأول، وسيسمح لصديقك بالتّركيز على تطوير الجزء الثاني. خلاصة الأمر هي أنّك لست مضطرا لاستعمال البرمجة الكائنيّة إلا إذا كان برنامجك طويلا يحتوي على وظائف تتعلّق ببعضها البعض (وظائف من نفس الصنف)، ونسبة استخدام الآخرين لشيفرتك عالية. تمارين التمرين 1 أنشئ صنفًا باسمك، وقم بتعريف مُتغيّرين lastname (الاسم العائلي) و age (العمر)، ثم أنشئ كائنا باسم me (أنا) وقم بطباعة اسمك العائلي وعمرك. التمرين 2 أنشئ صنفًا باسم Car (سيارة) وقم بتعريف مُتغيّرات لصفات السّيارة، مثلا brand لاسم الشّركة، release_date لتاريخ الإعلان عن السّيارة. التمرين 3 أضف توابع إلى الصنف Car التي أنشأتها في التّمرين الثّاني، يُمكن أن تكون التوابع عبارة عن عمليّات تقوم بها السّيارة مثلا move للحركة، stop للتوقّف، slow_down لتخفيض السّرعة، وقم بطباعة جمل تفيد بأنّ العمليّة قد نجحت. المفروض أن يتمكّن الآخرون من إنشاء كائنات خاصّة بهم بحيث تُستخدم بهذه الطّريقة: bmw = Car() bmw.move() bmw.slow_down() bmw.stop() خاتمة تعرّفنا في هذا الدّرس على بعض من أهم أساسيات البرمجة الكائنيّة التوجه في لغة بايثون وهذا الموضوع أطول من أن أشرحه في درس واحد لذلك سيكون الدّرس التّالي تكملة لما تعلّمناه في هذا الدّرس حول تعلم بايثون وسيغطي مفاهيم أخرى حول البرمجة كائنية التوجّه.

سنتناول في هذا المقال الأسئلة العشرة الأكثر تكرارًا حول Git والحلول المتعلقة بها. ستساعد هذه الحلول في تجاوز بعض العقبات عند استخدام Git. 1. كيف أقوم بتحرير رسالة إيداع commit خاطئة في Git؟ وهو سؤال يطرح بكثرة من طرف كل من بدأ لتوّه باستخدام Git. لتحرير رسالة إيداع commit خاطئة قمنا بكتابتها، نستخدم الأوامر التالية: git commit --amend سيقوم الأمر بفتح المحرّر الذي سيسمح بتغيير أحدث إيداع. إن أردنا تحرير رسالة الإيداع مباشرة عبر سطر الأوامر، يمكننا القيام بذلك باستخدام الأمر: git commit --amend -m "الرسالة الجديدة" 2. كيف أتراجع عن آخر إيداع commit كاملا؟ للتراجع عن إيداع بعض الملفّات نقوم في البداية بإلغاء آخر إيداع باستخدام الأمر: git reset --hard HEAD~1 سيقوم هذا الأمر بنقل مؤشر الرأس HEAD إلى الإيداع قبل الأخير. بعد ذلك، نقوم بعرض حالة جميع الملفات مرّة أخرى باستخدام الأمر: git status وأخيرًا، نضيف الملفات التي نودّ إضافتها إلى الإيداع باستخدام الأمر: git add ... 3. كيف أتراجع عن إضافة ملف git add؟ للتراجع عن إضافة بعض أو كل الملفّات إلى منطقة الإدراج بالأمر المذكور، نستخدم أحد الأوامر التالية: للتراجع عن ملف وحيد: git reset <FileName> للتراجع عن جميع الملفّات: git reset 4. كيف أحذف تفرع branch (محلي أو بعيد)؟ لحذف تفرّع محلّي، نستخدم الأمر: git branch -d yourLocalBranchName ولحذف تفرّع بعيد، نستخدم الأمر: git push origin --delete yourRemoteBranchName 5. كيف أحذف ملفات محلية من التفرع الحالي لحذف جميع الملفّات المحلّية التي لا نرغب بإيداعها أو الحفاظ عليها في مجلّد العمل، نستخدم الأمر: git clean -f أو: git reset --hard 6. كيف أعيد تسمية تفرع محلي؟ لإعادة تسمية تفرّع محلّي، لدينا حالتان: إعادة تسمية لتفرّع الحالي: git branch -m newBranchName إعادة تسمية تفرّع آخر ليس التفرّع النّشط الحالي: git branch -m oldBranchName newBranchName 7. كيف أنشئ تفرعا بعيدا remote Git branch؟ لإنشاء تفرّع بعيد، نقوم أوّلًا بإنشاء تفرّع محلّي: git checkout -b newBranchName ومن ثم نقوم بدفع التفرّع الذي أنشأناه إلى الخادم البعيد: git push origin newBranchName 8. كيف أغير الرابط الخاص بمستودع بعيد remote Git repository؟ لتغيير الرابط الخاص بمستودع بعيد (لنفترض أنه التفرّع origin) نستخدم الأمر التالي: git remote set-url origin newURL 9. كيف أغير اسم من قام بالإيداع؟ يمكن تغيير اسم من قام بالإيداع في سجلّ المُستودع باستخدام السكربت التالي المأخوذ من مقالات موقع github.com: git filter-branch --env-filter ' an="$GIT_AUTHOR_NAME" am="$GIT_AUTHOR_EMAIL" cn="$GIT_COMMITER_NAME" cm="$GIT_COMMITTER_EMAIL" if[ "$GIT_COMMITTER_EMAIL" = "your@email.to.match" ] then cn="New Committer Name" cm="New Committer Email" fi if[ "$GIT_AUTHOR_EMAIL" = "your@email.to.match" ] then an="New Author Name" am="New Author Email" fi export GIT_AUTHOR_NAME="$an" export GIT_AUTHOR_EMAIL="$am" export GIT_COMMITTER_NAME="$cn" export GIT_AUTHOR_EMAIL="$cm"' 10. كيف أستنسخ مستودعا في مجلد معين؟ لاستنساخ مستودع في مجلّد معيّن، نحتاج إمّا: الانتقال بمسار سطر الأوامر إلى داخل ذلك المجلّد وتنفيذ الأمر: git clone <URL> أو ننفّذ الأمر: git clone <URL> <yourFolderName> حيث أن yourFolderName هو اسم/مسار المُجلّد المعني بالأمر. ترجمة -وبتصرّف- للمقال Top 10 frequently asked questions on Git لصاحبه Hemant Joshi.

تمّ التطرّف في الجزء الأوّل من هذا الشرح إلى الخطوات الأوّليّة في بناء صفحة باستخدام إطار عمل 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.