البرمجة: إطار عمل Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/?d=2البرمجة: إطار عمل Bootstraparكيف تبرمج موقع ويب بسيط باستخدام HTML و CSS و Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/%D9%83%D9%8A%D9%81-%D8%AA%D8%A8%D8%B1%D9%85%D8%AC-%D9%85%D9%88%D9%82%D8%B9-%D9%88%D9%8A%D8%A8-%D8%A8%D8%B3%D9%8A%D8%B7-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-html-%D9%88-css-%D9%88-bootstrap-r2370/

هل تريد أن تتعلم طريقة بناء موقع ويب باستخدام لغة التوصيف HTML ولغة التنسيق CSS وإطار بوتستراب Bootstrap، إذا كان الجواب نعم فهذا المقال لك حيث سنشرح لك من خلاله جميع الخطوات اللازمة للانتقال من شاشة فارغة في المتصفح إلى موقع ويب جميل، ونتعلم كيف تنسق عناصره بطريقة احترافية وأنيقة في نفس الوقت. ولكن في البداية لنتعرف بشكل موجز ما هي لغة HTML ولغة CSS وفيم تستخدمان؟

ما هي لغة HTML ولغة CSS

يستخدم أي موقع ويب كلًا من HTML و CSS في بناءه، وهاتان اللغتان مرتبطتان مع بعضهما البعض ارتباطًا وثيقًا، أي لا يمكن الاستغناء عن أي منهما في صفحة الويب، وإليك تعريفًا مبسطًا لكل منهما.

  • HTML هي اختصار لعبارة Hypertext Markup Language وهي لغة توصيفية أي أنها تُوصّف بنية صفحة الويب ومحتوياتها.
  • CSS هي اختصار لعبارة Cascading Style Sheets وهي لغة تنسيقية مسؤولة عن تصميم صفحة الويب وتنسيق عناصرها.

ملاحظة: يوجد فرق بين مصطلح صفحة ويب ومصطلح موقع ويب فعندما نقول صفحة ويب "web page" فنحن نعني ملف HTML واحد، أما عندما نقول موقع ويب "website" فنحن نعني مجموعة من ملفات HTML مترابطة والتي تكوّن مع بعضها موقع الويب ككل.

متطلبات العمل

  • أول أمر ستحتاجه قبل البدء بإنشاء موقع ويب باستخدام HTML و CSS هو خادم أو استضافة لموقع الويب فالخادم هو الحاسوب الذي سيقوم باستضافة ملفات الموقع. وفي هذا المجال يوجد الكثير من أنواع الاستضافات التي يمكنك الاختيار من بينها، وما عليك سوى البحث عن الاستضافة المناسبة لمتطلباتك.
  • بعد الحصول على الخادم، الشيء التالي الذي تحتاجه هو اسم نطاق domain name وهو يمثل عنوان الموقع على الإنترنت، حيث يكتبه المستخدمون في المتصفح للوصول إلى موقعك. على سبيل المثال اسم النطاق لموقع شركة حسوب هو hsoub.com
  • بعد توفر الاستضافة والنطاق عليك ربطهما مع بعضهما البعض، وفي حال حصلت على الاستضافة والنطاق من نفس الشركة ستتولى هذه الشركة العمل النيابة عنك وتقوم بالإعدادات التالية:
  1. تجهيز حساب استضافة خاص بك.
  2. حجز وتسجيل اسم النطاق.
  3. تجهيز بيئة العمل وإعدادات للربط بين الخادم واسم النطاق.
  4. إنشاء لوحة تحكم تستطيع من خلالها التحكم الكامل بموقعك.

ملاحظة: إذا كنت ترغب فقط في تجربة إنشاء موقع ويب بسيط على حاسوبك بغرض التعلم ولا تنوي جعله عامًا لتصفحه الجميع من خلال شبكة الإنترنت، فيمكنك أن تنشئ كافة الملفات الخاصة بالموقع على جهازك المحلي وتتصفحها مباشرة من أي متصفح ويب، كما يمكنك تحويل حاسوبك إلى خادم ويب محلي تثبيت برنامج يُسمى XAMPP (وهذه الخطوة ضرورية فقط في حال تطوير مواقع ديناميكية وليست إلزامية للمواقع الثابتة كموقعنا الحالي فهو لا يحتاج لمعالجة من طرف الخادم لكن تثبيت الخادم يساعدك على فهم كيفية عمل خوادم الويب وكيفية استضافة الملفات محليًا، مما يسهل فهم عملية تطوير المواقع قبل نشرها على الإنترنت).

1. تعلم أساسيات HTML

إن العنصر أو المكون الأساسي في بنية لغة HTML هو ما يعرف بالوسم tag الذي يمكن أن يبدو كما يلي: 

<b> SOMETHING </b>

استخدمنا في هذا المثال الوسم <b> الذي يجعل النص غامقًا، وهذا الوسم يبدأ بوسم الفتح <b> وينتهي بوسم الإغلاق <b/> وستكون النتيجة في هذه الحالة عرض النص بين الوسمين بخط غامق على الصفحة SOMETHING.

هنالك طبعًا الكثير من الوسوم tags الأخرى في لغة HTML نذكر منها على سبيل المثال:

  • الوسم <i> -- </i> الذي يحول النص الموجود بين وسمي الفتح والإغلاق إلى نص مائل.
  • الوسم <u> -- </u> الذي يضع سطرًا تحت النص.
  • الوسم <p> -- </p> الذي يتضمن فقرة من النص.
  • الوسم <h1> -- </h1> الذي يحول النص ضمنه إلى عنوان رئيسي.

إن هذه الوسوم وسوم بسيطة، ولكن يوجد هناك وسوم أكثر تعقيدًا فعلى سبيل المثال إذا أردت إنشاء القائمة التالية:

  • item 1
  • item 2
  • item 3

سيتوجب عليك في هذه الحالة كتابة كود HTML التالي: 

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

وإذا أردت أن تضيف رابطًا لصفحة وليكن مثلًا رابط للصفحة الرئيسية لأكاديمية حسوب ضمن صفحتك فيجب عليك إضافة الوسم التالي إلى كود HTML: 

<a href="https://academy.hsoub.com">Hsoub Academy</a>

وللتعرف على المزيد من المعلومات حول وسوم HTML وطبيعة عملها ننصح بمطالعة توثيق HTML على موسوعة حسوب.

2. فهم بنية ملف HTML

يمكنك أن تعتبر صفحة الويب عبارة عن بناء مؤلف من مجموعة من المكعبات المرصوفة بجانب بعضها البعض لنحصل في النهاية على صفحة HTML وفق هيكل معين مؤلف من عدد من الوسوم tags.

وفيما يلي أبسط بنية لصفحة HTML: 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>My first web page.</p>
    </body>
</html>

يمكنك أن تنسخ هذا الكود وتلصقه في ملف نصي جديد، وتحفظه باسم index.html وبذلك تكون حصلت على صفحة HTML صالحة للعرض في متصفح الويب.

ولنبدأ بشرح هذا الكود بشكل مفصل:

  • الوسم <doctype html!> يخبرنا أن نوع الملف هو ملف HTML أي صفحة ويب.
  • الوسم <"html lang="en> يدل على أن اللغة المكتوب بها هذا الملف هي اللغة الانكليزية.
  • الوسم <head> يدل على بداية ترويسة الصفحة، ونضع فيه جميع الإعدادات والبيانات الوصفية (meta tags) لهذه الصفحة ، ولا يتم عرض معظم تلك المعلومات على الشاشة لكنها تكون موجهة لمحركات البحث.
  • الوسم <"meta charset="utf-8> يحدد نوع ترميز الأحرف المستخدم في الصفحة.
  • الوسم <title>Hello, world!</title> يمثل عنوان الصفحة وهو ما سيراه الزائرون في شريط عنوان متصفحاتهم.
  • الوسم <body> يمثل بداية جسم الصفحة وفيه نضع كل محتوى الصفحة، ونعود ونكرر أن هذا المكان هو الجزء الرئيسي لملف HTML لأنه الجزء المرئي الذي سيظهر لزوار الموقع.
  • الوسم <h1>Hello, world!</h1> يمثل العنوان الرئيسي للصفحة.
  • الوسم <p>My first web page.</p> يعبر عن فقرة نصية.
  • الوسم يدل على نهاية ملف HTML.

ملاحظة مهمة: ننصحك باختيار محرر شيفرات برمجية مناسب لكتابة تعليمات HTML مثل فيجوال ستوديو كود Visual Studio Code أو Sublime Text فهي مجانية ولها إصدارات على نظام التشغيل ويندوز ونظام التشغيل mac وتسهل عليك كتابة الكود وتوفر ميزات مثل تلوين التعليمات البرمجية لتسهل عليك قراءتها وتمييزها بصريًا.

إليك مثالًا على كود HTML مكتوب ضمن محرر Sublime:

html code

تستطيع بعد الانتهاء من كتابة الملف أن تنسخه وتضعه صف ضمن المجلد الرئيسي للخادم المحلي الذي نصبته على جهازك وتستعرض هذا الملف من خلال المتصفح، لن يكون شكل الصفحة جميلًا حاليًا وسيظهر كما في الشكل التالي:

html page.jpg 

تحتاج هذه الصفحة للكثير من التحسينات قبل عرضها على زوار الموقع، وهو ما سننجزه في الفقرات التالية.

3. تعلم أساسيات كتابة محددات CSS

لغة CSS هي المسؤولة عن وضع التنسيقات لصفحة HTML وجعلها تبدو أكثر جمالًا وتملك CSS ما يعرف بالمحددات Selectors والتي تصف طريقة ظهور العنصر في الصفحة كما في المثال التالي: 

p {
    font-size: 18px;
}

يعلمنا هذا المحدد أن حجم نص الفقرة في هذه الصفحة هو 18 بكسل، ومع ذلك فإن الطريقة الأفضل لتنسيق العناصر هي إنشاء أصناف classes وتعيينها لكل وسم على حدا. على سبيل المثال يمكن أن نكتب محدد الصنف class selector في لغة CSS بالطريقة التالية: 

.normal-text {
    font-size: 18px;
}

لاحظ أن النقطة (.) تدل هنا على أن هذا التنسيق هو لصنف class يحمل الاسم normal-text وبالتالي أي وسم ضمن الصفحة لديه هذا الصنف سيكون حجم الخط فيه هو 18 بكسل، وهكذا يمكن تطبيق هذا المحدد على وسم الفقرة النصية كما يلي: 

<p class="normal-text">This text is going to be 18px.</p>

لنشرح كود CSS المذكور أعلاه بشيء من التفصيل:

  • عرفنا صنف باسم normal-text. وكل شيء يأتي بعده نضعه ضمن قوسي الفتح والإغلاق {} ونكتب ضمن هذين القوسين كل قواعد التنسيق التي ستحدد شكل العناصر التي تأخذ هذا الصنف .
  • الخاصية font-size هي مثال لأحد خواص CSS وهي تحدد حجم الخط.
  • 18 بكسل هي القيمة المعينة لهذه الخاصية.
  • هناك الكثير من خصائص CSS التي يمكنك الاطلاع عليها من خلال توثيق CSS على موسوعة حسوب

4. دمج تنسيقات CSS ضمن صفحة HTML

إن ملف HTML هو ملف مهيكل للغاية، فكل عنصر فيه يجب أن يكون في مكانه، وترتيب العناصر مهم للغاية للبنية النهائية ومظهر صفحة الويب المعنية. أما مستند CSS فهو أقل تنظيمًا. يطلق على مستندات CSS عادة اسم ورقات الأنماط المتتالية وورقة الأنماط هي قائمة تتضمن كل تعاريف الأصناف المستخدمة في مستند HTML المقابل. وترتيب هذه التعاريف ليس مهمًا بالضرورة (على الأقل بالنسبة للتصاميم البسيطة). وبالتالي لتنشئ ورقة أنماط CSS عليك تعريف كل صنف class واحدًا تلو الآخر وتعريف الخصائص والتنسيقات المطلوبة ضمنه، ثم تطبيقه على عنصر HTML وعرضه لاختبار ما إذا كانت النتيجة في تصميم صفحتك هي ما تريده. قد يكون هذا عملًا شاقًا ويستغرق وقتًا، وللسهولة يمكن اللجوء لحل أكثر بساطة والاستعانة بإطار عمل يسمى بوتستراب Bootstrap بدلًا من كتابة كافة أصناف CSS من الصفر، وهو ما سنتطرق لشرحه في الفقرات التالية.

5. تثبيت Bootstrap

بوتستراب Bootstrap هو أداة مفتوحة المصدر لإنشاء مواقع الويب باستخدام HTML و CSS، وبتعريف أبسط يوفر بوتستراب Bootstrap إطارًا يضمن أن الهيكل الرئيسي لصفحة الويب جاهز ومحسن لمزيد من التطوير ويسهل عليك تصميم صفحة الويب وتنسيقها فهو يحتوي على عدد كبير من الأصناف classes الجاهزة مسبقة التنسيق التي تزيد من جمالية صفحة الويب الخاصة بك.

باستخدامك لإطار عمل Bootstrap لن تضطر إلى البدء من الصفر في التعلم لأنه سوف ينقلك إلى الجزء الممتع من عملية بناء موقع الويب باستخدام HTML و CSS.

أمامك طريقتان لتعلم طريقة التعامل مع بوتستراب Bootstrap لتنسيق موقعك:

  • المسار الأول: تعلم Bootstrap من خلال الذهاب إلى الصفحة الرئيسية وتحميل حزمة Bootstrap الرئيسية والبدء في اكتشاف محتوياتها و البناء عليها.
  • المسار الثاني: وهو المسار المختصر ويكون بتحميل تصميم جاهز لصفحة ويب مطبق عليها تنسيقات بوتستراب Bootstrap، مما يوفر الوقت والجهد في تصميم الصفحة من الصفر.

قد يتضمن المسار الأول بعض الصعوبة في التعلم في البداية ولكنه خيار جيد لإنشاء صفحات الويب باستخدام HTML و CSS فبمجرد تعلمك التقنيات الأساسية للتعامل مع Bootstrap سيكون من السهل عليك إنشاء مواقع ويب بتصميمات جميلة وجذابة، ولكي تبدأ بهذا المسار ننصحك بقراءة توثيق بوتستراب الرسمي أو يمكنك الاطلاع على توثيق بوتستراب باللغة العربية من موسوعة حسوب.

سنختار في مقالنا هذا المسار الثاني بالبدء بهيكل جاهز ومعد مسبقًا يوفر عليك الكثير من الجهد في التعلم ويساعدك على تنسيق المحتوى بسرعة واحترافية.

6. اختيار التصميم

عندما تنشئ موقع ويب باستخدام لغة التوصيف HTML ولغة التنسيق CSS يكون لديك الحرية الكاملة في اختيار قالب Bootstrap الذي يناسبك ويناسب موقعك. سوف نستخدم في هذا المثال التوضيحي أحد القوالب البسيطة التي يوفرها موقع startbootstrap لغرض التعلم مع أنه يوجد الكثير من القوالب المجانية الجميلة والتي تم تحسينها والمصممة بشكل ممتاز وتعمل بدون أي مشكلة.

سنستخدم في هذا المقال قالبًا مجانًيًا يدعى Creative وستكون النتيجة النهائية للصفحة كما يلي:

bootstrap example

لتحميل هذا القالب اضغط على الزر تحميل مجاني Free Download الموجود على يمين هذه الصفحة أو حمله من هنا مباشرة startbootstrap-creative-gh-pages.zip

ثم احفظ الملف المضغوط على جهازك، وبعد تحميله فك ضغطه وانقل المجلد الناتج إلى المجلد الرئيسي لخادمك المحلي، أو إلى ارفع الملفات على استضافة موقعك وافتح الموقع الآن من خلال المتصفح وستشاهد هذه الصفحة الجميلة بالشكل التالي:

bootstrap example1

بالرغم من أنك ستشاهد صفحة ويب جميلة ومنسقة بالكامل، إلا أن عليك الآن أن تتعلم طريقة الحصول على مثل هذه الصفحة وتخصيصها بالطريقة التي تناسبك باستخدام أكواد HTML و CSS.

7. تخصيص الموقع باستخدام HTML وCSS

في البداية سنعمل على تصميم الصفحة الرئيسية والتي من خلالها سنوضح طريقة تنسيق النصوص والصور وكل شيء في الصفحة بشكل عام.

تحدثنا في فقرة سابقة بشكل موجز عن قسم <head> في صفحة HTML لنشرح هذا القسم بشيء من التفصيل.

عندما تفتح الملف index.html من قالب بوستراب الجاهز سيكون قسم الرأس <head> مشابهًا لما يلي: 

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <!-- Theme CSS - Includes Bootstrap -->
  <link href="css/creative.min.css" rel="stylesheet">

</head>

ملاحظة: للسهولة أزلنا الأشياء غير الأساسية من هذا الكود مثل كود تحميل خطوط جوجل وأيقونات Font Awesome ووحدة Lightbox للصور المعروضة على الصفحة.

لقد تعرفنا فيما سبق على معظم أسطر هذا الكود، ولكن سنشرح الأسطر الجديدة:

  • بداية كل ما هو مكتوب بين هذين القوسين <!--...--> هو تعليقات لن تظهر على الصفحة عند عرضها في المتصفح.

  • سطر الكود التالي <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> هو سطر خاص بإطار بوتستراب وهو يحدد حجم إطار العرض viewport لموقع الويب لجعله متجاوبًا مع كافة أحجام الشاشات.

  • السطر <link href="css/creative.min.css" rel="stylesheet"> يربط ملف CSS خارجي مع ملف HTML، ولمزيد من السهولة سنقوم بتعديل هذا السطر ليصبح <link href="css/creative.css" rel="stylesheet"> والاختلاف بين السطرين السابقين هو أن السطر الثاني يحمّل النسخة غير المختصرة non-shortened من ملف CSS ليسهل عليك عملية التعديل.

الآن لو انتقلت إلى نهاية الملف index.html ستجد الأسطر التالية قبل وسم الإغلاق <body> مباشرة: 

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/Bootstrap/js/Bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>

ومهمتها دمج ملفات جافا سكريبت JavaScript ضمن ملف HTML مما يؤدي إلى زيادة التفاعل بالصفحة، على سبيل المثال عندما نقنقر على الرابط About سينقلك بطريقة سلسة ومتدرجة إلى القسم الخاص بها من الصفحة بدلًا من عرضها بطريقة فجائية، طبعًا وظائف لغة جافا سكريبت JavaScript  كثيرة جدًا وليست ضمن مجال مقالنا الحالي، إذ سنركز حاليًا على إضافة محتوى وتنسيقات مخصصة إلى صفحة الويب.

8. إضافة محتوى وصور الصفحة

إن أول ما سنقوم به في الصفحة هي تغيير عنوانها

1. تغيير عنوان الصفحة

ابحث في قسم <head> عن الوسم <title> وغير عنوان الصفحة الموجود ضمن وسمي الفتح والإغلاق إلى العنوان الذي تريده 

<title>My HTML Site</title>

2. تخصيص ترويسة الصفحة (Hero Section)

يطلق اسم قسم البطل أو الهيرو على القسم البارز الظاهر أعلى صفحة الويب، وهو قسم مهم لكونه أول ما يسترعي انتباه الزوار ويجب تصميمه بطريقة لافتة ومميزة،  وهو في تصميمنا القسم الظاهر في هذه الصورة:

hero 1024x599

سنضع المحتوى الخاص بنا داخل هذا القسم، ولتعديله عُد إلى ملف index.html وابحث عن القسم التالي: 

<!-- Masthead -->
<header class="masthead">
  <div class="container h-100">
    <div class="row h-100 align-items-center justify-content-center text-center">
      <div class="col-lg-10 align-self-end">
        <h1 class="text-uppercase text-white font-weight-bold">...</h1>
        <hr class="divider my-4">
      </div>
      <div class="col-lg-8 align-self-baseline">
        <p class="text-white-75 font-weight-light mb-5">...</p>
        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
      </div>
    </div>
  </div>
</header>

يتحكم الكود السابق في محتوى قسم البطل، ولدينا في هذا الكود البرمجي بعض الوسوم الجديدة لنوضح دورها:

  • الوسم <header> يخبرنا أن هذا القسم كله هو رأس الصفحة وهو مرتبط بشكل أساسي مع وسوم إخوة sibling أخرى في الصفحة هما الوسم <section> والوسم <footer>
  • الوسم <div> وهو اختصار لكلمة division ويستخدم لفصل جزء الكود الحالي عن الأجزاء الباقية ضمن ملف HTML ويساعد على تمييز الأقسام بصريًا في الصفحة.
  • بالإضافة إلى ذلك سنلاحظ أن بعض الوسوم التي تعرفنا عليها مسبقًا ستصبح أكثر تعقيدًا عند إضافة عدة أصناف CSS لها كما في المثال التالي: 
<h1 class="text-uppercase text-white font-weight-bold">...</h1>

في هذا المثال وضعنا عدة أصناف classes للعنوان الرئيسي <h1> وهي text-uppercase و text-white لتجعل لون النص أبيض و
font-weight-bold لجعله سميكًا.

أنشئت هذه الأصناف بواسطة بوتستراب ومن قبل مطور قالب Creative ويمكنك أيضًا استخدامها عند تنسيق موقعك الخاص، ويمكنك تخصيص أي وسم تضيفه إلى بنية صفحتك، وإذا كنت ترغب بالاطلاع على كل هذه الأصناف ما عليك سوى الذهاب إلى الملف creative.css الموجود ضمن المجلد CSS الموجود ضمن القالب الذي تحملته من الويب.

ربما يصعب عليك فهم جميع هذه الأصناف في البداية ولكن مع الوقت ستكتشف أن الموضوع سهل للغاية. على سبيل المثال طبقنا الصنف font-weight-light على وسم الفقرة، وعندما نذهب إلى الملف creative.css ونبحث عنه سنكتشف أن هذا الصنف مكون من التعليمات التالية: 

.font-weight-light {
  font-weight: 300;
}

وبالتالي ستفهم أن تطبيق هذا الصنف على عنصر ما سيجعل وزن الخط لهذا العنصر خفيفًا light (تمثل القيمة 400 الوزن الافتراضي العادي regular وتمثل أي قيمة أعلى منها الوزن الخفيف light وأي قيمة أعلى منها الوزن العريض bold).

كما يعد تعديل النصوص في HTML عملية بسيطة للغاية وهذا ما يتضح من خلال سطر الكود التالي: 

 <h1 class="text-uppercase text-white font-weight-bold">Your Favorite ...</h1>

كل ما عليك هو البحث عن وسمي الفتح والإغلاق وتعديل النص الموجود بينهما ليصبح كما يلي: 

 <h1 class="text-uppercase text-white font-weight-bold">Your Favorite ...</h1>

يمكن عمل الشيء نفسه في جميع وسوم صفحة HTML، كما يمكن إضافة فقرات جديدة بحريّة تامة. على سبيل المثال نستطيع أن نضيف فقرة موجودة بنسخ ولصق كود فقرة سابقة مع تغيير النص الموجود ضمنها كما يلي: 

<p class="text-white-75 font-weight-light">Start Bootstrap can ...</p>
<p class="text-white-75 font-weight-light">Paragraph 2</p>

الآن وبعد أن تعرفت على طريقة التعامل مع النصوص وتخصيصها، لنشرح طريقة التعامل مع الصور ونغير صورة الخلفية في ترويسة صفحتنا.

هذا قد يكون أصعب قليلًا لأنه لا يتم ضمن ملف HTML فلا يوجد وسم يشير إلى تضمين صورة في الصفحة بأي شكل لذا سنحتاج للانتقال إلى ملف CSS وإجراء تغيير فيه، فإذا نظرنا إلى وسم <header> في الصفحة سنلاحظ وجود صنف معين له اسمه masthead وهذا الصنف هو المسؤول عن تغيير صورة الخلفية، وإذا فتحنا ملف creative.css وانتقلنا لتعريف الصنف masthead سنجده بالشكل التالي: 

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 72px);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

يُطبَّق هذا الكود العديد من التنسيقات على الصور مثل موقع الصورة، وأبعادها، وعدد مرات تكرارها، ومسارها ("url("../img/bg-masthead.jpg وفي أغلب الأحيان يكون هناك مجلد فرعي خاص بالصور ضمن المشروع باسم img. فلتغيير صورة الخلفية في هذا المثال نختار الصورة المناسبة لصفحتنا وننسخها إلى المجلد img ثم ننسخ اسم الصورة الجديدة ونلصقه مكان اسم الصورة القديمة ليصبح مسار الصورة("url("../img/your-file.jpg

3. تخصيص الأقسام الأخرى في الصفحة

عند تصفحك للملف index.html ستلاحظ وجود أقسام مختلفة ضمن الصفحة مثل قسم التنقل navigation وقسم حولنا about وقسم الخدمات services وقسم اتصل بنا contact وغيرها من الأقسام. وعلى الرغم من اختلاف المحتوى ضمن هذه الأقسام أو الصفحات إلا أن البنية العامة لكود HTML هي نفسها لا تتغير ولكن تنسيقات CSS تختلف من قسم إلى آخر وهنا يمكنك المرور على كل صفحة وتغيير التنسيقات بالشكل الذي يناسب احتياجاتك. كما يمكنك أيضًا نقل أقسام كاملة (أي الأجزاء بين وسوم <section> في كود HTML) من مكان لآخر يدويًا وذلك عن طريق قصها ولصقها في المكان الذي تريده.

9. ضبط الألوان والخطوط

تعد عملية تغيير الألوان والخطوط من أبسط الأمور في HTML وCSS والطريقة الأسهل للقيام بذلك هي كتابة تنسيقات مضمنة باستخدام الخاصية style ضمن الوسم كما في المثال التالي: 

<p style="color: #FF0000;">Red text</p>

تُمثَل الألوان في لغة HTML بقيم ست عشرية hexadecimal فعلى سبيل المثال تمثل القيمة FF0000# اللون الأحمر ويمكنك الاطلاع على جميع قيم الألوان من خلال الرابط standard colors

لكن الطريقة الأفضل لتغيير الألوان هي عن طريق كتابتها كتنسيقات منفصلة ضمن ملف CSS وليس كتنسيقات مضمنة ضمن وسوم HTML كما في المثال السابق، فعلى سبيل المثال يمكننا تحقيق نفس تأثير الكود السابق من خلال كتابة الكود التالي في ملف CSS: 

p.red {
color: #FF0000;
}

ثم استخدام هذا الصنف في كود HTML كما يلي: 

<p class="red">Red text</p>

الطريقة الثانية هي الطريقة التي يعتمدها بوتستراب، فلتغيير لون أي نص على الصفحة، ابحث أولاً عن الوسم المسؤول عن تنسيق هذا النص، ثم انتقل إلى ملف CSS وعدل لون النص في الصنف المقابل، أو أنشئ صنفًا جديدًا لهذا اللون ثم طبقه على العناصر التي تريدها، وإذا لم يكن لهذا الوسم صنف يمكنك إنشاء صنف جديد له في ملف CSS.

يوضح المثال التالي لك الفكرة فإذا أردت تغيير لون النص "At Your Service." في العنوان الرئيسي من اللون الأسود إلى اللون البرتقالي: 

<h2 class="text-center">At Your Service</h2>

اذهب إلى ملف CSS وأنشئ الصنف التالي: 

.text-orange {
  color: #f4623a !important;
}

تعني الكلمة المحجوزة important! أن الأولوية للون الذي تم تطبيقه هنا وتجاوز تنسيق أي لون آخر جاء قبله، بعد تعريف هذا الصنف class يمكنك الآن العودة إلى العنوان الرئيسي وتطبيق هذا الصنف عليه كما يلي: 

<h2 class="text-center text-orange">At Your Service</h2>

وعندها سيصبح العنوان الرئيسي باللون البرتقالي كما في الصورة:

header color

أما لتغيير نوع الخط وحجمه فيمكننا القيام بشيء مشابه لما قمنا به في حالة اللون حيث سنذهب إلى ملف CSS ونعرف الصنف class التالي: 

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
font-size: 18px;
}

حددنا في هذا الصنف نوع الخط المناسب وعينا حجم الخط ليكون 18 بكسل، وبالتالي يمكن استخدام هذا الصنف في أي وسم من وسوم HTML، وفي التطبيق العملي نضع عادة كافة إعدادات الخطوط والألوان في صنف واحد ضمن ملف CSS ومن ثم نطبقها على وسوم HTML.

وبالعودة إلى مثالنا السابق نستطيع تغيير حجم الخط للعنوان الرئيسي ليصبح 50 بكسل ولكن يجب بدايًة إنشاء الصنف التالي: 

.text-xxl {
  font-size: 50px;
}

ثم نطبقه على وسم العنوان الرئيسي كما يلي: 

<h2 class="text-center text-orange text-xxl">At Your Service</h2>

كما يمكننا تغيير الألوان والخطوط ضمن قالب بوسترات أيضًا من خلال الذهاب إلى الصنف المطلوب في ملف CSS وتعديله بالطريقة التي تناسب مشروعنا.

10. إنشاء صفحات إضافية

بعد أن خصصت صفحة موقعك الرئيسية حان الوقت لإنشاء صفحات إضافية للمشروع وربطها بالصفحة الرئيسية لأن أي موقع ويب لا يقتصر عادة على صفحة واحدة بل يتكون من عدة صفحات إضافية ومن هذه الصفحات:

  • صفحة حولنا about page
  • صفحة اتصل بنا contact us
  • صفحة نماذج الأعمال portfolio
  • صفحة المنتجات أو الخدمات products/services
  • صفحة فريق العمل team
  • صفحة السياسات policies

1. البدء بتصميم الصفحة

عندما تنشئ صفحة ويب جديدة فإن أول شيء تفكر به هو تصميم الصفحة وتخطيط عناصرها، ولذلك عندما تنشئ موقعك باستخدام HTML وCSS من الأفضل أن تضع بداية التصميم الأولي الذي يناسبك ثم تحول هذا التصميم إلى تعليمات برمجية.

قد تكون البداية في عملية إنشاء الموقع من شاشة فارغة باستخدام HTML و CSS صعبة نوعًا ما ولذلك يمكنك كذلك الاستعانة بقوالب بوتستراب الجاهزة ولكن دعونا نأخذ قبل ذلك فكرة عن مبادئ تصميم الصفحات ثم نطبق ذلك التصميم باستخدام Bootstrap.

يمكنك تقسيم الصفحة إلى أجزاء ومن ثم تجميعها لتكون صفحة واحدة كما في الشكل:

layout

ما يميز بوتستراب هو أنه ينوب عنك في التعامل مع مبادئ التصميم الأساسية وتفاصيل مظهر الصفحة بحيث يمكنك التركيز على وضع هذه التفاصيل في الأماكن الصحيحة.

لننشئ الآن صفحة جديدة هي صفحة حولنا about، في البداية سننشئ تصميمًا مبدئيًا على غرار المثال السابق الموضح أعلاه وفيه الأقسام التالية:

  • قائمة التنقل navigation في الأعلى
  • العنوان الرئيسي يمتد على كامل عرض الصفحة
  • قسم المحتوى الرئيسي في منتصف الصفحة
  • تذييل الصفحة ودائمًا يوجد في نهاية الصفحة

2. إنشاء صفحة جديدة

إن أبسط طريقة لإنشاء صفحة جديدة هي أخذ نسخة عن صفحة موجودة مسبقًا وبالتالي استخدام نفس القالب. في مثالنا ننسخ الصفحة index.html ونغير اسمها إلى about.html ومن ثم نغير العنوان title لتمييز الصفحات ونختار عنوان لصفحة حول الشركة ليكون على سبيل المثال <title>About Us</title> والآن سنستعرض الملف سطرَا سطرًا ونقرر ما هي الأسطر التي سنتركها وما هي الأسطر التي سنحذفها:

  • قائمة التنقل navigation: يجب الحفاظ عليها لجعل خاصية التنقل موحدة في جميع الصفحات.
  • قسم العنوان الرئيسي: لن نكون بحاجة له وفق تصميم مشروعنا وبالتالي سنقوم بحذفه كاملًا.
  • قسم حولنا about: هو القسم الذي سنستخدمه ليكون العنوان الرئيسي.
  • الأقسام خدمات services ونماذج الأعمال portfolio واتصل بنا contact لن نحتاج لها على الإطلاق ولذلك سنحذفها.
  • قسم التذييل footer سنحتاج له ولذلك يجب الحفاظ عليه.

وبعد القيام بهذه التعديلات سنحصل على الكود البسيط التالي: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- all head definitions ... removed for clarity -->
    </head>

    <body id="page-top">
        <!-- Navigation -->
        <!-- actual navigation tags removed for clarity -->

        <!-- About Section -->
        <!-- ... -->

        <!-- Footer -->
        <!-- ... -->

        <!-- Bootstrap script imports -->
        <!-- ... -->
    </body>
</html>

القسم المفقود هنا هو قسم المحتوى الرئيسي ولذلك سنكتبه عن طريق إعادة استخدام القسم حولنا About Section وذلك بأخذ نسخة من الكود التالي: 

<!-- About Section -->
<section class="page-section bg-primary" id="about">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="text-white mt-0">...</h2>
                <hr class="divider light my-4" />
                <p class="text-white mb-0">...</p>
            </div>
        </div>
    </div>
</section>

ثم نغير أول سطرين في الكود ليصبحا كما يلي: 

<!-- Main Content Section -->
<section class="page-section bg-primary" id="main-content">

وبما أننا لا نحتاج للعنصرين <h2> و <hr> لذا سنحذفهما ليتبقى لدينا الكود التالي: 

<!-- Main Content Section -->
<section class="page-section bg-primary" id="main-content">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <p>A paragraph of text.</p>
            </div>
        </div>
    </div>
</section>

ستلاحظ عندما تحفظ الملف وتفتحه في المتصفح وجود سطرين فوق بعضهما البعض مع خلفية واحدة كما في الشكل:

about page head

من الأفضل أن تكون الخلفية بيضاء في قسم المحتوى الرئيسي، ولنحقق ذلك بسهولة نزيل الصنف bg-primary من الوسم الرئيسي <section> ليصبح سطر الكود كما يلي: 

<section class="page-section" id="main-content">

وتصبح النتيجة كما في الشكل:

about page head 2

سنضيف الآن بعض الفقرات إلى الكود لملئها بالمحتوى، ونضيف عنوان فرعي كما يلي: 

<!-- Main Content Section -->
<section class="page-section" id="main-content">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit...</p>
                <p>Proin fermentum, felis tempor pharetra lobortis, magna quam
                    hendrerit dolor...</p>
                <h3>Subhead</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit...</p>
            </div>
        </div>
    </div>
</section>

ليصبح شكل الصفحة كما يلي:

about 1

إذا لم ترغب في توسيط النص ما عليك سوى إزالة الصنف text-center من الوسم <div> كما في الشكل:

about 2

ولإضفاء المزيد من الجمالية على النصوص الموجودة في الصفحة يمكنك إنشاء أصناف جديدة ضمن ملف CSS وتعيينها لهذه الفقرات، أو تعيين أصناف بوتستراب جاهزة وفي مثالنا قمنا بتعيين الأصناف التالية على الوسم <p> كما يلي: 

<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>
<p class="text-muted">Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

وعلى الوسم <h3> كما يلي: 

<h3 class="h3 mt-4">Subhead</h3>

ليصبح شكل الصفحة كما في الشكل التالي:

about 3

لنضف الآن صورة في أعلى الصفحة من خلال الوسم الخاص بالصورة التالي: 

<img src="img/image.jpg">

إن كتابة الوسم بهذه الطريقة محدود جدًا إذ لا توجد أي تنسيقات به، ولإضافة بعض التنسيقات له يمكننا الاستعانة بأصناف بوتستراب الجاهزة كما يلي: 

<img src="img/image" class="rounded img-fluid">

بإضافة هذه الأصناف للصورة ستظهر بحواف مستديرة وتضمن بأن حجم الصورة لن يتجاوز حجم الكتلة الموجودة ضمنها.

يمكنك الآن إضافة بعض الوسوم إلى قسم المحتوى الرئيسي كما يلي: 

<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>

<img src="img/image.jpg" class="rounded img-fluid" />

<p class="text-muted">
    Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit
    dolor...
</p>

<h3 class="h3 mt-4">Subhead</h3>

ليكون الشكل النهائي لصفحة حولنا كما يلي:

about complete

3. الربط مع صفحة جديدة

بعد الانتهاء من عملية إنشاء الصفحة الجديدة، علينا الآن ربطها مع الملف index.html والمكان الطبيعي لعملية الربط هو في قائمة التنقل navigation من خلال البحث عن سطر الكود التالي: 

<a class="nav-link js-scroll-trigger" href="#about">About</a>

وإجراء التغيير عليه ليصبح كما يلي: 

<a class="nav-link" href="about.html">About</a>

أضفنا في السطر السابق الوسم <a> وهو وسم الارتباط التشعبي في HTML فعن طريقه يمكننا ربط الصفحات مع بعضها البعض عن طريق توفير عنوان تلك الصفحة في البارامتر href. الذي يمثل نص الرابط أو الجزء القابل للنقر في الرابط وسيكون هذا النص بين وسمي الفتح والإغلاق <a></a> وبالنتيجة عند تحديث الصفحة الرئيسية سيظهر الرابط الجديد الذي تستطيع من خلاله الآن الانتقال إلى الصفحة حولنا about.

خطوات إضافية لتطوير الموقع

بعد قراءتك لهذا المقال يفترض أنك تستطيع الآن بناء موقع ويب بسيط مؤلف من صفحتين هما الصفحة الرئيسية homepage وصفحة حولنا about، ومن الجيد أن تطور مهاراتك وتتابع بناء صفحات أخرى متعددة بتنسيقات جميلة وتضيفها إلى موقعك وتربطها بقائمة التنقل أعلى الموقع.

كما ننصحك بتعزيز مهاراتك في تطوير مواقع الويب فهو تخصص مميز ومطلوب في سوق العمل، فإذا كنت مهتمًا باحتراف إنشاء المواقع يمكنك مطالعة دورة تطوير الواجهات من أكاديمية حسوب التي تساعدك على فهم اللغات الأساسية لتطوير الويب ( HTML و CSS وجافا سكريبت) كما تشرح لك كل ما يتعلق بإطار بوتستراب Bootstrap وكيفية استخدامه في المشاريع والتعامل مع مكوناته المختلفة لتطوير مواقع احترافية بسرعة وغيرها من التقنيات المفيدة التي تساعدك على بناء معرض أعمال غني يعزز فرصتك في الحصول على عمل.

نتمنى لكم الاستفادة الجيدة من هذا المقال، وفي حال كان لديكم أي تساؤل يمكن تركه في قسم التعليقات أسفل المقال أو كتابته في قسم الأسئلة والأجوبة في الأكاديمية.

ترجمة وبتصرف للمقال karol krol لكاتبه How to Code a Website

اقرأ أيضًا

]]>2370Sat, 20 Jul 2024 15:06:01 +0000دليلك الشامل لإعداد واستخدام إطار العمل بوتستراب Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D9%88%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A5%D8%B7%D8%A7%D8%B1-%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-bootstrap-r2256/

سنتعرف في مقال اليوم على الخطوات الكاملة لإنشاء موقع ويب باستخدام إطار العمل بوتستراب Bootstrap من الصفر، بداية من إنشاء ملفات الموقع على جهازك وتضمين ملفات بوستراب فيها، وانتهاء برفع هذا الموقع على خادم فعلي متصل بالانترنت، كما سنوفر في نهاية المقال الكود البرمجي الكامل للموقع الذي قمنا ببناءه.

ما هو بوتستراب Bootstrap

بوتستراب هو إطار عمل framework مجاني ومتعدد الاستخدامات موجه لمطوري الواجهات الأمامية، وهو يساعد على إنشاء مواقع إنترنت متجاوبة مع مختلف أحجام الشاشات بسرعة وسهولة عالية. طُوّر هذا الإطار من قبل مهندسي تويتر Twitter عام 2010 وأثبت جدارته ونجاحه وهو يستخدم حاليًا في الكثير من مواقع وتطبيقات الويب وأشهرها LinkedIn و Spotify وفي الكثير من قوالب ووردبريس WordPress.

يمكنك باستخدام Bootstrap إنشاء صفحات HTML حسب احتياجاتك وتنسيقها بأسلوب أنيق يناسب تصميمك، إذ يتضمن بوتستراب الكثير من الميزات التصميمة مثل الشرائح الدوارة carousels والجداول، والأزرار، والنوافذ المنبثقة، وغيرها كما يوفر مجموعة واسعة من الاختصارات التي تسهل إنشاء صفحات الويب وتوفر عليك الوقت والجهد.

ولا يتطلب استخدام بوتستراب خبرة برمجية كبيرة، فهو يوفر العديد من الأصناف والملفات الجاهزة ويختصر عليك كتابة الكثير من الشيفرات البرمجية، ولكن يفضل أن تمتلك فهمًا أساسيًا في التعامل مع لغات تطوير الويب الأساسية وهي HTML و CSS و JavaScript، ومعرفة بمفهوم التصميم المتجاوب لصفحات الويب. وإذا لم تكن ملما بها، فيمكنك التعرف عليها في المسار الأول من دورة تطوير واجهات المستخدم من أكاديمية حسوب.

لننتقل الآن بعد هذه المقدمة الموجزة لشرح كافة الخطوات اللازمة لبناء موقع باستخدام بوتستراب من الألف للياء.

الخطوة 1: إعداد Bootstrap

من أجل استخدام Bootstrap في صفحات موقعك الإلكتروني أمامك احتمالان مختلفان:

  1. تحميل ملفات بوتستراب على جهاز الحاسوب الخاص بك ثم تضمنيها في موقعك.
  2. استدعاء ملفات بوتستراب من شبكة توصيل المحتوى CDN، وتضمين رابط CDN في صفحات الويب الخاصة بك.

إن استدعاء بوتستراب عن بعد فكرة جيدة حيث سيكون لكثير من المستخدمين الملف بالفعل في الذاكرة المؤقتة لمتصفحهم من تحميل مواقع الويب التي تستخدم بوتستراب، وبالتالي لن يضطروا الى إعادة تحميلها عند الدخول إلى موقعك وهذا سيسرع وقت تحميل الصفحة وهذه هي الطريقة الموصى بها، ومع ذلك يمكنك بغرض التجربة والتطوير او الاستخدام الشخصي أو التعامل مع بوتستراب دون الحاجة للاتصال بالإنترنت، فيمكنك أيضا الحصول على نسختك الخاصة من الملفات وسنبين الأسلوبين تاليًا.

استدعاء Bootstrap من شبكة CDN

ننشئ كخطوة أولية ملف HTML بسيط كقاعدة لاستخدام Bootstrap، لذلك أول شيء عليك القيام به هو إنشاء مجلد باسم bootstrap على جهاز الحاسوب الخاص بك -أو الخادم server- من أجل تخزين ملفات المشروع وأنشئ ملف ضمنه باسم html.index وافتحه بمحرر الأكواد المفضل لديك مثل ++Notepad ثم وألصق فيه الكود التالي: 

!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Tutorial Sample Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    </body>
</html>

الخطوة التالية هي استدعاء ملفات بوتستراب في ترويسة الصفحة header من خلال توفير رابط الوصول لشبكة توصيل المحتوى CDN، ويمكنك العثور على هذا الرابط أسفل صفحة تنزيل بوتستراب. كل ما عليك هو نسخه ولصقه في الوسم <head> في صفحة الويب الخاصة بك على النحو التالي: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

ملاحظة: تأكد من أخذ الربط الفعلي من صفحة التنزيل الفعلية لتضمن أنك تستخدم أحدث إصدار من بوتستراب.

بعد إضافة الكود وعرض الملف في المتصفح، يحمل المتصفح بوتستراب تلقائيًا.

تحميل Bootstrap محليًا

الطريقة البديلة لإعداد بوتستراب هي تنزيله على جهازك واستخدام الملفات محليًا، ستجد ملفات التنزيل أيضا في صفحة تنزيل بوتستراب وبمجرد الانتهاء من تنزيله قم بفك ضغط الملف ستجد ضمنه مجلدين: مجلد css يحتوي على ملفات CSS ومجلد js يحتوي على ملفات JS

انسخ محتويات هذا المجلد في مجلد المشروع الذي أنشأته سابقًا، وبعد ذلك يمكنك تضمين ملف css مثلًا في ترويسة الملف html.index لتحميله قبل تحميل محتوى صفحة الويب من خلال كتابة الكود التالي: 

<link rel="stylesheet" href= "bootstrap/css/bootstrap.min.css">

ستلاحظ أن هذا يتضمن مسار الملف الذي يمكن من خلاله العثور على ملف Bootstrap، تأكد من أن مسارك يتوافق مع الإعداد الفعلي، فأسماء المسارات قد تختلف من اصدار آخر لإطار العمل Bootstrap وبحسب بنية موقعك.

ولتضمين ملف جافا سكريبت يمكنك كتابة الكود التالي أسفل الصفحة قبل الوسم <body/> مباشرة: 

<script src="bootstrap/js/bootstrap.min.js"></script>

تضمين jQuery

من أجل الحصول على الوظائف الكاملة لبوتستراب، ستحتاج أيضا إلى تحميل مكتبة jQuery ويمكنك أيضًا تحميلها عن طريق استدعائها عن بعد او استضافتها محليًا على جهازك.

ملاحظة: سيتوقف الإصدار الحالي 5 Bootstrap الموجود حاليًا في حالة Beta عن استخدام مكتبة jQuery ويعتمد على استخدام أكواد جافا سكريبت العادية، أما الإصدار الحالي Bootstrap 4 فلا زال يعتمد على مكتبة jQuery لذا ستحتاج لتضمينها في مشروعك.

يمكنك العثور على أحدث إصدار من مكتبة jQuery من خلال ذلك التوجه إلى releases.jquery، ونسخ السطر البرمجي الآتي ولصقه قبل وسم الإغلاق <body\>. 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

كما يمكنك بدلًا من ذلك تنزيل ملفات jQuery من نفس الرابط ونقلها إلى مجلد المشروع، واستدعاؤها في في صفحتك من خلال الكود التالي: 

<script src="jquery-3.5.1.min.js"></script>

مرة أخرى تأكد من أن المسار متوافق مع موقع ملف المكتبة وإصدار jQuery الذي تستخدمه.

تحميل ملحقات مكتبة Bootstrap JavaScript

الخطوة الأخيرة في إعداد Bootstrap هي ملحقات مكتبة جافا سكربيت الخاصه ببوتستراب، وستجد هذا الملف مضمن في مجلد إطار العمل بوتستراب الذي قمت بتحميله محليًا وكتابة الكود التالي أسفل الصفحة بعد استدعاء jQuery مباشرة 

<script src="bootstrap/js/bootstrap.min.js"></script>

كما يمكنك العثور على روابط لتضمينه مباشرة في صفحتك دون الحاجة لتحميله في صفحة تحميل بوتستراب التي ذكرناها سابقًا واستدعاؤه من خلال كتابة الكود التالي: 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

اذا اتبعت الخطوات المذكورة في الأعلى بشكل صحيح، فيجب أن ينتهي بك الأمر بملف يشبه التالي (إذا كنت تتبع أسلوب تضمين بوتستراب من شبكة CDN المتصلة بالإنترنت): 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Tutorial Sample Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
</html>

أما إذا كنت تستدعيها محليًا على جهازك سيكون شكل الكود كالتالي: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Tutorial Sample Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">    
    </head>
    <body>    
        <script src="jquery-3.5.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>        
    </body>    
</html>

الآن انتهيت من إعداد بوتستراب وأنت جاهز الان جاهز للانتقال إلى الخطوة التالية.

الخطوة 2: تصميم صفحة الهبوط الخاصة بك

إذا فتحت صفحة موقعك الإلكتروني بالمتصفح ستجدها فارغة، وفي هذه الخطوة سننشئ صفحة هبوط تحتوى على عناصر مختلفة، حتى نجعلك ترى حالات مختلفة لاستخدام إطار العمل بوتستراب.

إضافة شريط التنقل

أول شيء نود القيام به هو أن نضيف شريط التنقل بأعلى الصفحة، وهذا يسمح للزوار بالتجول والتنقل في موقعك واكتشاف صفحاته الأخرى. لذلك سوف نستخدم الصنف navbar الذي يعد أحد العناصر الافتراضية في Bootstrap وينشئ شريط تنقل متجاوب مع مختلف أحجام الشاشات

سنكتب كود إضافته مباشرة بعد الوسم <body> على النحو التالي: 

<nav class="navbar navbar-expand-md">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

قد تكون الشيفرة أعلاه مليئة بأصناف css الجديدة عليك، لذا سنقدم لها شرحًا له موجزًا:

  •  navbar-expand-md: يشير إلى النقطة التي يتوسع فيها شريط التنقل وينتقل من أسلوب عرضه عموديًا إلى شريط أفقي يأخذ حجمًا كاملًا ، وفي حالتنا حددنا توسيعه في الشاشات المتوسطة التي يكون عرضها أكبر من 768 بكسل.
  •  navbar-brand: يستخدم لتضمين اسم الموقع أو صورة شعاره ضمن شريط التنقل.
  •  navbar-toggler: يشير لزر التبديل الذي يتحكم بظهور واختفاء القائمة القابلة للطي فالقيمة collapse=toggle-data تشير لأن شريط التنقل سيتحول إلى أيقونة وليس الى قائمة منسدلة، ومن المهم أن تحدد الهدف من خلال معرف id وتضع نفس الـ id في عنصر navbar الفعلي.
  •  navbar-toggler-icon: يؤدي إلى إنشاء الأيقونة التي يضغط عليه المستخدمون لفتح القائمة على شاشات أصغر وتمثل عادة على شكل أيقونة تحتوي ثلاثة خطوط أفقية متوازية (أيقونة الهمبرغر).
  •  navbar-nav: يحتوى على عناصر القائمة الموجودة في شريط التنقل، ويستخدم مع nav-item و nav-link لتنسيق وتنظيم العناصر داخل القائمة.

بهذا نكون قد انتهينا من إنشاء شريط تنقل في صفحة الهبوط وسيبدو على النحو التالي:

navbar.png

قد لا يبدو الشريط مثاليًا لكونه لا يحتوى على التنسيقات المرتبطة به، ويمكننا إضافة ألوان افتراضية على سبيل المثال يمكن إعطاء شريط التنقل أصناف مثل navbar-dark bg-dark لإضافة ألوان داكنة افتراضية أو كتابة تنسيقاتنا المخصصة وربطها بهذه الأصناف كما سنوضح في الفقرة التالية.

تضمين ملف CSS بتنسيقات خاصة

لحسن الحظ يمكنك تغيير التنسيق الافتراضي لأصناف بوتستراب لكن لا داعي لتعديل ملفات التنسيق يدويًا بل يمكنك إضافة ملفات CSS الخاصة بك واستخدامها للاستعاضة عن التنسيق الحالي.

كل ما عليك فعله هو إنشاء ملف فارغ باستخدام محرر الأكواد الخاص بك وتسميته main.css على سبيل المثال وربطه بصفحة الويب بكتابة الكود التالي في وسم الترويسة <head> 

<link rel="stylesheet" type="text/css" href="main.css">

يفترض الكود أعلاه أن الملف موجود في مجلد المشروع الرئيسي مباشرة، فإذا كنت تريد وضع الملف في مجلد فرعي، فعليك تضمين المسار الصحيح حتى يعمل.

الآن يمكنك إضافة التنسيقات الخاصة بك الى موقعك بكتابتها ضمن هذا الملف، على سبيل المثال لتصميم خلفية لصفحتك الخاصة بالإضافة إلى شريط التنقل ومكوناته، يمكنك كتابة كود تنسيق كالتالي: 

body {
 padding: 0;
 margin: 0;
 background: #f2f6e9;
}
.navbar {
 background:#6ab446;
}
.nav-link,
.navbar-brand {
 color: #fff;
 cursor: pointer;
}
.nav-link {
 margin-right: 1em !important;
}
.nav-link:hover {
 color: #000;
}
.navbar-collapse {
 justify-content: flex-end;
}

بعد تطبيق التنسيقات ستظهر النتيجة كما في الصورة التالية:

navbar style

إنشاء حاوية لمحتوى الصفحة

بعد شريط التنقل سننشئ حاوية لمحتوى الصفحة وهذا أمر سهل في بوتستراب فكل ما تحتاجه هو إضافة الشيفرة التالية أسفل الوسم navbar : 

<header class="page-header header container-fluid">
</header>

لا حظ أن الصنف container-fluid هو من أحد الأصناف الافتراضية في Bootstrap ويؤدي تطبيقه على عنصر div إلى تطبيق مجموعة من التنسيقات الخاصة عليه تلقائيًا والتأكد من أن الحاوية تتمدد عبر عرض الشاشة بالكامل، كما أنها مازالت حاوية ولديها عرض تابت خاص بها لذلك ستجد دائما مساحة على جانبي الشاشة بسبب حجمها الثابت.

ومع ذلك إذا قمت بإعادة تحميل الصفحة الآن، فلن ترى أي شيء في الحاوية لأنك قمت بإنشاء عنصر HTML فارغ. سنكمل إضافة العناصر في الخطوة التالية

إضافة صورة خلفية و شيفرة جافا سكريبت مخصصة

نريد الآن تضمين صورة خلفية بملء الشاشة في الصفحة، وسنستخدم بعض أكواد jQuery أو JavaScript لجعل الصورة تتمدد على كامل الشاشة.

يمكنك القيام بذلك كما قمت بتضمين ملف CSS مخصص في صفحتك، عن طريق إنشاء ملف نصي فارغ باسم main.js ووضعه داخل مجلد الموقع ثم استدعائه قبل الوسم <body/> مباشرة داخل الصفحة index.html 

<script src="main.js"></script>

وبعد ذلك أضف كود jQuery التالي لجعل عنصر ال <header> يمتد عبر الشاشة كلها: 

$(document).ready(function(){
    $('.header').height($(window).height());
})

كما ذكرنا سابقًا لن يأتي 5 Bootstrap مضمنًا مع مكتبة jQuery، لذا للقيام بهذه لخطوة في موقعك عند التعامل مع هذا الإصدار سيكون عليك كتابة أكواد JavaScript التالية: 

var ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
    document.querySelector(".header").style.height = window.innerHeight + "px";
})

بعد ذلك قم بتعيين مسار صورة الخلفية من داخل ملف main.css كما يلي: 

.header {
    background-image: url('images/header-background.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

إذا أضفت صورة ذات حجم مناسب وفى المسار الصحيح سوف تحصل على نتيجة مشابهة للتالي:

background

إضافة تراكب overlay

لجعل صورة الخلفية أكثر أناقة سنضيف تأثير التراكب (overlay) لذلك قم بإنشاء div آخر داخل الوسم <header> الذي قمت بإنشائه منذ قليل 

<div class="overlay"></div>

بعد ذلك يمكنك إضافة التنسيقات الخاصة به داخل ملف ال CSS كما يلي: 

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
}

هذا سوف سينشئ تراكب مميز للغاية للصورة التي قمت بوضعها:

overlay

إضافة عنوان الصفحة ومحتواها النصي

لنضف عنوان للصفحة وبعض النصوص الأساسية لصفحة الهبوط الخاصة بنا، لإنشاء ذلك كل ما عليك هو إضافة ذلك الكود داخل الحاوية التي قمت بإنشائها وكتابة الكود التالي: 

<div class="description">
    <h1> Welcome to the Landing Page!</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

وبعد ذلك أضف بعض التنسيقات في ملف main.css على النحو التالي: 

.description {
    left: 50%;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -55%);
    text-align: center;
}
.description h1 {
    color: #6ab446;
}
.description p {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;
}

الآن سوف تبدو صفحة الهبوط هكذا:

main text

إنشاء زر دعوة لاتخاذ إجراء CTA

لا تكتمل أي صفحة بدون عبارة تحث المستخدم على اتخاذ إجراء ، وغالبا تكون على شكل زر ، لحسن الحظ يوفر إطار العمل Bootstrap الكثير من الأدوات لانشاء الأزرار بسرعة وسهولة، يمكنك أن تجد الكثير من الامثلة الازرار، في حالتنا نحن سنقوم بإضافة ذلك الكود اسفل محتوى الصفحة تحت الحاوية <description> كالتالي: 

<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>

بالإضافة الى ذلك نقوم بإضافة بعض التنسيقات في ملف main.css: 

.description button {
    border:1px solid #6ab446;
    background:#6ab446;
    border-radius: 0;
    color:#fff;
}
.description button:hover {
    border:1px solid #fff;
    background:#fff;
    color:#000;
}

وبعد الحفظ وإعادة تحميل الصفحة سيكون شكلها كالتالي:

button

إنشاء قسم من ثلاثة أعمدة

لم ننتهي بعد من إنشاء الصفحة بالكامل، نريد الاّن إنشاء ثلاثة أعمدة أسفل المحتوى الرئيسي للحصول على معلومات إضافية من خلال إنشاء شبكة grid، إليك كيفية القيام بهذا الأمر: 

<div class="container features">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12">
            <h3 class="feature-title">Lorem ipsum</h3>
            <img src="images/column-1.jpg" class="img-fluid">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">
            <h3 class="feature-title">Lorem ipsum</h3>
            <img src="images/column-2.jpg" class="img-fluid">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">

        </div>
    </div>
</div>

أول شيء ستلاحظه هو عنصر الصنف row والذي ستحتاجه عند إنشاء أعمدة لتعمل كحاوية للشبكة، أما بالنسبة للأعمدة فجميعها بها عدة أصناف مثل col-md-4 و col-sm-12 و col-lg-4 تشير لأحجام مختلفة للأعمدة على الشاشات المختلفة. ففي النظام الشبكي لبوتستراب يصل عدد الأعمدة في الصف الواحد إلى
12 عمود، وبالتالي عند منحهم الأصناف السابقة فهذا يعني أنهم سيشغلون ثلث الشاشة على الشاشات الكبيرة والمتوسطة (4 من أصل 12 عمود)، ويشغلون الشاشة بأكملها على الأجهزة الصغيرة (12 من أصل 12 عمود).

ستلاحظ أيضا أننا قمنا بتضمين وتنسيق الصور باستخدام الصنف image-fluid لجعلها متجاوبة مع حجم الشاشة التي تعرض عليها ويمكنك إضافة التنسيق التالي في ملف التنسيقات المعتاد للمزيد من التنسيقات الخاصة: 

.features {
    margin: 4em auto;
    padding: 1em;
    position: relative;
}
.feature-title {
    color: #333;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.features img {
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

سيكون شكل صفحتنا الآن كالتالي:

grid columns

إذا كنت لا تريد تعيين ظل الصندوق يدويًا على عناصرك عبر CSS فيمكنك استخدام أصناف محددة مسبقًا في بوتستراب مثل
shadow-sm. و shadow. و shadow-lg.. ولللمزيد من المعلومات عن تلك الأصناف يمكنك مطالعة مكوِّن الظلال Shadows في إطار العمل Bootstrap.

إضافة نموذج الاتصال

ستلاحظ أن أحد الحقول الجديدة لا يزال فارغًا، و هذا عن قصد لأننا نريد إضافة نموذج اتصال إليه للسماح للزوار بالتواصل معنا، ولحسن الحظ فإن إنشاء نموذج اتصال في Bootstrap امر سهل للغاية، كل ما عليك هو كتابة الكود التالي: 

<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
    <input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
    <textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">

يستخدم الصنف from-group لتغليف حقول النموذج لتنسيقها ويشير الصنف from-control إلى حقول النموذج مثل الحقول النصية والأزرار وما إلى ذلك.

هناك الكثير الذي يمكنك القيام به باستخدام النماذج والتي يمكنك العثور عليها في هذا التوثيق الخاص بالنماذج، لكن ما ورد في الأعلى يكفي لصفحتنا الحالية، اكتبه داخل العمود الفارغ المتبقي، ثم أضف في ملف  main.css هذا التنسيق: 

.features .form-control,
.features input {
    border-radius: 0;
}
.features .btn {
    background-color: #589b37;
    border: 1px solid #589b37;
    color: #fff;
    margin-top: 20px;
}
.features .btn:hover {
    background-color: #333;
    border: 1px solid #333;
}

عندما تضيف التنسيقات المطلوبة سيكون لديك نموذج كالتالي:

form

قسم الفريق

سنضيف الآن قسم فريق العمل ونعرض فيه أعضاء الفريق ومناصبهم في الشركة، وسننسقه باستخدام البطاقات cards وهي عبارة عن حاويات مرنة في بوتستراب.

نريد أن نجعل لهذا القسم لونًا مختلفًا، لذا سننشئ عنصر <div> آخر كخلفية وبداخله حاوية أخرى بصنف مخصص لمزيد من التخصيص متبوعة بصف row كما يلي: 

<div class="background">
    <div class="container team">
        <div class="row">

        </div>
    </div>
</div>

كما تلاحظ يعد إنشاء البطاقات أمًرا سهلًا كل ما عليك هو إعطاء العنصر <div> الصنف card ويمكنك أيضًا استخدام أصناف grid لتحديد حجمها وتحديد عدد البطاقات التي تظهر في الصف الواحد. بالإضافة إلى ذلك نظرًا لأننا نريد أن يتم توسيط كل المحتوى الموجود في البطاقة سنضيف إليها أيضًا الصنف text-center على النحو التالي: 

<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
</div>

يمكن أن تحتوي البطاقات على عناصر مختلفة. وفي حالتنا نريد صورة في الأعلى، متبوعة باسم الشخص كعنوان للبطاقة ووصف يوضح طبيعة عمله وقد لا تتفاجأ إذا علمت أن Bootstrap يقدم اصنافًا مخصصة لكل ذلك.

أما بالنسبة للصور ضمن البطاقات فسنستخدم الصنف card-img-top لوضع صورة على سطح البطاقة، وسنعطيه أيضا صنف rounded-circle لجعل هذه الصورة مستديرة. بعد ذلك ننشئ عنصر جديد card-body يحتوي على عنوان وفقرة مع الصنفين card-title و card-text على التوالي. 

<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
    <img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
    <div class="card-body">
        <h4 class="card-title">Jane Doe</h4>
        <p class="card-text">Job Description</p>
    </div>
</div>

عندما نضع الكود أعلاه داخل عنصر الصف row، ونكرره ثمانية مرات، ونضع ملفات الصور في المواقع المعنية، سنحصل على هذه النتيجة:

card.png

ولجعلها تبدو هكذا أضفنا التنسيقات التالية في ملف CSS: 

.background {
    background: #dedec8;
    padding: 4em 0;
}
.team {
    color: #5e5e55;
    padding: 0 180px;
}
.team .card-columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.team .card {
    background:none;
    border: none;
}
.team .card-title {
    font-size: 1.3rem;
    margin-bottom: 0;
    text-transform: uppercase;
}

إنشاء تذييل الصفحة

آخر شيء نريد إضافته إلى صفحتنا هو قسم التذييل footer وسنجعله مكون من عمودين من خلال كتابة الكود التالي: 

<footer class="page-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12">
                <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12">
            <h6 class="text-uppercase font-weight-bold">Contact</h6>
            <p>1640 Riverside Drive, Hill Valley, California
            <br/>info@mywebsite.com
            <br/>+ 01 234 567 88
            <br/>+ 01 234 567 89</p>
        </div>
    <div>
    <div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>

يسلط هذا القسم الضوء على بعض الاحتمالات لتعديل طبيعة بوتستراب من خلال استخدام الأصناف التالية:

  • text-uppercase: لجعل كافة أحرف النص كبيرة.
  • font-weight-bold: لجعل النص أكثر سمكًا ووضوحًا.
  • text-center: لمحاذاة النص في وسط العنصر الذي يوجد ضمنه.

كما يمكنك مطالعة مزيد من المعلومات عن تنسيق النصوص من خلال توثيق أدوات النصوص في إطار العمل Bootstrap

وهنا يمكنك استخدام تنسيقات أيضًا كالتالي: 

.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}
.footer-copyright {
    color: #666;
    padding: 40px 0;
}

ستكون نتيجة التذييل كما يلي:

footer

إضافة استعلامات الوسائط Media Queries

الصفحة جاهزة الآن بشكل أساسي. كما أنها تستجيب بشكل كامل. ومع ذلك، لا تظهر بعض الأقسام بشكل صحيح في عرض الجوال للمتصفح، على سبيل المثال هذا ما تبدو عليه صورة العنوان على أجهزة الجوال:

problem

يمكن تصحيح ذلك الخطأ بسهولة باستخدام استعلام وسائط بسيط، ما عليك سوى أن تضع في اعتبارك النقاط المحددة breakpoints في بوتستراب.

tلتصحيح المشكلة يمكنك ببساطة كتابة بعض من الأسطر البرمجية كالتالي: 

@media (max-width: 575.98px) {
    .description {
        left: 0;
        padding: 0 15px;
        position: absolute;
        top: 10%;
        transform: none;
        text-align: center;
    }
    .description h1 {
        font-size: 2em;
    }

    .description p {
        font-size: 1.2rem;
    }

    .features {
        margin: 0;
    }
}

بعد ذلك سيكون كل شئ على مايرام كما في الصورة التالية:

media queries

.

إنشاء صفحات إضافية

حتى الآن قمنا فقط بإنشاء صفحة واحدة فقط لموقع بوتستراب الخاص بنا. وكما تتذكر فقد أضفنا لصفحتنا قائمة تنقل تتضمن روابط لكن لا تؤدي هذه الروابط حاليًا إلى أي مكان عند النقر عليها.

لإضافة صفحات إضافية إلى موقع Bootstrap الخاص بكقم ببساطة بإنشاء نسخة من index.html وإعطائها اسمًا مختلفًا، مثلًا about.html. واستخدام أجزاء الصفحة التي تظل كما هي مثل قائمة التنقل وحذف أو تعديل ما تريد تغييره فقط.

على سبيل المثال ، هذا هو الشكل الذي قد تبدو عليه صفحة "About":

about

عندما يكون لديك الملف الثاني، كل ما عليك فعله هو التأكد من أن الرابط في قائمة التنقل يشير بالفعل إلى الملف كما يلي: 

<a class="nav-link" href="about.html">About</a>

ملاحظة: يجب أن يكون about.html في نفس مسار الملف index.html ليعمل الكود، أما إذا كان في مجلد فرعي يسمى html مثلًا فعليك ربطه على هذا النحو: 

<a class="nav-link" href="html/about.html">About</a>

هذا كل شي، لديك الآن صفحة ثانية على موقع Bootstrap الخاص بك ويمكن الوصول إليها من قائمة التنقل، فقط تأكد من أنه كلما قمت بتغيير روابط التنقل أو أضفت المزيد من الصفحات إلى موقعك فعليك دائمًا تحديث الروابط في جميع الملفات الأخرى أيضًا

سنقوم ختامًا بإنشاء نموذج لموقع الاختبار الخاص بنا. هذا ليس ضروريًا ولكنه فرصة للتعرف على المزيد من إمكانيات Bootstrap. وفي حال لم تكن معتادًا على مصطلح modalفهو يعني عنصرًا مثل النافذة المنبثقة التي تظهر أعلى موقع الويب ويمكنك استخدامه لمختلف الأغراض. في حالتنا، نريد إنشاء طلب للاشتراك في رسالة إخبارية.

modal

يقدم Bootstrap شيفرات خاصة به للرسائل المنبثقة لكن قبل إنشاء نافذة الرسالة المنبثقة، نريد أولا إنشاء المشغل لجعلها تظهر على الصفحة. وإلا فلن نرى ما نفعله

للقيام بذلك ما عليك سوى إضافة كود JavaScript التالي إلى ملف main.js الخاص بك: 

setTimeout(function() {
    $('#demo-modal').modal();
}, 500);

يؤدي هذا إلى تشغيل الرسالة المنبثقة لتظهر بعد وقت محدد وهو 500 مللي ثانية، انتبه بأن الشيفرة السابقة هي دالة jQuery خاصة بإصدار 4 Bootstrap ولكن في 5 Bootstrap سيكون الأمر مختلف كما ناقشنا ذلك من قبل.

لنبدآ في العمل الفعلي على إنشاء الرسالة المنبثقة. يبدأ كل شيء بثلاثة عناصر متداخلة تحتوي على modal و modal-dialog و modal-content 

<div id="demo-modal" class="modal fade">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
        </div>
    </div>
</div>

تنشئ الشيفرة السابقة نافذة الرسالة المنبثقة أعلى صفحتك وإعداد تلك النافذة حتى تملأها بالمحتوى:

modal set

قمنا أيضًا بإعطاء عنصر الرسالة المنبثقة model معرف demo-modal# لتسهيل استهدافه داخل CSS وكي يعمل مع مشغل JavaScript، يتأكد الصنف fade من أن ظهوره النافذو واختفائها يكون بالتدريج وليس بطريقة مفاجئة، ويحدد العنصر modal-igl حجم النافذة، في حين يضعها العنصر modal-dialog-centered في الوسط بشكل عمودي على الشاشة.

قد تتساءل أين تضع هذه الشيفرة؟ هذا سؤال جيد. توضع الشيفرة السابقة مباشرة قبل وسم الإغلاق <body/> وأسفل استدعاءات jQuery وأي ملفات جافا سكريبت

modal location

أخيرًا نريد إنشاء ترويسة للرسالة المنبثقة تحوي صورةً بالداخل وكذلك زر لإغلاق النافذة المنبثقة. يمكنك القيام بذلك عن طريق وضع الشيفرة التالية داخل الصنف modal-content 

<div class="modal-header">
    <img class="rounded-circle mx-auto" src="images/email-icon.png" alt="modal image">
    <button type="button" class="close" data-dismiss="modal" aria-label="close">
        <span>x</span>
    </button>
</div>

لاحظ الصنف mx-auto للصورة. إنه صنف بوتستراب يساعد على توسيط جميع أنواع العناصر. للمزيد عن horizontal-centering. بالنسبة لزر الإغلاق ، تحتاج إلى إضافة الصنف التالي له "data-dismiss="modal بحيث يتم إغلاق النافذة المنبثقة بالفعل.

هذا ما لدينا حتى الآن:

modal appear

الآن ننتقل إلى نص النافذه المنبثقة، والذي سنضعه أسفل modal-header والذي سيتضمن عنوانًا ونصًا ونموذجًا لتضمين عنوان بريدك الإلكتروني. إليك الكود: 

<div class="modal-body text-center">
    <h4>Subscribe to our newsletter</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu.</p>
    <div class="input-group">
        <input type="email" class="form-control" placeholder="Enter your email address" name="email">
        <div class="input-group-append">
            <input type="submit" class="btn" value="Subscribe">
        </div>
    </div>
</div>

لاحظ أن الصنف input-gruop يسمح لك بوضع مدخلات مثل حقول النموذج والأزرار بجانب بعضها البعض، كما يضع الصنف input-group-append الزر بعد حقل النموذج، أما الصنف input-group-prepend فهو يمكنك من وضع أي شيء في المقدمة.

modal text

بقي لدينا التنسيقات، اكتب الكود الآتي في ملف main.css لتحقق المظهر الظاهر بالصورة السابقة: 

#demo-modal .modal-content {
    border-radius: 0;
    padding: 2rem;
}
#demo-modal .modal-header {
    border-bottom: none;
}
#demo-modal h4 {
    color: #000;
    font-size: 30px;
    margin: 0 0 25px;
    font-weight: bold;
    text-transform: capitalize;
}
#demo-modal .close {
    background: #c0c3c8;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    font-weight: normal;
    height: 30px;
    opacity: 0.5;
    padding: 0;
    position: absolute;
    right: 26px;
    text-align: center;
    top: 26px;
    width: 30px;
}
#demo-modal .close span {
    position: relative;
    top: -3px;
}
#demo-modal .modal-body p {
    color: #999;
}
#demo-modal .form-control,
#demo-modal .btn {
    min-height: 46px;
}
#demo-modal .btn {
    background-color: #1da098;
    border: none;
    color: #fff;
    min-width: 150px;
    transition: all 0.4s;
}
#demo-modal .btn:hover,
#demo-modal .btn:focus {
    background-color: #12968d;
}

تحميل موقع الويب الخاص بك إلى مضيف الويب

حصلت الآن على موقع ويب مكتمل ومتجاوب مع كل الشاشات أيضًا. لكن لا أحد يستطيع رؤيته. ولتحميله على الويب وإتاحته للجميع تحتاج إلى استضافة ويب واسم للنطاق domain ليتمكن الأشخاص من إدخال عنوان موقع الويب الخاص بك في متصفحهم ثم الوصول إلى موقع بوتستراب الإلكتروني الجديد على الإنترنت. من أجل السماح لهم بالقيام بذلك، تحتاج إلى تحميل الموقع على الخادم الخاص بك باستخدام عميل لـ FTP مثل FileZilla. احصل على عنوان مضيف FTP الخاص بك واسم المستخدم وكلمة المرور من مزود الاستضافة للاتصال بخادمك عن بُعد. بعدها ستكون قادرًا على رؤية الملفات والمسارات موجودة هناك.

host

انتقل إلى المسار الذي يشير نطاقك إليه (عادةً المسار الأول). بعدها ما عليك سوى العثور على المجلد الذي يحتوي على ملفات Bootstrap على القرص الصلب، ووضع علامة على جميع الملفات الموجودة بداخله ثم سحبها إلى الخادم لبدء التحميل. ستستغرق العملية بعض الوقت حتى تنتهي بناء على سرعة الاتصال لديك بالإضافة إلى عدد وحجم ملفاتك.

بمجرد الانتهاء حاول الوصول إلى نطاقك وستتمكن من رؤية الموقع النهائي في نافذة المتصفح

fullpage

ومن هنا يمكنك تحميل كامل كود المقال websitesetup-bootstrap-tutorial.zip

الخلاصة

تعرفنا في مقال اليوم على إطار عمل بوتستراب Bootstrap وهو إطار مجاني مفتوح المصدر لتطوير واجهة المستخدم. يتيح لك وضع نماذج أولية للتصاميم بسرعة وإنشاء صفحات ويب والبدء في العمل بشكل عام.

أنت تعرف الآن كيفية إعداد وتثبيت Bootstrap ومكوناته وإنشاء صفحة هبوط بسيطة، وتضمين بعض المحتوى الأساسي فيها، وتنسيقها، ويمكنك إنشاء أي مواقع مميزة بالاعتماد عليه وإذا كانت لديك أي أفكار أو أسئلة حول ما ورد في المقال يمكنك تركه في قسم التعليقات في الأسفل.

ترجمة وبتصرف للمقال How to Setup and Use Bootstrap Step-by-Step للكاتب Nick Schäferhoff

اقرأ أيضًا

]]>2256Sat, 24 Feb 2024 12:08:02 +0000مقارنة Bootstrap و Tailwindhttps://academy.hsoub.com/programming/css/bootstrap/%D9%85%D9%82%D8%A7%D8%B1%D9%86%D8%A9-bootstrap-%D9%88-tailwind-r2060/

سنتحدث في هذا الفيديو عن الفرق بين بوتستراب Bootstrap و تيل ويند Tailwind. عندما نبدأ عملية التطوير في الموقع الذي نعمل عليه، سنحتاج إلى توفير الوقت عبر استخدام بعض المكتبات والأدوات الجاهزة وأطر العمل، ومن أشهر أطر العمل التي نستطيع استخدامها في الفرونت إند أو الواجهات الأمامية هي بوتستراب أو تيل ويند، وهنا سنستعرض الفرق بينهما وأيهما أفضل لاستخدامها؟

تعلم الآن كيفية تطوير واجهات المستخدم ، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك بتوثيقات موسوعة حسوب المجانية. وإذا أردت متابعة المعلومات البرمجية العلمية مكتوبة فيمكنك الاطلاع على قسم البرمجة في أكاديمية حسوب، كما يمكنك متابعة جديد الفيديوهات التقنية المتاحة على يوتيوب أكاديمية حسوب مجانًا.

]]>2060Sun, 12 Feb 2023 15:00:00 +0000مقارنة بين Bootstrap و Tailwind CSShttps://academy.hsoub.com/programming/css/bootstrap/%D9%85%D9%82%D8%A7%D8%B1%D9%86%D8%A9-%D8%A8%D9%8A%D9%86-bootstrap-%D9%88-tailwind-css-r1595/

مع سرعة تطور الإنترنت والويب وزيادة اعتماد الشركات على الويب تجلت أهمية التصميم المرن والتخطيط سريع الاستجابة والأنماط التفاعلية مع المستخدم والتخطيط الشبكي لصفحات الويب والكثير من الأمور الأخرى، وبدأت تظهر جدلات آنذاك بين أهمية التصميم أم المحتوى؟ ولكن لا يمكننا النظر إلى هذين العنصرين على أنهما متنافسين بقدر ما هما متكاملين لأنه في الحقيقة ومع أن المحتوى هو العمود الفقري لأي موقع إنترنت إلا أن التصميم ما هو إلا أداة إيصال هذا المحتوى للمستخدم لذلك أهميته توازي أهمية المحتوى لأن واجهة الموقع ذات التصميم السهل تخلق انطباعًا أوليًا رائعًا في أذهان المستخدمين، وهذا هو سبب زيادة تركيز مطوري الويب على تطوير واستخدام أدوات تساعدهم في الوصول تصاميم رائعة بأقل مجهود ووقت ممكن.

لذلك بدأت تظهر في السنوات القليلة الماضية أدوات ومكتبات وأطر عمل تسرع من عملية تطوير وواجهات المستخدم ويُعرفُ إطار العمل Framework في البرمجة على أنه أداة توفر مكونات أو حلول جاهزة لتخصيصها من أجل أي مشروع بهدف تسريع عملية التطوير، ويمكن أن يشتمل الإطار على مكتبة أو مكتبات مساعدة، كما يوفر إطار العمل الدوال القياسية منخفضة المستوى لتمكن المطورين من التركيز على صلب المشروع وعدم إضاعة وقتهم في الأمور المتكررة.

من بين التي الأطر التي ذاع صيتها نذكر Bootstrap و Skeleton و Bulma و Tailwind CSS و Materialize. تتعددُ أهداف هذه الأدوات والأطر المخصصة للواجهات الأمامية فمنها ما تركز على بناء مكتبة مكونات كبيرة جاهزة للاستخدام في المشاريع، ومنها ما تركز على إتاحة الأساسيات لتمكن المطورين تخصيص مواقعهم، هذا التنوع جعل كل مطور يتجه إلى الإطار الذي يناسب متطلباته، ولكن من بين الأطر الذي ذاع صيتها في الآونة الأخيرة Bootstrap و Tailwind CSS سنحاول في هذا المقال تسليط الضوء على هذين الإطارين وسنطلع على سر قوة وشعبية Bootstrap والاهتمام السريع والمتزايد لإطار Tailwind CSS ولنستكشفُ بعدها أيهما أفضل Tailwind CSS أم Bootstrap.

نسعى لتجنب التحيز بين هذين الإطارين ولكن بالتأكيد هناك بعض المشاريع يتناسب معها إطار معين أكثر من الآخر وهذا أمر طبيعي، كما نفترض في هذا المقال بأن لديك معرفة أساسية بتقنيات تطوير الويب وكيفية عمل المواقع.

نبذة موجزة عن Bootstrap و Tailwind CSS

في ظل التطور السريع لتقنيات الويب يجب على المطورين دومًا تحليل أي تقنية جديدة من خلال الاطلاع على إيجابياتها وسلبياتها قبل اعتمادها في عملهم ومشاريعهم الجديدة، منذ ظهور إطار العمل Bootstrap عام 2011 أصبح عنصرًا أساسيًا من عناصر تطوير الويب، ولكن في الآونة الأخيرة ظهر إطار عمل جديد وسرعان ما حظي باهتمام كبير في مجتمع المطورين وهذا الإطار هو Tailwind CSS. لنفهم ماهية كل من هذين الإطارين بالتفصيل.

ما هو Bootstrap؟

بحسب تعريف الموقع الرسمي لإطار Bootstrap هو إطار عمل للواجهات الأمامية لمواقع الويب مجاني ومفتوح المصدر، طوّر هذا الإطار اثنان من المبرمجين وهما مارك أوتو Mark Otto وجاكوب ثورتون Jacob Thorton في مسابقة داخلية في شركة تويتر Twitter في أغسطس 2011، وهو يتكون من شيفرات برمجية بلغة HTML و CSS وجافاسكربت، وصمم خصيصًا لتسهيل عملية تطوير الويب لمواقع الويب المتجاوبة والتي تعتمد على التصميم للهواتف المحمولة أولًا Mobile First Design من خلال توفير مجموعة من المكونات تعمل على جميع أحجام الشاشات، بل إن هذا الإطار قائمًا على المكونات إذ يأتي مع مجموعة من المكونات الجاهزة للاستخدام وذلك لتسريع تصميم موقع الويب، كما أن الشيفرة البرمجية الخاصة بملفات التنسيق CSS موجه للكائنات، وهو يعمل مع معظم المتصفحات من بينها متصفح غوغل كروم Chrome وإنترنت إكسبلور Internet Explorer …إلخ.

يعد إطار العمل Bootstrap سهل التعلم لأي شخص مبتدئ بلغة CSS، كما تتوافر الكثير من الدورات التعليمية عبر الإنترنت لمساعدتك على البدء. ولا تتطلب مكوناته سوى معرفة أساسية بلغة HTML و CSS و جافاسكربت لتعديلها. يأتي إطار العمل Bootstrap بنظام شبكة محدد مسبقًا يتكون من صفوف وأعمدة، مما يتيح للمطور إنشاء شبكة داخل شبكة بالإضافة إلى ذلك، يجعل نظام الشبكة واجهات الموقع أكثر وضوحًا للمستخدمين والمطورين. ومكونات هذا الإطار متوافقة مع أحدث إصدارات المتصفحات الشائعة. كما يمكنك أيضًا استخدام مكوناته في تصميمات أنظمة إدارة المحتوى الشائعة مثل ووردبريس WordPress وجوملا غيرها.

ما هو Tailwind CSS؟

هو إطار عمل CSS أول من نوعه يقدم أدوات مساعدة بالدرجة الأولى Utility-First أكثر مما يقدم مكونات جاهزة إذ يتيح لك إنشاء واجهات مستخدم مخصصة مع الحد الأدنى من الشيفرة البرمجية لملفات تنسيق CSS. كما يمنحك تحكمًا كاملًا في واجهة واجهة المستخدم الخاصة بك من خلال الأصناف Classes الموجودة فيه.

يساعد إطار عمل Tailwind CSS في السيطرة على التصميم ويجعله فريدًا لأن الإطار لا يفرض سمة افتراضية يجب عليك استخدامها مثل أطر CSS الأخرى. فمثلًا يمكنك إعطاء كل مشروع مظهرًا مختلفًا حتى إذا كنت تستخدم نفس العناصر (لوحة الألوان والحجم وما إلى ذلك). لذلك فهو من أطر العمل القليلة التي لا تفرض طريقة معينة لتصميم مشروعك. بل إنه من أسرع الأطر عندما يتعلق الأمر بدمج التصاميم مع ملفات HTML.

بناءً على ما سبق، يمكنك بسهولة إنشاء تخطيطات لعناصر الواجهات الأمامية من خلال آلاف الأصناف المضمنة التي لا تتطلب منك سوى استدعائها في التنسيق للعنصر. لذلك لا يتعين عليك كتابة قواعد التنسيق CSS بنفسك. تعد أصناف CSS هذه هي السبب الرئيسي وراء سرعة البناء والتصميم باستخدام Tailwind، بالإضافة إلى ذلك يمكن إزالة جميع أصناف CSS غير المستخدمة عبر أداة PurgeCSS والتي تساعدك على إبقاء الشيفرة البرمجية لملفات التنسيق CSS النهائية صغيرة الحجم.

مقارنة بين Tailwind CSS vs Bootstrap

لندخل أكثر في التفاصيل ولنطلع على أهم الفروقات بين هذين الإطارين.

المجتمع والتطوير

لننظر أولًا في المجتمع لتقييم تطوير هذه الأطر، عندما نرى أن الإطار حصل على الكثير من التحديثات فهذا أمر إيجابي ويشير إلى أن تطوير هذه الأطر مستمر على قدم وساق. دعونا نلقي نظرة على مجتمعات Tailwind CSS vs Bootstrap فيما يتعلق بالإحصاءات الموجودة في مستودعات GitHub الخاصة بها ونؤكد أن هذه الأرقام حتى تاريخ كتابة المقال.

وجه المقارنة إطار العمل Bootstrap إطار العمل Tailwind CSS
الموقع الرسمي Bootstrap Tailwindcss
تاريخ أول إصدار 2011 2017
رقم الاصدار v4.6.1 v3.0.18
عدد المراقبين 7 آلاف شخص 567 شخص
عدد النجوم 155 ألف نجمة 53.3 ألف نجمة
عدد التفريعات 76.1 ألف مستودع مشتق 2.6 ألف تفريعة
عدد المساهمين 1274 مساهم 214 مساهم

يلعبُ قِدم إطار Bootstrap والذي يصل عُمره لأكثر من 12 سنة دورًا مهمًا في شعبيته ومن الطبيعي أن نجد له مجتمعًا كبيرًا من المطورين والأدوات والمنتديات وما إلى ذلك. أما إطار Tailwind CSS فلا يزال جديدًا وينمو بسرعة كبيرة ويتزايد مستخدميه ومطوريه يوميًا، ولنتذكر دومًا بأن المجتمع الأكبر للمطورين يمكن أن يساعدك في الحصول على المساعدة بصورة أسرع عند مواجهة أية مشكلة في التنفيذ.

المكونات الجاهزة وقابلية التخصيص

يوجد العديد من المكونات الجاهزة للاستخدام في إطار Bootstrap إذ يوجد أكثر من 40 عنصرًا جاهزًا مثل الشريط الرأسي للموقع Headerbar وعناصر التنقل Navigation وتذييل الموقع Footer والاستمارات Forms والنوافذ الشرطية Modals والعديد من مكونات واجهة المستخدم الأخرى. يتميز Bootstrap إطار بأسلوب مرئي متسق وتحتوي غالبية مواقع الويب التي تستخدم هذا الإطار على نفس عناصر التنقل والهيكل والتصميم، مما يجعلها تبدو غير احترافية. ولكن الأمر المفيد هو أنه إذا كنت مبتدئًا ولا تعرف الكثير عن لغة CSS فمن السهل جدًا استخدام الإطار وإنشاء قالب موقع ويب جيد.

بالمقابل لا نجد ذلك مع إطار Tailwind CSS فلا يوجد مكونات جاهزة سواء من الإطار بحد ذاته ولكن يوجد القليل من المكونات المقدمة من المجتمع، وفي الحقيقة يجد المطورون بأن أفضل ميزة في Tailwind CSS هو أنه يقدم أدوات مساعدة بدلًا من مكونات جاهزة، ولذلك فأنه تتيح قابلية التخصيص بدرجة كبيرة أي أنه يمكنك إنشاء تصاميم وواجهات مستخدم مخصصة بطريقة ممتازة باستخدام الأصناف Classes التي يوفرها إطار العمل وبدرجة مقبولة من المجهود في كتابة الشيفرة البرمجية. يمكنك بسهولة الاستفادة من تصميم كل مكون على حدة بالطريقة التي تتطلبها واجهة المستخدم الخاصة بك.

بنية الشيفرة البرمجية

يعمل إطار Tailwind بطريقة مختلفة عن معظم أطر عمل CSS إذ يمزج بين قواعد الأنماط مع ملفات HTML الخاصة بك أي أن الشيفرة البرمجية الخاصة بالتنسيق باستخدام الأصناف ستكون موجودة بالكامل مع شيفرة HTML، وهذا يتعارض مع مبدأ "فصل الاهتمامات" Separation Of Concerns أو اختصارًا SoC، الذي هو أحد المفاهيم الرئيسية في علوم الحاسوب وهو تحديدًا من مبادئ تصميم الشيفرة البرمجية والتي تنص على فصل الشيفرات البرمجية لبرامج الحاسوب إلى أقسام متميزة وكل قسم يعالج مشكلة منفصلة.

يفضل العديد من المطورين فصل بنية الصفحة عن تصميمها من خلال ملفات التنسيق، ولكن استخدام الكثير من الأصناف تجعل عملية كتابة الشيفرة البرمجية طويلة.

أما في إطار العمل Bootstrap فنجد أن قواعد التنسيق مفصولة عن الهيكل الأساسي للصفحة وبالرغم من أن هنالك بعض المبرمجين يخطئون ويدمجون قواعد التنسيق داخل ملفات HTML إلا أن الإطار بحد ذاته لا يشجع على هذه الممارسات.

بالإضافة إلى ذلك هنالك الفرق بين مبادئ التصميم في Bootstrap و Tailwind CSS فإطار العمل Bootstrap يستخدم منهجية Object Oriented CSS أو اختصارًا OOCSS لأنه يستخدم كائنات مثل عناصر التنقل والاستمارات …إلخ، وطرقًا لتفاعل المستخدم مع تطبيقات ومواقع الويب. بينما يوفر Tailwind CSS مجموعة أصناف يمكنك إضافتها أو إزالتها أو تحريرها في ملف الإعداد Tailwind.config.js الخاص بالإطار حتى تتمكن من تخصيص التصميم الخاص بك، كما يوجد أصناف لجميع أنواع الهوامش والحشو والخلفيات وأحجام الخطوط ومجموعات الخطوط والموضع ومن بعض الأمثلة عن هذه الأصناف نذكر flex و pt-4 و text-center و rotate-90 وغيرها، وإليك هذا المثال لفهم هذه الاختلافات. 

<!DOCTYPE html>
<html>

<head>
    <!-- Tailwind CSS -->
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
    <title>Tailwind CSS</title>
</head>

<body style="background-color: gray;">

    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
        <div class="border-r border-b border-l
            border-gray-400 lg:border-l-0
            lg:border-t lg:border-gray-400 bg-white
            \rounded-b lg:rounded-b-none lg:rounded-r
            p-4 leading-normal">
            <p class="text-gray-700 text-base">
                This Card is made using Tailwind CSS.
            </p>
        </div>
    </div>
</body>

</html>

بينما لاحظ كيف ستكون نفس الصفحة ولكن بإطار عمل Bootstrap: 

<!DOCTYPE html>
<html>

<head>
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <title>BOOTSTRAP</title>
</head>

<body style="background-color: gray;">
    <div class="card">
        <div class="card-body">
            This Card is made using BOOTSTRAP.
        </div>
    </div>
</body>

</html>

في الحقيقة هذه النقطة من أكثر النقاط إثارة للجدل على مستودع إطار العمل في موقع Github ولكن مع ذلك نشهد زيادة كبيرة في الإقبال على هذا الإطار الأمر الذي يدل على وجود محبين لهذه الطريقة من الشيفرات البرمجية.

دعم المتصفحات

قد لا يلتفت الكثير إلى هذه النقطة ولكن قد يضطر المبرمج في مرحلة أو مشروع ما إلى النظر لأمر دعم المتصفحات، فيدعم إطار العمل Bootstrap أحدث الإصدارات لغالبية المتصفحات المدمجة في الأنظمة الأساسية مثل نظام التشغيل ويندوز ومتصفح إنترنت إكسبلورر Internet Explorer 10-11 (يذكر أن هذا المتصفح سينتهي دعمه في 22 حزيران عام 2022) أو مايكروسوفت إيدج Microsoft Edge، وإذا كنت بحاجة لدعم النسخ القديمة من المتصفحات مثل مايكروسوفت إكسبلورر IE8-9، فننصحك باستخدام الإصدار Bootstrap 3.

بالنسبة لإطار العمل Tailwind CSS فهو يدعم أيضًا أحدث الإصدارات من المتصفحات مثل كروم Chrome وفيرفوكس Firefox ومايكروسوفت إيدج وسفاري Safari. ولكن لا يدعم Tailwind CSS v3.0 أي إصدار من متصفح إنترنت إكسبلورر IE وإذا أردت دعم المتصفح IE 11 فنوصي باستخدام Tailwind CSS v1.9، والذي لا يزال خيارًا جيدًا ومنتجًا للغاية بالمقارنة مع الطرق القديمة لكتابة الشيفرات الخاصة لملفات التنسيق CSS.

السرعة والأداء

في إطار العمل Bootstrap يوجد عدد هائل من المكونات والوظائف وهذا يعني تضمين ملفات كبيرة الحجم إلى تبعيات المشروع. يمكن أن يؤدي استخدام الإطار في مشروعك إلى إبطائه وزيادة وقت تحميل الموقع وبالطبع إثقال كاهل الخادم أيضًا. لتجنب هذه المشكلة تأكد من إضافة الأصناف التي تحتاجها فقط واستخدم الإصدار المصغر أو المضغوط gzip من الملفات الإطار.

بالمقابل بما أن إطار Tailwind CSS ليس به أي مكونات مُعدة مسبقًا الأمر الذي ينعكس على صغر حجم الملفات والتبعيات الخاصة به، وعمومًا إذا لم تكن بحاجة إلى مجموعة كبيرة من المكونات والوظائف التي توفرها Bootstrap فإن إطار Tailwind هي الخيار الأفضل للمشاريع البسيطة وخفيفة الوزن.

سهولة التعلم للمبتدئين

يعد إطار العمل Bootstrap سهل الاستخدام لديه منحنى تعليمي بسيط في البداية ويمكن أن يستغرق الأمر بعض الوقت لتعلم كافة الأصناف والمكونات المتاحة كما أنه يوجد العديد من الدورات والمقالات الفيديوهات المتاحة عن هذا الإطار الأمر الذي يجعل رحلة التعلم سهلة نسبيًا.

يتطلب إطار Tailwind CSS وقتًا أطول للتعلم، وحتى بالنسبة للمطورين ذوي الخبرة، يمكن أن يكون من الصعب تعلم كيفية استخدام الأصناف المُعدة مسبقًا والاستفادة منها بالطريقة المثلى، ولكن كما هو الحال مع أي تقنية جديدة فإن الممارسة وكثرة الاستخدام ستُمكننا من الاستفادة من كافة المميزات، بالإضافة إلى ذلك يفتقر إطار Tailwind CSS للمقالات والدروس والفيديوهات التعليمية وبالرغم من أنها قطعت شوطًا كبيرًا كتقنية ناشئة إلا أنها لا تزال متخلفة عن المنافسين مثل Bootstrap، بعبارة أخرى ضع في اعتبارك أن هذا سيؤدي لاستهلاك وقت إضافي لحل المشاكل.

بيئات العمل ودعم اللغات في محرر الشيفرات

يزيد عمر إطار العمل Bootstrap عن 12 سنة لذلك نجد بأن معظم محررات الشيفرات البرمجية مثل Sublime و Visual Studio Code و JetBrains تدعمه، وبالمقابل لا نجد هذا الدعم ضمني بالنسبة لإطار Tailwind CSS ولكن يمكن للمحررات المشهورة أن تدعمه من خلال تنزيل إضافة Tailwind CSS IntelliSense لمحرر Visual Studio Code والتي تقدم ميزات متقدمة مثل الإكمال التلقائي وتمييز بعض الجمل والفحص والتحقق من الكتابة الصحيحة في الحقيقة العديد من المحررات الأخرى لديها إضافات أو حلول شبيهة لدعم هذا الإطار.

أيهما أفضل Tailwind CSS vs Bootstrap؟

المشكلة الأساسية في إطار العمل Bootstrap هي أن المواقع التي تستخدمه تبدو متشابهة إلى حد ما، وذلك لأن إطار العمل Bootstrap جرّد إنشاء المكونات لدرجة أنه أجبر المطورين على استخدام الأنماط المتوفرة فقط. الشيء نفسه ينطبق على أطر عمل أخرى من نفس المجموعة، ويمكن أن يجادل البعض بأنه يمكن تجاوز الإطار بتخصيص ملفات قواعد التنسيق CSS الخاصة بنا، ولكن مهلًا إذا تجاوزنا إطار العمل كثيرًا، فعندها نعود إلى نقطة مهمة وهي هل هناك فعلًا فائدة من استخدام هذا الإطار؟ لأننا فعليًا سننشئ تنسيقات خاصة بنا ولذلك سيكون إطار العمل مجرد تبعيات إضافية للموقع. أليس كذلك؟!

بالمقابل لا يعيق إطار العمل Tailwind CSS قدرتنا على الإبداع في بناء واجهات مستخدم معقدة وإنما يتيح ذلك بسهولة دون فرض تصميم معين على جميع المواقع. كما أن استخدام مجموعة من أصناف الأدوات المساعدة التي تتيح لك العمل مع ما تحتاج إليه بالضبط، وعدم القلق أبدًا بشأن التغييرات التي تطرأ على عنصر معين لأنه التغييرات ستبقى على ذلك العنصر ولن تؤثر على العناصر الأخرى المشابهة. أي لا مزيد من التنقل جيئة وذهابًا بين ملفات HTML وملفات قواعد التنسيق في المحرر الخاص بك، وبعض المبرمجين لا يفضلون ذلك لأن الشيفرة البرمجية الخاصة بصفحات HTML ستكون فوضوية للغاية، وبالمقابل تكون الشيفرة البرمجية لإطار Bootstrap منظمة ونظيفة كما أن إطار Bootstrap يدعم التفاعل بالاعتماد على لغة جافاسكربت فيوفر مثلًا شرائط تنقل وقوائم وحقول إدخال جاهزة الأمر الذي يسهل دخول المبتدئين ويسرّع من العمل على المشروع إن لم يتطلب تخصيصًا.

في الحقيقة يمكن أن يكون استخدام إطار Bootstrap مناسبًا أكثر للمبتدئين أو للمطورين الشاملين Full Stack وبالمقابل يكون إطار Tailwind CSS مناسبًا أكثر للخبراء ومطوري الواجهات الأمامية Front End Developer.

متى نستخدم Tailwind CSS و Bootstrap؟

يسهل إطار العمل Bootstrap عملية تصميم المواقع على المصممين المبتدئين والذين يسارعون إلى بناء نموذج أولي من الموقع أو تطبيق الويب باستخدام مكتبة ضخمة تحتوي على عدد هائل من المكونات والمشاريع المُقدمة من قبل المجتمع، ولكن بمجرد أن يتطور التطبيق وتتعقد تصاميمه ومتطلباته يحدُ الإطار من عملية التصميم ومرونتها ويصبح عبئًا بدل أن يكون مساعدًا.

بالمقابل يعدُ إطار Tailwind CSS حلًا ممتازًا للمطورين المطلعين على لغة CSS والذين يرغبون في تسريع عملية الإنشاء والتصميم على المدى الطويل. ولا يحبذ استخدام الإطار إذا لم تكن معتادًا على لغة CSS أو لا ترغب في قضاء الوقت في تعلم التفاصيل الدقيقة لها.

وبالتأكيد أن الأمر يتعلق باحتياجات المشروع وحجمه وإمكانيات الفريق، يمكن أن يساعدك الإطار في توفير وقت التصميم وخصيصًا للمطورين الذين لا يفضلون استخدام المكونات الجاهزة، وبالتالي فإن قضاء الوقت في اختبار هذا الإطار أمر مفيد. وعمومًا إذ سنح لك الوقت في يوم من الأيام فأنصحك بتجربة إطار Tailwind CSS وخصيصًا إذا كنت مطور واجهات أمامية.

الخاتمة

تعرفنا في هذا المقال على لمحة سريعة عن سرعة تطور واجهات الويب واطلعنا على تسارع تطوير الأدوات والأطر المساعدة لتحقيق السرعة والإنتاجية في عملية التصميم في هكذا أجواء كما تعرفنا على أشهر إطاري عمل وهما Bootstrap و Tailwind CSS كما نظرنا إلى الاختلاف بينهما في المجتمع والتطوير وفي المكونات الجاهزة وقابلية التخصيص وفي بنية الشيفرة البرمجية ودعم المتصفحات لهذه الأطر والسرعة والأداء لكل إطار وسهولة التعلم للمبتدئين وبيئات العمل ودعم اللغات في محررات الشيفرات البرمجة لنختم المقال بفهم أي الإطارين أفضل ومتى نستخدم كل واحد منها.

وختامًا يُتوقع من كل إطار عمل أن يسهل من عملية بناء المشاريع البرمجية من خلال توفير بنية أساسية للشيفرات البرمجية المتكررة، وجعل تركيز المبرمج على بناء وإعداد المميزات الإضافية الخاصة بالمشروع هذا هو الهدف وإذا شعرت بأن الإطار أصبح عبئًا على المشروع فعندها لا بد أنك تستخدم الإطار الخاطئ وعندها لا بد من البحث عن الحلول البديلة.

المصادر

اقرأ أيضًا

]]>1595Mon, 20 Jun 2022 15:05:00 +0000عناصر الإدخال: إنشاء استمارة دفع في بوتسترابhttps://academy.hsoub.com/programming/css/bootstrap/%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%A7%D9%84%D8%A5%D8%AF%D8%AE%D8%A7%D9%84-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A9-%D8%AF%D9%81%D8%B9-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-r1560/

سنتعرف في هذا الدرس على طريقة التعامل مع عناصر الإدخال في بوتستراب، إذ توفّر بوتستراب دعمًا قويًا لعناصر الإدخال من خلال إضفاء لمسة جمالية واضحة عليها. سنتعرّف على العناصر الأساسية التي تُستخدم بشكل متكرّر في جميع تطبيقات الويب ثم سنعمل، كما جرت العادة، على تطبيق ما تعلّمناه على موقعنا "نبيه" الذي بنيناه من المقالات السابقة. ستحتاج إلى مراجعة المقالات السابقة في هذه السلسلة كي تتعرّف أكثر على هذا الموقع.

سنتعلّم في هذا الدرس:

  • تنسيق أشهر عناصر الإدخال في بوتستراب.
  • إنشاء صفحة الدفع ضمن موقع نبيه.

هذا الفصل جزء من سلسلة فصول عن بوتستراب 5، وإليك كامل فهرس السلسلة:

تنسيق أشهر عناصر الإدخال في بوتستراب

تُستخدم عناصر الإدخال عادةً لاستقبال المدخلات من المستخدم، وكما نعلم توفّر HTML عناصر جيدة بهذا الصدد. تضفي بوتستراب ناحية جمالية وتناسق واضح على هذه العناصر.

فيما يلي أشهر هذه العناصر التي لا غنى عنها في أي تطبيق ويب يستقبل الدخل من المستخدم.

عنصر الإدخال النصي

وهو من أشهر العناصر وأكثرها استخدمًا، ويمكن تنسيق هذا العنصر عن طريق استخدام الصنف التنسيقي form-control. السبب في أنّ هذا الصنف يبدأ بالكلمة form هو أنّه عادةً ما يوضع (وغيره من عناصر الإدخال) ضمن عنصر النموذج <form> رغم أنّه ليس من الضروري ذلك. الشكل العام هو: 

<input type="text" class="form-control" >

ومن الممكن أيضًا بدلًا من استخدام الصنف form-control، استخدام الصنفين التنسيقيين form-control-lg و form-control-sm اللذين يجعلان عنصر الإدخال النصي كبيرًا أو صغيرًا على الترتيب.

عنصر العنوان

هو العنصر <label> وعادةً ما يُستخدم مع العديد من عناصر الإدخال لتوضيح الغاية منها. الصنف التنسيقي المستخدم هنا هو form-label والشكل العام له: 

<label for="DEST_ID" class="form-label">العنوان المطلوب</label>
<input id="DEST_ID" type="text" class="form-control" >

حيث DEST_ID هو معرّف عنصر الإدخال الذي سيكون عنصر العنوان مخصّصًا له كما موضع. ومرّة أخرى يمكن استخدام الصنفين التنسيقيين form-control-lg و form-control-sm كما في عنصر الإدخال النصي.

اقتباس

ملاحظة: من الممكن وضع عنصري الإدخال النصي والعنوان ضمن عنصر div له التنسيق form-group والهدف من ذلك هو تجميع هذين العنصرين كي يشكلا وحدة مستقلة لها هوامشها وحاشياتها الجاهزة والملائمة مع العناصر المحيطة، كما ويمكن استخدام هذا التنسيق مع أي عناصر أخرى قد تحتاج إليها.

عنصر الاختيار

من الممكن أيضًا تنسيق عنصر الاختيار checkbox على الشكل التالي: 

<input class="form-check-input" type="checkbox" id="normal_unchecked">

لاحظ الصنف التنسيقي form-check-input. سيظهر هذا العنصر بحالته العادية دون وجود علامة الاختيار ضمنه. أمّا إذا أردت ظهوره بحالة الاختيار فأضف السمة checked فقط إلى هذا العنصر: 

 <input class="form-check-input" type="checkbox" id="normal_checked" checked>

في كلتا الحالتين السابقتين سيظهر عنصر الاختيار على شكل مربّع صغير بحالة عدم اختيار أو بحالة اختيار على الترتيب، ولكن من الضروري بالطبع إضافة عنصر عنوان توضيحي يوضّح الغاية من عنصر الاختيار، لذلك يمكن وضع عنصر عنوان بجوار عنصر الاختيار له الصنف التنسيقي form-check-label على النحو التالي: 

<input class="form-check-input" type="checkbox" id="normal_unchecked">
<label class="form-check-label" for="normal_unchecked">عنصر اختيار عادي</label>

عادةً ما يوضّع العنصرين السابقين ضمن عنصر div له التنسيق form-check، وبهذا يصبح مثالنا البسيط على الشكل التالي: 

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="normal_unchecked">
<label class="form-check-label" for="normal_unchecked">عنصر اختيار عادي</label>
</div>

سيولّد ذلك شكلًا شبيها بما يلي:

1.png

عنصر الانتقاء

يمكن بشكل مشابه لعنصر الاختيار وضع عنصر الانتقاء radio مع عنصر العنوان الخاص به ضمن عنصر div له التنسيق form-check على الشكل التالي: 

<div class="form-check">
  <input class="form-check-input" type="radio" name="radioGroup" id="normal_radio">
  <label class="form-check-label" for="normal_radio">
    عادي
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioGroup" id="selected_radio" checked>
  <label class="form-check-label" for="selected_radio">
    في وضع انتقاء
  </label>
</div>

وضعت في الشيفرة السابقة عنصري انتقاء مع ضبط السمة name لهما على النفس القيمة radioGroup لكي نستطيع انتقاء واحد منهما فقط في كل مرّة. يمكن بالطبع إضافة أي عدد من عناصر الانتقاء بحيث يكون لكل منها نفس قيمة السمة name لكي تُعامل على شكل مجموعة واحدة.

ستولّد الشيفرة السابقة شكلًا شبيهًا بما يلي:

2.png

إنشاء صفحة الدفع ضمن موقع "نبيه"

حان الآن موعد تجهيز صفحة الدفع checkout.html الخاصة بموقع نبيه. سنجري بدايةً تعديلين صغيرين على الملفين: shopping-cart.html و styles.css.

بالنسبة للملف styles.css سنضيف تنسيق بسيط لمحاذاة بيانات الدفع بشكل ملائم. أضف التنسيق التالي إلى نهاية هذا الملف: 

/*Checkout*/
.payment-details{
    padding: 3% 5%;
}

بالنسبة للملف shopping-cart.html فسنضيف زر "الشراء الآن" إلى أسفل الصفحة الذي سيحولنا إلى صفحة الدفع التي سنبنيها تاليًا، لذا أضف الشيفرة التالية إلى الملف shopping-cart.html قبل القسم ‎section id="footer"‎ مباشرةً: 

<div class="row">
        <div class="col-4 shopping-cart-content"><a href="checkout.html" class="btn btn-primary">الشراء الآن</a></div>
    </div>

جاء الآن دور الملف checkout.html والتي ستكون محتوياته على النحو التالي: 

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
        integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"
        rel="stylesheet">

    <!-- Boostrap 5 icons - web font -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

    <title>دورات نبيه | صفحة الدفع</title>
</head>

<body>
    <section id="header">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="images/nabih-logo.png" style="margin-left: 8px;" alt="" height="32">
                    نبيه
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-2 mb-2 mb-lg-0 ms-3">
                        <li class="nav-item"><a class="nav-link" href="#">التصنيفات</a></li>
                    </ul>
                    <form class="d-flex me-auto w-100">
                        <input class="form-control" type="search" placeholder="ابحث عن أي موضوع">
                        <div class="nav-link" style="position: relative;">
                            <div class="counter zero"></div>

                            <img src="images/icons8-shopping-cart-32.png" />
                        </div>

                        <button type="button" class="btn btn-dark nabih-buttons">دخول</button>
                        <button type="button" class="btn btn-outline-dark nabih-buttons">تسجيل جديد</button>
                    </form>
                </div>
            </div>
        </nav>
    </section>

    <div class="payment-details">
        <div class="col-md-7 col-lg-8">
            <h4 class="mb-3">بيانات الدفع</h4>
            <form>                
                <div class="row g-3"> <!-- الموضع 1 -->
                    <div class="col-sm-6">
                        <label for="firstName" class="form-label">الاسم</label>
                        <input type="text" class="form-control" id="firstName">
                    </div>

                    <div class="col-sm-6">
                        <label for="lastName" class="form-label">الكنية</label>
                        <input type="text" class="form-control" id="lastName">
                    </div>

                    <div class="col-12">
                        <label for="username" class="form-label">اسم المستخدم</label>
                        <div class="input-group"> <!-- الموضع 2 -->
                            <span class="input-group-text">#</span>
                            <input type="text" class="form-control" id="username" placeholder="اسم المستخدم">
                        </div>
                    </div>

                    <div class="col-12">
                        <label for="email" class="form-label">البريد الإلكتروني <span
                                class="text-muted">(اختياري)</span></label>
                        <input type="email" class="form-control" id="email" placeholder="you@example.com">
                    </div>


                </div>

                <hr class="my-4"> <!-- الموضع 3 -->


                <h4 class="mb-3">الدفع</h4> 

                <div class="my-3">
                    <div class="form-check">
                        <input id="credit" name="paymentMethod" type="radio" class="form-check-input">
                        <label class="form-check-label" for="credit">بطاقة إئتمان</label>
                    </div>
                    <div class="form-check">
                        <input id="debit" name="paymentMethod" type="radio" class="form-check-input">
                        <label class="form-check-label" for="debit">بطاقة عادية</label>
                    </div>
                    <div class="form-check">
                        <input id="paypal" name="paymentMethod" type="radio" class="form-check-input">
                        <label class="form-check-label" for="paypal">باي بال</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label for="cc-name" class="form-label">الاسم على البطاقة</label>
                        <input type="text" class="form-control" id="cc-name" placeholder="">
                        <small class="text-muted">الاسم الكامل كما يظهر على البطاقة</small>
                    </div>

                    <div class="col-md-6">
                        <label for="cc-number" class="form-label">رقم البطاقة</label>
                        <input type="text" class="form-control" id="cc-number" placeholder="">
                    </div>

                    <div class="col-md-3">
                        <label for="cc-expiration" class="form-label">تاريخ الانتهاء</label>
                        <input type="text" class="form-control" id="cc-expiration" placeholder="">
                    </div>

                    <div class="col-md-3">
                        <label for="cc-cvv" class="form-label">CVV</label>
                        <input type="text" class="form-control" id="cc-cvv" placeholder="">
                    </div>

                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="save-card">
                        <label class="form-check-label" for="save-card">احفظ بيانات البطاقة</label>
                    </div>
                </div>


                <hr class="my-4">

                <button class="w-100 btn btn-primary btn-lg" type="submit">الدفع</button> <!-- الموضع 4 -->
            </form>
        </div>
    </div>

    <section id="footer">
        <footer>
            <div class="container-fluid">
                <i class="bi bi-facebook social-icon"></i>
                <i class="bi bi-twitter social-icon"></i>
                <i class="bi bi-instagram social-icon"></i>
                <i class="bi bi-envelope social-icon"></i>
                <p>© دورات نبيه 2021</p>
            </div>
        </footer>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

ستحصل بعد المعاينة على شكل شبيه بما يلي:

3.png

يبدو أنّ الشيفرة السابقة يجب أن تكون واضحة الآن، ولكن رغم ذلك لنستعرض بعض النقاط الواردة فيها.

بالنظر إلى "الموضع 1" ستلاحظ أنّني استخدمت الصنف g-3 مع عنصر div، فتشير العائلة g-*‎ إلى Gutters وهي عبارة عن فراغات هامشية معرّفة مسبقًا يمكن وضعها بين الأعمدة (أفقي) أو حتى بين الأسطر (عمودي). وظيفة هذه العائلة وغيرها من العائلات التي سنراها تباعًا هي توفير اختصار سريع لضبط الفراغات بين العناصر المستهدفة دون الحاجة إلى تعريف تنسيقات ضمن ملف تنسيقي منفصل مثلًا.

بالنسبة للفراغات الأفقية نستخدم العائلة الفرعية gx-*‎، أمّا بالنسبة للفراغات العمودية فنستخدم العائلة الفرعية gy-*‎. أمّا إذا أردنا ضبط الفراغات الأفقية والعمودية معًا فنستخدم العائلة g-*‎.

توجد ست قيم معرّفة مسبقًا وهي من g-0 إلى g-5 بحيث أنّ كل رقم منها (أي من 0 حتى 5) يُضرب بثابت معرّف مسبقًا في بوتستراب وهو ‎ $spacer وقيمته هي 1rem. ففي مثالنا هذا يُشير الصنف g-3‎ أنّنا نريد ضبط حشوات أفقية وعمودية بمقدار 3rem.

بالنسبة "للموضع 2"، لاحظ الصنف input-group مع العنصر div. لهذا الصنف فائدة تنسيقية جميلة تتمثّل في إمكانية رصف نص عادي (يمكن استخدام العنصر <span>) يمثّل نصًا تعريفيًا، مع عنصر إدخال نصي عادي بحيث يبدوان وكأنّهما عنصر واحد. يمكن استخدام هذه الميزة مثلًا لكي تشير للمستخدم أن يُدخل معرّف تويتر ما، وذلك بوضع الرمز "@" قبل عنصر الإدخال النصي. في مثالنا هنا، وضعت الرمز "#" للإشارة إلى أنّنا نريد اسم المستخدم الخاص بالموقع.

لكي يتم التراصف بشكل صحيح، ستحتاج أيضًا إلى استخدام التنسيق input-group-text مع عنصر <span> (انظر إلى السطر الذي يليه في الشيفرة) الذي يمثّل الحاضن للنص التعريفي، يليه عنصر الإدخال النصي الذي يحمل التنسيق form-control كما هو متوقع.

لننتقل الآن إلى "الموضع 3". لاحظ كيف استخدمنا الصنف my-4. هذا الصنف يعود إلى العائلة الرئيسية m-*‎ وهي مسؤولة عن ضبط الهوامش margins والتي يتبع لها عدة عائلات فرعية وهي:

  • العائلة mt-*‎ وهي لضبط الهامش العلوي margin-top.
  • العائلة mb-*‎ وهي لضبط الهامش السفلي margin-bottom.
  • العائلة ms-*‎ وهي لضبط هامش البداية (وهو margin-left في اللغات التي تتجه من اليسار LTR أو margin-right في اللغات التي تتجه من اليمين RTL).
  • العائلة me-*‎ وهي لضبط هامش النهاية (وهو margin-left في اللغات RTL وهو margin-right في اللغات LTR).
  • العائلة mx-*‎ وهي لضبط الهامشين الأيمن والأيسر بنفس الوقت (margin-right و margin-left).
  • العائلة my-*‎ وهي لضبط الهامشين العلوي والسفلي بنفس الوقت (margin-top و margin-bottom).

وكما في العائلة g-*‎ توجد ستة قياسات يمكن استخدامها مع العائلة m-*‎ وهي من 0 حتى 5. استخدمنا في "الموضع 2" القياس رقم 4 لضبط الهامشين العلوي والسفلي، أي: my-4.

اقتباس

ملاحظة: توجد عائلة مرافقة للعائلة m-*‎ وهي العائلة p-*‎ التي تهتم بتحديد الحاشيات padding للعناصر المختارة. ولكن أرجو عدم الخلط بين العائلة p-*‎ والعائلة g-*‎ التي تهتم بتحديد الفراغات بين الأعمدة أو الأسطر أو كليهما معًا.

وأخيرًا بالنظر إلى "الموضع 4"، لاحظ أنني قد استخدمت الصنف w-100، يعني ذلك أني أريد أن يشغل هذا العنصر عرضًا مقداره 100% ضمن أقرب حاوية هو موجود ضمنها، كما توجد قيم أخرى أيضًا مثل w-25 و w-50 و w-75.

يمكنك تنزيل الشيفرة الكاملة لهذا الدرس من bootstrap5-tutorial.zip، كما ويمكنك الإطلاع على نسخة حيّة من هذه الصفحة من هنا.

كما أنصحك بالإطلاع على صفحة التوثيق الرسمية في أكاديمية حسوب.

خاتمة

تعرّفنا في هذا الدرس على كيفية تنسيق بعض عناصر الإدخال الشائعة باستخدام بوتستراب، وعملنا على تطبيق ما تعلّمناه عن طريق تجهيز صفحة الدفع الخاصة بموقع "نبيه".

نكون بذلك قد وصلنا إلى نهاية هذه السلسلة التي أرجو أن تكون قد حقّقت الفائدة المرجوة في التعرّف العملي على هذه المكتبة المهمة "بوتستراب" مع الإصدار الأخير لها 5.0 حتى تاريخ كتابة هذا المقال.

اقرأ أيضًا

]]>1560Sun, 15 May 2022 08:44:44 +0000مكون الرسائل المنبثقة Modal في بوتسترابhttps://academy.hsoub.com/programming/css/bootstrap/%D9%85%D9%83%D9%88%D9%86-%D8%A7%D9%84%D8%B1%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D9%85%D9%86%D8%A8%D8%AB%D9%82%D8%A9-modal-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-r1559/

سنتعامل في هذا الدرس مع مكوّن جديد ومفيد من بوتستراب، ألا وهو مكوّن الرسائل المنبثقة Modal. يُستخدم هذا المكوّن في إضفاء ميزة جمالية عندما نريد التواصل مع المستخدم، كأن نُظهر به رسالة تفيد بالانتهاء من تنفيذ إجراء معيّن، أو الإبلاغ عن حدوث خطأ ما، أو حتى عندما نريد أن نُخبر المستخدم بمعلومة معيّنة بحيث يمكنه أن يتخذ قرارًا ما بناء على ذلك. وكما جرت العادة، سنطبّق ما سنتعلّمه في هذا الدرس على موقع" نبيه" الذي بنيناه في مقالات سابقة من هذه السلسلة.

سنعمل في هذا الدرس على:

  • التعرّف على مكوّن الرسائل المنبثقة Modal في بوتستراب.
  • إضافة المنتجات إلى سلة المشتريات في موقع نبيه.
  • إنشاء صفحة جديدة في موقع نبيه لعرض محتويات سلة المشتريات.

هذا الفصل جزء من سلسلة فصول عن بوتستراب 5، وإليك كامل فهرس السلسلة:

التعرف على مكون الرسائل المنبثقة Modal في بوتستراب

يمكن إنشاء أشكال متنوّعة وغنيّة من مكوّن الرسائل المنبثقة. سنستعرض فيما يلي الشكل المبسّط الأساسي التالي: 

<div class="modal" tabindex="-1" id="exampleModal"> <!-- الموضع 1 -->
  <div class="modal-dialog"> <!-- الموضع 2 -->
    <div class="modal-content"> <!-- الموضع 3 -->
      <div class="modal-header"><!-- الموضع 4 -->
        <h5 class="modal-title">العنوان هنا</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"> <!-- الموضع 5 -->
        <p>محتويات النافذة المنبثقة هنا</p>
      </div>
      <div class="modal-footer"> <!-- الموضع 6 -->
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
        <button type="button" class="btn btn-primary">حفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>

من الشيفرة السابقة يبدأ تعريف النافذة المنبثقة في "الموضع 1" من خلال الصنف modal لعنصر div عادي. أما في "الموضع 2" نستخدم الصنف modal-dialog الضروري أيضًا لكي تعمل النافذة المنبثقة بشكل صحيح. تُوضع محتويات النافذة المنبثقة بشكل كامل ضمن عنصر div يحمل الصنف modal-content ويمثِّل "الموضع 3" الحاضن لمحتويات النافذة المنبثقة.

يمكن أن يحتوي العنصر div.modal-content بدوره على ثلاثة أقسام:

  • ترويسة النافذة المنبثق"الموضع 4" وهي عنصر div له الصنف modal-header.
  • جسم النافذة المنبثقة "الموضع 5" وهي عنصر div له الصنف modal-body.
  • تذييل النافذة المنبثقة "الموضع 6" وهي عنصر div له الصنف modal-footer.

بالنسبة للترويسة، فيمكن أن نضع فيها عنوان النافذة المنبثقة (عن طريق عنصر div له التنسيق modal-title) أو بمعنى آخر عنوان الرسالة التي نريد عرضها للمستخدم، بالإضافة إلى إمكانية وضع زر صغير (له التنسيق btn-close) لنسمح للمستخدم بإغلاق هذه النافذة. أمّا جسم النافذة، فمكن أن نضع فيه أي محتوى ملائم نريد عرضه للمستخدم. وبالنسبة للتذييل، فيوضع فيه عادةً أزرار التحكّم التي يمكن من خلالها الاستجابة للرسالة أو المعلومة التي يعرضها التطبيق.

لتجربة الشيفرة السابقة، ستحتاج مثلًا إلى زر منفصل لكي يعمل على تفعيل ظهور النافذة المنبثقة المعرّفة ضمن هذه الشيفرة. أقترح أن تستخدم الزر البسيط التالي: 

<!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        أظهر النافذة
    </button>

يمكن وضع هذا الزر قبل أو بعد الشيفرة السابقة ضمن القسم body من الصفحة. لاحظ أنّ السمة data-bs-target من الزر السابق لها القيمة ‎#exampleModal وهي نفسها معرّف عنصر div الرئيسي "الموضع 1" الذي يحضن النافذة المنبثقة.

يجب عليك الانتباه أيضًا أنّه لن يمكنك تجربة الشيفرة السابقة بشكل ناجح دون استيراد مكتبات بوتستراب بشكل صحيح، كما تعلّمنا ذلك مسبقًا.

بعد أن تعمل الشيفرة السابقة بشكل صحيح، ستحصل على شكل شبيه بما يلي:

1.png

ستلاحظ عند الضغط على الزر "إغلاق" اختفاء هذه النافذة وسبب ذلك هو وجود السمة data-bs-dismiss مع القيمة modal لها، ويمكنك أيضًا الخروج من هذه النافذة بالنقر في أي مكان خارجها، وهو السلوك الافتراضي. يمكنك منع هذا السلوك، أي أنّك تجعل إخفاء هذه النافذة يكون حصرًا بالنقر على الزر "إغلاق" بأن تضع السمة data-bs-backdrop مع القيمة static لها وذلك ضمن عنصر div الرئيسي "الموضع 1".

يمكنك أيضًا الحصول على تأثير لطيف عند إظهار النافذة وإخفائها وذلك بأني تضيف التنسيق fade إلى الصنف modal ضمن عنصر div الرئيسي "الموضع 1".

سيصبح عنصر div الرئيسي بعد التعديلين المقترحين على الشكل التالي: 

<div class="modal fade" tabindex="-1" id="exampleModal" data-bs-backdrop="static">

في الحقيقة، توجد العديد من الإضافات والتنسيقات المختلفة التي يمكنك الإطلاع عليها من خلال صفحة التوثيق الرسمية لهذا المكوّن.

إضافة المنتجات إلى سلة المشتريات في موقع نبيه

سنعمل في هذه الفقرة على محاكاة عملية إضافة المنتجات إلى سلّة المشتريات الخاصة بموقع نبيه (يمكنك تنزيل شيفرة الدرس الخامس السابق من الملف المرفق في الأسفل).

في الحقيقة هناك العديد من الملاحظات حول هذا الموضوع، من أهمّها، أّنه من المنطقي إنشاء حسابات للمستخدمين كي يستطيع المستخدم إضافة أي منتج يرغبه إلى سلّة المشتريات الخاصة به، وأيضًا أنّنا في هذا المشروع سنعمل على حفظ المنتجات المضافة للسلة إلى التخزين المحلّي الخاص بالمتصفّخ وليس إلى قاعدة بيانات موجودة على الإنترنت. سنتغاضى في الحقيقة عن هذين المتطلّبين المهمّين والبديهيين في التطبيقات العمليّة، وذلك بسبب أنّ الهدف من هذا المشروع هو شرح مفاهيم بوتستراب 5 بصورة مبسّطة وميسرة.

سنعمل على إجراء بعض التعديلات على ملف الصفحة الرئيسية index.html القديم، وذلك للسماح بإضافة المنتجات إلى سلة المشتريات، أهم هذه التعديلات هي:

  • إضافة الشيفرة اللازمة للإظهار نافذة منبثقة عندما يريد المستخدم أن يضيف منتج ما إلى سلّة المشتريات.
  • إضافة قسم لشيفرة جافاسكريبت تتمثّل مهمتها في إدارة عملية إضافة المنتجات التي يرغبها المستخدم إلى التخزين الداخلي ضمن المتصفّح وأيضًا تحديث أيقونة سلّة المشتريات الموجودة في أعلى الصفحة بالعدد الحالي للمنتجات التي اختارها المستخدم.

في الحقيقة ستعمل شيفرة جافاسكربت السابقة على تضمين وحدة برمجية module اسمها main الموجودة ضمن الملف main.js، حيث تحتوي هذه الوحدة على بعض التوابع المفيدة التي تدير العمليات البرمجية الكاملة التي نحتاجها في هذا الدرس (سنتحدّث عن هذه الوحدة بعد قليل).

ستصبح الشيفرة الخاصة بالملف index.html على الشكل التالي (الملف مرفق في نهاية المقال): 

<!doctype html>
<html lang="ar" dir="rtl">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
    integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
  <link href="css/styles.css" rel="stylesheet" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"
    rel="stylesheet">

  <!-- Boostrap 5 icons - web font -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

  <title>دورات نبيه</title>
</head>

<body>
  <!-- نافذة منبثقة -->
  <div class="modal fade" id="addToCartConfirmation" tabindex="-1" aria-labelledby="addToCartConfirmation"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalLabel">نبيه</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          تمت الإضافة بنجاح
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
          <button type="button" class="btn btn-primary" onclick="window.location='shopping-cart.html'">الذهاب إلى السلة</button>
        </div>
      </div>
    </div>
  </div>

  <section id="header">
    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="images/nabih-logo.png" style="margin-left: 8px;" alt="" height="32">
          نبيه
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-2 mb-2 mb-lg-0 ms-3">
            <li class="nav-item"><a class="nav-link" href="#">التصنيفات</a></li>
          </ul>
          <form class="d-flex me-auto w-100">
            <input class="form-control" type="search" placeholder="ابحث عن أي موضوع">
            <div class="nav-link" style="position: relative;" onclick="goToShoppingCart()">
              <div class="counter zero"></div>

              <a href="shopping-cart.html"><img src="images/icons8-shopping-cart-32.png" /></a> 
            </div>

            <button type="button" class="btn btn-dark nabih-buttons">دخول</button>
            <button type="button" class="btn btn-outline-dark nabih-buttons">تسجيل جديد</button>
          </form>
        </div>
      </div>
    </nav>

    <!--Main View-->
    <div class="mainview">
      <div class="row">
        <div class="col-lg-6">
          <h1 class="mainview-heading">دورات غنية بجودة عالية</h1>
          <h3 class="mainview-subheading"> طور نفسك لتنافس في سوق العمل</h3>
        </div>
        <div class="col-lg-6">
          <img class="mainview-image" src="images/show-case.jpg" />
        </div>
      </div>
    </div>
  </section>

  <section id="best-selling">
    <div class="section-title">الدورات الأكثر مبيعًا</div>
    <div id="bestSellingCourses" class="carousel carousel-dark slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">

          <div class="row">

            <div class="col-lg-3">
              <div class="card" name="productCard" id="P1">
                <img src="images/python-product.jpg" class="card-img-top product-image" alt="python-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام بايثون</h5>
                  <p class="product-text card-text">في هذه الدورة سنتعلّم مبادئ البرمجة في لغة بايثون</p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$10</div>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card" name="productCard" id="P2">
                <img src="images/github-product.jpg" class="card-img-top product-image" alt="github-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة التعامل مع GitHub</h5>
                  <p class="product-text card-text">تعلّم كيف تدير مشاريعك البرمجية من حيث إدارة الإصدار والمساهة في
                    مشاريع برمجية
                    أخرى.</p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$15</div>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card" name="productCard" id="P3">
                <img src="images/python-django-product.jpg" class="card-img-top product-image" alt="django-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة تطوير تطبيقات ويب باستخدام بايثون مع Django</h5>
                  <p class="product-text card-text">تعلّم كيف تبني تطبيقات ويب باستخدام لغة بايثون مع Django </p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$20</div>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card" name="productCard" id="P4">
                <img src="images/javascript-product.jpg" class="card-img-top product-image" alt="javascript-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام جافاسكريبت</h5>
                  <p class="product-text card-text"> سنتعلّم في هذه الدورة كيفية تطوير تطبيقات الواجهة الأمامية باستخدام
                    جافاسكريبت
                  </p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$25</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="row">
            <div class="col-lg-3">
              <div class="card" name="productCard" id="P5">
                <img src="images/php-product.jpg" class="card-img-top product-image" alt="php-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام PHP</h5>
                  <p class="product-text card-text">في هذه الدورة سنتعلّم مبادئ البرمجة في لغة PHP</p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$13</div>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card" name="productCard" id="P6">
                <img src="images/arduino-product.jpg" class="card-img-top product-image" alt="arduino-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة التعامل مع أساسيات Arduino</h5>
                  <p class="product-text card-text">تعلّم كيف تبني أنظمة مضمنه تتضمّن مشاريع بسيطة باستخدام Arduino</p>
                  <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToCartConfirmation">أضف
                    إلى السلة</a>
                  <div class="price-tag">$30</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#bestSellingCourses" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#bestSellingCourses" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </button>
    </div>
  </section>

  <section id="course-categories">
    <div class="section-title">الأقسام المتاحة</div>
    <div class="row">
      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/programming-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">البرمجة</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/marketing-category.png" class="card-img-top category-image" alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">التسويق</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/freelance-category.png" class="card-img-top category-image" alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">العمل الحر</p>
            </div>
          </div>
        </a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/cloud-computing-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">التطبيقات السحابية</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/certificates-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">الشهادات العالمية</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/apps-category.png" class="card-img-top category-image" alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">البرامج والتطبيقات</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <section id="footer">
    <footer>
      <div class="container-fluid">
        <i class="bi bi-facebook social-icon"></i>
        <i class="bi bi-twitter social-icon"></i>
        <i class="bi bi-instagram social-icon"></i>
        <i class="bi bi-envelope social-icon"></i>
        <p>© دورات نبيه 2021</p>
      </div>
    </footer>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <script type="module">
    import {updateCartLabel, saveItem} from './js/main.js';

    let products = document.getElementsByName('productCard');

    for (let product of products) {
      const product_id = product.attributes['id'].value;
      const product_title = product.getElementsByClassName('product-title')[0].innerHTML;
      const product_price = product.getElementsByClassName('price-tag')[0].innerHTML;
      const addToCartButton = product.getElementsByClassName('btn-primary')[0];

      addToCartButton.addEventListener('click', (e) => {
        const item_to_post = { id: product_id, course_name: product_title, price: product_price.substring(1) };
        saveItem(item_to_post);
        updateCartLabel();
      });
    }
  </script>

</body>

</html>

ستكون هناك أيضًا تعديلات طفيفة على ملف التنسيقات styles.css لكي يدعم صفحة سلة المشتريات. المحتوى الجديد للملف سيكون على النحو التالي: 

body{
    font-family: 'Tajawal', sans-serif;
    font-size: 1em;
}

.nabih-buttons{
    margin: 0 4px; 
    padding: 6px 8px;
    width: 7rem;
    white-space: nowrap; 
}

.container-fluid{
    padding:0 5%;
}

.section-title{
    text-align: center;
    font-size: xx-large;
    padding: 3rem 0;
}

/*Header Section*/

.counter{
    color: white;
    margin: 0;
    position: absolute;
    font-size: 15px;
    text-align: center;
    right: 6px;
    top: 0px;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
}

.zero{
    opacity: 0;
}

#header{
    background-color: #eee;
}

.navbar-brand{
    font-family: 'Almarai';
    color:#393e46;
    font-size: 2.5rem;
    font-weight:900;
    margin: 0;
}

.mainview-heading {
    color: white;
    font-size: 4em;
    text-align: right;
}

.mainview-subheading{
    color: white;
    margin: 64px 0;
    text-align: right;
}

.mainview{
    background-color: #233e8b;
    padding: 3% 5%;
}

.mainview-image{
    border-radius: 2%;
    width: 500px;
    float: left;    
}

/*Best Selling Section*/

.carousel-inner{
    padding: 0 5%;
}
.carousel-control-prev {
    background: linear-gradient(to right, rgba(200,200,200,0), rgba(200,200,200,1));
}

.carousel-control-next {
    background: linear-gradient(to left, rgba(200,200,200,0), rgba(200,200,200,1));
}

.product-image{
    height: 12rem;
}

.product-title{
    height: 4rem;    
}

.product-text{
    height: 6rem;
}

.price-tag{
    float: left; 
    border-width: 1px; 
    border-style: solid; 
    width: 3rem; height: 2rem;
    text-align: center;
    padding:2px;
    margin-top:2px;
}

/*Course Categories Section*/

#course-categories{
    background-color: #eee;
    padding: 0 10% 8px;
}

#course-categories .row{
    margin-bottom: 72px;
}

.category-card{
    margin-left: 24px;
    margin-right:24px;
    padding: 48px 0px 32px;
}

.category-image{
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.category-text{
    text-align: center;
    font-size: 1.3rem;
}

.category-link{
    text-decoration: none;
    color:inherit;
}

/*Footer Section*/

footer{
    height: 200px;
}

.social-icon {
    margin: 20px 10px;
  }

#footer .container-fluid{
    padding: 7% 15%;
    text-align: center;
}

/*Shopping Cart*/
.shopping-cart-title{
    padding: 3% 5%;
}
.shopping-cart-content{
    padding: 0 5%;
}

.shopping-cart-total{
    padding:0 5% 3%;
    font-weight: bold;
}

.shopping-cart-item{
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1.1rem;
}

ستحصل على نافذة منبثقة شبيهة بما يلي:

3.png

إضافة الوحدة البرمجية main

إذا لم تكن قد أنشأت المجلّد js ضمن المجلّد الرئيسي للمشروع فافعل ذلك الآن، بعد ذلك أضف الملف main.js لهذا المجلّد. انسخ الشيفرة البرمجية التالية لهذا الملف: 

export function saveItem(item) {
    let key = Object.keys(localStorage)
                .find(e => e === String(item.id));

    if(key){
        let tmp = JSON.parse(localStorage.getItem(key));
        tmp.push(item);
        localStorage.setItem(item.id, JSON.stringify(tmp));
    }
    else{
        localStorage.setItem(item.id, JSON.stringify([item]));
    }
}

export function getItem(id) {
    return window.localStorage.getItem(item.id);
}

export function getAllItems(){
    const keys = Object.keys(window.localStorage);
    let entries = [];

    for(let key of keys){
        entries.push(JSON.parse(localStorage.getItem(key)))
    }

    return entries;
}

export function updateShoppingCartList(){
    let shoppingCartContent = document.getElementById('shoppingCartContent');
    let counter = 1;
    let total_products = 0;
    let amount_due = 0;

    for (let group of getAllItems()) {
        const div = document.createElement('div');

        div.className = 'row shopping-cart-item';

        div.innerHTML = `
            <div class="col-1">
                <span>${counter}</span>
            </div>
            <div class="col-6">
                <span>${group[0].course_name}</span>
            </div>
            <div class="col-1">
                <span>${group.length}</span>
            </div>
            <div class="col-1">
                <span>$${group[0].price}</span>    
            </div>
            <div class="col-1">
                <span>$${group.length * group[0].price}</span>    
            </div>
            `;

        shoppingCartContent.appendChild(div);

        amount_due += group.length * group[0].price;
        counter++;
        total_products += group.length;
    }

    document.getElementById('amountDue').innerHTML = '$' + amount_due;
}

export function updateCartLabel(){
    const counterElement = document.getElementsByClassName('counter')[0];
    let count = 0;

    count = getAllItems().reduce( (acc, group) => acc + group.length, 0)

    if(count > 0){
        counterElement.innerHTML = count;
        counterElement.classList.remove('zero');
    }
}

يحتوي هذا الملف على خمسة توابع، وهي:

  • التابع saveItem ويقبل وسيطًا وحيدًا وهو العنصر "المنتج" الذي اختاره المستخدم، حيث يحفظه ضمن التخزين الداخلي للمتصفّح.
  • التابع getItem ويقبل وسيطًا واحيدًا هو معرّف المنتج الذي نود الحصول على بياناته من التخزين الداخلي.
  • التابع getAllItems وهو لا يحتاج إلى أية وسائط، ويُرجع مصفوفة تحتوي على جميع المنتجات المحفوظة ضمن التخزين الداخلي.
  • التابع updateShoppingCartList ومهمّته تحديث الصفحة الخاصة بسلّة المشتريات، بالمنتجات الموجودة ضمن التخزين الداخلي، حيث يعرضها بطريقة جدولية بسيطة، موضّحا اسم المنتج وعدد النسخ المطلوب شرائها منه، وسعر النسخة، وإجمالي المبلغ الواجب دفعه لهذا المنتج تحديدًا. وفي نهاية الجدول سيعرض أيضًا المجموع النهائي الواجب دفعه من قبل المستخدم (سنرى توضيحًا لبنية هذا الجدول بعد قليل).
  • التابع updateCartLabel ووظيفته تحديث أيقونة سلّة المشتريات الموجودة أعلى الصفحة بعدد نسخ المنتجات المطلوب شراؤها.
اقتباس

ملاحظة: ربما يبدو من غير المنطقي أن يشتري أحد المستخدمين أكثر من نسخة واحدة من نفس الدورة التدريبية "المنتج" وهذا صحيح بالطبع. في الحقيقة دعمت هذا التوجّه ضمن هذا المشروع بهدف إضافة مزية قد تفيدك في مشروع آخر.

عرض محتويات سلة المشتريات

أضف الملف shopping-cart.html إلى المشروع، وانسخ إليه المحتويات التالية: 

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
        integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"
        rel="stylesheet">

    <!-- Boostrap 5 icons - web font -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

    <title>دورات نبيه | سلة المشتريات</title>
</head>

<body>

    <section id="header">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="images/nabih-logo.png" style="margin-left: 8px;" alt="" height="32">
                    نبيه
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-2 mb-2 mb-lg-0 ms-3">
                        <li class="nav-item"><a class="nav-link" href="#">التصنيفات</a></li>
                    </ul>
                    <form class="d-flex me-auto w-100">
                        <input class="form-control" type="search" placeholder="ابحث عن أي موضوع">
                        <div class="nav-link" style="position: relative;">
                            <div class="counter zero"></div>

                            <img src="images/icons8-shopping-cart-32.png" />
                        </div>

                        <button type="button" class="btn btn-dark nabih-buttons">دخول</button>
                        <button type="button" class="btn btn-outline-dark nabih-buttons">تسجيل جديد</button>
                    </form>
                </div>
            </div>
        </nav>
    </section>

    <!--Main View-->
    <div class="shopping-cart-title"><h2>سلة المشتريات</h2></div>
    <div id="shoppingCartContent" class="shopping-cart-content">
        <div class="row">
            <div class="col-1">

            </div>
            <div class="col-6">
                <h5>الدورة</h5>
            </div>
            <div class="col-1">
                <h5>العدد</h5>
            </div>
            <div class="col-1">
                <h5>السعر</h5>
            </div>
            <div class="col-1">
                <h5>الإجمالي</h5>
            </div>
        </div>
    </div>
    <div class="row shopping-cart-total">
        <div id="amountDue" class="offset-9 col-1" style="border-top-style: solid;"></div>
    </div>
    <div class="row">
        <div class="col-4 shopping-cart-content"><a href="checkout.html" class="btn btn-primary">الشراء الآن</a></div>
    </div>
    <section id="footer">
        <footer>
            <div class="container-fluid">
                <i class="bi bi-facebook social-icon"></i>
                <i class="bi bi-twitter social-icon"></i>
                <i class="bi bi-instagram social-icon"></i>
                <i class="bi bi-envelope social-icon"></i>
                <p>© دورات نبيه 2021</p>
            </div>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <script type="module">
        import {updateShoppingCartList, updateCartLabel} from './js/main.js';

        updateShoppingCartList();
        updateCartLabel();
    </script>
</body>
</html>

القسم الأول من الشيفرة السابقة مألوف بالنسبة لك، فهو مسؤول عن تعريف شريط التنقّل كما في الصفحة الرئيسية بالضبط. القسم الثاني من الشيفرة بدءًا من "الموضع 1" يعرّف بنية بسيطة تشبه الجدول مهمتها عرض محتويات سلة المشتريات. الشيفرة البرمجية المسؤولة عن تعبئة هذه البنية موجودة ضمن "الموضع 2". تستورد هذه الشيفرة المكتوبة بلغة جافا سكريبت، تابعين من الملف main.js (أضفناه قبل قليل)، ثم تعمل على استدعائهما تباعًا.

في حال وجود منتجات في السلة ستحصل على شكل شبيه بما يلي:

2.png

يمكنك الوصول إلى الشيفرة الكاملة لهذا الدرس من الملف bootstrap5-tutorial.zip، كما ويمكنك الإطلاع على نسخة حيّة من هذه الصفحة من هنا.

خاتمة

كان الدرس طويلًا بعض الشيء إلّا أنّنا أنجزنا الكثير! الميزة الجديدة التي تعرّفنا عليها في هذا الدرس هي مكوّن الرسائل المنبثقة Modal الذي يسمح بالتفاعل الفعّال مع المستخدم من خلال توفير وسيلة لعرض المعلومات للمستخدم، مع إمكانية توفير إمكانية التفاعل من خلال تلقي رد من المستخدم حول سؤال محّدد نرغب بالحصول على الإجابة عليه. سنتابع عملنا في الدرس القادم في توفير صفحة خاصّة للدفع، لشراء المنتجات التي اختارها المستخدم.

اقرأ أيضًا

]]>1559Sun, 15 May 2022 08:35:56 +0000مكون البطاقة Card ومكون الشرائح الدوارة Carousel في بوتسترابhttps://academy.hsoub.com/programming/css/bootstrap/%D9%85%D9%83%D9%88%D9%86-%D8%A7%D9%84%D8%A8%D8%B7%D8%A7%D9%82%D8%A9-card-%D9%88%D9%85%D9%83%D9%88%D9%86-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A6%D8%AD-%D8%A7%D9%84%D8%AF%D9%88%D8%A7%D8%B1%D8%A9-carousel-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-r1458/

سنتعرّف في هذا الدرس على مكوّنين جديدين من مكوّنات بوتستراب 5، وهما مكوّن البطاقة Card، ومكوّن الشرائح الدوّارة Carousel. ومن ثمّ سنطبّق ما سنتعلّمه هنا في متابعة عملنا في إكمال تصميم موقع "نبيه".

سنعمل في هذا الدرس على:

  • التعرّف على مكوّن البطاقة Card في بوتستراب.
  • التعرّف على مكوّن الشرائح الدوّارة Carousel في بوتستراب.
  • إنجاز قسم الدورات الأكثر مبيعًا Best Selling.
  • إنجاز القسم الخاص بأصناف الدورات Course Categories.
  • أيقونات Bootstrap 5
  • إنجاز قسم التذييل Footer.

هذا الفصل جزء من سلسلة فصول عن بوتستراب 5، وإليك كامل فهرس السلسلة:

التعرف على مكون البطاقة Card في بوتستراب

لمكوّن البطاقة Card في بوتستراب استخدامات متعدّدة. فغالبًا ما يُستخدم عندما نود توضيح أو وصف شيء محدّد، كوصف منتج ما مثلًا، أو وصف صنف كامل من من المنتجات.في درسنا هذا سنستخدم مكوّن البطاقة لوصف دورة محدّدة يقدّمها موقع نبيه، وأيضًا لتصنيف مجالات الدورات التي تُقدّم في الموقع. بُنيت البطاقة في بوتستراب باستعمال التخطيط المرن Flex Box وهي لا تحوي أية هوامش بشكل افتراضي.

أي بطاقة في بوتستراب يجب أن يكون لها "حاوية". هذه الحاوية عبارة عن عنصر div له الصنف التنسيقي ‎.card. بالنسبة لمحتويات الحاوية فلدينا العديد من الإمكانيات. يمكن بشكل أساسي، أن تحتوي البطاقة على نص عادي فحسب. أمّا بالنسبة للشكل النموذجي، فيمكن أن يكون لها التنسيق التالي:

  • صورة توضيحية في الأعلى.
  • جسم البطاقة، والذي يحتوي على عنوان البطاقة ونص توضيحي.

انظر إلى البطاقة النموذجية التالية: 

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="image-description">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">نص بسيط لوصف المنتج أو أي شيء تود الحديث عنه</p>
      <a href="#" class="btn btn-primary">زر عادي</a>
    </div>
  </div>

سيشكل العنصر div مع الصنف ‎ .card الحاوية الخاصة بالبطاقة ككل. داخل هذا الحاوية، لاحظ وجود عنصر الصورة img مع الصنف ‎ .card-img-top، ستلاحظ أيضًا وجود عنصر div آخر يمثّل جسم البطاقة له الصنف ‎ .card-body. يتكوّن جسم البطاقة في مثالنا هذا من قسمين:

  • القسم الأول هو عنوان البطاقة باستخدام الصنف ‎.card-title
  • القسم الثاني هو نص البطاقة باستخدام الصنف ‎.card-text . يمكن بشكل اختياري إضافة زر لهذا القسم كما فعلنا في مثالنا هذا.

عند معاينة الشيفرة السابقة ستحصل على شكل شبيه بما يلي:

1.png

كما أسلفت قبل قليل توجد الكثير من الإمكانيات التي توفرها البطاقة. يمكن مثلًا إضافة عنوان فرعي باستخدام الصنف ‎.card-subtitle ويُوضع هذا العنوان الفرعي كما هو واضح أسفل العنوان الرئيسي في حال الرغبة. كما يمكن وضع روابط ضمن جسم البطاقة، بتنسيق متوافق معها باستخدام عنصر a مع الصنف ‎.card-link

يمكن أيضًا جعل البطاقة تعرض قائمة من مجموعة من العناصر . انظر إلى التعديل التالي الذي أجريته على الشيفرة السابقة: 

<div class="card" style="width: 18rem;">
    <img src="images/tmp.png" class="card-img-top" alt="image-description">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">نص بسيط لوصف المنتج أو أي شيء تود الحديث عنه</p>
      <a href="#" class="btn btn-primary">زر عادي</a>
    </div>
<!--بداية التعديل -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">عنصر 1</li>
      <li class="list-group-item">عنصر 2</li>
      <li class="list-group-item">عنصر 3</li>
    </ul>
<!--نهاية التعديل -->
  </div>

لاحظ الشيفرة الجديدة من المثال الأخير. وضعت عنصر قائمة غير مرتبة ul مع الصنف ‎.list-group و الصنف ‎.list-group-flush. الصنف الأخير وظيفته جمالية فقط، حاول إزالته وانظر الفرق.

عند معاينة الشيفرة السابقة ستحصل على شكل شبيه بما يلي:

2.png

يمكن أيضًا الاستغناء عن الصورة التوضيحية في الأعلى واستخدام ترويسة بدلًا منها. كما ويمكن أيضًا وضع تذييل للبطاقة. انظر إلى الشيفرة التالية: 

<div class="card" style="width: 18rem;">
    <div class="card-header">ترويسة مناسبة</div>

    <div class="card-body">
      <p class="card-text">نص بسيط لوصف المنتج أو أي شيء تود الحديث عنه</p>
      <a href="#" class="btn btn-primary">زر عادي</a>
    </div>

    <div class="card-footer text-muted">تذييل مناسب</div>
  </div>

لاحظ اولًا أن كلًا من الترويسة والتذييل موجودان خارج جسم البطاقة ضمن عنصر يdiv منفصلين. لعنصر div الذي يحوي الترويسة الصنف ‎.card-header أما لعنصر div الذي يحوي التذييل الصنف ‎.card-footer. لاحظ أيضًا كيف استخدمت الصنف ‎.text-muted لجعل نص التذييل باهتًا بعض الشيء. يمكنك بالطبع إزالة هذا التنسيق إن أحببت. ستحصل على الشكل التالي عند معاينة الشيفرة السابقة:

3.png

يمكنك الإطلاع على المزيد من الخيارات المتاحة بزيارة صفحة التوثيق الرسمية لمكوّن البطاقة Card.

التعرّف على مكون الشرائح الدوارة Carousel في بوتستراب

هو من المكوّنات المفيدة ضمن صفحات الويب. فمن خلاله يمكن عرض شرائح للمستخدمين ذات محتوى متنوّع وقابل للدوران بشكل تلقائي، أو بالنقر على أزرار تنقّل أو بمزيج بينهما. يمكن أن يكون هذا المحتوى عبارة عن صورة مع نص وصفي، أو يمكن حتى أن يكون محتوى مخصّص للغاية كما سنفعل في مشروعنا "نبيه". ولا يمكن في بوتستراب أن تكون مكوّنات Carousel متداخلة nested فيما بينها.

يمكن استخدام هذا المكوّن من خلال عنصر div مع التنسيقين ‎.carousel و ‎.slide. يحتوي كل مكّون Carousel على عنصر div آخر له التنسيق ‎.carousel-inner يحتوي بدوره على الشرائح الفعلية التي ستظهر للمستخدم. كل شريحة من هذه الشرائح عبارة عن عنصر div له التنسيق ‎.carousel-item. يجب أن يكون لإحدى هذه الشرائح تنسيق آخر هو ‎.active للدلالة إلى الشريحة الحالية (الفعّالة) التي سُتعرض أولًا للمستخدم.

انظر إلى مكوّن Carousel نموذجي ضمن الشيفرة التالية: 

<div id="carouselComponent" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

ستظهر الشريحة التي تحمل التنسيق active أولًا أمام المستخدم. ثم ستدور الشرائح بالتناوب أمام المستخدم بشكل تلقائي ضمن فترات زمنية محّددة. يمكنك وضع صور مناسبة ضمن السمة src لكل صورة لكي ترى النتيجة بشكل فعلي.

يمكن وكخيار إضافي، استخدام التنسيق ‎.carousel-dark (يُوضع بجوار التنسيقين ‎.carousel و ‎.slide لعنصر div الذي يمثّل الحاوية الرئيسية لمكوّن Carousel)، وذلك لإكساب مكوّن carousel تنسيقًا داكنًا بعض الشيء.

كما وسبق أن رأينا في عنصر البطاقة ، يحتوي عنصر Carousel على تشكيلة متنوّعة من الخيارات في العرض. يمكن مثلًا إضافة أزرار انتقال تسمح للمستخدم بالتنقّل اليدوي عوضًا عن التنقّل التلقائي. أضف إلى الشيفرة السابقة، الشيفرة التالية (ضعها قبل آخر وسم إغلاق <‎/div>): 

<button class="carousel-control-prev" type="button" data-bs-target="#carouselComponent" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselComponent" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

يمكن أيضًا وضع مؤشّر يظهر أسفل مكوّن Carousel للدلالة على عدد الشرائح الموجودة بالإضافة إلى موقعك الحالي ضمن هذه الشرائح. يمكن وضع هذا المؤشّر من خلال عنصر div له التنسيق ‎.carousel-indicators. انظر إلى الشيفرة التالية (ضعها قبل عنصر div ذي التنسيق ‎.carousel-inner مباشرةً): 

<div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselComponent" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselComponent" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselComponent" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

يمكنك الإطلاع على المزيد من الخيارات المتاحة بزيارة صفحة التوثيق الرسمية لمكوّن Carousel.

إنجاز قسم الدورات الأكثر مبيعًا

سنطبّق ما تعلّمناه في الفقرتين السابقتين في إنجاز قسم الدورات الأكثر مبيعًا Best Selling ضمن موقع نبيه. أدرج الشيفرة التالية ضمن القسم best-selling في الملف index.html: 

<div class="section-title">الدورات الأكثر مبيعًا</div>
    <div id="bestSellingCourses" class="carousel carousel-dark slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active"> <!-- الموضع 1-->

          <div class="row">

            <div class="col-lg-3">
              <div class="card"> <!-- الموضع 2-->
                <img src="images/python-product.jpg" class="card-img-top product-image" alt="python-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام بايثون</h5>
                  <p class="product-text card-text">في هذه الدورة سنتعلّم مبادئ البرمجة في لغة بايثون</p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card"> <!-- الموضع 3-->
                <img src="images/github-product.jpg" class="card-img-top product-image" alt="github-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة التعامل مع GitHub</h5>
                  <p class="product-text card-text">تعلّم كيف تدير مشاريعك البرمجية من حيث إدارة الإصدار والمساهة في مشاريع برمجية أخرى.</p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card"> <!-- الموضع 4-->
                <img src="images/python-django-product.jpg" class="card-img-top product-image" alt="django-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة تطوير تطبيقات ويب باستخدام بايثون مع Django</h5>
                  <p class="product-text card-text">تعلّم كيف تبني تطبيقات ويب باستخدام لغة بايثون مع Django </p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card"> <!-- الموضع 5-->
                <img src="images/javascript-product.jpg" class="card-img-top product-image" alt="javascript-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام جافاسكريبت</h5>
                  <p class="product-text card-text"> سنتعلّم في هذه الدورة كيفية تطوير تطبيقات الواجهة الأمامية باستخدام جافاسكريبت</p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="row">
            <div class="col-lg-3">
              <div class="card">  <!-- الموضع 6-->
                <img src="images/php-product.jpg" class="card-img-top product-image" alt="php-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة أساسيات البرمجة باستخدام PHP</h5>
                  <p class="product-text card-text">في هذه الدورة سنتعلّم مبادئ البرمجة في لغة PHP</p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card">  <!-- الموضع 7-->
                <img src="images/arduino-product.jpg" class="card-img-top product-image" alt="arduino-course">
                <div class="card-body">
                  <h5 class="product-title card-title">دورة التعامل مع أساسيات Arduino</h5>
                  <p class="product-text card-text">تعلّم كيف تبني أنظمة مضمنة تتضمّن مشاريع بسيطة باستخدام Arduino</p>
                  <a href="#" class="btn btn-primary">أضف إلى السلة</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
 <!-- الموضع 8-->
      <button class="carousel-control-prev" type="button" data-bs-target="#bestSellingCourses"
        data-bs-slide="prev">        
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>      
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#bestSellingCourses"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </button>
    </div>

انتقل الآن الى الملف styles.css وأضف إليه التنسيق التالي قبل تنسيقات قسم الترويسة Header Section: 

.section-title{
    text-align: center;
    font-size: xx-large;
    padding: 3rem 0;
}

الهدف من ذلك هو فقط تنظيم الملف styles.css. ثم بعد ذلك أضف التنسيقات التالية إلى آخر محتويات الملف: 

/*Best Selling Section*/

.carousel-inner{
    padding: 0 5%;
}
.carousel-control-prev {
    background: linear-gradient(to right, rgba(200,200,200,0), rgba(200,200,200,1));
}

.carousel-control-next {
    background: linear-gradient(to left, rgba(200,200,200,0), rgba(200,200,200,1));
}

.product-image{
    height: 12rem;
}

.product-title{
    height: 4rem;    
}

.product-text{
    height: 6rem;
}

بالنسبة لشيفرة HTML، نبدأ قسم المنتجات الأكثر مبيعًا بنص توضيحي يُشير إلى بداية هذا القسم له التنسيق ‎.section-title ثم يبدأ بعد ذلك مكوّن Carousel بتنسيق داكن ‎.carousel-dark وبمعرّف bestSellingCourses. يبدأ بعد ذلك مباشرةً الجسم الداخلي له ‎.carousel-inner.

في الواقع سيكون مكوّن Carousel هنا بسيطًا للغاية. سيحتوي هذا المكوّن على عنصري ‎.carousel-item وبعبارة أخرى سيحتوي على شريحتين. ستحمل الشريحة الأول الصنف ‎.active كما هو واضح (الموضع 1). يوجد ضمن الشريحة الأولى أربعة منتجات وُضعت ضمن سطر ‎.row ووُزّعت على أربعة أعمدة ‎.col-lg-3. وُضِع كل منتج ضمن بطاقة card منفصلة (انظر إلى المواضع 2 و 3 و 4 و 5). أمّا الشريحة الثانية فتحتوي على منتجين فقط (انظر إلى الموضعين 6 و 7).

بالنسبة إلى زري التنقّل لمكوّن الشرائح الدوّارة فيمكنك أن تجدهما اعتبارًا من الموضع 8. لاحظ أنني قد أجريت بعض التعديل على الصنفين ‎ .carousel-control-prev و ‎ .carousel-control-next ضمن الملف styles.css حيث أنّني قد أضفت تدرّجًا لونيًا لهذين الزرّين كي يسهل للمستخدم تمييزهما فورًا.

بمعاينة الشيفرة السابقة ضمن المتصفّح ستحصل على شكل شبيه بما يلي:

4.png

5.png

إنجاز القسم الخاص بأصناف الدورات

لنبدأ الآن بتجهيز القسم الخاص بأصناف الدورات، والذي سيتكوّن في مشروعنا هذا من ستة أقسام وهي:

سنستخدم من أجل كل قسم مكوّن البطاقة من بوتستراب، وسنوزّع هذه البطاقات على سطرين مستقلين كما في الشكل التالي:

6.png

أضف الآن شيفرة HTML التالية إلى القسم course-categories: 

<div class="section-title">الأقسام المتاحة</div>
    <div class="row">
      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/programming-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">البرمجة</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/marketing-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">التسويق</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/freelance-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">العمل الحر</p>
            </div>
          </div>
        </a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/cloud-computing-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">التطبيقات السحابية</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/certificates-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">الشهادات العالمية</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a class="category-link" href="#">
          <div class="card category-card">
            <img src="images/apps-category.png" class="card-img-top category-image"
              alt="certifications-category">
            <div class="card-body">
              <p class="card-text category-text">البرامج والتطبيقات</p>
            </div>
          </div>
        </a>
      </div>
    </div>

تتألف كل بطاقة من صورة توضيحية، بالإضافة إلى نص وصفي تحت الصورة. ستحتاج أيضًا إلى إضافة التنسيقات التالية إلى الملف styles.css أسفل التنسيقات السابقة: 

#course-categories{
    background-color: #eee;
    padding: 0 10% 8px;
}

#course-categories .row{
    margin-bottom: 72px;
}

.course-categories-title{
    text-align: center;
    font-size: xx-large;
    padding: 3rem 0;
}

.category-card{
    margin-left: 24px;
    margin-right:24px;
    padding: 48px 0px 32px;
}

.category-image{
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.category-text{
    text-align: center;
    font-size: 1.3rem;
}

.category-link{
    text-decoration: none;
    color:inherit;
}

أعتقد أنّه لا جديد في التنسيقات السابقة أو حتى في شيفرة HTML الخاصّة في هذا القسم.

أيقونات Bootstrap 5

يأتي مع بوتستراب 5 مجموعة غنية من الأيقونات الجميلة والمتنوّعة التي يمكنك استخدامها في التطبيقات التي تُنشئها سواءً باستخدام بوتستراب 5 أو حتى بغيره.

لأيقونات بوتستراب 5 نوعان:

  • أيقونات على شكل خطوط ويب Web Fonts.
  • أيقونات بتنسيق SVG.

سنستخدم هنا النوع الأوّل: أيقونات Web Fonts.

تكون هذه الأيقونات منفصلة عن بوتستراب، وقبل استخدامها، ينبغي إضافة مرجع إلى الصفحة الرئيسية الخاصة بنا. أضف الشيفرة التالية إلى قسم head ضمن الملف index.html: 

<!-- Boostrap 5 icons - web font -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

يمكن استخدام هذه الأيقونات بشكل مستقل كما سنفعل في الفقرة التالية. كما يمكن استخدامها مع الأزرار العادية وغيرها من العناصر.

إنجاز قسم التذييل Footer

وصلنا إلى الجزء الأخير في موقع "نبيه" وهو قسم التذييل. سيكون هذا القسم بسيطًا وجميلًا إذ أنّنا سنضيف إليه الأيقونات المعبّرة عن قنوات التواصل الإجتماعي بالإضافة إلى أيقونة إرسال رسالة بريد إلكتروني، ولن تكون هذه الأيقونات تُشير إلى صفحات حقيقية بطبيعة الحال.

كما سندرج تحت الأيقونات السابقة، نصًا بسيطًا يُشير إلى موقع نبيه كعلامة مسجلة. أضف الشيفرة البرمجية التالية ضمن القسم footer ضمن الملف index.html: 

<footer>
      <div class="container-fluid">
        <i class="bi bi-facebook social-icon"></i>
        <i class="bi bi-twitter social-icon"></i>
        <i class="bi bi-instagram social-icon"></i>
        <i class="bi bi-envelope social-icon"></i>
        <p>© دورات نبيه 2021</p>
      </div>
    </footer>

التنسيقات مثل bi bi-facebook وغيرها ضرورية لاستخدام الأيقونة المطلوبة مع عنصر i ما.

أضف أيضًا التنسيقات التالية إلى الملف styles.css: 

footer{
    height: 200px;
}

.social-icon {
    margin: 20px 10px;
  }

#footer .container-fluid{
    padding: 7% 15%;
    text-align: center;
}

عند المعاينة، ستحصل على شكل شبيه بما يلي:

7.png

أعتقد أنّ التنسيقات السابقة واضحة ومباشرة ولا تحتاج إلى أي تعليق إضافي. وبذلك نكون قد وصلنا إلى نهاية هذا الدرس، وبالتالي إلى نهاية تصميم الصفحة الرئيسية لموقع "نبيه". يمكنك الوصول إلى الشيفرة كاملة عن طريق زيارة هذا المستودع، ضمن المجلّد chapter05 أو من الملف المرفق في نهاية المقال، وكما ويمكنك الإطلاع على نسخة حيّة من هذه الصفحة من github.io.

خاتمة

تعرّفنا في هذا الدرس على مكوّنين مهمّين وهما البطاقة Card والشرائح الدوّارة Carousel، وتعرّفنا على أهم الخصائص المتاحة لهما. كما تعرّفنا على مكتبة أيقونات Font Awesome التي تضم تشكيلة رائعة من الأيقونات المميزة، والتي يمكنك استخدامها بشكل مجاني في تطبيقاتك المختلفة. كما عملنا على تطبيق ما تعلّمناه في تصميم وإنجاز باقي أقسام الصفحة الرئيسية لموقع نبيه (قسم الدورات الأكثر مبيعًا والقسم الخاص بأصناف الدورات و قسم التذييل).

bootstrap5-tutorial-master.zip

اقرأ أيضًا

]]>1458Mon, 07 Feb 2022 16:06:00 +0000تطبيق مخطط الصفحة في بوتستراب على صفحات الويبhttps://academy.hsoub.com/programming/css/bootstrap/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D9%85%D8%AE%D8%B7%D8%B7-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-%D8%B9%D9%84%D9%89-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r1457/

سنتعلّم كيفية تطبيق مخطّط الصفحة في بوتستراب على صفحات الويب من خلال تحديث موقع "نبيه" بآخر ما تعلّمناه في الفصول الثلاثة السابقة، فصل مدخل إلى إطار العمل بوتستراب 5 وفصل شريط التنقل في بوتستراب 5، وبالأخص الفصل الأخير "مخطط الصفحة في بوتستراب 5" من سلسلة bootstrap 5، فمن الضروري جدًا أن تكون قد اطلعت على الدروس السابقة قبل الإكمال في هذا الدرس لأنّه مرتبط بها بشكل وثيق.

سنبدأ بتحديد الأقسام الأساسية في الصفحة الرئيسية، ومن ثمّ سنعمل على تنسيقها بحيث تكون الصفحة متجاوبة مع قياسات الشاشة المختلفة.

سيكون هذا الموضوع موزعًا على هذا الدرس بالإضافة إلى الدروس اللاحقة. سنهتم في هذا الدرس بتعريف الأقسام الرئيسية، وتحضير أصول الموقع، بالإضافة إلى تصميم القسم الأول (الترويسة). بينما سنعمل في الدروس اللاحقة على إكمال تصميم وتنفيذ باقي أقسام الصفحة.

سنعمل في هذا الدرس على:

  • تعريف الأقسام الأساسية للصفحة الرئيسية في موقع "نبيه".
  • تحضير أصول الموقع من خطوط وصور وألوان.
  • تصميم قسم الترويسة.

هذا الفصل جزء من سلسلة فصول عن بوتستراب 5، وإليك كامل فهرس السلسلة:

تعريف الأقسام الأساسية للصفحة الرئيسية في موقع "نبيه"

سنجعل للصفحة الرئيسية في موقع "نبيه" أربعة أقسام أساسية هي:

  • الترويسة Header.
  • قسم الدورات الأكثر مبيعًا Best Selling.
  • القسم الخاص بأصناف الدورات Course Categories.
  • قسم التذييل Footer.

سأعمل على وضع كل قسم من الأقسام الأربعة السابقة ضمن عنصر <section> مع تسمية مناسبة، ليسهل فيما بعد استهداف كل قسم على حدة باستخدام CSS.

بالعودة إلى الملف index.html ضمن مجلّد مشروع "نبيه" ضمن Visual Studio Code، سنعمل على إضافة الأقسام الأربعة الرئيسية. سيكون القالب الذي سننطلق منه على النحو التالي: 

<!doctype html>
<html lang="ar" dir="rtl">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <link href="/css/styles.css" rel="stylesheet" />

    <title>دورات نبيه</title>
</head>

<body>

    <section id="header">

    </section>

    <section id="best-selling">

    </section>

    <section id="course-categories">

    </section>

    <section id="footer">

    </section>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

استخدمنا نسخة بوتستراب الخاصة بدعم اللغة العربية، وغيّرنا اتجاه اللغة للصفحة كاملةً لتكون من اليمين إلى اليسار (انظر إلى السمتين dir و lang ضمن الوسم <html>) - عد إلى درس شريط التنقل في بوتستراب 5.

لاحظ أيضًا كيف وضعنا أربعة عناصر <section> ضمن القسم <body> وذلك للتعبير عن الأقسام الأربعة الأساسية في الصفحة الرئيسية. سنبدأ في الفقرة التالية التحدث عن أصول الموقع.

تحضير أصول الموقع من خطوط وصور وألوان

تُعتبر أصول الموقع من خطوط وصور وألوان بمثابة الروح لجسد الموقع! فمن خلالها يتم إكساب الموقع تلك الجاذبية التي تحفّز الزوار على التفاعل مع صفحاته. في موقعنا "نبيه" سنعمل على بناء تصميم بسيط ولكنّه جذّاب باستخدام أقل الأصول الممكنة، لأنّ الهدف من وراء هذه السلسلة هو التركيز على الاستخدام العملي لبوتستراب 5.

الخطوط

بالنسبة للخطوط يمكنك زيارة موقع خطوط غوغل والبحث عن الخطين التاليين: Almarai و Tajawal. سأستخدم الخط Tajawal كخط أساسي لمحتوى الموقع، أمّا الخط Almarai فسأستخدمه فقط من أجل اسم الموقع الرئيسي (اسم العلامة التجارية في قسم العنوان).

بعد البحث عن خط Tajawal ضمن موقع خطوط غوغل وإيجاد هذا الخط، انقر عليه لفتح الصفحة الرئيسية له. لاحظ توفر أنماط مختلفة لهذا الخط. اختر الأنماط: 200 و 300 و 400 و 500 و 700 و 800 و 900 (انظر الوصف الخاص بكل نمط في الطرف الأيسر) وذلك بالنقر على الزر Select this style الموجود في الطرف الأيمن.

ستلاحظ أنّه بمجرّد اختيارك للنمط الأوّل سيبدأ الموقع بتجهيز الرابط اللازم لتضمين هذا الخط في موقعك، كما في الشكل التالي:

1.png

عُد إلى الصفحة الرئيسية للموقع، وابحث الآن مرة أخرى عن الخط Almarai. اختر الأنماط 300 و 400 و 700 و 800 بنفس الطريقة السابقة. يمكنك في أي وقت استعراض الخطوط والأنماط التي اخترتها بالنقر على زر استعراض عائلات الخطوط المختارة الموجود كأيقونة في الطرف الأيمن العلوي من الصفحة بجوار زر Download family.

عند هذه النقطة انسخ الرابط الخاص بعائلات الخطوط التي اخترتها. ستحصل على رابط شبيه بما يلي: 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">

سنضع هذه الروابط ضمن القسم <head> من الصفحة، قبل وسم الإغلاق </head> مباشرة.

الألوان والصور

تتيح لنا العديد من مواقع الإنترنت استخدام تشكيلة منسجمة من الألوان لاستخدامها في تصميماتنا، وذلك لتوفير الوقت والجهد على المطوّر أو المصمّم في الموائمة بين الألوان واختيار المتجانس منها في تصميماته. بالنسبة لي، استخدمت هذا الموقع لاختيار تشكيلة ألوان موقع "نبيه". حيث عملت على استخدام ألوان بسيطة للغاية ضمنه وهي على الشكل التالي: ‎ #‎eee‎ و ‎#fff و ‎#393e46 و ‎#233e8b. من الأفضل دومًا اختيار أربعة ألوان على الأكثر. انظر إلى موقع ColorHunt.

أمّا بالنسبة للصور، فهناك العديد من المواقع الأخرى التي توفّر صور جيدة سواءً كانت مجانية أو بمقابل مادي لاستخدامها في تصميماتك المختلفة. في حالتنا هذه، استخدمنا صور مجّانيّة بالطبع. يمكنك الحصول على مثل هذه الصور من موقع unsplash مثلًا.

على أية حال يمكنك الحصول على تشكيلة الصور التي اخترتها من ملف الصور المرفق في نهاية المقال. اعمل على تنزيل الملف، ثم فك ضغطه، وبعد ذلك انقل الصور الموجودة ضمن المجلّد الناتج إلى المجلّد images الذي أنشأناه مسبقًا ضمن مجلّد مشروع "نبيه".

تصميم قسم الترويسة

سيحتوي قسم الترويسة بحد ذاته على شريط للتنقل بالإضافة إلى مساحة خاصة سنسميها Main View لإبراز الهدف من الموقع كما في الشكل التالي:

2.png

تصميم شريط التنقل

انتقل إلى الملف index.html، ثم أضف ضمن قسم الترويسة header ضمن جسم المستند <body> الشيفرة التالية: 

<section id="header">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-light"> <!-- الموضع 1 -->
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="/images/nabih-logo.png" style="margin-left: 8px;" alt="" height="32">
                    نبيه
                </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <!-- الموضع 2 -->
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">  <!-- الموضع 3 -->
                <ul class="navbar-nav me-2 mb-2 mb-lg-0 ms-3">
                    <li class="nav-item"><a class="nav-link" href="#">التصنيفات</a></li>
                </ul>
                <form class="d-flex me-auto w-100"> <!-- الموضع 4 -->
                    <input class="form-control" type="search" placeholder="ابحث عن أي موضوع">
                    <img class="nav-link" src="images/icons8-shopping-cart-32.png" />
                    <button  type="button" class="btn btn-dark nabih-buttons">دخول</button>
                    <button  type="button" class="btn btn-outline-dark nabih-buttons">تسجيل جديد</button>
                </form>
              </div>
            </div>
          </nav>
    </section>

أود التحدث عن بعض النقاط الواردة في الشيفرة السابقة:

أولًا، استخدمت في "الموضع 1" الصنف ‎.navbar-expand-lg مع العنصر nav، إذ يسمح هذا الصنف بنشر عناصر شريط التنقّل، أو لنقل يجعلها مرئية عندما يكون عرض الشاشة كبيرًا أو فوق الكبير. أمَا في حال كان الأمر خلاف ذلك، فستُطوى "تختفي" عناصر شريط التنقل ويظهر مكانها زر قابل للنقر. انظر الشكل التالي:

3.png

يسمح ذلك بإنشاء صفحات ويب متجاوبة مع الأجهزة ذات الشاشات الصغيرة. إذا نقرت الزر الذي يظهر في يسار الشكل السابق، ستظهر العناصر الخاصة بشريط التنقل.

ثانيًا، يمكن إنجاز هذه الميزة بوضع زر <button> "الموضع 2" ومنحه الصنف ‎.navbar-toggler. سيحتاج هذا الزر أيضًا إلى أن نمنحه السمة data-bs-target والتي تحدّد معرّف العنصر المراد طيّه. وضعت القيمة ‎#navbarSupportedContent لهذه السمة. وهي معرّف العنصر <div> الموجود في ثالثًا، "الموضع 3" والذي يحتوي بطبيعة الحال على العناصر المراد طيها في حال كان عرض الشاشة أقل من الحجم "كبير" في مثالنا هذا، فستجد في "الموضع 3" عنصر <div> الذي تحدثنا عنه توًا. لاحظ كيف أسندنا له الصنفان collapse navbar-collapse لمنحه قابلية الطي (أو الاختفاء إن صح التعبير في حال كان عرض الشاشة أقل من كبير). على أية حال، عند نقر الزر الصغير، سيظهر هذا العنصر بمحتوياته (عناصر شريط التنقل) مرّة أخرى.

رابعًا، يوجد في "الموضع 4" عنصر <form>، وضعت ضمنه مربع البحث بالإضافة إلى سلة التسوّق وزرين لتسجيل الدخول ولتسجيل جديد. في الحقيقة يحتوي هذا العنصر على معظم عناصر شريط التنقّل، وسنتحدث عن المزيد حول عناصر الإدخال من المستخدم لاحقًا في درس قادم.

انتقل الآن إلى الملف styles.css الذي أنشأناه في الدرس الثاني، وضع فيه التنسيقات التالية: 

body{
    font-family: 'Tajawal', sans-serif;
    font-size: 1em;
}

.nabih-buttons{
    margin: 0 4px; 
    padding: 6px 8px;
    width: 7rem;
    white-space: nowrap; 
}

.container-fluid{
    padding:0 5%;
}

/*Header Section*/

#header{
    background-color: #eee;
}

.navbar-brand{
    font-family: 'Almarai';
    color:#393e46;
    font-size: 2.5rem;
    font-weight:900;
    margin: 0;
}

التنسيقات الثلاثة الأولى هي تنسيقات عامة يمكن استخدامها في كامل الصفحة.

  • التنسيق الأول body مسؤول عن ضبط نوع الخط لكامل الصفحة إستنادًا للخط الذي حصلنا عليه من موقع خطوط غوغل كما مرّ معنا قبل قليل.
  • التنسيق الثاني ‎.nabih-buttons فمسؤول عن ضبط الشكل العام لأي زر سنستخدمه ضمن الصفحة.
  • أمّا التنسيق الثالث ‎.container-fluid فهو تنسيق محجوز لبوتستراب، لكننا سنجري تعديلا بسيطا على الحشوة padding الخاصة به لكي تمنحه مساحة من اليمين ومن اليسار بمقدار 5% كما هو واضح. بالنسبة لما يخص قسم الترويسة Header Section، فقد وضعت حاليًا تنسيقين متعلّقان بشريط التنقل، على الشكل التالي:
  • استهدفت القسم header بتنسيق بسيط، حيث عملت على تغيير لون الخلفية له.
  • التنسيق ‎.navbar-brand هو أيضًا تنسيق محجوز لبوتستراب، ولكن أردت هنا إضافة بعض التعديلات عليه لكي يتناسب مع احتياجاتنا، وخصوصًا فيما يتعلّق بنوع خط العلامة التجارية والذي حصلنا عليه أيضًا من موقع خطوط غوغل.

نكون بذلك قد انتهينا من تهيئة شريط التنقّل، ولكننا مازلنا ضمن قسم الترويسة. سننتقل الآن إلى تهيئة قسم العرض الرئيسي Main View في الموقع.

تصميم قسم العرض الرئيسي Main View

أضف الشيفرة التالية ضمن الملف index.html مباشرةً بعد الشيفرة الخاصة بشريط التنقّل، وقبل وسم الإغلاق <‎ /section> : 

<!--Main View-->
        <div class="mainview">
            <div class="row">
                <div class="col-lg-6">
                    <h1 class="mainview-heading">دورات غنية بجودة عالية</h1>
                    <h3 class="mainview-subheading"> طور نفسك لتنافس في سوق العمل</h3>
                </div>
                <div class="col-lg-6">

                    <img class="mainview-image" src="/images/show-case.jpg" />
                </div>
            </div>
        </div>

قسم العرض الرئيسي بسيط وواضح. استخدمت هنا مخطط الشبكة، وذلك بإضافة سطر عن طريق وضع الصنف التنسيقي row ضمن عنصر <div> كما هو واضح. ثم عملت على تقسيم هذا السطر إلى قسمين متساويين (لاحظ التنسيقين ‎.col-lg-6 ). وضعت في القسم الأول نصّين وصفيين، أمّا في القسم الثاني فقد وضعت صورة تعبيرية.

لكي يظهر قسم العرض الرئيسي بشكل صحيح، أضف التنسيقات التالية إلى آخر محتويات الملف styles.css: 

.mainview-heading {
    color: white;
    font-size: 4em;
    text-align: right;
}

.mainview-subheading{
    color: white;
    margin: 64px 0;
    text-align: right;
}

.mainview{
    background-color: #233e8b;
    padding: 3% 5%;
}

.mainview-image{
    border-radius: 2%;
    width: 500px;
    float: left;    
}

أعتقد أنّ هذه التنسيقات بسيطة وواضحة:

  • نعمل في البداية على تنسيق النصوص التي ستظهر في الجانب الأيمن (الصنفان ‎.mainview-heading و ‎.mainview-subheading)، ستعمل التنسيقات على تحديد لون الخط وحجمه ومحاذاة النص نحو اليمين.
  • نعمل أيضًا على تنسيق عنصر الصورة الذي سيظهر في الجانب الأيسر، حيث نحدّد عرض الصورة ونكسب حوافها الأربعة انحناءً جميلًا، كما نجعلها أيضًا تظهر (تطوف) في أقصى اليسار (float: left).
  • ننسّق أيضًا قسم العرض الرئيسي بكامله (الصنف ‎.mainview) بإكسابه لون خلفية محدّد وإضافة بعض الحشوة المناسبة إلى أطرافه الأربعة.

بعد حفظ الملفين index.html و styles.css يمكنك معاينة الصفحة الآن. ستحصل على شكل شبيه بما يلي:

4.png

نكون الآن قد انتهينا من قسم الترويسة. سنكمل باقي الأقسام الخاصة بالصفحة في الدروس التالية.

خاتمة

أنجزنا في هذا الدرس الكثير من العمل! حيث خططنا الصفحة الرئيسية وقسمناها إلى أربعة أقسام رئيسية أنجزنا منها القسم الأول (قسم الترويسة). سنتابع عملنا في الدروس التالية في التعرّف على مكوّنات جديدة في بوتستراب 5، بالإضافة إلى إكمال ما تبقى من أقسام رئيسية ضمن موقع "نبيه".

ملف ch04-images-resource

اقرأ أيضًا

]]>1457Tue, 01 Feb 2022 16:06:00 +0000مخطط الصفحة في بوتستراب 5https://academy.hsoub.com/programming/css/bootstrap/%D9%85%D8%AE%D8%B7%D8%B7-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-5-r1317/

مرحبًا بك في الدرس الثالث من سلسلة تعليم بوتستراب 5. سنتعرّف في هذا الدرس على مخطط الشبكة Grid Layout وهو المخطط المعتمد في بوتستراب. سنمر على النقاط التالية في هذا الدرس:

  • الحاوية Container.
  • مخطط الشبكة Grid.
  • استخدام الأعمدة بطريقة متجاوبة.

هذا الدرس مهم وأساسي في التعرّف على بوتستراب وكيف يعمل.

الحاوية Container

تُعَد الحاوية حجرة البناء الأساسية في بوتستراب، وهي عبارة عن عنصر div يحمل التنسيق container أو أخواته، وذلك لكي يكسب هذا العنصر بعض التنسيقات المسبقة والمفيدة مما يسمح باحتواء بقية العناصر ضمن الشاشة المطلوبة بيسر وسهولة. يُعتبر استخدام الحاوية ضروريًا مع مخطط الشبكة ضمن بوتستراب كما سنرى بعد قليل.

يوجد ثلاثة أنواع من الحاويات في بوتستراب وهي:

  • الحاوية العادية: عبارة عن عنصر div يحمل صنف التنسيق container.
  • الحاوية الإنسيابية: وهي عنصر div يحمل الصنف التنسيقي container-fluid ويكون عرض هذه الحاوية هو العرض الكامل للشاشة أي ‎ 100%
  • الحاويات ذات العرض المخصص: وهي عبارة عن خمس حاويات: container-sm و container-md و container-lg و container-xl و container-xxl ومعناها على الترتيب: الحاوية ذات العرض الصغير، وذات العرض المتوسط، وذات العرض الكبير، وذات العرض الأكبر، وذات العرض الكبير جدًا.

الأمر المميز في حاويات العرض المخصّص هو أنّ الصفة المرتبطة معها (صفة العرض) لا تُفعّل إلّا إذا وصل عرض الحاوية إلى عرض أصغري يمكنك أن تدعوه عتبة الاستجابة Break Point. لكي نفهم الموضوع على أكمل وجه، أنشئ ملفًا جديدًا ضمن مجلّد العمل nabih سمّ الملف test-container.html وانسخ الكود التالي إليه مع ملاحظة أنّ التنسيقات التي تحتوي على background-color وضعتها فقط لتمييز الحاويات عن بعضها وليس لها أي دور آخر: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>اختبار الحاويات</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    </head>
    <body>
         <div class="container" style="background-color: royalblue;">حاوية عادية</div>
          <div class="container-sm" style="background-color:sandybrown;">عرض مئة بالمئة حتى عتبة العرض الصغير</div>
          <div class="container-md" style="background-color: salmon;">عرض مئة بالمئة حتى عتبة العرض المتوسط</div>
          <div class="container-lg" style="background-color: lightpink;">عرض مئة بالمئة حتى عتبة العرض الكبير</div>
          <div class="container-xl" style="background-color: lightgreen;">عرض مئة بالمئة حتى عتبة العرض الأكبر</div>
          <div class="container-xxl" style="background-color: lightsteelblue;">عرض مئة بالمئة حتى عتبة العرض الكبير جدًا</div>
          <div class="container-fluid" style="background-color: lightpink;">حاوية انسيابية</div>

          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous"></script>
    </body>
</html>

احفظ التغييرات ثم انقر بزر الفأرة الأيمن على هذا الملف، واختر تشغيله عن طريق الإضافة Live Server. ستظهر محتويات الملف ضمن المتصفح. جرّب الآن تصغير عرض نافذة المتصفّح إلى أصغر حد ممكن، ستلاحظ أنّ جميع الحاويات قد شغلت العرض الأعظمي الممكن ‎ 100%كما في الشكل التالي وذلك بسبب أنّ العرض الحالي هو صغير جدًا ولم يصل بعد إلى عتبة الإستجابة الأولى "صغير" :

1.png

ابدأ الآن بالسحب وتوسيع عرض النافذة تدريجيًا. ستلاحظ أنّ الحاويتان العادية وذات العرض الصغير قد أخذتا منحًا مغايرًا عن باقي الحاويات الأخرى. كما في الشكل التالي:

2.png

وسبب ذلك أنّ الحاوية العادية يكون عرضها دومًا مساويًا لقيمة الثابت max-width والذي تتغيّر قيمته وفقًا لاستعلامات Media Queries. أمّا الحاوية ذات العرض الصغير فقد بلغت عتبة الاستجابة الخاصة بها عندما بدأت بتوسيع عرض النافذة، وبالتالي سيصبح عرضها مساويًا أيضًا لقيمة الثابت max-width. إذا تابعت توسيع عرض النافذة بنفس الأسلوب، ستلاحظ أنّه عندما تبلغ كل عتبة ستنضم إحدى الحاويات إلى رفيقاتها السابقة في اكتساب العرض max-width حتى إذا ما وصل عرض النافذة لأقصى حد ممكن (على اعتبار أنّك تستخدم شاشة حاسوب عادية) ستحصل على شكل شبيه بما يلي:

3.png

لاحظ أنّ الحاوية الإنسيابية container-fluid بقي عرضها ثابتًا بحيث يأخذ عرض الشاشة كاملًا ‎ 100%. يلخص الجدول التالي عتبات الإستجابة (قيم max-width) لكل من الحاويات السابقة:

  صغير جدا - أصغر من 576 بيكسل صغير - أكبر من أو يساوي 576 بيكسل متوسط - أكبر من أو يساوي 768 بيكسل كبير- أكبر من أو يساوي 992 بيكسل الأكبر - أكبر من أو يساوي 1200 بيكسل كبير جدًا - أكبر من أو يساوي 1400 بيكسل
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

يمكنك الآن التخلص من الملف test-container.html من مجلّد المشروع إن أحببت.

مخطط الشبكة Grid

يمكنك أن تبني باستخدام مخطط الشبكة في بوتستراب واجهات بمختلف الأشكال والأحجام. يعتمد مخطط الشبكة على مفهوم صندوق التخطيط المرن Flex Box في بناء الواجهات، وهو يستخدم، كما سنرى بعد قليل، مزيج من الحاويات والأسطر والأعمدة لتحقيق هذا الهدف.

يدعم مخطط الشبكة ست عتبات استجابة بنفس مبدأ عتبات الإستجابة التي مرّت معنا في فقرة الحاويات، وهي: sm و md و lg و xl و xxl، أمّا السادس فهو للقياس: "صغير جدًا" (أقل من 576 بيكسل) وفعليًا ليس له اختصار محدّد.

يتكوّن مخطّط الشبكة من 12 عمود. تكون الأعمدة محدّدة ضمن أسطر وذلك للتحكم بعدد الأعمدة الموجودة بكل سطر على حدة. في أي سطر، يتوزّع العرض المُتاح بالتساوي على الأعمدة المتماثلة الموجودة ضمنه.

انظر إلى المثال الأساسي التالي الذي يوضّح بنية بسيطة جدًا لاستخدام مخطط الشبكة: 

<div class="container">
        <div class="row">
            <div class="col" style="background-color: lightgreen;">
                Row 1 - Col 1
            </div>
            <div class="col" style="background-color: lightpink;">
                Row 1 - Col 2
            </div>
        </div>
        <div class="row">
            <div class="col" style="background-color: lightsalmon;">
                Row 1 - Col 1
            </div>
            <div class="col" style="background-color: lightblue;">
                Row 2 - Col 2
            </div>
            <div class="col" style="background-color: lightseagreen;">
                Row 3 - Col 3
            </div>
        </div>
    </div>

لاحظ في البداية وجود حاوية وهي ضرورية لكي يعمل مخطط الشبكة. بعد ذلك نبدأ بتعريف الأسطر باستخدام عنصر div مع الصنف التنسيقي row. في الكود السابق عرّفنا سطرين. يحتوي السطر الأوّل على عمودين. نعرّف أي عمود باستخدام العنصر div مع الصنف التنسيقي col (أو أخواته كما سنرى بعد قليل) أمّا السطر الثاني فيحتوي على ثلاثة أعمدة كما هو واضح.

النصوص التي تراها في الكود السابق مثل: "Row 1 - Col 1" هي نصوص توضيحية، أيضًا هنا، جميع تنسيقات background-color هي فقط لتوضيح البنية الناتجة وليس لها أي دور في مخطّط الشبكة.

لاختبار الكود السابق بسرعة يمكن تجريبه مباشرة على موقع مثل codeply.com. يمكنك فيه تجريب الكود بلا تسجيل مسبق. اختر Bootstrap 5 من القائمة الجانبية اليسرى ليظهر مختبر جاهز لتجريب الكود. احذف جميع الكود التلقائي الموجود مسبقًا في قسم HTML الموجود في الناحية اليسرى، وانسخ الكود السابق إليه ضمن هذه المنطقة. بعد ذلك ستلاحظ وجود أيقونة صغيرة أعلى الصفحة تحمل ما يشبه زر تشغيل، انقرها لترى النتائج في الأسفل. ستحصل على شكل شبيه بما يلي:

4.png

يمكنك استخدام هذا الموقع دومًا في حال أردت تجريب ميزة جديدة بسرعة.

كما أوضحنا توًا لدينا 12 عمود ضمن مخطّط الشبكة لكل منها العرض نفسه. ولكن في بعض الأحيان قد نحتاج إلى أن يكون أحد الأعمدة أعرض من باقي الأعمدة الأخرى، أو أن تحتاج أن يكون للأعمدة ضمن سطر ما عرض مختلف لكل منها. في الحقيقة يدعم مخطّط الشبكة هذا الأمر بصورة جميلة. لكي نفهم هذا الأمر تمامًا، تخيّل أنّ العرض المتاح ضمن الحاوية مقسّم إلى 12 حصّة متساوية فيما بينها. عندها يسمح بوتستراب بتخصيص أي عدد من هذه الحصص لأي عمود.

لنفرض مثًلا أنّه يوجد لدينا ثلاثة أعمدة ضمن أحد الأسطر. يمكننا مثلًا تخصيص حصتين للعمود الأول وأربع حصص للعمود الثاني ونترك العمود الثالث في الحالة الافتراضية، أي بدون تعيين أي حصة له. أي كما في الكود التالي: 

<div class="container">
    <div class="row">
        <div class="col-2" style="background-color: lightgreen;">
            Row 1 - Col 1
        </div>
        <div class="col-4" style="background-color: lightpink;">
            Row 1 - Col 2
        </div>
        <div class="col" style="background-color: lightblue;">
            Row 1 - Col 3
        </div>
    </div>
</div>

لاحظ كيف عيّنت الحصص من خلال الأرقام الموجودة بجوار الصنف التنسيقي col، فالعمود الأول أصبح له الصنف التنسيقي col-2 أمّا العمود الثاني فأصبح له الصنف التنسيقي col-4 أمّا العمود الثالث فله الصنف التنسيقي col فقط بدون أي تخصيص للحصص.

جرّب الكود السابق في codeply لتحصل على شكل شبيه بما يلي:

5.png

لاحظ كيف أنّ عرض العمود الثاني هو ضعف العمود الأوّل وهذا أمر منطقي بالطبع، ولاحظ أيضًا أنّ العمود الثالث الذي لم نخصص له أي حصة قد شغل باقي الحصص المتاحة وهي في حالتنا هذه 6 حصص (تذكر حصة العمود الأول + حصة العمود الثاني = 6). إذًا، عندما لا نحدّد أي حصة للعمود فإنّه يشغل دومًا باقي الحصص المتاحة. ولو فرضنا وجود عمود رابع لم نحدد له أيضًا أي حصة (مثل العمود الثالث) فإنّه سيتقاسم باقي الحصص المتاحة الباقية مع العمود الثالث (سيأخذ كل واحد منها 3 حصص) وهكذا. ولا يهم بالطبع فيما إذا كان مثل هذين العمودين (أو أكثر) متجاورين أم متفرقين ضمن بقية الأعمدة الأخرى في حال وجودها.

من الواضح بحسب السيناريو السابق أنّ عدد الأعمدة التي يمكننا إنشاؤها ضمن مخطّط الشبكة هي 12 عمود على الأكثر. وإذا نظرنا إلى هذا الأمر من زاوية أخرى، فيجب أن يكون مجموعة الحصص دومًا يساوي 12 حصة.

استخدام الأعمدة بطريقة متجاوبة

كما رأينا في الفقرة السابقة يمكننا إنشاء حتى 12 عمود ضمن مخطط الشبكة، ولكن المشكلة أنّ هذه الأعمدة ستسلك نفس السلوك عبر جميع الشاشات الممكنة. بمعنى آخر لا يمكننا بحسب المعلومات التي حصلنا عليها في الفقرة السابقة أن نغيّر مثلًا عرض أي عمود إذا تغيرت الشاشة الحالية من شاشة جوال إلى شاشة حاسوب كبيرة وهذا أمر مرغوب جدًا. ففي الحالة العامة يمكن لأي موقع أن يُعرض على شاشة حاسوب عادي، أو على شاشة جوال، ومن المفترض أن يتغير شكل الموقع بشكل يتناسب مع حجم الشاشة التي يُعرض ضمنها لكي يُعتبر هذا الموقع متجاوبًا.

في الحقيقة يوجد حل أنيق يوفره لنا بوتستراب يتمثّل في إضافة بسيطة بجوار رقم الحصة التي ننوي تخصيصها للعمود وذلك على الشكل التالي: 

col-{sm|md|lg|xl|xxl}-n

فمثًلا يمكننا أن نخبر أحد الأعمدة أننا نرغب بأن يأخذ 6 حصص في حال كانت الشاشة متوسطة العرض أو أكثر عندها نكتب col-md-6. في هذه الحالة سيأخذ العمود نصف العرض المتاح للشاشة إذا كان قياسها متوسط أو أعلى. أمّا إذا كان قياس الشاشة أقل من متوسط فإنّه سيأخذ العرض الكامل المتاح للشاشة (إذا كان العمود موجود لوحده ضمن السطر) لأننا لم نخبر العمود كيف يتصرف في حال كانت الشاشة أصغر من القياس المتوسط.

يمكننا أيضًا الدمج بين أكثر من صنف تنسيقي لكي نُكسب العمود سلوكًا مختلفًا من أجل قياسات مختلفة للشاشة. انظر مثلًا إلى العمود التالي: 

<div class="col-6 col-md-4"></div>

سيأخذ العمود السابق نصف العرض المتاح لأي شاشة يكون قياسها أقل من المتوسط بسبب وجود الصنف التنسيقي col-6. أمّا عندما يبلغ قياس الشاشة متوسط أو أكثر فعندها سيأخذ العمود أربع حصص فقط من عرض الشاشة بسبب وجود الصنف التنسيقي col-md-4. يمكن إضافة أي عدد من الأصناف التنسيقية التي تضبط عرض العمود من أجل كل قياس من القياسات الخمسة الرئيسية التي تعرفنا عليها في هذا الدرس.

لنأخذ الآن مثال أكبر قليلًا يحتوي على عدة أسطر وأعمدة لكي نتأكّد من أنّنا قد استوعبنا الفكرة جيّدًا. انظر إلى الكود التالي: 

<div class="container">
        <!-- الموضع 1 -->
        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- الموضع 2-->
        <div class="row">
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- ستأخذ الأعمدة في هذا السطر 50% من العرض الكلي المتاح بصرف النظر عن نوع الشاشة -->
        <div class="row">
            <div class="col-6">.col-6</div>
            <div class="col-6">.col-6</div>
        </div>
    </div>

انظر إلى الموضع 1 ضمن الكود السابق. في الشاشات الصغيرة ستتكدّس الأعمدة في هذا السطر فوق بعضها بحيث يحتل العمود الأول العرض الكلي والعمود الثاني نصف العرض الكلي. أمّا في الكود الذي يلي الموضع 2، فيشير إلى أنّه في الشاشات الصغيرة سيحتل كل عمود 50% من العرض الكلي.

أمّا في الشاشات المتوسطة فأكبر، سيأخذ كل عمود ثلث العرض الكلي المتاح. بادر فورًا إلى تجربته ضمن Visual Studio Code (وليس ضمن codeply.com لكي تحصل على تجربة أدق). صغّر نافذة المتصفّح وكبّرها ولاحظ ماذا يحدث للأعمدة. يمكنك بالطبع إضافة تنسيقات لونية باستخدام background-color لكي تلاحظ التغييرات. ستحصل في حالة الشاشة الكبيرة على شكل شبيه بما يلي:

6.png

يمكنك أيضًا استخدام أدوات المطوّر التي توفّر تجربة جيدة للمطورين في تجربة واختبار تطبيقات الويب الخاصة بهم. يمكنك قراءة المزيد حول هذا الموضوع من هنا.

خاتمة

نكون بهذا قد وصلنا إلى نهاية هذا الفصل المهم الذي سنبقى نستقي من المعلومات الواردة فيه حتى نهاية هذه السلسلة. سنعمل في الدرس التالي على تطبيق المفاهيم الواردة في هذا الدرس ضمن موقعنا الذي نبنيه تدريجيًا "نبيه"، وسنعمل في الدرس القادم على تحديث مشروعنا "نبيه" بالمعلومات الواردة في هذا الدرس بالإضافة إلى المعلومات التي سنحصل عليها في الدرس القادم.

اقرأ أيضًا

]]>1317Tue, 21 Sep 2021 15:01:01 +0000شريط التنقل في بوتستراب 5https://academy.hsoub.com/programming/css/bootstrap/%D8%B4%D8%B1%D9%8A%D8%B7-%D8%A7%D9%84%D8%AA%D9%86%D9%82%D9%84-%D9%81%D9%8A-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-5-r1316/

أهلًا بكم في الدرس الثاني من سلسلة تعليم بوتستراب 5، سنتعلم في هذا الدرس كيف ننشئ شريط تنقّل باستخدام بوتستراب من خلال موقع بسيط جدًا وظيفته توضيح هذه الفكرة، ومن ثمّ سنعمل على دعم اللغة العربية من خلال جعل جهة الموقع من اليمين إلى اليسار. سنركّز على النقاط التالية في هذا الدرس:

  • تجهيز البنية التحتية للمشروع
  • معاينة الموقع ضمن خادوم تجريبي
  • لبُّ الموضوع: شريط التنقّل في بوتستراب
  • تعديل الموقع ليدعم الاتجاه من اليمين إلى اليسار

تجهيز البنية التحتية للمشروع

لنعمل على تجهيز البنية التحتية لمشروعنا الخاص ببيع الدورات التعليمية "نبيه". أنشئ مجلّدًا جديدًا في المكان الذي ترغبه وسمّه nabih. انتقل بعد ذلك إلى Visual Studio Code واختر من القائمة File الأمر Open Folder ثم انتقل إلى المجلّد الذي أنشأته توًّا ثم اختر Select Folder لفتحه.

أصبحت الآن جاهزًا للبدء بإضافة ملفات المشروع. ستلاحظ في الجهة اليسرى من نافذة Visual Studio ظهور المجلّد الذي اخترناه قبل قليل مع توفّر إمكانية إضافة ملفات أو مجلّدات أخرى إليه كما في الشكل التالي:

1.png

أضف الملف index.html الذي سيمثّل ملف الواجهة الرئيسية في موقعنا. أضف أيضًا المجلدين التاليين: css الخاص بملفات التنسيق و images المجلّد الذي سنضع فيه الصور المستخدمة بالموقع (سنحتاج إليه في دروس لاحقة). أضف أيضًا الملف styles.css ضمن المجلّد css. سيكون هذا الملف في درسنا هذا فارغًا، ولكن سنعمل على استخدامه في دروس لاحقة. ستحصل في النهاية على شكل شبيه بالتالي:

2.png

افتح الملف index.html بالنقر المزدوج عليه ثم انسخ الكود التالي إليه: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>السلام على الجميع!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

احفظ التغييرات الأخيرة. وبهذا يصبح الملف index.html جاهزًا للمعاينة.

معاينة الموقع ضمن خادوم تجريبي

إذا كنت تذكر في المقال الأول من هذه السلسلة، فقد أضفنا الإضافة Live Server إلى Visual Studio Code. سنستخدم هذه الإضافة الآن لمعاينة الصفحة index.html ضمن المتصفّح الإفتراضي.

انقر بزر الفأرة الأيمن على الملف index.html ثم اختر الأمر Open with Live Server. سيؤدي ذلك إلى فتح نافذة أو لسان من المتصفّح الافتراضي على حاسوبك، وسترى الآن الصفحة index.html وقد ظهرت محتوياتها ضمن نافذة المتصفّح. ستحصل على شكل شبيه بما يلي:

3.png

يعد هذا مؤشرًا على أنّ الأمور تجري على ما يرام. لاحظ العنوان الظاهر في شريط العنوان في نافذة المتصفّح من الشكل السابق: 127.0.0.1:5501

العنوان 127.0.0.1 هو عنوان IP للجهاز المحلّي. أمّا المنفذ 5501 فهو المنفذ الذي تُصغي فيه الإضافة Live Server للطلبات الواردة من المتصفح، يمكن بطبيعة الحال أن يختلف هذا الرقم على حاسوبك.

شريط التنقل في بوتستراب

تمتلك معظم المواقع على الإنترنت شريطًا رئيسيًا يتموضع عادةً في الجزء العلوي من الصفحة. يحتوي هذا الشريط على روابط تساعد في التنقّل السريع بين أجزاء الموقع. من الممكن أن تكون بعض هذه الروابط على شكل أزرار. يمكن أن يؤدي النقر على بعض هذه الأزرار إلى ظهور قائمة منسدلة مثلًا تحتوي على أوامر أخرى. كما ويمكن أن يحتوي هذا الشريط على مربع نص يسمح للمستخدمين بالبحث ضمن الموقع، وغيرها من المتطلّبات الأخرى.

يدعم بوتستراب شريط القائمة هذا بصورة ممتازة. فعند ضبط بعض أصناف التنسيق القليلة ستحصل على شريط تنقّل عصري يلبّي احتياجاتك المتنوّعة.

شريط تنقل بسيط

لنبدأ بتشكيل شريط تنقّل بسيط. الكود التالي هو نسخة معدّلة عن الكود الموجود في صفحة التوثيق الخاصة الخاصة بشريط التنقّل في بوتستراب. انسخ الكود التالي إلى الملف index.html وضعه مكان العنصر <h1> الذي يحتوي على رسالة الترحيب التي رأيناها في الفقرة السابقة: 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">نبيه</a>

            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">رابط فعال</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غير فعال</a>
                </li>
            </ul>
        </div>
    </nav>

غيّر أيضًا عنوان الصفحة (ضمن الوسم title) ليصبح "دورات نبيه".

بعد حفظ التغييرات ستحصل على الشكل التالي في المتصفح (إذا لم تظهر التغييرات فورًا، يمكنك تحديث الصفحة ضمن المتصفّح):

4.png

شرح الكود السابق

سنتحدّث بشيء من الإسهاب عن الكود السابق كونه أساسي في بناء أشرطة التنقّل في بوتستراب. إذا نظرت إلى الكود السابق سترى أنّ العنصر الأساسي المستخدم هنا هو nav وهو عنصر HTML يُستخدم عادةً عندما نريد بناء شريط تنقل في صفحات الويب. يمكن أيضًا استخدام عنصر div عادي بدلًا من العنصر nav، ولكن عندها سنحتاج إلى بعض التعديلات الطفيفة. لذلك سنبقي على العنصر nav.

لاحظ أيضًا أصناف التنسيق المستخدمة مع العنصر nav التي تأتي مع بوتستراب: 

navbar 
navbar-expand-lg 
navbar-light 
bg-light

سنتحدّث هنا قليلًا عن هذه الأصناف الأربعة:

  • الصنف navbar فهو يمنح العنصر nav هيئة شريط التنقّل مباشرةً. حيث يصبح متجاوبًا مع قياسات الشاشات المختلفة، ويقبل احتواء العناصر المفيدة الأخرى مثل العلامة التجارية branding الخاصة بالموقع، وروابط التنقّل، وإمكانية ضم الأزرار ضمن قائمة مطوية واحدة تفتح بزر collapsing للحد من عرض الشريط في حال الشاشات الصغيرة كما سنرى ذلك فيما بعد.
  • يحتاج الصنف navbar كي يعمل بطريقة صحيحة إلى الصنف navbar-expand-lg وأخواته navbar-expand-{-sm|-md|-lg|-xl|-xxl} ‎. ووظيفة هذه الأصناف هي السماح بنشر محتويات شريط التنقّل بشكل أفقي. جرب أن تزيل هذا الصنف، لتجد أنّ محتويات شريط التنقّل قد أصبحت مكدّسة عموديًا.
  • بالنسبة للصنف navbar-light فهو يتحكم بالنمط theme يوجد ثلاثة أنماط رئيسية في بوتستراب هي: النمط الفاتح navbar-light والنمط الغامق navbar-dark والنمط الرئيسي navbar-primary. تتحكم هذه الأصناف بلون الخط للعناصر الموجودة ضمن شريط التنقّل nav. تعمل الأصناف الثلاثة السابقة مع الصنف الذي يتحكم بلون الخلفية لشريط التنقّل وهو عبارة عن مجموعة من الأصناف مثل: bg-light و bg-dark و bg-primary و bg-success و bg-warning.
  • لكي تحصل على أفضل النتائج استخدم الصنف bg-light مع الصنف navbar-light والصنف bg-dark مع الصنف navbar-dark. الحرفان bg من الصنف bg-light أو الصنف bg-dark أو غيرهما، يعبّران عن الكلمة background أي الخلفية. يجعل الصنف bg-light خلفية شريط التنقّل ذا لون فاتح. كما أنّ الصنف bg-dark يجعل الخلفية تبدو غامقة، وهكذا.
  • بالنسبة للأصناف الباقية، جرّب استخدام مزيج من ‎أصناف التنسيق مع أصناف الخلفية لكي تختار منها ما يناسبك. جرب مثلًا النمط الغامق navbar-dark مع bg-success وهكذا.

يدعم شريط التنقّل في بوتستراب (ومحتوياته أيضًا) الشكل المرن أو المتدفق Fluid في التصميم. بمعنى أنّ شريط التنقّل ينتشر أفقيًا ليحاول تعبئة عرض الشاشة المتاح. يمكن استخدام أي حاوية Container تراها مناسبة للتحكّم في مدى الانتشار الأفقي. هذا ما يبرّر استخدامنا لعنصر div مع الصنفcontainer-fluid الموجود ضمن العنصر nav مباشرةً (انظر الكود السابق). في هذه الحالة استخدمنا هذه الحاوية لضبط الانتشار الأفقي لمحتويات شريط التنقّل. على العموم يمكننا استخدام نفس التقنية تمامًا مع العنصر nav نفسه. سنتحدث عن الحاويات لاحقًا في هذه السلسلة. ولكن إذا أردت معرفة فائدة وجود هذه الحاوية. أزل صنف التنسيق container-fluid من عنصر div الذي يأتي ضمن العنصر nav مباشرةً لترى كيف يؤثّر وجودها على محتويات شريط التنقّل.

سنضع ضمن عنصر div (الذي يحوي الصنف container-fluid) محتويات شريط التنقّل. والتي تنحصر في مثالنا هذا على اسم الموقع، بالإضافة إلى أربعة عناصر توضّح أنواع الروابط التي يمكن وضعها ضمن شريط التنقّل. قطعة الكود التالية موجودة ضمن عنصر div‎ ذا الصنف ‎container-fluid‎ من الكود السابق: 

<a class="navbar-brand" href="#">نبيه</a>

            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">رابط فعال</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غير فعال</a>
                </li>
            </ul>

نضع عادةً اسم الموقع ضمن عنصر الارتباط التشعبي a. سيكون لهذا العنصر التنسيق navbar-brand ليُنسّق على شكل علامة تجارية أو أيقونة واضحة للموقع. يمكن بالطبع إضافة صورة لاسم الموقع بإضافة عنصر صورة كما سنرى فيما بعد.

بعد عنصر الارتباط التشعبي وضعنا عنصر القائمة غير المرتبة ul وهي التي ستحوي الروابط الرئيسية على شريط التنقّل. لاحظ كيف وضعنا الصنف navbar-nav لهذه القائمة كي تنسجم مع شريط التنقل الموضوعة ضمنه. ولاحظ أيضًا وجود صنف آخر هو me-auto. أول حرفين من اسم هذا الصنف يشيران إلى الكلمتين margin end، وتعنيان الهامش من النهاية. مع الكلمة ‎-auto يعني ذلك أنّنا سنجعل الهامش من الطرف النهائي تلقائي أي أنّه سيأخد أكبر هامش ممكن من الطرف النهائي، وهذا ما سيجعل عنصر القائمة يُزاح كاملًا نحو اليسار (نحو البداية) بجوار اسم الموقع (جرب إزالة هذا الصنف وانظر ماذا سيحدث).

قد تتسائل عن سبب استخدام تعبير "الهامش من النهاية" في حين أنّه كان من الممكن استخدام التعبير "الهامش من اليمين" فحسب! الجواب على ذلك بسيط. باستخدام هذا التعبير الرائع نستطيع إكساب موقعنا قابلية الاتجاه من اليمين إلى اليسار بكل بساطة. فعندما يكون اتجاه موقعنا من اليسار إلى اليمين تكون البداية من اليسار والنهاية من اليمين أمًا عندما يكون اتجاه موقعنا من اليمين إلى اليسار يحدث العكس! بمعنى آخر أنّه يمكن تعديل اتجاه موقعنا البسيط كاملًا ليصبح من اليمين إلى اليسار (بدلًا من الوضع الحالي) وذلك بتعديل بسيط جدًا في الموقع كما سنرى ذلك بعد قليل.

قبل الإصدار 5 من بوتستراب، كان من الممكن الوصول إلى نفس النتيجة من خلال استخدام الصنف mr-auto وهو اختصار للكلمات: margin right auto، وتعني أنّ الهامش من الطرف الأيمن سيكون تلقائي. من الواضح أنّ هذا الصنف مفيد عندما عندما يكون اتجاه الصفحة من اليسار إلى اليمين. ولكن عندما يكون اتجاه الصفحة من اليمين إلى اليسار، سيكون استخدام هذا الصنف غير مناسب كما هو واضح.

هذا ما كان يجبر المطورين على إنشاء قالبين منفصلين لصفحات الموقع في حال كان هناك حاجة لدعم لغتين باتجاهين مختلفين (مثل اللغة العربية، واللغة الانجليزية).

وصلنا الآن إلى عناصر القائمة li. في الحقيقة هي عناصر بسيطة يحمل كل منها الصنف nav-item، ويحوي كل منها عنصر ارتباط تشعبي a. ولكل عنصر ارتباط تشعبي منها الصنف nav-link. العنصر الأوّل الذي يحوي النص "رابط فعال" سيكون له بالإضافة للصنف nav-link الصنف active للإشارة إلى أنّ الرابط الحالي يُشير إلى الصفحة الحالية التي تُعرض أمام المستخدم. وهذا أمر مفيد كما هو واضح. أمّا العنصران الثاني والثالث اللذان يحملان النص "عادي1" و "عادي2" على الترتيب فهما عنصران عاديان افتراضيان على شريط التنقّل. أمّا العنصر الأخير: "غير فعّال" فقد نحتاج أحيانًا إلى جعل أحد الارتباطات على شريط التنقّل غير فعّالة، وهذا يمكن الحصول عليه بتطبيق الصنف disabled كما هو واضح.

هذا كل شيء! في الفقرة التالية سنحوّل الموقع السابق إلى الاتجاه الذي يناسب اللغة العربية.

تعديل الموقع ليدعم الاتجاه من اليمين إلى اليسار

بقي علينا إضافة بعض اللمسات الأخيرة لكي نُكسب الموقع الاتجاه المناسب لدعم اللغة العربية. في البداية أود أن أشير إلى أنّ ميزة الاتجاه من اليمين إلى اليسار RTL هي ميزة تجريبية في بوتستراب حتى وقت كتابة هذا المقال. ولكن ذلك لا يمنع بالطبع من استخدامها لأنّه من المتوقّع في الفترة القريبة القادمة أن تصبح نهائية بعد التأكّد من استقرارها.

نحتاج لاستخدام الاتجاه من اليمين إلى اليسار RTL إلى إجراء ثلاثة تعديلات بسيطة ضمن الملف index.html:

1- استبدال القيمة ar بالقيمة en للسمة lang ضمن الوسم html. 2- إضافة سمة جديدة للوسم html وهي السمة dir وهي مسؤولة عن تحديد اتجاه الصفحة. سنسند القيمة rtl لها. 3- استبدال العنصر التالي بالعنصر link المسؤول عن استيراد مكتبة التنسيق الخاصة ببوتستراب: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

هذه نسخة من مكتبة بوتستراب التي تدعم ‎ (لاحظ اسمها bootstrap.rtl.min.css). يجب أن يكون الكود النهائي الموجود ضمن الملف index.html مماثلًا لما يلي: 

<!doctype html>
<html lang="ar" dir="rtl">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <link href="/css/styles.css" rel="stylesheet" />

    <title>دورات نبيه</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">نبيه</a>

            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">رابط فعال</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">عادي2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غير فعال</a>
                </li>
            </ul>
        </div>
    </nav>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

عاين الملف index.html باستخدام الإضافة Live Server لتحصل على شكل شبيه بما يلي:

5.png

لاحظ أنّنا لم نمس كود HTML مطلقًا. وذلك بسبب استخدمنا لأصناف تنسيقية تصلح للاستخدام في طريقتي العرض يمين إلى يسار RTL أو يسار إلى يمين LTR. ففي حالتنا هذه استخدمنا الصنف me-auto المسؤول عن سلوك الهامش من النهاية، والذي أصبح في هذه الحالة من جهة اليسار بدلًا من جهة اليمين كما في الفقرة السابقة.

يمكنك تنزيل شيفرة المقال من الملف hsoub-bootstrap5-ch02.zip.

خاتمة

أرجو أن تكون قد استمتعت بهذا الدرس! لقد تعلّمنا الكثير في هذا الدرس حول شريط التنقّل في بوتستراب. حيث بنينا شريط تنقّل بسيط، وأسهبنا في الشرح حول أجزاء هذا الشريط، وكيفية الإستفادة من التقنيات الجديدة في بوتستراب 5 لتحويل اتجاه الصفحة لتصبح من اليمين إلى اليسار. وفي الدرس التالي سنتحدّث عن بنية صفحة الويب باستخدام بوتستراب.

اقرأ أيضًا

]]>1316Fri, 17 Sep 2021 15:00:00 +0000مدخل إلى إطار العمل بوتستراب 5https://academy.hsoub.com/programming/css/bootstrap/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%A5%D8%B7%D8%A7%D8%B1-%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-5-r1315/

مرحبًا بك في هذه السلسلة التي سنتحدث من خلالها عن إطار العمل Bootstrap 5 ذلك الإطار الذي يهيمن على معظم عمليات التطوير التي تحدث في الواجهة الأمامية Front-End Development في مواقع الإنترنت عمومًا.

لا تفترض هذه السلسلة أن يكون لديك أي فكرة مسبقة عن بوتستراب Bootstrap (ولو أنّ بعض المعرفة القليلة مرحّب بها)، في حين أنّ الإلمام بـ HTML و أساسيات CSS هو أمر ضروري للمتابعة في هذه السلسلة. رغم أنّ بوتستراب يستخدم جافاسكريبت في بعض المكوّنات إلى أنّه ليس من الضروري أن يكون لديك معرفة بها لكي تتعلّم بوتستراب، ولو أنّ الإلمام بجافاسكريبت يُعدّ بديهيًا لمطوري الواجهة الأمامية عمومًا.

هذا هو المقال الأوّل في هذه السلسلة، وهو مقال تمهيدي بطبيعة الحال، وفيه سنتحدّث عن النقاط التالية:

  • ماهو بوتستراب؟
  • مالجديد في بوتستراب 5؟
  • إعداد بوتستراب للعمل.
  • استخدام محرر برمجي مناسب
  • ما الذي سنبنيه في هذه السلسلة؟

ماهو بوستراب؟

بوتستراب ببساطة هو إطار عمل Framework متكامل مبني على CSS و جافاسكريبت JavaScript يُستخدم لتنسيق صفحات الويب وإكسابها نواح جمالية بدون الحاجة إلى استخدام تنسيقات معقدة من CSS. يدعم بوتستراب مبدأ تنسيق الأجهزة المحمولة أولًا Mobile First Style وهذا يعني توافقية عالية مع الأجهزة المحمولة ذات الشاشات الصغيرة.

عندما يُذكر بوتستراب فأول ما يتبادر إلى الذهن هو السرعة والأناقة والسهولة والتصميم المتجاوب Responsive Design مع مختلف أنواع الشاشات.

كان أول من طور بوتستراب شركة تويتر الشهيرة، وبعد عام تقريبًا، جعلته مفتوح المصدر ومتاحًا بالكامل من خلال GitHub.

يستند بوتستراب كما أشرنا مسبقًا إلى CSS فهو يوفّر كمّا كبيرًا من الجهد لتنسيق المكوّنات في صفحة الويب. يهدف بوتستراب كما هو واضح إلى تبسيط عمليات التصميم التي تحدث في الواجهة الأمامية Front-End وجعلها معيارية. يسهّل هذا الأمر إلى حدّ بعيد من حياة المصممين والمطورين على حدّ سواء، ويجعل عملية انضمام مصمّم جديد إلى فريق العمل في شركة تعتمد بوتستراب أمرًا يسيرًا نسبيًا.

استخدام بوتستراب سهل جدًا. فيمكن من خلال إضافة صنف Class أو أكثر إلى عنصر HTML أن تحصل على أثر فوري يحوّل هذا العنصر إلى شكل جميل وعصري. انظر مثلًا إلى شيفرة HTML التالية: 

<button>مرحبًا</button>

سيولّد الكود السابق الزر البسيط التالي:

1.png

سأضيف الآن صنفان بسيطان من بوتستراب إلى الكود السابق: 

<button class="btn btn-primary">مرحبًا</button>

ستحصل على الشكل الجميل التالي:

2.png

لاحظ كيف اكتسب هذا الزر الألوان المناسبة بالإضافة إلى حاشية Padding مناسبة أيضًا وبتلقائية حول النص الموجود ضمن الزر. وأيضًا كيف أصبحت حواف الزر منحنية. توجد العديد من التشكيلات الأخرى التي يمكن اكسابها للأزرار كما سنرى فيما بعد.

مالجديد في بوتستراب 5؟

يُعَد الإصدار 5 إصدارًا رئيسيًا وهو الأحدث من بوتستراب حاليًا (وقت كتابة هذا المقال)، وكما جرت العادة، فهناك العديد من التغييرات التي طرأت على الإصدار الذي يسبقه (الإصدار 4) فمثًلا فقد أزيل المكوّن Jumbotron بالإضافة إلى إزالة الدعم عن المتصفحين IE 10 و IE 11، وأيضًا أزيل عدد من أصناف التنسيق التي كانت موجودة في الإصدار 4.

هناك تغييرات أخرى قد حدثت ضمن مخطط الصفحة حيث أضيف قياس آخر جديد لم يكن موجودًا في الإصدار السابق وهو القياس xxl. و توجد تحسينات أخرى في نظام الألوان.

كما أضيف دعم أيقونات SVG جميلة ومتنوّعة ومفتوحة المصدر أيضًا. يمكنك مع مكتبة الأيقونات هذه الاستغناء عن مكتبات أيقونات إضافية مثل Font Awesome.

في الإصدار 5 أيضًا لم يعد هناك حاجة لاستخدام المكتبة jQuery بعد الآن (بعض المزايا الموجودة في بوتستراب تحتاج إلى جافاسكريبت)، فقد انتقل مطوّرو بوتستراب إلى استخدام جافاسكريبت فقط، مع إمكانية الإبقاء على استخدام jQuery في حال الرغبة.

أود أن أركّز هنا على ميزة مهمة أضيفت إلى بوتستراب 5، طالما انتظرها المصممين والمطورين العرب! وهي دعم الاتجاه من اليمين إلى اليسار ‏ RTL مما يسهّل حياتهم إلى حدّ كبير.

إعداد بوتستراب للعمل

يمكن تضمين بوتستراب في صفحة الويب التي نعمل بها بإدراجه عن طريق العنصر link ضمن العنصر head في ترويسة الصفحة، ويمكن اختيار تضمين بوتستراب من مزوّد محتوى على الإنترنت CDN وهو الخيار الأفضل. ومن الممكن كذلك تنزيل نسخة من بوتستراب محليًا ومن ثمّ تضمينها ضمن صفحة الويب التي تعمل بها. سنعمل في هذه السلسلة على الخيار الأول، أي أنّنا سنستخدم مزوّد محتوى CDN.

سنعتمد القالب الأساسي التالي أثناء عملنا على بوتستراب: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>السلام على الجميع</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

لاحظ أنّه وقبل نهاية وسم الإغلاق ‎</body>‎ وضعنا الوسم <script> الذي يسمح بتحميل كود جافاسكريبت الذي تحتاجه بعض مكوّنات بوتستراب لكي تعمل عملًا صحيحًا.

استخدام محرر برمجي مناسب

توجد العديد من الخيارات المتاحة لاستخدام محرّر برمجي مناسب في سياق عملك كمطوّر واجهة أمامية، ومن المحرّرات الشهيرة Visual Studio Code و Sublime و Atom. بالنسبة لي أفضل استخدام Visual Studio Code من مايكروسوفت لما يتمتع به من مرونة ودعم كبيرين.

لتثبيت محرر vs code انتقل إلى الموقع الخاص به لتنزيله. سيظهر زر التحميل في الصفحة الرئيسية. عندما تنتهي من تنزيله وتثبيته، افتحه وانتقل إلى قسم الإضافات Extensions ضمنه في الشريط الموجود على الناحية اليسرى كما في الشكل التالي:

3.png

بعد ذلك وفي خانة البحث في الأعلى اكتب Live Server للبحث عن هذه الإضافة التي ستسمح لك بتشغيل خادوم مبسّط على حاسوبك الشخصي مما يسمح لنا بتجريب الشيفرة التي نكتبها مباشرةً على المتصفح الافتراضي الموجود على حاسوبنا. بعد اختيار الإضافة انقر الزر Install في الناحية الخاصة بشرح الإضافة (في الطرف الأيمن) لتثبيتها.

بنفس الأسلوب السابق تمامًا ننصحك بتثبيت إضافة Auto Rename Tag، حيث تساعد هذه الإضافة على التعديل التلقائي لوسم ما عند تعديل الوسم المرافق له.

ما الذي سنبنيه في هذه السلسلة؟

سنبني في هذه السلسلة موقع ويب بسيط عبارة عن صفحة واحدة يمكن أن يُعتبر كقالب يشرح مزايا بوتستراب 5 التي سنتناولها تباعًا أثناء تقدمنا في هذه السلسلة. هذا الموقع عبارة عن موقع يبيع دورات تعليمية على الإنترنت.

يوفر الموقع إمكانية التسجيل الجديد للمستخدمين بالإضافة إلى تسجيل دخول للمستخدمين السابقين. كما سيعرض آخر الدورات التدريبية (المنتجات) المتوفرة، وأيضًا الدورات الأكثر مبيعًا. كما سنوفّر ميزة سلة المشتريات التي تسمح للمستخدم بالتسوّق من خلال اختيار الدورات التي يرغب بشرائها. بالإضافة إلى ما سبق سنضيف بعض الأقسام على الصفحة الرئيسية التي توفّر بعض المعلومات عن الموقع وبنفس الوقت توضّح لنا كيفية استخدام مزايا بوتستراب 5 المتنوّعة. سنعمل على بناء هذا الموقع شيئًا فشيئًا أثناء عملنا في هذه السلسلة.

انظر إلى الشكل التالي الذي يعطيك شكلًا تقريبيًا لما سنحصل عليه في نهاية هذه السلسلة.

4.png

مصدر الصور

في آخر هذه السلسلة سنتعلّم كيف نرفع الموقع كاملًا على إحدى الإستضافات لكي يصبح بالإمكان معاينته بصورة حية.

اقرأ أيضًا

]]>1315Sat, 11 Sep 2021 15:00:00 +0000بناء قائمة شجرية باستخدام البوتسترابhttps://academy.hsoub.com/programming/css/bootstrap/%D8%A8%D9%86%D8%A7%D8%A1-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D8%B4%D8%AC%D8%B1%D9%8A%D8%A9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A7%D9%84%D8%A8%D9%88%D8%AA%D8%B3%D8%AA%D8%B1%D8%A7%D8%A8-r623/

يوفر بوتستراب بيئة عمل جيدة لبناء واجهات صفحات الانترنت بشكل احترافي وسهل الاستخدام من قبل زوار الموقع، بالإضافة إلى التصاميم الجذابة المريحة للعين في التصفح والانتقال ضمن الموقع.
سنقوم اليوم ببناء قائمة شجرية قابلة للتوسع أو الطي collapse tree grid ضمن القائمة الجانبية للموقع، والتي تعد أحد الأعمدة الأساسية عند بناء المواقع القائمة في ترتيب صفحاتها على التصنيف ضمن بنية شجرية.

example.gif

يمكن الاستخدام في بناء القائمة الشجرية إضافة بنيت من قبل Pomazan Max ونشرها على GitHub وتخضع هذه الإضافة لشروط اتفاقية MIT من خلال استخدام ملفي jquery.treegrid.js و jquery.treegrid.css
سنقوم الآن بتخصيص بناء هذه الشجرة وإكمالها.
أولًا من المهم إضافة ملفات css التي نستخدمها لبناء الشجرة وهي الملفات الخاصة بنا Main ملف الخاص بالقائمة الشجرية jquery.treegrid.css وملفات البوتستراب 

<link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.treegrid.css">

نقوم ببناء panel-group لنضمن داخله العقد الثلاث.
المعرف الخاص id والذي يملك القيمة accordion هو أحد معرفات bootstrap ويفيد من أجل التبديل بين العقد المفتوحة أو المطويّة 

<div class="panel-group" id="accordion">
</div>

نضيف عنوان للقائمة الجانبية 

<h3>Try Tree Gird Sidebar</h3>

لبناء العقدة الأولى node1 نضيف التعليمات حيث أضفنا node1 كعنوان للقائمة التي تحته node1-1... ولذلك ضمناه تحت اسم الصف panel-heading أما بالنسبة للقائمة التي تحته فقد تم بناؤها كقائمة حيث يضاف إلى كل عنص من القائمة صف list-group-item وبنفس الطريقة قمنا بإضافة قائمة فرعية ضمن عنصر القائمة node1-3

01.JPG

من أجل تغيير شكل العنوان لكل عقدة رئيسية node1، node2، node3 من خلال إضافة أحد الصفوف panel-info والتي تعطي اللون الأزرق panel-danger وتعطي اللون الأحمر و panel-success وتعطي اللون الأخضر

02.JPG

<div class="panel panel-info">
	<div class="panel-heading">
		<div class="panel-title">
			<a data-toggle="collapse" data-parent="#accordion" href="#node1">Node1</a>
		</div>
	</div>
	<div id="node1" class="panel-collapse collapse in">
		<div class="panel-body">
			<div class="list-group-item">Node1-1</div>
			<div class="list-group-item">Node1-2</div>
			<div class="list-group-item">
				<div class="panel-title">
					<a data-toggle="collapse" href="#node1-3">
						Node1-3 
						<span class="glyphicon glyphicon-chevron-down"></span>
					</a>
				</div>
				<div id="node1-3" class="panel-collapse collapse">
					<ul class="list-group">
						<li class="list-group-item">node1-3-1</li>
						<li class="list-group-item">node1-3-2</li>
						<li class="list-group-item">node1-3-3</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

وبنفس الطريقة السابقة نبني العقد node2 و node3
في حال أردت أي تغيير للقائمة تستطيع القيام بذلك:

  • لإضافة عقدة جديدة وعنوان جديد يتم من خلال إضافة panel جديد ضمن panel-group
  • لإضافة عنصر تابع لـ panel يتم إضافته كـ list-group-item
  • يمكن إضافة لكل من العقد الداخلية رابط للتتمكن من الولوج إلى صفحة مختلفة من خلال وضع اسم العقدة ضمن رمز الرابط <a>node1-1</a>

وفي نهاية ملف html نضيف ملفات الجافات سكربت التي نستخدمها في البوتستراب والخاص ببناء القائمة الشجرية jquery.treegrid.js 

<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/jquery.treegrid.js"></script>
<script src="js/main.js"></script>

ضمن ملف الجافا سكربت Main.js نبني التابع الذي يقوم بفتح وإغلاق كل عقدة عند النقر عليها وذلك من خلال إضافة الصف active عند فتح العقدة إليها 

function openNode(evt, nodeName) {
    // Declare all variables
    var i, tablinks;

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(nodeName).style.display = "block";
    evt.currentTarget.className += " active";
}

ونضيف التابع الذي يقوم ببداية تحميل الصفحة إغلاق جميع العقد التي كانت مفتوحة أي إعادة كل المتغيرات إلى الحالة الافتراضية 

$(document).ready(function () {
    $('#accordion').find('.collapse').collapse('hide');
    var $myGroup = $('#accordion');
    $myGroup.on('show.bs.collapse', '.collapse', function () {
        $myGroup.not($(this).parents()).find('.collapse.in').collapse('hide');
    });
}
);

وبذلك نكون قد أنشأنا قائمة شجرية قابلة للطي والتوسع ديناميكية تمكّن المستخدم من الاطلاع على محتويات الموقع والانتقال بين صفحاته بسهولة

]]>623Tue, 20 Feb 2018 11:58:25 +000010 أخطاء شائعة عند استخدام إطار العمل Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/10-%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D8%B4%D8%A7%D8%A6%D8%B9%D8%A9-%D8%B9%D9%86%D8%AF-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A5%D8%B7%D8%A7%D8%B1-%D8%A7%D9%84%D8%B9%D9%85%D9%84-bootstrap-r190/

من الوهلة الأولى يبدو لنا إطار العمل هذا وكأنّه بسيط ويسهل التعامل معه، وبالطبع هو كذلك والبدء باستخدامه ليس بالأمر الصعب فتوثيق هذا الإطار مكتوب بشكل ممتاز ويحتوي على الكثير من الشيفرات البرمجية المتعلقة باللغات HTML، CSS وجافاسكربت. وصحيح أنّ المغالطات المهمة مذكورة في ذلك التوثيق، ولكن بعض الأخطاء والمشاكل قد تكون غير ظاهرة أو قد تكون موجودة في حالات استخدام غامضة. ولأنّ إطار عمل Bootstrap يبدو بسيطًا وسهل الاستعمال فإنّ هذا الإطار انتشر كالنار في الهشيم وبدأ الكثير من المطورين باستخدامه مما أدّى إلى حدوث الكثير من الأخطاء وظهور بعض المشاكل.

Figure1.thumb.jpg.189906112494b6d2b5d949

لذلك سوف نقوم في هذا المقال بسرد 10 أخطاء شائعة يقوم بها مستخدمو هذا الإطار.

الخطأ 1: إساءة فهم هذا الإطار في المقام الأول

هناك بعض المفاهيم الخاطئة موجودة في عقول المطورين حول هذا الإطار، وقد يكون ذلك بسبب أنّ هذه المفاهيم غير موجودة بشكل صريح وواضح في الموقع الخاص بإطار العمل أو بسبب أنّ المطورين لا يأخذون الوقت الكافي لقراءة توثيق هذا الإطار. وقد يقوم المطورون بالقيام بالعديد من الأمور بشكل خاطئ وبعدها يلقون اللوم على إطار العمل نفسه، لذلك دعونا نوضح بعض الحقائق المهمة.

إنّ إطار العمل Bootstrap يُعتبر إطار عمل شامل ومتكامل ولكنه ليس ضخمًا أو هائل الحجم. ويأتي هذا الإطار بقوالب أساسية تحتوي على العديد من مكونات واجهة المستخدم مثل الجداول (tables) والنماذج (forms) والأزرار (buttons) والقوائم المنسدلة (dropdowns) والكثير الكثير. ويمكنك استخدام هذه المكونات لإنشاء واجهة تعمل على العديد من المتصفحات والأجهزة والأبعاد بأفضل شكل ممكن.

وصحيح أنّ إطار العمل لن يقوم بكل شيء ولكنه يوّفر مجموعة من الخيارات لتختار منها مما يساعد المطورين في التركيز على التطوير أكثر من التصميم ويساعدهم في الحصول على موقع جميل بوقت قليل.

وهذا الإطار مرن بحيث يمكنك التعديل عليه من إضافة وحذف حتى يتناسب مع احتياجاتك. وصحيح أنّه كان هناك بعض القيود في الإصدارات الأولية لهذا الإطار إلا أنّه الآن أصبح أفضل ويمكن تطويعه بكل سهولة.

الخطأ 2: الإعتقاد بأنك لن تحتاج إلى معرفة CSS لاستخدام هذا الإطار وبأنك لن تحتاج إلى مصمم.

إذا كنت تعتقد أنّك لن تحتاج إلى معرفة CSS حتى تستخدم هذا الإطار فأنت مخطئ لا محال، فأي مطور ويب يحتاج إلى معرفة CSS وHTML5. وصحيح أنّه يوفر عليك عناء التعامل مع بعض الأمور المزعجة الخاصة بلغة CSS (مثل الـvendor prefixie) ويعطيك العديد من التنسيقات الإفتراضية إلّا أنّه يجب عليك أن تفهم لغة CSS. وقد لا تحتاج إلى معرفة كيف تعمل استعلامات الوسائط (media queries) ولكنك بالطبع سوف تحتاج إلى معرفة كيف يعمل التصميم المتجاوب بشكل عام، فأُطر العمل ليست مصممة لتعليمك CSS ولكنها قد تساعد في ذلك.

قد تعتقد أنّك لن تحتاج إلى مصمم إذا ما استخدمت Bootstrap، ولكن مع ذلك يجب عليك التعامل مع أحد المصممين إذا كان ذلك ممكنًا. فإحدى أهم المشاكل الموجودة حاليًا هو أنّ الكثير من المواقع أصبحت تشبه بعضها بسبب استخدام إطار عمل Bootstrap. وقد لا يكون هذا صحيحًا فهناك الملايين من المواقع المصممة باستخدام Bootstrap، فيمكنك مثلًا الدخول إلى موقع Bootstrap Expo فهو عبارة عن معرض أعمال يحتوي على العديد من المواقع التي بُنيت باستخدام هذا الإطار. ألقِ نظرة عليها فقد تلهمك لبناء شيء خاص بك.

الخطأ 3: تغيير ملف CSS الإفتراضي لهذا الإطار

دعنا نجعل ذلك بسيطًا ومباشرًا: لا تقم أبدًا بتعديل ملف bootstrap.css.

إذا قمت بالتعديل على ذلك الملف فالأمور سوف تصبح معقدة وسوف تقوم بتدمير التصميم عندما تقوم بتحديث ملفات Bootstrap عند صدور إصدار جديد من هذا الإطار. يمكنك استبدال التنسيقات الإفتراضية لهذا الإطار بالتنسيقات التي تريدها (مثل colors، margins، paddings) وليس هناك حاجة إلى التعديل على ملف bootstrap.css إطلاقًا.

لا تعرف كيفية استخدام LESS أو SASS؟ لا مشكلة في ذلك، كل ما عليك فعله هو إنشاء ملف CSS وتضع فيه التنسيقات التي تريد استبدالها من ملف bootstrap.css الرئيسي. وكما ذكرنا سابقًا فمعرفة CSS أمر في غاية الأهمية حتى لو كنت تعتقد غير ذلك. فيمكنك إنشاء محددات أو فئات (classes) CSS جديدة وتضعها في ملف HTML خاصتك حتى تقوم باستبدال التنسيقات الافتراضية للـBootstrap (لا تنسَ أن تضع ملف CSS الخاص بك بعد ملفات CSS الافتراضية الخاصة بالـBootstrap حتى يعمل كل شيء بشكل صحيح).

ما زلت تريد معرفة المزيد والغوص في هذا الإطار بشكل أعمق؟ إذاً أقترح عليك وبشدة أن تنظر إلى الكود المصدري لملفات LESS فبالتأكيد سوف يتضح لك كل شيء بشكل أفضل إذا ما قمت بذلك.

الخطأ 4: استخدام كل شيء يوفره إطار Bootstrap

قلنا سابقًا بأنّ هذا الإطار شامل ومتكامل ويوفر العديد من مكونات واجهة المستخدم والعديد من قوالب HTML وCSS وإضافات جافاسكربت كذلك. ولكن يجب عليك ألّا تستخدم كل ما يقدمه هذا الإطار إذا كنت لن تحتاجه في المشروع الذي تعمل عليه.

وهذا الأمر صحيح خصوصًا مع إضافات الجافاسكربت، فيجب عليك أن تختار فقط الإضافات التي سوف تحتاجها ولا يجب عليك أن تستخدم كل شيء لأنه يبدو جميلًا ورائعًا، فقد يؤدي ذلك إلى إثقال موقعك وجعله بطيئًا. لذلك يجب عليك في البداية أن لا تقوم بإدراج ملف bootstrap.js وأن تقوم بإنشاء موقعك باستخدام HTML وCSS فقط وبعد ذلك تقوم بإضافة المكونات التي تحتاجها واحدة تلو الأخرى.

الخطأ 5: إساءة استخدام النوافذ المنبثقة (modals)

يوفّر Bootstrap مجموعة من الخيارات المرنة بأقل متطلبات تشغيل ممكنة، كما أنها تأتي بقيم افتراضية مناسبة. وصحيح أنّه من السهل استخدامها ولكن هناك بعض الأمور التي يجب وضعها في الحسبان لتجنب اساءة استخدامها.

1- إظهار أكثر من نافذة منبثقة في نفس الوقت

إنّ Bootstrap لا يدعم النوافذ المتداخلة، أي أنّه يمكن إظهار نافذة واحدة فقط في نفس الوقت وإذا أردت إظهار أكثر من نافذة في نفس الوقت فيجب عليك كتابة بعض الأكواد للقيام بذلك.

2- ظهور النافذة خلف الخلفية

إذا كان حاوي النافذة أو العنصر الأب لها متموضعًا بشكل ثابت أو نسبي (fixed or relative position) فإنّ النافذة لن تظهر بشكل مناسب، ولذلك يجب عليك التأكد بأنّ حاوي النافذة لا يحتوي على خاصية position خاصة. فمن أفضل الممارسات وضع HTML الخاص بالنافذة قبل وسم الاغلاق <body/> مباشرة، أو حتى وضعها بعد وسم <body> مباشرة، فهذه هي أفضل طريقة لمنع العناصر الأخرى من التأثير عليها.

3- النوافذ المنبثقة في الأجهزة المحمولة

هناك بعض التحذيرات للمطورين بأنّ يكونوا حذرين عند استخدام النوافذ في الأجهزة المحمولة التي تحتوي على لوحة مفاتيح افتراضية. وهذا صحيح بشكل خاص في الأجهزة التي تعمل بنظام iOS فهناك خطأ برمجي يمنع العناصر الثابتة من تغيير مكانها عند استدعاء لوحة المفاتيح الافتراضية، وهذا الأمر لا يمكن لإطار Bootstrap التعامل معه، لذلك فإنّه يجب على المطور التعامل مع هذه المواقف بأفضل شكل ممكن.

الخطأ 6: مشكلة زر متصفح الملفات

إنّ إطار عمل Bootstrap لا يوفّر مكون محدد للحصول على زر رفع للمفات (file upload). ولكن يمكنك استخدام الشيفرات البرمجية التالية للحصول على ذلك:

<span class="btn btn-default btn-file">
     Browse <input type="file">
</span>
.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

هناك العديد من الأمثلة لكيفية الحصول على شيء مشابه، فالشيفرة البرمجية السابقة مأخوذة من هذه المقالة وهي توفر شرحًا وافيًا لهذه المشكلة.

الخطأ 7: تعقيد الأمور باستخدام الجافاسكربت وإهمال الصفة "data-"

إنّ المصممين أو المبتدئين في استخدام الجافاسكربت يمكنهم بكل سهولة إنشاء صفحات ويب باستخدام HTML، CSS وBootstrap. ولكنهم إن لم يكونوا جيدين في البرمجة فقد يقعون في فخ إساءة استخدام الجافاسكربت أو حتى تعقيد الأمور. ومن المهم ذكر أنّه يمكن استخدام إضافات الجافاسكربت باستخدام واجهة تطبيقات برمجية (API) يوفرها إطار عمل Bootstrap ومن دون الحاجة إلى كتابة سطر جافاسكربت واحد.

فيمكننا على سبيل المثال أن نقوم بتفعيل نافذة منبثقة (modal dialog) من دون كتابة سطر جافاسكربت واحد وذلك عن طريق استخدام:

data-toggle="modal"

على عنصر مثل زر (button) أو رابط (anchor) وتمرير قيم إضافية باستخدام الصفات data-. ففي الشيفرة البرمجية الموجودة في الأسفل قمنا بتحديد عنصر له id "#myModal"، وقمنا باستخدام الخيار data-backdrop لمنع النافذة من الاختفاء إذا ما قام المستخدم بالنقر خارج النافذة، وباستخدام الخيار data-keyboard قمنا بتعطيل زر الخروج (escape) الموجود في لوحة المفاتيح الذي يقوم بإغلاق النافذة عند الضغط عليه. وكل ذلك تم باستخدام سطر HTML واحد فقط:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

الخطأ 8: إهمال الأدوات التي تسهل عملية التطوير باستخدام Bootstrap

الأخطاء تحدث وكل مطور يقع في الأخطاء بين الحين والآخر. وهذا أمر لا بد منه ولكن ما يهم هو كيفية التعامل مع الخطأ أو المشكلة. وقد لاحظ فريق تطوير هذا الإطار بأنّ بعض الأخطاء تحصل بشكل متكرر أكثر من الأخرى ولذلك حاولوا أتمتة عملية التطوير، لذلك قاموا بتطوير أداة Bootlint وهي أداة تقوم بتفحص الصفحات التي تستخدم Bootstrap للبحث عن الأخطاء الشائعة. ويمكنك استخدام الأداة في المتصفح مباشرة أو عن طريق سطر الأوامر في Node.js. لذلك يجب على كل مطور أن يستخدم هذه الأداة لتفادي الوقوع في الكثير من المشاكل الشائعة والتي تقوم بإبطاء عملية التطوير.

وفي حالة أنك أردت أن تساهم في تطوير مشروع Bootstrap فأعتقد أنه من الجيد لك إلقاء نظرة على Rorschach. بحيث يقوم Rorschach بعمل بعض الفحوصات على طلبات السحب (pull requests) الجديدة وإذا فشل الفحص فإنه يترك تعليق مُفيد لتوضيح الخطأ وكيفية إصلاحه وبعدها يقوم بإغلاق الطلب.

الخطأ 9: مشاكل التوافق في متصفح IE8 والمتصفحات الأقدم

إنّ Bootstrap مصمم ليعمل بأفضل شكل في الاصدارات الحديثة من متصفحات سطح المكتب والهواتف، وقد تُظهر المتصفحات القديمة المكونات والعناصر بتنسيقات مختلفة ولكن كل شيء يجب أن يعمل بأفضل شكل. ويتضمن الدعم متصفحات IE8 وIE9 مع ملاحظة انّ بعض خصائص CSS3 وعناصر HTML5 ليست مدعومة بشكل كامل في هذه المتصفحات.

وللحصول على دعم كامل لمتصفح Internet Explorer 8 والمتصفحات الأخرى القديمة فعليك استخدام polyfill لـCSS3 Media Queries (Respond.js، HTML5 shim) والذي يمكننا من استخدام عناصر HTML5. كما أنّه يجب عليك استخدام وسم <meta> مناسب داخل وسم <head> حتى نتأكد بأنّ متصفح IE لا يعمل في وضع التوافقية (compatibility mode). يجب أن يبدو وسم <head> كما في الأسفل:

<head>

...

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

في حالة Respond.js كن حذرًا من بعض الأمور في بيئات التطوير.

الخطأ 10: تجاهل أفضل الممارسات (best practices)

واحد من أكثر الأسئلة شيوعًا على موقع Stack Overflow هو كيفية جعل القوائم المنسدلة (dropdown menu) تظهر عندما يقوم المستخدم بتمرير مؤشر الفأرة فوق العنصر (hover) بدلًا من النقر عليه. وصحيح أنّ حل هذا السؤال ليس بالأمر الصعب ويمكن حله باستخدام CSS فقط ولكن هذا الأمر غير محبذ، فهذه الميزة تم التخلص منها في هذا الإطار بشكل متعمد وكان قرار إزالتها قد تم من قبل فريق تطوير الإطار نفسه. وكما قلنا سابقًا فحل السؤال ليس صعبًا ولكن يجب عليك معرفة التداعيات التي تأتي معها ويجب عليك أيضًا أن تعرف بأنّ هناك ممارسات جيدة يجب عليك اتباعها خصوصًا في أُطر العمل التي تكون أولويتها التطوير للهواتف. والسبب خلف ذلك هو أنّ جعل الأشياء تعمل عندما يقوم المستخدم بوضع مؤشر الفأرة فوقها (hover) لا يساعد المستخدمين الذين يعملون على أجهزة تعمل باللمس (touch). ففي هذه الأجهزة لا يوجد شيء اسمه "hover" يوجد فقط اللمس، وبالتالي فإنّ ذلك سيؤدي إلى الإضرار بمستخدمي الأجهزة التي تعمل باللمس.

خلاصة

أتمنى بأن يساعدك هذا المقال على تفادي بعض المشاكل والأخطاء الشائعة وتوضيح بعض المفاهيم الخاطئة. وضع في الحسبان بأنّ إطار Bootstrap لن يكون مناسبًا لكل مطور أو حتى أي مشروع، وعندما تقوم باختيار أي إطار عمل فإنّه يجب عليك أن تقرأ التوثيق الخاص به بكل تروٍ وأن تقضي بعض الوقت في التعامل معه حتى تعلم كيف يعمل.

ترجمة -وبتصرّف- للمقال The 10 Most Common Bootstrap Mistakes لصاحبته TOMISLAV BACINGER.

]]>190Mon, 12 Oct 2015 21:35:17 +0000تصميم صفحة موقع باستخدام 3 Bootstrap - الجزء الثّانيhttps://academy.hsoub.com/programming/css/bootstrap/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B5%D9%81%D8%AD%D8%A9-%D9%85%D9%88%D9%82%D8%B9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-3-bootstrap-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%AB%D9%91%D8%A7%D9%86%D9%8A-r91/

تمّ التطرّف في الجزء الأوّل من هذا الشرح إلى الخطوات الأوّليّة في بناء صفحة باستخدام إطار عمل 3 Bootstrap، في الجزء الثّاني، سيتم استكمال تصميم الصّفحة بدءًا من الشعار وانتهاءً بذيل الصّفحة.

الشعار (Logo)

logo.thumb.png.0f486ddbdef3defa74fdbf0c8

سيتمّ إضافة الشعار إلى رأس الصّفحة كما في التّالي:

<header>
  <a href="/"><img src="images/logo.png" alt="Logo"></a>
</header>

سيتمّ الاكتفاء بإدراج صورة الشعار وبدون إضافة أية تنسيقات.

نموذج البحث

search.thumb.png.d61824dc3af5dba9200f493

سيتمّ الاستفادة من بعض مُكوّنات 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.thumb.png.ca700d9ca1245d2d5e8af8c

سيتمّ استخدام مُكوّنات التنقل، والّتي تحتوي على قائمة بالروابط، وسيتم استخدام الصنف 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)

page-header.thumb.png.57833ed395a60d2cde

سيتمّ استخدام الصنف 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)

aside.thumb.png.5fc205c8848c6fdbf7e586f5

لن يتمّ استخدام المُكوّن 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)

سيتمّ إضافة صورة تُشير إلى عنوان مكتب العمل، وذلك أسفل القائمة الفرعيّة.

sidebar.thumb.png.70fb2a9f24b00c19c3363c

سيتمّ استخدام المُكوّن 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)

سيتمّ الشروع بالعمل على تصميم المحتوى، وفي البداية سيتمّ إضافة الاقتباس:

quotation.thumb.png.718ada27d3033e82b8f9

يشبه هذا الجزء إلى حدٍ كبير المُكوّن 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)

main-content.thumb.png.12a4009bf6762120b

تمّ بالفعل إتمام جميع التنسيقات اللازمة للنص الخاصّ بالمُحتوى، وعليه فإن كل ما يجب عمله هو إضافة ثلاثة فقرات (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;

القسم الخاصّ بفريق العمل

our-team.thumb.png.a2b672d8313763d999e5d

أوّلًا، سيتمّ إضافة رأسيّة هذا القسم (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.thumb.png.febafe0b8c422b9bd3da8af

سيتمّ في البداية إنشاء الحاوية الرئيسيّة لذيل الصّفحة، والأعمدة الخاصّة بكل جزء:

<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)

twitter-feed.thumb.png.c6414cf303b3501a1

صياغة تغذية توتير هي على الشكل التّالي:

<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)

تتألّف خريطة الموقع من عمودين متساويين محتويان على روابط:

sitemap.thumb.png.a0241847d67e80a35a0ca4

<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-buttons.thumb.png.721c8749be8cbec

سيتمّ وضع جميع الروابط (الأزرار) داخل قسم وبالصنف 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) أسفله مع نصّ حق النشر.

copyright.thumb.png.5892f2729f5fac259046

ستكون الصياغة على الشكل التّالي:

<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.

]]>91Tue, 02 Jun 2015 13:37:38 +0000تصميم صفحة موقع باستخدام 3 Bootstrap - الجزء الأولhttps://academy.hsoub.com/programming/css/bootstrap/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B5%D9%81%D8%AD%D8%A9-%D9%85%D9%88%D9%82%D8%B9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-3-bootstrap-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%A3%D9%88%D9%84-r90/

سيكون هذا الدرس مُتابعة لدروس Boostrap الّتي قدّمتها الأكاديميّة، وفيه سيتمّ تجهيز وتخطيط صفحة عامّة تصلح لمُختلف الأغراض والاحتياجات.

يعود استخدام أُطر العمل (frameworks) بالنفع الكبير على المُطوّر، حيثُ لم يَعد على المُطوّر التفكير بالمشاكل المُتكرّرة ورُبما التافهة، وهي مشاكل قد تمّ حلها بالفعل من قبل صانعي أُطر العمل، فعلى السبيل المثال، التوافقيّة بين المُتصفّحات، دعم أبعاد أو أحجام الشاشة المُختلفة (التجاوبية)، إلى آخره من المشاكل الأخرى، ويُسرّع هذا الأسلوب أو هذا النمط من التطوير كثيرًا من عمليّة تخطيط وتطوير الموقع.

يتميّز إطار العمل Bootstrap بشهرته الواسعة الّتي يتمتّع بها، الأمر الّذي يجعل من صيانة وتنقيح شيفرة أي مُطوّر سهلةً في التعديل من قِبل أي مطوّرٍ آخر، مع عدم إغفال الدعم والتوثيق القويّ الّذي يملكه على الإنترنت.

تبرز مساوئ استخدام أُطر العمل في حقيقة أنّ على الصّفحة تحمّل أعباء مُجمل شيفرة الإطار (مُجمل التنسيقات الزائدة)، وحتّى عند استخدام جزء صغير من الإطار، على الجهة الأُخرى، فإن أُطر العمل هي أداةٌ فعّالة في بناء نماذج أوليّة للمشاريع (prototyping)، أو في إنشاء صفحات يكون فيها جماليّة التصميم أمرًا ثانويًّا، كما هو الأمر مع صفحات إدارة الموقع (administration pages)، ولكن عند الرغبة في إنشاء تصميم مُحدّد وذو مواصفات مُعيّنة، فإن استخدام هذه الأُطر قد يُصعب من عمليّة التصميم أكثر مما هو عليه الأمر من بناء التصميم من نقطة الصفر، ومع ذلك فهو أمرٌ مُمكن وليس مُستحيلًا.

سيكون المشروع النهائيّ على الشكل التّالي:

final-project.thumb.png.4b859bddf7aa5aad

ملاحظة حول استخدام 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 الأساسيّة، وهذا يُقدّم سرعة في التحديث والتعديل على التنسيق.

file-structure.thumb.png.74a5928806ace26

سيتمّ في الخطوة التّالية إعداد عمليّة ترجمة ملفّات 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 مُترجمة وبالتعديلات الجديدة.

WinLess.thumb.png.fb7cc23d9e34f2eed837a9

ملاحظات

أصبحت تركيبة وبنية المشروع جاهزة بعد إنشاء الملفّات السابقة، ولكن على المُطوّر الأخذ بعين الاعتبار الأمور التّالية قبل الشروع في التصميم:

  • كيف ستقدّم الصّور، كيف سيتمّ توزيعها وتقسيمها في أرجاء الصّفحة.
  • كيف سيتمّ استخدام المُكوّنات (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).

page-layout.thumb.png.59c6ea858c0d09b690

سيتمّ إضافة الشيفرة (الكود) التّالية إلى جذع الصّفحة (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.

]]>90Tue, 02 Jun 2015 11:15:00 +0000تعرّف على عناصر Panels، Modal Windows و Carousel في إطار Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/%D8%AA%D8%B9%D8%B1%D9%91%D9%81-%D8%B9%D9%84%D9%89-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-panels%D8%8C-modal-windows-%D9%88-carousel-%D9%81%D9%8A-%D8%A5%D8%B7%D8%A7%D8%B1-bootstrap-r56/

استكمالا لمقال مكونات إطار عمل Bootstrap، نعود إليكم في هذا المقال بتكملة لبقية المكونات، وسنتناول مواضيع اللوحات Panels، النوافذ المتوسطة الظهور Modal Windows، وأداة العرض المتكرر Carousel، وخاصية التقلص Collapse.

اللوحات Panels

لتكوين عنصر اللوحات بشكل كامل، لزم أن نعرف مكوناته، فتتكون اللوحة من الرأس Header وجسم اللوحة body والذيل Footer، والآن سنقوم بتكوين لوحة أساسية بدون رأس أو ذيل لكي يسهل عليك فهم المكونات.

ولتكوين لوحة أساسية سنستخدم الصنف panel. والصنف panel-default. مع الوسم <div> الذي يحوي كل عناصر اللوحة، ونستخدم الصنف panel-body. لإدراج مكونات اللوحة.

شيفرة تكوين لوحة في صفحات الويب:

<div class="panel panel-default">
  <div class="panel-body">
    يمكن وضع المحتوى الذي تريد من عناصر الصفحة والنصوص وغيرها
  </div>
</div>

وهذه مخرجات الشيفرة السابقة:

رأس وتذييل اللوحة

بعد أن تم تكوين الجزء الأساسي في اللوحة نقوم بإضافة الرأس والذيل لهذه اللوحة، لإضافة الرأس نستخدم الصنف panel-heading. ولإضافة عنوان في رأس اللوحة نستخدم الصنف panel-title. مع الوسم <h1>-<h6> حسب الحجم الذي نريده للنص، ولإضافة ذيل اللوحة نستخدم الصنف panel-footer. مع الوسم <div>.

وهذه شيفرة تكوين رأس وذيل للوحة السابقة:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">رأس اللوحة</h3>
    </div>
    <div class="panel-body">
        يمكن وضع المحتوى الذي تريد من عناصر الصفحة والنصوص وغيرها 
    </div>
    <div class="panel-footer">ذيل اللوحة</div>
</div>

مخرجات الشيفرة السابقة:

ونستطيع إضافة عناصر مختلفة إلى الذيل كأن نضيف نصوص أو أزرار مثل زر المشاركة أو قراءة المزيد وغيرها من العناصر التي قد تحتاجها في ذيل اللوحة، ففي المثال التالي سنضيف عناصر متعددة إلى الذيل لتتمكن من إضافة مثلها في موقعك:

تنسيق اللوحة حسب محتوياتها

قد تحتاج إلى إظهار اللوحة بتنسيق يناسب المحتوى كأن يكون لجذب الانتباه أو أن يكون المحتوى لعرض بيانات مهمة، أو أن تكون إرشادات لتحذير المستخدم، فكل هذه المحتويات أو غيرها تستطيع أن تضيف تنسيق مناسب لها في اللوحة ، كما في الصورة التالية:

إضافة الجداول والقوائم وعناصر أخرى إلى اللوحة

تعتبر اللوحة كإطار تستطيع أن تضع عليها ما تريد من عناصر وهنا سنضيف جدول وقائمة إلى اللوحة وأنت تستطيع تجربة إضافة عناصر أخرى لترى كيف ممكن أن تستفيد من اللوحات بشكل أفضل، لإضافة عناصر مستقلة إلى اللوحة لا بد من أن تكون في جسم اللوحة أي ضمن الوسم <div> الذي يأخذ الصنف panel-body. لكي نقول بأن اللوحة عبارة عن إطار لهذا العنصر أما إذا أضفت العنصر في الرأس أو الذيل سيكون من مكونات اللوحة نفسها، لذا سنضيف الجدول في جسم اللوحة ، وننوه إلى أن إطار العمل Bootsrap قد خصص الصنف table. خاص بالجداول، وهذه شيفرة إضافة جدول داخل اللوحة:

...
<div class="panel-body">
  <table class="table">
    <th>المنتجات</th><th>السعر </th>
    <tr><td>التمور</td><td>200</td></tr>
    <tr><td>العسل</td><td>400</td></tr>
  </table>
</div>
...

وستكون المخرجات بهذا الشكل:

والآن سنضيف قائمة إلى اللوحة، ولا يوجد أي فرق بين إضافة جدول أو قائمة وبين إضافة إي عنصر آخر لذا إذا احتجت أن تضيف أي عنصر كل ما عليك فعله هو أن تدرج هذا العنصر ضمن جسم اللوحة وسنضيف القائمة كمثال ثانٍ على ذلك وهذه شيفرة إضافة قائمة إلى اللوحة:

...
<div class="panel-body">
  <p>هذه قائمة بمنتجاتنا المتوفرة في كل الأسواق</p>
  <ul class="list-group">
    <li class="list-group-item">التمور</li>
    <li class="list-group-item">العسل</li>
    <li class="list-group-item">مشتقات التمور</li>
  </ul>
</div>
...

جرب أنت الحصول على مخرجات هذه الشيفرة. 

النوافذ متوسطة الظهور Modal Window

إذا كنت تعرف صندوق الحوار (dialog box) من قبل فهذا يعني أنك ستتعرف على مفهوم النوافذ متوسطة الظهور بسرعة، أما إذا لم تسمع بها من قبل فهيا بنا نستكشف ما معنى النوافذ متوسطة الظهور.

قد تلاحظ في بعض المواقع التي تتطلب تسجيل الدخول أنها تُظهِر لك نافذة صغيرة في وسط الشاشة من خلالها تُدخِل البيانات المطلوبة قبل الحصول على المحتوى مثلا، أو إذا كنت تستخدم فيس بوك ورغبت بمشاركة منشور أو حذف محتوى وتظهر لك رسالة تأكيدية فهذه هي النوافذ متوسطة الظهور، بحيث تجعل المستخدم يركز على شيء واحد فيعزل بقية المحتوى وتبقى هذه النافذة فقط، ولابد من أن تعرف أنه لإظهار النافذة نحتاج إلى:

  1. حدث أو زر يظهر النافذة.
  2. النافذة ومحتوياتها.

كما في الصورة التالية:

لإضافة هذه النافذة نستخدم الصنف modal. مع الوسم <div> سنضع محتويات النافذة ضمن هذا الوسم، ومن ثم نعطي هذا الوسم معرِّف من خلال الخاصية id="" وبعد ذلك نستخدم الخاصية role="dialog" أي ان مهمة هذا الوسم هي احتواء النافذة ومكوناتها، ونقوم بإخفاء النافذة من بين محتويات الصفحة باستخدام الخاصية aria-hidden="true" إلى أن يأتي حدث إظهارها.

ستحتاج إلى حدث أو زر عندما يتعامل معه المستخدم يظهر النافذة والذي سيكون منفصلا عن مكونات النافذة بالطبع إذ سيكون من مكونات الصفحة الظاهرة. استعمل إما عنصر الزر <button> أو عنصر الروابط <a> مع إضافة الخاصية data-toggle والخاصية data-target، أما الخاصية الأولى والتي تعمل على إظهار العنصر فنحدد لها القيمة modal، وأما الخاصية الثانية فتحدد أيا من النوافذ سيتم إظهارها لأنه قد توجد أكثر من نافذة في الصفحة، وبالتالي ستكون القيمة هي المعرف id والذي اخترناه مسبقا لهذه النافذة.
وهذه الشيفرة توضح الكلام السابق مع بعض الإضافات الأخرى:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
  اظهار النافذة
</button>

<!-- Modal -->
<div class="modal fade" id="firstModal" tabindex="-1" role="dialog" aria-labelledby="firstModallLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="firstModalLabel">
          عنوان النافذة
        </h4>
      </div>

      <div class="modal-body">
        محتويات النافذة
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
        <button type="button" class="btn btn-primary">
          أرسل البيانات
        </button>
      </div>

    </div>
  </div>
</div>

قد تلاحظ وجود أصناف كثيرة مضافة وخصائص متعددة، دعنا الآن نمر على كل صنف وخاصية تضمنتها الشيفرة السابقة:

الأصناف modal-header. و modal-body. و modal-footer. أعتقد بأنك ستتعرف عليها وهي مخصصة للعنوان ومحتويات النافذة وكذيل للنافذة، بالترتيب، وأما الخاصية aria-labelledby="" فنحدد من خلالها أي العناصر ستكون عنوان للنافذة وبالتالي ستكون قيمتها هي قيمة الخاصية id والتي تعتبر معرِّف العنوان <h4> والذي يستخدم كعنوان للنافذة، والخاصية data-dismiss فتُعطى القيمة modal وتُستخدم مع الأزرار التي تُغلِق النافذة.

وقد تلاحظ أيضا وجود الصنف fade. مع الوسم <div> الخارجي ويعمل على إضافة تأثير الحركة الذي قد تلاحظها عند ظهور أو اختفاء النافذة، ويمكن الاستغناء عنه ولا يؤثر ذلك على النافذة، فقط سيختفي تأثير الحركة.

أحجام النوافذ متوسطة الظهور Modal window

تستطيع التحكم بحجم ظهور النافذة كما تريد، ولكن هذه الأحجام لا تظهر تأثيراتها إلا مع الشاشات الكبيرة والمتوسطة، أما الشاشات الصغيرة فهي سواء، والصنف .bs-example-modal-* يستخدم لهذا الغرض فتضع المقاس المناسب (lg-sm-md) بدلا من الرمز *، وتستخدم الصنف .modal-* مع الوسم الذي يحتوي على الصنف modal-dialog.، وهذه الشيفرة توضح استخدام الحجم lg,sm:

<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">نافذة كبيرة</button>
<div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    ...
  <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">نافذة صغيرة</button>
  <div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">

بإمكانك تجربة الشيفرة السابقة والتعرف على المخرجات بسهولة.

التقليص Collapse

وفر إطار العمل Bootstrap خاصية مميزة وهي خاصية تقليص مكونات العناصر فمثلا إذا كان لديك لوحة ومكوناتها متعددة ومتشعبة فبإمكانك إخفاء المحتويات وإظهارها، ويستخدم الصنف collapse. أو الصنف collapse in. مع الوسم الخارجي للمحتويات، وسنتناول مثال يوضح ذلك باستخدام مجموعة من اللوحات panels تحتوي كل لوحة على نصوص ومحتويات كثيرة، والصورة التالية توضح تقلص لوحة وظهور الأخرى عند النقر عليها:

وهذه شيفرة الصورة السابقة:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"href="#collapseOne">
          عنوان لنص طويل
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        نص طويل يوضع هنا أو محتويات كثيرة
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        عنوان لنص طويل
      </a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
      نص طويل يوضع هنا أو محتويات كثيرة
    </div>
  </div>
</div>

في هذه الشيفرة تم إضافة الصنف panel-group. في الوسم الخارجي <div> والذي يستخدم لتجميع مجموعة من اللوحات، وتم إعطاء الوسم الخارجي <div> المعرِّف id="father" والمخصص للتعامل مع العناصر التي يتم تقليصها وبالتالي سيكون هذا الوسم أبٌ لجميع الوسوم الموجودة ضمن محتوياته، وتم إضافة لوحتان panels إلى المجموعة وفي كل لوحة تم وضع الوسم <a> -ضمن محتويات العنوان- وفيه الخاصية data-toggle="collapse"، والخاصية data-parent="#father" إشارة إلى العنصر الأب لكي لا ينتقل خارجه، أما خاصية الانتقال href="#id"، فنضع معرِّف المحتوى المراد الانتقال إليه.

وأما المحتوى المراد إخفاؤه و إظهاره فيكون ضمن الوسم <div> فيأخذ الصنف panel-collapse. والصنف collapse. ولابد من وضع معرِّف id خاص به، لأنه عندما ننتقل إلى محتوى لابد وأن يكون فريدا لكي يتم الانتقال إليه لا إلى غيره.

وهناك أصناف إضافية تستطيع أن تستخدمها أثناء التقليص:

  1. Collapse يستخدم لإخفاء المحتويات افتراضيا كما في اللوحة الثانية في المثال السابق.
  2. Collapse in يستخدم لإظهار المحتويات افتراضيا كما في اللوحة الأولى في المثال السابق.
  3. Collapsing يستخدم إذا كنت لا ترغب في إخفاء محتويات لوحة إذا أظهرت محتويات لوحة أخرى، لأن الوضع الافتراضي أنه إذا أظهرت محتويات لوحة فإن بقية اللوحات تتقلص ولكن في هذا الصنف فإن المحتويات تبقى كما هي إلى أن تنقر مرة أخرى على نفس اللوحة.

تقليص محتويات عناصر أخرى

محتويات اللوحات ليس كل شيء فيمكنك تقليص محتويات أخرى كأن تعمل تقليصًا لمحتويات قائمة list أو أن تعمل تقليصًا لمحتويات جدول أو لأي محتويات أخرى، وهنا سنتطرق إلى مثال آخر وهو تقليص نص عند النقر على زر محدد، وهذه الشيفرة تعمل على إظهار و إخفاء النص عند النقر على الزر ونريد أن يكون النص ظاهرا وهذا يعني أننا سنستخدم الصنف collapse in. مع الوسم <div> الذي تقع المحتويات ضمنه، كما في الشيفرة التالية:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#text">
  إظهار/ إخفاء النص
</button>

<div id="text" class="collapse in">
  <p>اي نصي يمكن وضعه هنا ومن خلاله تستطيع ان تظهر المعنى الذي تريد لزوار موقعك حسب الرؤية لديك ويمكنك وضع اي نص فهذا مجرد نص تجريبي ولا يعتبر نهائي انما مجرد نص ليتضح التصميم اكثر ومع كل مره يتم تحميل هذا القالب فإن النص يبقى كما هو ولا يتغير لأنه من ضمن تركيبة الصفحة وليس مدرج من قاعدة بيانات لذا تستطيع ان تغير هذا النص متى ما تريد</p>
</div>

ومخرجات الشيفرة السابقة ستكون كما في الشكل التالي -قبل أن يتم النقر على الزر-في أول مرة:

أداة العرض المتكرر Carousel

أداة العرض المتكرر أو أداة عرض الصور بشكل متحرك، أو ما يدعى بأداة عرض الشرائح Slider تعتبر من الأدوات الرائعة التي يقدمها إطار العمل Bootstrap، بحيث تمكِّن المصممون من إنشاء عرض للشرائح slides بشكل رائع وبخطوات بسيطة جدا، فهيا بنا ننشئ أداة العرض المتكرر Carousel:

في البداية، لا بد من إضافة الوسم الخارجي <div> والذي سيضم عناصر الأداة كاملة، ونضيف الصنف carousel. والصنف slide. إلى هذا الوسم، ونعطيه معرِّف id فريد ونسميه على سبيل المثال firstCarousel، وهناك فترة زمنية قصيرة بين ظهور كل صورة وأخرى ونحدد هذه الفترة من خلال الخاصية data-interval="3000" – وهذه القيمة تقاس بالملي ثانية أي أن الرقم 3000 السابق عبارة عن 3 ثوانٍ فقط -،طبعا الخاصية هذه تضاف إلى الوسم السابق، ولبدء تحريك الأداة عند تحميل الصفحة نضيف الخاصية data-ride="carousel".

كما في الشيفرة التالية:

<div id="firstCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  ...
</div>

محتويات أداة العرض المتكرر

تتكون أداة العرض المتكرر من عدة عناصر كما يلي:

  • عناصر المحتوى الداخلي (الصورة والنص الذي يصف الصورة).
  • عناصر تحريك المحتويات باتجاه اليمين أو اليسار.
  • عناصر إعلام المستخدم بمدى تقدم الأداة carousel-indecators.

والصورة التالية توضح هذه الأجزاء:

بعد أن تم إنشاء الإطار الخارجي للأداة سننشئ الآن المكونات، وأول هذه المكونات هي المحتويات الأساسية أو الداخلية inner وأقل شيء يمكن إضافته للمحتويات هو الصورة، ولكن قبل أن نضيف الصورة سننشئ جزء المحتويات باستخدام الوسم <div> مع الصنف carousel-inner. ومن ثم ننشئ جزء مخصص لكل عنصر من المحتويات الداخلية باستخدام الصنف item. مع الوسم <div> ونضيف الصنف active. لأول عنصر ولا نضيفه مع بقية العناصر، ومن ثم نضيف الصورة باستخدام الوسم <img>، وأما النصوص التي تصف الصورة وتظهر في الجزء السفلي من الأداة فيتم أضافتها باستخدام الصنف carousel-caption. مع الوسم <div>، كما في الشيفرة التالية:

<div class="carousel-inner">
  <div class="active item">
    <img src="img/1.jpg" alt="image 1"/>
    <div class="carousel-caption">
      <h3>العمل الاول للمؤسسة</h3>
      <p>وصف للعمل الذي أعطينا صورته في الخلفية وهذا مجرد نص أمامي</p>
    </div>
  </div>
  ...

تتحرك المحتويات تلقائيا في وقت معين كما حددناه في الإطار الخارجي للأداة ولكن أذا رغبنا بإعطاء المستخدم الحرية في التنقل بين الشرائح فقد وفر إطار العمل Bootstrap3 هذه الخاصية من خلال استخدام الصنف carousel-control left. للتحريك باتجاه اليسار أو الصنف carousel-control right. للتحريك باتجاه اليمين، ونستخدم هذا الصنف مع الوسم <a>، ولابد من إضافة الخاصية data-slide="" ونضع لها القيمة إما prev للعودة إلى الشريحة السابقة أو القيمة next للتقدم إلى الشريحة التالية، ولا تنسى أن تضيف أيقونة تعبر عن الاتجاه، وذلك باستخدام الصنف .glyphicon-chevron-* مع الوسم <span>، ونستبدل الرمز * بـ left أو right حسب الاتجاه، كما في الشيفرة التالية:

<a class="carousel-control left" href="#firstCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>

<a class="carousel-control right" href="#firstCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

ولاستكمال بقية العناصر في الصورة السابقة سنضيف المزيد من الوضوح إلى الأداة فنستخدم عنصر التنبيه لإعلام المستخدم بمدى تقدم أداة العرض وهذه الأداة مهمة خصوصا إذا كان العرض يحتوي على الكثير من المحتويات، ونضيفها باستخدام الصنف carousel-indicators. مع وسم القائمة <ol> وعلى حسب عدد مكونات الأداة نضيف عناصر <li> في هذه القائمة، وعناصر القائمة <ol> تأخذ الخاصية data-target="#carousel-id" وقيمة هذه الخاصية عبارة عن معرّف لأداة العرض المتكرر، ونضيف الخاصية data-slide-to="#" بحيث تحتوي قيمة هذه الخاصية على رقم الشريحة الظاهرة في الوقت الحالي على الأداة ويبدأ الترقيم من الصفر صعودا إلى عدد الشرائح في الأداة. كما في المثال التالي:

<ol class="carousel-indicators">
  <li data-target="#firstCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#firstCarousel" data-slide-to="1"></li>
  <li data-target="#firstCarousel" data-slide-to="2"></li>
</ol>

وبهذا نكون قد انتهينا من تكوين أداة عرض متكرر بسيطة، وهذه الشيفرة الكاملة للأداة والتي ستكون مخرجاتها كما في الصورة السابقة الذكر:

<div id="firstCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  <div class="carousel-inner">
    <div class="active item">
      <img src="img/1.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <img src="img/2.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <img src="img/3.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <a class="carousel-control left" href="#firstCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>

  <a class="carousel-control right" href="#firstCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

  <ol class="carousel-indicators">
    <li data-target="#firstCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#firstCarousel" data-slide-to="1"></li>
    <li data-target="#firstCarousel" data-slide-to="2"></li>
  </ol>
</div>

بإمكانك عزيز القارئ أن تراجع جميع أمثلة هذه المقالة وتعدل عليها وتضيف أشياء من عندك لكي تستفيد بأكبر قدر ممكن لأن القراءة وحدها لا تكفي، وستكون قادرا على التعامل مع إطار العمل Bootstrap بكل المميزات إذا عملت على تطبيق كل جزئية وزدت عليها بأمثلة من عندك فإذا كان الوقت متاحًا لك حاليا، فلا تتردد في تطبيق المزيد من الأمثلة وتكثر من الاطلاع، فقد لا يكون الوقت متاحا لك مرة أخرى.

]]>56Sat, 04 Apr 2015 07:50:00 +0000القوائم المنسدلة (Dropdowns)، التبويبات (Tabs) وأشرطة القوائم (Navbars) في إطار Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/%D8%A7%D9%84%D9%82%D9%88%D8%A7%D8%A6%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9-dropdowns%D8%8C-%D8%A7%D9%84%D8%AA%D8%A8%D9%88%D9%8A%D8%A8%D8%A7%D8%AA-tabs-%D9%88%D8%A3%D8%B4%D8%B1%D8%B7%D8%A9-%D8%A7%D9%84%D9%82%D9%88%D8%A7%D8%A6%D9%85-navbars-%D9%81%D9%8A-%D8%A5%D8%B7%D8%A7%D8%B1-bootstrap-r55/

يوفر إطار العمل Bootstrap الكثير من المكونات والعناصر التي يمكن استخدامها في تصميم موقعك بشكل منسّق، لأن كل هذه المكونات لديها أنماط وتنسيقات مجهّزة ومعدّة سلفا، وما عليك إلا الاهتمام بمكان وضع هذه المكونات وكيفية استخدامها أما عن تنسيقها فاترك الأمر لـِ Bootstrap، وفي هذه المقالة سنتناول بعضًا من هذه المكونات.

القوائم المنسدلة Drop Downs

لإضافة قائمة منسدلة لأي عنصر في الصفحة يجب أن نتعرف على ثلاثة قواعد أساسية وهي:

  1. وجود العنصر الذي نريد أن تظهر القائمة المنسدلة عليه.

  2. وجود القائمة التي ستظهر إذا تم النقر على العنصر.

  3. نضع العنصر مع القائمة في الوسم <div> والذي سيأخذ الصنف .dropdown

والمثال التالي يوضح قائمة منسدلة بسيطة للعنصر <button>:

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" id="dropdwonmenu1" data-toggle="dropdown">
    <span class="glyphicon glyphicon-cog"></span> الإعدادات    
  </button>    

  <ul class="dropdown-menu" role="menu" aria-lablledby="dropdownmenu1">
    <li role="presentatino">
      <a href="#" role="menuitem" >الإعدادات الشخصية </a>
    </li>
    <li role="presentation"> 
      <a href="#" role="menuitem" >إعدادات الصفحة</a>        
    </li>        
    <li role="presentation">           
      <a href="#" role="menuitem" >الإعدادات العامة</a>        
    </li>    
  </ul>
</div>

وهذه مخرجات الشيفرة السابقة:

تم استخدام الصنف dropdown. مع الوسم الذي يحيط بكلا من الزر والقائمة، واستخدمنا الصنف .dropdown-toggle مع الزر <button>،ويعمل هذا الصنف على إظهار القائمة إذا كانت مخفية أثناء النقر على الزر وإخفائها إذا كانت ظاهرة، وتم استخدام أيقونة الإعدادات لتدل على المحتوى، ولاحظ أيضا أنه تم استخدام الصّنف .dropdown-menu مع القائمة <ul> واستخدام الخاصية aria-labelledby وقيمتها عبارة عن المعرف id للزّر، ولا تغفل عن الخاصية role مع كل عنصر من العناصر السابقة فكل عنصر له دوره في هذه القائمة.

إضافة عنوان وفواصل بين أجزاء القائمة

يمكن إضافة عنوان لكل مجموعة عناصر في القائمة باستخدام الصنف .dropdown-header وإضافته كصنف لعنصر من عناصر القائمة، ويمكن كذلك إضافة فاصلة تفصل عناصر المجموعة عن بعضها البعض تستطيع استخدامها قبل كل عنوان أو مع كل مجموعة عناصر لها معنى مشترك وذلك باستخدام الصنف .divider كما يلي:

<div class="dropdown">  
  <a href="#"  class="btn btn-primary dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
    الخدمات  
    <span class="caret"></span>    
  </a>    

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">        
    <li role="presentation" class="dropdown-header">طرق الدفع المتوفرة</li>        
    <li role="presentation" >
      <a role="menuitem" tabindex="-1" href="#">فيزا</a>        
    </li>        
    <li role="presentation">            
      <a role="menuitem" tabindex="-1" href="#">ماستر</a>       
    </li>        
    <li role="presentation">           
      <a role="menuitem" tabindex="-1" href="#"> الدفع عند التوصيل </a>        
    </li>        
    <li role="presentation" class="divider"></li>        
    <li role="presentation" class="dropdown-header">رأس القائمة بعد الفاصل</li>       
    <li role="presentation">            
      <a role="menuitem" tabindex="-1" href="#">عنصر في القائمة</a>       
    </li>   
  </ul>
</div>

ومخرجات الشيفرة السابقة كما يلي:

محاذاة القائمة

تعمل المحاذاة على إظهار القائمة في الجهة المقابلة للعنصر فإذا كان العنصر في الجهة اليسرى للصفحة فعند النقر عليه تظهر القائمة في الجهة اليمنى من الصفحة والعكس صحيح وبإمكانك إدراج المحاذاة باستخدام الصنف .pull-right في وسم القائمة <ul> كما يلي:

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
  ...
</ul>

بإمكانك اكتشاف النتيجة بنفسك من خلال تطبيق مثال مناسب أو من خلال الأمثلة المرفقة بهذا الدرس.

التبويبات Tabs

يوفر عنصر التبويبات الكثير من المساحة في الصفحة ذلك لأنه يعرض جزءًا من المحتوى مع كل تبويب يتم اختياره كما هو موضح في الصورة التالية:

<ul class="nav nav-tabs">    
  <li class="active"><a data-toggle="tab" href="#sectionA">التبويب الأول</a></li>    
  <li><a data-toggle="tab" href="#sectionB">التبويب الثاني</a></li>    
  <li class="dropdown">        
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      تبويب القائمة المنسدلة <b class="caret"></b>
    </a>        
    <ul class="dropdown-menu">           
      <li><a data-toggle="tab" href="#dropdown1">العنصر الأول</a></li>           
      <li><a data-toggle="tab" href="#dropdown2">العنصر الثاني</a></li>       
    </ul>    
  </li>
</ul>

<div class="tab-content">   
  <div id="sectionA" class="tab-pane fade in active">      
    <h3>القسم الأول</h3>       
    <p>المحتوى...</p>    
  </div>   
 
  <div id="sectionB" class="tab-pane fade">      
    <h3>القسم الثاني</h3>          
    <p>المحتوى...</p>   
  </div>    

  <div id="dropdown1" class="tab-pane fade">      
    <h3>القسم الثالث</h3>       
    <p>المحتوى...</p>   
  </div>    

  <div id="dropdown2" class="tab-pane fade">        
    <h3>القسم الرابع</h3>        
    <p>المحتوى...</p>    
  </div>
</div>

يستخدم الصنف .nav والصنف .nav-tabمع الوسم <ul> الذي يستخدم لإنشاء قائمة التبويبات، وتستخدم الخاصية data-toggle="tab" مع كل عنصر في القائمة، وبالإمكان استخدام القائمة المنسدلة كتبويب وذلك باستخدام الصنف .dropdown-menu مع الوسم <ul>، ويمكن إضافة محتوى للتبويب من خلال استخدام الصنف .tab-content مع الوسم <div> الذي يضم محتوى كل التبويبات، واستخدام الصنف .tab-pane مع الوسم <div>الذي يضم محتوى التبويب، ولا تنس إضافة المُعرّف id مع كل وسم <div> لأجل أن يتم الإشارة إليه في الخاصية href="#id" في قائمة التبويبات.

شريط القوائم Navbar

يوفر إطار العمل Bootstrap أشرطة قوائم متعددة ومختلفة، بمعرفة أسماء الأصناف وقليل من الجهد تستطيع إضافتها وتخصيصها حسب الحاجة.

شريط القوائم الافتراضي

وسنبدأ الشرح بشريط الأدوات الافتراضي والذي لا يحتوي على أي عناصر إضافية فقط عناصر القائمة ذات الوسم <li>، يمكن إضافته عن طريق إضافة الصنف .navbar والصنف .navbar-default و الخاصية role="navigation" إلى الوسم <nav>، كما يلي:

<nav class="navbar navbar-default" role="navigation">    
  <div class="navbar-header">        
    <a class="navbar-brand" href="#">إطار العمل Bootstrap 3</a>    
  </div>    

  <div>       
    <ul class="nav navbar-nav">            
      <li class="active"><a href="#">الرئيسية</a></li>            
      <li><a href="#">عن الكاتب</a></li>            
      <li class="dropdown">               
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          مكونات إطار العمل 
          <b class="caret"></b>                
        </a>                
        <ul class="dropdown-menu">                    
          <li><a href="#">القوائم المنسدلة</a></li>                    
          <li><a href="#">التبويبات</a></li>
          <li><a href="#">أشرطة القوائم</a></li>
          <li class="divider"></li>
          <li><a href="#">الأزرار</a></li>
          <li class="divider"></li>
          <li><a href="#">النماذج</a></li>
        </ul>            
      </li>        
    </ul>    
  </div>
</nav>

قبل أن ننتقل إلى الحديث حول الخصائص الإضافية دعونا نعرج قليلا على الشيفرة السابقة. الصنف .navbar-brand يتم وضع صورة أو نص لشعار الموقع، ويظهر بشكل مميز عن بقية عناصر القائمة، الصنف .dropdown المستخدم مع الصنف <li> يستخدم لإنشاء قائمة منسدلة كما تعرفنا على ذلك مسبقا، والصنف .active تجعل من العنصر الذي يوضع فيه هو العنصر الفعّال، أي العنصر الذي تم اختياره.

شريط القوائم المتجاوب Responsive

الوضع الافتراضي في شريط الأدوات أنه مناسب مع شاشات الأجهزة الكبيرة والمتوسطة والأجهزة اللوحية ولكن يمكن جعل شريط القوائم متجاوب مع شاشات الأجهزة الصغيرة أيضا من خلال استخدام الصنف .collapse والصنف .navbar-collapse إلى الوسم <nav> فيعمل على تقليص القائمة إلى زر في حالة الشاشات الصغيرة، وعند النقر على الزر تنسدل القائمة بكل محتوياتها، كما يوضح الشكل التالي:

وشيفرة تكوين شريط القوائم المنسدلة هي:

<nav class="navbar navbar-default" role="navigation">    
  <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">  
      <span class="sr-only">قائمة منسدلة</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">شريط متجاوب</a>    

  </div>

  <div class="collapse navbar-collapse" id="example-navbar-collapse">    
    <ul class="nav navbar-nav">        
      <li class="active"><a href="#">الرئيسية</a></li>
       ...
</nav>

نقلت لكم الجزء الذي عليه تعديلات أما بقية الشيفرة فكما هي موضحة في شيفرة الشريط الافتراضي. وكما تلاحظ فإننا استعملنا الصنف .navbar-toggle مع وسم الزر <button> لكي يظهر أو يخفي القائمة عكس للوضع التي هي عليه( إذا كانت ظاهرة يقوم بإخفائها وإذا كانت مخفية يظهرها)، وتم استعمال الأيقونات الثلاث التي تعطي شكل مميز للزر عند ظهوره كما لاحظت في الصورة السابقة، كذلك إضافة الخاصية data-target="#id" ويشير إلى المعرف الخاص بالوسم <div> المضاف في هذه الشيفرة ليحتوي عناصر القائمة كاملة و يأخذ الصنف .collapse والصنف .navbar-collapse، اللذان يعطيانه خاصية تقليص collapse شريط القائمة في حالة الشاشات الصغيرة.

إضافة عناصر أخرى في شريط القوائم

يمكن إضافة عناصر مختلفة إلى شريط القوائم مثل أداة النصوص والأزرار والنصوص التوضيحية والروابط، وأدوات النماذج بشكل عام، حسب الحاجة، فقد تحتاج إلى إضافة مربع للبحث، إضافة نصوص توضيحية، أو روابط مناسبة (كروابط الشبكات الاجتماعية، أو روابط داخل الموقع)، كما في الشكل التالي:

وهذه شيفرة الشكل السابق:

<nav class="navbar navbar-default" role="navigation">    
  <div class="navbar-header">        
    <a class="navbar-brand" href="#">إضافة النماذج</a>    
  </div>   
 
  <div>        
    <button type="button" class="btn btn-default navbar-btn navbar-right">            
      <span class="glyphicon glyphicon-download"></span> تحميل المنتج       
    </button>        
 
    <form class="navbar-form navbar-right" role="search">            
      <div class="form-group">               
        <input type="text" class="form-control" placeholder="بحث عن...">           
      </div>            
      <button type="submit" class="btn btn-default">بحث</button>        
    </form>        
   
    <p class="navbar-text navbar-left" style="text-align:left;">هذا نص يمكن به توضيح أي شيء</p>            
    <a href="#" class="navbar-link navbar-left">هذا رابط</a>    
  </div>
</nav>

إذًا يمكنك إطار العمل Bootstrap من إضافة العديد من العناصر ففي المثال تمت إضافة نموذج وزر ورابط تشعبي ونص عادي، وتلاحظ أيضا في الشكل السابق أن العناصر لم تكن في موضع واحد بل كان منها عناصر في الجهة اليسرى وأخرى في الجهة اليمنى وهذا ما يدعى المحاذاة في شريط القوائم، فيمكنك محاذاة العناصر باستخدام الصنف .navbar-left أو .navbar-right ولكن شريطة أن تحتوي أيضا على الصنف .navbar-* والرمز * يمكن استبداله بأي خاصية مناسبة (.navbar-form, .navbar-link, .navbar-text, .navbar-btn).

شريط القوائم المتحرك Fixed

صحيح أنك قد لا تستطيع تحريكها أينما تريد ولكن هذه القائمة تتحرك عندما تحرك عجلة الفأرة أو عند تحريك شريط التمرير الجانبي، نزولا وصعودا، وقد يكون الشريط في أعلى أو أسفل الصفحة حسب الحاجة إلى ذلك. تستطيع أن تضيف هذا الشريط باستخدام الصنف .navbar-fixed-* مع الوسم <nav> والرمز * يتم استبداله بـ top أو bottom حسب المكان الذي ترغب في ظهور شريط القوائم فيه كما في الصورة التالية فتلاحظ القائمة العلوية والسفلية ولكن لا يمكن تجربة تحريكها لأنها صورة! وستكتشف أنت ذلك عندما تطبق هذا الجزء من المقال:

وهذه شيفرة الشكل السابق:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  ...
</nav>

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  ...
</nav>

شريط القوائم الثابتة static

يتميز هذا النوع من أشرطة القوائم بثباته في الموقع فلا يمكن إضافة الصنف .navbar-fixed إليه، ويستخدم الصنف .navbar-static-* وكما أسلفنا بأنه يتم استبدال الرمز * في حالة القائمة العلوية بـ top وفي حالة القائمة السفلية بـ bottom. والشكل سيكون نفس الأشكال السابقة، يمكنك الاطلاع عليه من خلال الأمثلة المرفقة أو أن تقوم بتطبيق ذلك بنفسك.

تنسيق مميز من إطار العمل Bootstrap لشريط القوائم

يستخدم الصنف .navbar-inverse لعكس اللون الأمامي مع اللون الخلفي فيصبح الأسود أبيض والأبيض أسودا. وهذا يعطي شكلًا مُميّزًا للقائمة، كما تلاحظ في الصورة التالية:

وهذا جزء من الشيفرة الخاصة بعكس ألوان شريط القوائم:

<nav class="navbar navbar-default navbar-inverse" role="navigation">    
  <div class="navbar-header">
    ...
</nav>

القوائم lists

تعتبر القوائم <ul> من أساسيات الـ HTML ، وفي الـ Bootstrap كذلك، فبإمكانك تكوين قائمة بشكل منظم وبسيط، فمجرد استخدامك للصنف .list-group مع الوسم <ul> والصنف .list-group-item مع الوسم <li> ستنشئ قائمة بتنسيق رائع نوعا ما – لأن هناك بعض الأصناف والخصائص سنتحدث عنها في الفقرات التالية من المقال- وليس هذا فحسب بل وهناك مكونات تستطيع إضافتها إلى القائمة، والشيفرة التالية لتكوين قائمة من أربعة عناصر:

<ul class="list-group">    
  <li class="list-group-item">المنتجات</li>    
  <li class="list-group-item">الخدمات العامة</li>    
  <li class="list-group-item">كبار العملاء</li>   
  <li class="list-group-item">التخفيضات</li>
</ul>

ومخرجات الشيفرة السابقة كما يلي:

وتستطيع إضافة القائمة السابقة إلى موقعك من خلال الوسم <a> أيضا ولكن يلزم أن تتضمَّن كل الوسوم <a> التي تكون القائمة ضمن الوسم <div> والذي سيأخذ الصنف .list-group بينما الوسم <a> سيأخذ الصنف .list-group-item باعتباره يكوّن عناصر القائمة وهذه شيفرة تكوين القائمة باستخدام الوسم <a> أما النتيجة فستكون كما في الصورة السابقة:

<div class="list-group">
  <a class="list-group-item">المنتجات</a>
  <a class="list-group-item">الخدمات العامة</a>
  <a class="list-group-item">كبار العملاء</a>
  <a class="list-group-item">التخفيضات</a>
</div>

تنسيقات وعناصر أكثر في القائمة

هناك بعض التنسيقات التي تستطيع إضافتها من خلال إطار العمل Bootstrap إلى القائمة، كأن تضيف عنوان وتضع له نصا في نفس القائمة أو أن تضيف عنوان لمجموعة من العناصر داخل القائمة، فالصنف .list-group-item-heading يستخدم مع الوسم <h*> الذي يستخدم كعنوان لعنصر في القائمة، والصنف .list-group-item-text يستخدم مع الوسم <p> لكتابة محتوى عنصر القائمة ، ولعنونة مجموعة من العناصر داخل القائمة، نستخدم النص .active مع الوسم <a> أي أنه عنصر في القائمة ولكن يحتوي على الوسم <h*> المستخدم للعنونة كما في الشيفرة التالية والتي تحتوي على عنوان لمجموعة عناصر وعنوان ومحتوى لكل عنصر:

<div class="list-group">

  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">
      المنتجات
    </h4>
  </a>

  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">
      مواد غذائية
    </h4>
    <p class="list-group-item-text">
      ننتج العديد من المواد الغذائية كالبسكويت والعصائر...        
    </p>
  </a>

  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">
      الحلويات
    </h4>
    <p class="list-group-item-text">
      الحلويات من أهم المنتجات التي نتميز بها...
    </p>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">
      المنتجات المستوردة
    </h4>
  </a>

  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">
      السكر
    </h4>
    <p class="list-group-item-text">
      نستورد أجود أنواع السكر البرازيلي...
    </p>
  </a>
</div>

وهذه مخرجات الشيفرة السابقة، كما تلاحظ يوجد عنونة لمجموعة من العناصر في القائمة وعنونة في العنصر نفسه مع وجود محتوى يصف العنوان في كل عنصر:

إضافة شارات مميزة Badges إلى القائمة

الإشارات المميزة badges تعتبر من الإضافات الرائعة التي يمكن دمجها مع القوائم فتعطي انطباع حول محتويات القائمة أو إشارة إلى عنصر محدد في القائمة يتميز عن بقية العناصر كما تلاحظها في الصورة التالية:

وشيفرة إضافة الإشارات المميزة كما يلي:

...
<li class="list-group-item">كبار العملاء </li>
<li class="list-group-item">
    <span class="badge">جديد</span> الفروع
</li>
<li class="list-group-item">المبيعات</li>
<li class="list-group-item">
  <span class="badge">الفترة محدودة</span>تخفيضات آخر الموسم
</li>
...

فكل ما استخدمناه هو وسم الـ <span> مع الصنف .badge الذي يستدعي الإشارة المميزة في طرف القائمة.

وبهذا نكون قد انتهينا من ذكر بعض مكونات الـ bootstrap وإن شاء الله في مقال مكونات إطار العمل Bootstrap -الجزء الثاني- سنتطرق إلى المكونات الأخرى.

]]>55Thu, 02 Apr 2015 13:31:03 +0000الأزرار والأيقونات والنماذج في إطار العمل Bootstraphttps://academy.hsoub.com/programming/css/bootstrap/%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1-%D9%88%D8%A7%D9%84%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D9%81%D9%8A-%D8%A5%D8%B7%D8%A7%D8%B1-%D8%A7%D9%84%D8%B9%D9%85%D9%84-bootstrap-r52/

تعتبر الأزرار من أهم العناصر المستخدمة في صفحات الويب لذا فقد اهتم بها إطار العمل Bootstrap وأعطاها خصائص كثيرة ومتعددة، تستطيع تكوين الأزرار باستخدام الوسم <button></button> أو الوسم <a></a>.فيما يلي عرض للأصناف التي يمكن إضافتها إلى الوسمين السابقين لتخصيص الأزرار حسب الحاجة:

  • .btn وهو الصنف الرئيسي الذي لابد من إضافته في أي زر سواء كان باستخدام الوسم <button> أو <a>.
  • .btn-primary ويستخدم مع الزر الأساسي في الصفحة أو النموذج.
  • .btn-info ويستخدم مع زر الحصول على المعلومات.
  • .btn-warning ويستخدم في حالة كانت هناك احتمالات أخرى وأردت تنبيه المستخدم لذلك.
  • .btn-danger ويستخدم في حالة التحذير من عواقب الإقدام على شيء كأن تستخدمه ليكون زر حذف شيء معين من الصفحة.
  • .btn-default الزر الافتراضي بدون أي تنسيقات إضافية، ويستخدم في أي حالة أخرى غير الحالات السابقة.

مثال يوضح استخدامات الأصناف السابقة وتأثيرها على الأزرار:

<button type="button" class="btn">زر بدون تأثير</button>
<button type="button" class="btn btn-default">الزر الافتراضي</button>
<button type="button" class="btn btn-primary">زر أساسي</button>
<button type="button" class="btn btn-info">المزيد من المعلومات</button>
<button type="button" class="btn btn-warning">انتبه لهذا</button>
<button type="button" class="btn btn-danger">زر الخطر</button>

<button type="button" class="btn btn-success">إنهاء بنجاح</button>
<button type="button" class="btn btn-link">الزر كارتباط تشعبي</button>

ومخرجات الشيفرة السابقة كما يلي:

buttons.thumb.png.b69ca635420b03e4bbc184

وتنطبق هذه الأصناف أيضا على الوسم <a></a> جرب ذلك واكتشف النتيجة بنفسك.

تخصيص الأزرار (الحجم)

يوفر إطار العمل Bootstrap عدة مقاسات تستطيع استخدامها وتخصيص الزر بالحجم الذي تريد كما يلي:

  • .btn-lg صنف للشاشات الكبيرة.
  • md. الحجم المُتوسّط (إذا لم تستعمل أي صنف فسيكون الحجم الافتراضي وهو الحجم المتوسط)
  • .btn-sm صنف للشاشات الصغيرة.
  • .btn-xs صنف للشاشات الصغرى.

وهذا الكود يوضح كيفية استخدام هذه الأصناف لتخصيص حجم الأزرار:

<button type="button" class="btn btn-primary btn-lg">
    زر بدون تأثير وحجم كبير 
</button>
<button type="button" class="btn btn-default">
    الزر الافتراضي بالحجم الافتراضي
</button>
<button type="button" class="btn btn-primary btn-sm">
    زر أساسي وحجم صغير
</button>
<button type="button" class="btn btn-primary btn-xs">
    المزيد من المعلومات والحجم الأصغر
</button>
<button type="button" class="btn btn-warning btn-lg">
    انتبه لهذا الحجم الكبير
</button>
<button type="button" class="btn btn-danger btn-sm">
    زر الخطر الحجم الصغير
</button>

مخرجات الشيفرة السابقة:

buttons-sizes.thumb.png.91f2e5368f7328f6

تجميع الأزرار في مجموعة واحدة

يسمح لك الصنف .btn-group بإنشاء مجموعة من الأزرار وتجميعها في صف واحد. لإنشاء ذلك ننشئ تقسيم في الصفحة باستخدام الوسم <div> ونستعمل الصنف .btn-group لهذا الوسم، ومن ثم ننشئ الأزرار داخله كما يلي:

<div class="btn-group"> 
  <button type="button" class="btn btn-primary">1</button> 
  <button type="button" class="btn btn-primary">2</button> 
  <button type="button" class="btn btn-primary">3</button> 
  <button type="button" class="btn btn-primary">4</button>
</div>

مخرجات الشيفرة السابقة:

btn-group.thumb.png.6caf57a1a0b834b407b1

وبإمكانك تخصيص حجم الأزرار كاملة في هذه المجموعة من خلال استخدام الصنف.btn-group-* وتستبدل الرمز * بأي حجم (lg-sm-xs). وتستطيع استخدام الصنف.btn-group-justified لتكون جميع الأزرار متساوية مع بعضها البعض وتتمدد لتشمل كل العرض (width) المتوفر.

وهناك صنف آخر وهو .btn-block يمكنك من خلاله أن تجعل الزر يأخذ عرض الصفحة كاملة أو عرض العنصر الأب فإذا وجد في عمود من أعمدة النظام الشبكي Grid system فإنه يأخذ عرض(width) العمود كاملا، وهذا يوضع عادة في المتاجر الإلكترونية عند شراء المنتجات أو يستخدم في صفحات تحميل البرامج وغيرها، مثال:

<button type="button" class="btn btn-default btn-lg btn-block">
   هذا الزر يأخذ عرض الصفحة كاملا
</button>

<hr/>
<button type="button" class="btn btn-primary btn-lg btn-block">
  <span class="glyphicon glyphicon-download"></span> تحميل المرفقات
</button>

<hr/>
<div class="row">

  <div class="col-sm-4"> 
    <button type="button" class="btn btn-warning btn-lg btn-block">
      <span class="glyphicon glyphicon-credit-card"></span> شراء المنتج
    </button> 
  </div>

  <div class="col-sm-8"> 
    <button type="button" class="btn btn-success btn-lg btn-block">
      <span class="glyphicon glyphicon-send"></span> ارسل
    </button> 
  </div>

</div>

مخرجات الشيفرة السابقة:

btn-block.thumb.png.c8dcf8c328e1016ceee8

ملاحظة: بإمكانك الاطلاع على كافة الخصائص والأصناف التي تم شرحها من خلال الأمثلة المرفقة.

الأيقونات

تستخدم الأيقونات مع الأزرار والقوائم وأشرطة الأدوات Toolbars، وأدوات التنقل Navigation، والنماذج وغيرها من العناصر الأخرى، وهناك حوالي 200 أيقونة يوفرها Bootstrap. لا يتوجب عليك حفظ أسماء الأيقونات فإذا احتجت إلى اسم أيقونة كل ما عليك فعله هو زيارة الموقع الرسمي لإطار العمل.

دائما تستخدم الأيقونات مع الوسم <span> وتستدعى من خلال الصنف.glyphicon والصنف.glyphicon-name حيث أن الصنف الأول لتهيئة التصميم لاستقبال الأيقونات، والصنف الثاني لاستدعاء اسم الأيقونة المراد استخدامها.

<span class="glyphicon glyphicon-download"></span>
<span class="glyphicon glyphicon-qrcode"></span>

<button class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-search"></span>
</button>

<button class="btn btn-info btn-md">
  <span class="glyphicon glyphicon-envelope"></span> ارسل الرسالة
</button>

<a href="#" class="btn btn-sucess btn-lg">
  <span class="glyphicon glyphicon-comment"></span>إضافة تعليق
</a>

مخرجات الشيفرة السابقة:

glyphicon.thumb.png.38cc79929ac8dfa4a8d1

النماذج وعناصرها في Bootstrap

كان تصميم النماذج وتنسيق كل عنصر داخل النموذج من أصعب الأعمال التي يقوم بها المصمم أثناء العمل على تصميم المواقع، ولكن Bootstrap وفر الكثير من الجهد في هذا الجانب وأعطى تنسيقًا لكل عنصر داخل النموذج. ويقسم Bootstrap النماذج إلى ثلاثة أنواع:

  1. النموذج العمودي
  2. النموذج الأفقي.
  3. نموذج السطر الواحد inline.

قبل البدء بتفاصيل كتابة الشيفرة والأصناف المتوفرة لكل نوع من الأنواع السابقة، دعونا نتفق على القواعد التالية:

  • الخاصية <"form role="form> نستخدمها دائما مع النماذج.
  • يجب أن تكون العناصر <"label></label> ،<input type="text/> داخل الوسم <"div class="form-group> وذلك لإعطائها التنسيق المناسب.
  • نستخدم الصنف .form-control مع العناصر <input> ،<textarea> ،<select>.

وفيما يلي الأصناف المستخدمة والتنسيق النهائي الذي يظهر على النموذج في كل نوع من الأنواع الثلاثة السابقة:

النموذج العمودي

وهو النموذج الافتراضي الذي تتسلسل فيه الأدوات بشكل عمودي، كما في الشكل التالي:

form.thumb.png.76f0bfd2832e956da517e6cf2

شيفرة النموذج السابق:

<form role="form"> 

  <div class="form-group"> 
    <label for="inputtext">اسم المستخدم:</label> 
    <input type="text" id="inputtext" class="form-control" placeholder="اسم المستخدم" /> 
  </div> 

  <div class="form-group"> 
    <label for="password">كلمة المرور:</label> 
    <input type="password" id="password" class="form-control" placeholder="كلمة المرور"/> 
  </div> 

  <div class="checkbox"> 
    <label><input type="checkbox" />تذكرني على هذا المتصفح</label> 
  </div> 
  <input type="button" class="btn btn-primary btn-md" value="تسجيل الدخول"/>

</form>

وكما تلاحظ يجب أن تلتزم بالقواعد السابقة الذكر لكي يظهر التصميم بالشكل المطلوب.

النموذج الأفقي

التنسيق في هذا النموذج مختلف عن تنسيق النموذج السابق حيث يتم وضع كل العناصر المترابطة في ترتيب أفقي كما هو موضح في الشكل التالي:Horizontal-form.png

وشيفرة النموذج كما يلي:

<form class="form-horizontal" role="form"> 

  <div class="form-group"> 
    <label for="inputtext"class="control-label col-md-2">اسم المستخدم:</label> 
    <div class="col-md-10"> 
      <input type="text" id="inputtext" class="form-control" placeholder="اسم المستخدم" /> 
    </div> 
  </div> 

  <div class="form-group"> 
    <label for="password" class="control-label col-md-2">كلمةالمرور:</label> 
    <div class="col-md-10"> 
      <input type="password" id="password" class="form-control" placeholder="كلمة المرور"/> 
    </div> 
  </div> 

  <div class="form-group"> <div class="col-xs-offset-2 col-xs-10"> 
    <div class="checkbox" class="col-xs-offset-2 col-xs-10"> 
      <label><input type="checkbox"/>تذكرني على هذا المتصفح</label> 
    </div> 
  </div> 

  <div class="col-xs-offset-2 col-xs-10"> 
    <input type="button" class="btn btn-primary btn-md" value="تسجيل الدخول"/> 
  </div>

</form>

وكذلك هناك اختلاف في شيفرة النموذج والعناصر المكونة له فأولا لابد من إضافة الصنف.form-horizontal إلى وسم النموذج <form class="form-horizontal">، ومن ثم يتم إضافة الصنف , .col-*-* والصنف .control-label إلى كل وسم <label> داخل النموذج، وإضافة تقسيمات <div> في كل عنصر له الوسم <input>. كل عنصر يحتوي على الصنف .col-xs-offset-* فتتم إزاحته بمقدار القيمة التي ستوضع بدلا من الرمز *، كما تلاحظ في صندوق الاختيارcheckbox والزرbutton في النموذج السابق.

نموذج السطر الواحد Inline form

في هذا النوع من النماذج يتم تجميع كل عناصر النموذج في سطر واحد، ولكن هذا النوع من النماذج لا يلائم الأجهزة ذات الشاشات الصغيرة كالأجهزة المحمولة، ولكن بمجرد الدخول للموقع من هذه الأجهزة فسيتحول مباشرة إلى النموذج من النوع العمودي الذي تقدم ذكره.

inline-form.thumb.png.bb11b7af2adcc3602c

وشيفرة تكوينه على النحو التالي:

<form class="form-inline" role="form"> 

  <div class="form-group"> 
    <label class="sr-only" for="inputEmail">البريد الإلكتروني</label> 
    <input type="email" class="form-control" id="inputEmail" placeholder="البريد الإلكتروني"> 
  </div> 

  <div class="form-group"> 
    <label class="sr-only" for="inputPassword">كلمة المرور</label> 
    <input type="password" class="form-control" id="inputPassword" placeholder="كلمة المرور"> 
  </div> 

  <div class="checkbox"> 
    <label><input type="checkbox"> تذكرني على هذا الجهاز</label> 
  </div> 

  <button type="submit" class="btn btn-primary">تسجيل دخول</button>
</form>

ولا تختلف هذه الشيفرة عن الشيفرات السابقة إلا بصنفين هما .form-inline المضاف إلى الوسم<form>والصنف .sry-only المضاف مع الوسم <label>. وتم استخدام الصنف .sry-only لغرض إخفاء هذا العنصر، لأنه من المستحسن دائما عند إضافة عنصر <input> من نوع نص أن يكون الوسم <label> مصاحبًا له دائما لذا ففي الـ Bootstrap تم إضافة الصنف .sry-only لهذا الغرض.

قد تلاحظ من خلال الأمثلة السابقة أن حجم العناصر داخل النموذج ثابت وقد لا يكون هذا الحجم مرغوب فيه لديك لذا بإمكانك تغيير أحجام هذه العناصر من خلال النظام الشبكي Grid system ، وهذا مثال يوضح ذلك:

<form> 

  <div class="row"> 
    <div class="col-xs-3"> 
      <input type="text" class="form-control"> 
    </div> 

    <div class="col-xs-4"> 
      <input type="text" class="form-control"> 
    </div> 

    <div class="col-xs-5"> 
      <input type="text" class="form-control"> 
    </div> 
  </div> 

  <br> 
  <div class="row"> 
    <div class="col-xs-3"> 
      <textarea class="form-control"></textarea> 
    </div> 

    <div class="col-xs-4"> 
      <textarea class="form-control"></textarea> 
    </div> 

    <div class="col-xs-5"> 
      <textarea class="form-control"></textarea> 
    </div> 
  </div>

</form>

مخرجات الشيفرة السابقة:

form-grid.thumb.png.0d82ab1839457938c341

خصائص إضافية

كما أسلفنا سابقا بأن إطار العمل وفّر Boostrap الكثير من الميزات في التعامل مع النماذج جعلت من التحكم بالأدوات وتنسيقها شيئا سهلًا جدًا، وأضاف أيضًا ميزات لم تكن موجودة في النماذج مسبقا ومنها:

إضافات لمدخلات Input

بدلا من أن نضع نصّا توضيحيًا أو أيقونة إضافية، أصبح من المُمكن إضافة أيقونة توضيحية أو زر مناسب مدمج مع المُدخلات<input type="text">و <textarea>، ولا بد أولا من التنبيه إلى اتباع القواعد التالية عند كتابة الشيفرة:

  1. الوسم <input> والوسم <span> -الذي سنضع من خلاله الأيقونات- يجب أن يكونا ضمن الوسم <div> والذي يأخذ الصنف .input-group
  2. الوسم <span> يأخذ الصنف .input-group-addon

وهذه الشيفرة توضح ذلك:

<form> 
  <div class="row"> 

    <div class="col-xs-4"> 
      <div class="input-group"> 
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-user"></span>
        </span> 
        <input type="text" class="form-control" placeholder="اسم المستخدم"> 
      </div> 
    </div> 

    <div class="col-xs-4"> 
      <div class="input-group"> 
        <input type="text" class="form-control" placeholder="المبلغ"> 
          <span class="input-group-addon">.00</span> 
        </div> 
      </div> 

      <div class="col-xs-4"> 
        <div class="input-group"> 
          <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" placeholder="دولار أمريكي"> 
          <span class="input-group-addon">.00</span> 
        </div> 
      </div> 
    </div>

  </div>
</form>

وهذه مخرجات الشيفرة السابقة:

input-group-addon.thumb.png.91826a94e685

ونستطيع أيضا أن نضيف إلى أدوات النصوص الكثير من العناصر الأخرى كأداة الاختيار checkbox أو radio لتصبح بهذا الشكل:

input-group-addon-radio.thumb.png.9b926b

وهذه شيفرة الشكل السابق:

<form> 
  <div class="row"> 

    <div class="col-xs-6"> 
      <div class="input-group"> 
        <span class="input-group-addon"> 
          <input type="checkbox"> 
        </span> 
        <input type="text" class="form-control"> 
      </div> 
    </div> 

    <div class="col-xs-6"> 
      <div class="input-group"> 
        <span class="input-group-addon"> 
          <input type="radio"> 
        </span> 
        <input type="text" class="form-control"> 
      </div> 
    </div> 

  </div>
</form>

أو إضافة أزرار جانبية إلى أدوات النصوص أيضا لتكون كما بالشكل التالي:

input-group-addon-buttons.thumb.png.f228

<form> 
  <div class="row"> 

    <div class="col-xs-6"> 
      <div class="input-group"> 
        <input type="text" class="form-control" placeholder="بحث عن&hellip;"> 
        <span class="input-group-btn"> 
          <button type="button" class="btn btn-default">ابحث</button> 
        </span> 
      </div> 
    </div> 

    <div class="col-xs-6"> 
      <div class="input-group"> 
        <span class="input-group-btn"> 
          <button type="button" class="btn btn-default">زر حدث</button> 
          <button type="button" class="btn btn-default">زر حدث آخر</button> 
        </span> 
        <input type="text" class="form-control" placeholder="ضع النص الذي تريد &hellip;"> 
      </div> 
    </div>
 
  </div>
</form>

ومن خصائص النماذج الإضافية التي توفرها الـ Bootstrap، خاصية إلغاء تفعيل مجموعة من العناصر مرة واحدة، فالأصل كما تعودنا عند التعامل مع النماذج باستخدام الـ html أنه يمكن إلغاء تفعيل عنصر واحد عن طريق الخاصية disabled أو readonly وهنا نستطيع أن نتعامل مع ذلك أيضا وإضافة إلى ذلك فنستطيع إلغاء مجموعة حقول عن طريق تضمينها في وسم <fieldset> ومن ثم إعطائه الخاصية disabled="disabled" أو readonly="readonly"، كما في المثال التالي:

<form class="form-horizontal" role="form"> 
  <fieldset disabled="disabled"> 

    <div class="form-group"> 
      <label for="inputtext"class="control-label col-md-2">اسم المستخدم:</label> 
      <div class="col-md-10"> 
        <input type="text" id="inputtext" class="form-control" placeholder="اسم المستخدم" /> 
      </div> 
    </div> 

    <div class="form-group"> 
      <label for="password" class="control-label col-md-2">كلمة المرور:</label> 
      <div class="col-md-10"> 
        <input type="password" id="password" class="form-control" placeholder="كلمة المرور"/> 
      </div> 
    </div> 

    <div class="form-group"> 
      <div class="col-xs-offset-2 col-xs-10"> 
        <div class="checkbox" class="col-xs-offset-2 col-xs-10"> 
          <label><input type="checkbox" />تذكرني على هذا المتصفح</label> 
        </div> 
      </div> 
    </div> 

    <div class="col-xs-offset-2 col-xs-10"> 
      <input type="button" class="btn btn-primary btn-md" value="تسجيل الدخول"/> 
    </div> 

  </fieldset>
</form>

تنسيق مخصص لعناصر النموذج

يوفر إطار العمل Bootstrap للمصمم خيارات متعددة لإعلام المستخدم بحالة الإدخال فمثلا التنبيه في حالة كانت البيانات صحيحة أو خاطئة أو تحذيره من النص المدخل أو اكتمال الإدخال بنجاح والشكل التالي يوضح ذلك:

control-feedback.thumb.png.33ac9cbe70f69

تنبيه المستخدم حسب صحة الإدخال

وهذه شيفرة الشكل السابق:

<form class="form-horizontal"> 

  <div class="form-group has-success has-feedback"> 
    <label class="col-xs-2 control-label" for="inputSuccess">اسم المستخدم</label> 
    <div class="col-xs-10"> 
      <input type="text" id="inputSuccess" class="form-control" placeholder="في حالة النجاح"> 
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
    </div> 
  </div> 

  <div class="form-group has-warning has-feedback"> 
    <label class="col-xs-2 control-label" for="inputWarning">كلمة المرور</label> 
    <div class="col-xs-10"> 
      <input type="password" id="inputWarning" class="form-control" placeholder="في حالة التحذير "> 
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> 
    </div> 
  </div> 

  <div class="form-group has-error has-feedback"> 
    <label class="col-xs-2 control-label" for="inputError">البريد الإلكتروني</label> 
    <div class="col-xs-10"> 
      <input type="email" id="inputError" class="form-control" placeholder="في حالة الخطأ"> 
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </div> 
  </div>

</form>

كما تلاحظ في الشيفرة السابقة تم استعمل الصنف .has-* ليدل على حالة أداة النصوص وفي كل مرة استبدل * بالحالة المناسبة (warning- success- error…) واستخدم الصنف .has-feedback ليظهر الأيقونة حسب حالة أداة النص واستعمل الوسم <span> مع كل أداة لتظهر الأيقونة مصاحبة لأدوات الإدخال، بإمكانك الاستغناء عن الأيقونات وذلك بحذف الصنف .has-feedback والوسم <span> الذي يتعامل مع الأيقونة.

عناصر النماذج التي يدعمها الـ Bootstrap:

يتعامل الـ Bootstrap مع كل عناصر النماذج تقريبا تستطيع استعمال كافة الخصائص السابقة معها فهو يدعم:

  • input
  • textarea
  • checkbox
  • radio
  • select

والآن كل ما عليك فعله هو أن تقوم بفتح محرر النصوص لديك والبدء بمراجعة المقال وكتابة الشيفرة لتجرب أنت بنفسك كيفية التعامل مع العناصر في إطار العمل Bootstrap.

يُمكن تحميل أمثلة هذا الدروس كملف مُرفق من هنا.

]]>52Mon, 30 Mar 2015 23:00:00 +0000تعرّف على Bootstrap 3 ونظامه الشّبكي (Grid System)https://academy.hsoub.com/programming/css/bootstrap/%D8%AA%D8%B9%D8%B1%D9%91%D9%81-%D8%B9%D9%84%D9%89-bootstrap-3-%D9%88%D9%86%D8%B8%D8%A7%D9%85%D9%87-%D8%A7%D9%84%D8%B4%D9%91%D8%A8%D9%83%D9%8A-grid-system-r51/

إذا أردت أن تُصمّم موقعًا مُتجاوبًا يسهل تصفّحه أيّا كان المُتصفّح المُستخدم ونظام التّشغيل، فإما أن تختار الطريق الأول والمُتمثّلة في القيام بكل كبيرة وصغيرة بنفسك، أو أن تسلك طريقًا مُختصرة عبر الاعتماد على إطار عمل HTML/CSS يُسهّل عليك المهمة. من بين أشهر أطر العمل التي أصبح تعلّمها وإتقانها ضروريًا نجد إطار عمل Bootstrap 3. سنحاول في هذه السلسلة (التي تقرأ أول دروسها) أن نشرح -ولو بشكل سريع- أهم ما تحتاج معرفته حول إطار عمل Bootstrap 3 لتُصمّم أول موقع لك باستخدامه.

ملاحظة: لدى استخدام عبارة Bootstrap في هذه السلسلة فإننا نعني بذلك الإصدار الثالث منه.

ما هو Bootstrap؟

Bootstrap عبارة عن إطار عمل HTML /CSS مُتجاوب. يحتوي Bootstrap على الأدوات والعناصر الأساسية التي ستحتاجها في أغلب مشاريعك مثل: الجداول والأزرار وأدوات النصوص والنماذج، والثانوية مثل: العنونة Heading وعناصر التنقل، والخلفيات، وغيرها من الأدوات. ويوفرBootstrap الكثير من الوقت والجهد على المصممين أثناء تصميم الصفحات، فكل ما يحتاجه المصمم هو معرفة أسماء الأصناف Classes التي سيتعامل معها لإعطاء التنسيق المناسب للعنصر الذي يستخدمه. بالإضافة إلى ذلك فإطار العمل Bootstrap يجعل التصميم مُناسبًا ومتجاوبًا مع كافة أحجام الشاشات المُختلفة.

مميزات Bootstrap

مميزات إطار العمل Bootstrap التي ساهمت في انتشاره:

  • المحافظة على الوقت والجهد، فالتصميم المعد سلفا في إطار العمل هذا جعل كل ما على الصمم فعله هو أن يضع العناصر في المكان المناسب ويخصصها حسب الغرض الذي يريد.
  • تصميم متجاوب Responsive ومتوافق مع كافة المتصفحات، فهذه الميزة تجعل الموقع الذي تقوم بإنشائه يظهر بشكل ملائم لكافة الأجهزة المختلفة في أحجامها وبنفس التنسيق والمظهر الذي تضعه، بالإضافة إلى توافق خصائص الـ CSS مع المتصفحات المختلفة وهذا يعني عدم تعارض أي جزء من التصميم مع المتصفحات، فيعتبر هذا توفيرًا آخر للجهد الذي ستبذله لتجربة التصميم على المتصفحات.
  • سهل الاستخدام وتنسيق ثابت Consistent، فأي شخص لديه بعض الأساسيات في HTML وCSS يستطيع استخدام إطار العمل هذا وبسهولة، فقد لا تضطر إلى كتابة شيفرة CSS واحدة، وتوفر كذلك ميزة التنسيق الثابت في كل أجزاء الموقع، فالعمل على قالب معد مُسبقا لهذا الغرض سيجعل الموقع متناسق في مظهر المكونات بشكل خاص وفي تخطيط الموقع بشكل عام.

بالإضافة إلى كل هذا فإطار العمل Bootstrap مفتوح المصدر بإمكانك الاطلاع على مكوناته ومحتوياته.

تحميل ملفات الـ Bootstrap

يمكنك تحميل آخر إصدار من إطار العمل Bootstrap من خلال الموقع الرسمي ، وأثناء كتابة هذا المقال كان آخر إصدار في الموقع الرسمي هو الإصدار الثالث. وعند تحميل ملف إطار العمل قم بفك الضغط على الملفات، وستجد ثلاثة مجلدات هي التركيبة الكاملة لإطار العمل Bootstrap.

سنحتاج أيضا إلى ملف jQuery . قم بتحميل آخر إصدار منه وضعه داخل مجلدjs. الآن بعد حصولك على الملفات الأساسية التي يجب تضمينها في أي مشروع ويب تقوم بإنشائه، يمكننا البدء بإنشاء صفحة ويب بسيطة جدًا وندمج هذه الملفات مع الصفحة الجديدة لنهيء الصفحة وفقا لإطار العمل Bootstrap.

تهيئة المشروع ضمن إطار العمل Bootstrap

قم بإنشاء مجلد للمشروع الذي تريد أن تبدأ بالعمل عليه، وأنشء صفحة HTML عادية، تتضمن على الأقل المكونات الأساسية من رأس وجسم الصفحة، وهذه شيفرة يمكنك أن تبدأ بها: 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>سلسلة مقالات bootstrap3 </title>
</head>
<body>
  <h1>مرحبا بالعالم!</h1>
</body>
</html>

والآن لنقم بتعديل شيفرة الصفحة لتضمين ملفات إطار العمل، وأول شيء سنقوم بإضافته هو ملف الـ CSS داخل وسم الرأس <head> ولكن قبل ذلك ولنضمن أن يكون هناك تجاوب متطابق مع الشاشات سنضيف وسم الـ <meta> كما هو موضح في الشيفرة التالية: 

<!DOCTYPE html>
<html>
<head lang="en"> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <title>صفحة متجاوبة مع الأحجام المختلفة</title>
</head>
...

والآن لابد من تضمين ملفات الـ JavaScript وتوجد ضمن المجلد المسمى js ويتم ربطها بهذه الصفحة من خلال الوسم <script>، وسيتم وضع هذا الوسم قبل إغلاق وسم جسم الصفحة أي قبل الوسم </body> ويفضل أن تضعها ضمن الوسم <head>بعد إضافة روابط ملفات الـ CSS مع مراعاة إضافة ملف الـ jQuery كما يلي: 

<body>
  <h1>مرحبا بالعالم!</h1>
  <script src="js/ jquery-2.1.3.min.js"></script><script src="js/bootstrap.min.js"></script></body>
</html>

وبهذا تكون قد أعددت صفحتك الأولى لتكون ملائمة لإطار العمل Bootstrap، وهذا في حالة لم تكن متصلا بالإنترنت إما إذا كنت متصلا بالإنترنت أو تريد رفع المشروع إليه فقد ترغب في تغيير هذه الروابط واستبدالها بروابط مباشرة على مكتبات الـ CDN.

لربط موقعك بهذه المكتبات سنضع الروابط التالية في كل وسم من الوسوم السابقة كما يلي: 

<!DOCTYPE html>
<html>
<head lang="en"> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
  <title>سلسلة مقالات bootstrap3</title>
</head>
<body>
  <h1>مرحبا بالعالم!</h1>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

إطار العمل Bootstrap ودعم اللغة العربية والتنسيق (rtl)

تتوفر نسخة من إطارا لعمل Bootstrap خاصة بالمصممين الذين يصممون بالاتجاه من اليمين إلى اليسارrtl . بإمكانك تحميل الإصدار الأخير من هذه النسخة والعمل عليها إذا كنت تريد التصميم من اليمين إلى اليسار، أو تحميل الإصدار الثالث والمتوافق مع إطار العمل Bootstrap.

أما كيفية ربط النسخة العربية مع إطار العمل Bootstrap3 فالشيفرة التالية توضح ذلك: 

<!DOCTYPE html>
<html>
  <head lang="en"> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-rtl.css">
  <title>(صفحة متجاوبة مع الأحجام المختلفة باللغة العربية) - bootstrap3</title>
</head>

وبهذا نكون قد تعرفنا سويا على إطار العمل Bootstrap3 وأخذت نظرة شاملة حول المميزات التي يقدمها والتسهيلات التي يوفرها، وتعرفت أيضا على كيفية تحميل إطار العمل وكيفية تهيئته وبهذا ستكون مستعد لتصميم مشاريعك بكل سهولة ويسر. وسنتعرف الآن سويا على النظام الذي يتبعه الـ Bootstrap لتقسيم الصفحة.

النظام الشبكي Grid system

يقسم النظام الشبكي في إطار العمل Bootstrap الصفحة إلى 12 عمودًا أفقيًّا تتناسب ومقاسات الشاشات المختلفة، ويحتوي النظام الشبكي على عدة أحجام مختلفة (xs, sm, md, lg ) مُخصّصة للأجهزة المحمولة والأجهزة اللوحية والمكتبية والشاشات الكبيرة. تستطيع أن تضع العناصر المناسبة داخل كل عمود من هذه الأعمدة. بإمكانك استخدامها كاملة أو أن تستخدم أعمدة لها أحجام مجموعها مساوٍ لـ 12 عمود والشكل التالي يمثل بعض أحجام الأعمدة المستخدمة في تقسيم أجزاء الصفحة.

grid.thumb.png.b9d346015bb35e8c27e5fb5f5

الأصناف المتبعة في النظام الشبكي لـBootstrap

هناك عدة أصناف مختلفة تستطيع أن تستخدمها مع كل عمود من أعمدة النظام الشبكي ليُصبح مُتجاوبًا مع كل أحجام الشاشات كما يلي:

  • الصنف xs مخصص للشاشات الصغرى (الهواتف المحمولة) ذات الحجم 768px أو أقل أو أثناء تصغير عرض المتصفح إلى أقصى درجة ممكنة.
  • الصنف sm مخصص للشاشات الصغيرة (الأجهزة اللوحية) ذات الحجم 992px – 768px.
  • الصنف md مخصص للشاشات المتوسطة الحجم (الأجهزة المكتبية والحواسيب المحمولة) ذات الحجم من 1200px – 993px.
  • الصنف lg مخصص للشاشات الكبيرة (الأجهزة المكتبية الكبيرة) ذات حجم أكبر من 1200px.

المثال التالي يوضح استخدام النظام الشبكي في إطار العمل Bootstrap: 

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-6 col-md-7 col-lg-9"> 
      <div class="well"> </div> 
    </div> 
    <div class="col-sm-6 col-md-5 col-lg-3"> 
      <div class="well"></div> 
    </div> 
  </div> 
  <hr /> 
  <div class="row"> 
    <div class="col-sm-6 col-md-2 col-lg-5"> 
      <div class="well"></div> 
    </div> 
   <div class="col-sm-6 col-md-10 col-lg-7"> 
      <div class="well"></div> 
   </div> 
  </div>
</div>

أولًا، لابد من وضع إطار خارجي يحتوي كل العناصر بداخله ويساعد هذا الإطار في أن تكون العناصر متلائمة مع بعضها ونضع لها حدودًا مع العناصر الأخرى المحيطة ويتم ذلك باستخدام الصنف .container أو .container-fluid في الوسم <div>، ومن ثم نضع صفًا يحوي كل الأعمدة المراد إضافتها وذلك باستخدام الصنف row في وسم <div> آخر، وأخيرا تستطيع أن تضع الأعمدة كل عمود بشكل منفصل في الوسم <div> وتستخدم الصنف .col-*-*، بداية نحدد أي نوع من الأصناف سنختار .col-xs-* أو .col-sm-* أو .col-md-* أو .col-lg-* أو كل هذه الأصناف مجتمعة ومن ثم نحدد حجم كل عمود باستبدال الرمز * بالرقم المناسب.

الصنف well. لإعطاء خلفية ومظهر للأعمدة المضافة. قد تلاحظ وجود فواصل بين الأعمدة في حالة أن قمت بتطبيق المثال، وذلك يرجع إلى التقسيم المميز في إطار العمل Bootstrap3.

ومما سبق نستنتج أنه للتعامل مع النظام الشبكي يتوجب اتباع القواعد التالية:

  • أن تكون الصفوف ضمن الصنف container. أو container-fluid. لإعطاء النظام الشبكي حدود خارجية ومسافات بين العناصر داخله.
  • نستخدم الصنف.row لإنشاء مجموعات من الأعمدة الأفقية(المتجاورة).
  • الأعمدة هي الأبناء الوحيدة للصفوف أي أن الصفوف لا تحتوي على أي عنصر مباشر غير الأعمدة ويجب أن تكون بقية عناصر الصفحة ضمن الأعمدة.

ملاحظة: عندما تبدأ بالتصميم يفضل أن تصمم لأجهزة المستخدمين الأكثر زيارة للموقع حسب توقعاتك، سواء كانت أجهزة الهواتف المحمولة ذات الحجم الصغير أو الأجهزة المكتبية ذات الحجم الكبيرة، وبعد ذلك أضف الأصناف التي تجعل تصميمك متجاوب مع بقية الأجهزة.

إذا أردت أن يكون التصميم لحجم شاشة معين اتبع التعليمات التالية:

  • شاشات الأجهزة الصغيرة استعمل النسبة 25%-75% مع الصنف col-sm-*: 
    <div class="col-sm-3"> 
</div> 
<div class="col-sm-9"> 
</div>

  • شاشات الأجهزة اللوحية استعمل النسبة 50%-50% مع الصنف col-md-*: 

    <div class="col-md-6"> </div> 
<div class="col-md-6"> </div>

  • شاشات الأجهزة المكتبية والأجهزة المحمولة وكذلك شاشة الأجهزة الكبيرة استعمل النسبة 33%-66% مع الصنف col-lg-*: 

    <div class="col-md-4"> </div> 
<div class="col-md-8"> </div>

أما إذا كنت تريد من التصميم أن يكون متجاوبًا مع كافة الأجهزة فقم بدمج جميع الأجزاء السابقة: 

<div class="col-sm-3 col-md-6 col-lg-4"> 
</div> 
<div class="col-sm-9 col-md-6 col-lg-8"> 
</div>

ويوفر إطار العمل Bootstrap ميزة إضافية تستطيع أن تضيفها في النظام الشبكي وهي إظهار أو إخفاء الصفوف، فتستطيع أن تستعمل هذه الميزة لإظهار عمود في الشاشات الكبيرة وإخفائه في الشاشات الصغيرة إذا كان لا يتناسب وحجمها: 

<div class="visible-sm col-md-6 col-lg-4"> 
</div> 
<div class="hide-sm col-md-6 col-lg-8"> 
</div>

إزاحة offset الأعمدة

نستطيع تحريك الأعمدة وإزاحتها بمقدار معين لتوفير مسافة كافية بين الأعمدة داخل النظام الشبكي أو بين الأعمدة والعناصر الأخرى، وذلك باستخدام الصنف col-*-offset-*، مثال، col-md-offset-4 إزاحة عمود من نوع md بمقدار 4 أعمدة. لزم التنبيه إلى أن هذه الخاصية لا تدعم الشاشات الصغيرة أي أن الصنف من النوع xs لا يتعامل مع هذه الخاصية لذا يجب مراعاة ذلك في التصميم المتجاوب. 

<div calss="row"> 
  <div class="col-xs-2 col-md-offset-1"> 
    <div class="well"> 
      <h3>تمت الإزاحة بمقدار عمود واحد من أصل 12</h3> 
      <h5>العمود الأول في الصف</h5> 
    </div> 
  </div> 
  <div class="col-xs-6 col-md-offset-3"> 
    <div class="well"> 
      <h3>وهذا العمود تمت إزاحته أيضا</h3> 
      <h5>لا نستطيع إضافة أي عمود داخل هذا الصف لإن مجموع أحجام الأعمدة ومجموع الإزاحة = 12</h5> 
      <h6>العمود الثاني في الصف</h6> 
    </div> 
  </div>
</div>

وتكون المخرجات بهذا الشكل:

offset.thumb.png.11dfa196ed6decfda54e713

أعمدة داخل أخرى

يوفر Bootstsrap3 ميزة أخرى يمكن إضافتها في النظام الشبكي وهي ميزة تداخل الأعمدة، أي نضع عدة أعمدة داخل عمود واحد. في البداية لا بد من إضافة صف يضم الأعمدة الداخلية، وفي هذا الصف يتاح استخدام 12 عمودًا داخليّا أو أعمدة مجموع أحجامها مساوٍ لـ 12 عمودًا كما هو الحال في الصف الخارجي وليس بالضرورة استخدامها جميعا:

مثال يوضح تداخل الأعمدة في النظام الشبكي: 

<div class="row"> 
  <div class="col-md-6"> 
    <div class="well"> 
      <h5>العمود الخارجي</h5>
      <div class="row"> 
        <div class="col-sm-3 col-md-6 col-lg-4"> 
          <div style="Background-color:Gray;"> 
            <h5>العمود الداخلي 1</h5> 
            <h3>أبجد هوز أبجد هوز أبجد هوز </h3> 
          </div> 
        </div> 
        <div class="col-sm-9 col-md-6 col-lg-8"> 
          <div style="Background-color:Gray;"> 
            <h5>العمود الداخلي 2</h5> 
            <h3>أبجد هوز أبجد هوز أبجد هوز </h3> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>
</div>

وتكون المخرجات بهذا الشكل:

nesting.thumb.png.0a534750ebbaa5733fe731

ترتيب الأعمدة

بإمكانك ترتيب الأعمدة في النظام الشبكي باستخدام الصنف col-md-pull-* والصنف col-md-push-*، وترتيب الأعمدة هنا يعني أنك تكتب الشيفرة بترتيب معين ويكون الناتج بترتيب مغاير، أي أن العمود الأول في الشيفرة سيصبح الثاني والعكس صحيح، ويجب مراعاة حجم الأعمدة فإذا كان حجم العمود الأول 4 والعمود الثاني 8 فيجب أن يكون العكس في الصنف المستخدم للترتيب، كما في المثال التالي: 

<div class="row"> 
  <div class="col-md-4 col-md-push-8"> 
    <div class="well"> 
      <h4>كان هذا العمود في الجهة اليمنىh4>
    </div> 
  </div> 
  <div class="col-md-8 col-md-pull-4"> 
    <div class="well"> 
      <h4>كان هذا العمود في الجهة اليسرى وأثناء العرض أصبح في الجهة اليسرى </h4> 
    </div>
  </div>
</div>

وتكون المخرجات بهذا الشكل:

push.thumb.png.53236acb371d97cf23565e0f6

وبهذا نكون قد أخذنا مقدمة تعريفية حول إطار العمل Bootstrap وكيفية استخدام النظام الشبكي.

express.png

]]>51Fri, 27 Mar 2015 07:56:00 +0000