موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

ماهي اساسيات bootstrap ؟ و استخدامه في قالب ووردبريس -الجزء الثالث –

ماهي اساسيات bootstrap  ؟  و استخدامه في قالب ووردبريس -الجزء الثالث –


شارك هذه الفرصة مع الأصدقاء

ماهي اساسيات bootstrap ؟ و استخدامه في قالب ووردبريس : ان ذهبنا سوية الى موقع bootstrap عبر الانترنت سنجد أن هناك توثيق كامل لآلية عمل الكود و كذلك طريقة الاستخدام و لكن قبل ذلك دعنا نلقي نظرة على لغة html ضمن نطاق عمل Bootstrap .

هناك في لغة الـ Html ما يسمى Class , وهناك ما يسمى Id , وهناك ما يسمى أيضاً ,هذه كلها علامات توضع ضمن علامة اساسية أو ما يسمى علامة html و هي ممكن بالشكل الشائع ومبدأياً أن تكون اما

Header, Footer , div, content 

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

<div></div>
 <content></content>
 <header></header>
 <footer></footer>

هكذا ستكون اشكال علامات html الاساسية , ولكن في هذا الشكل لن تعني الكثير فنحن بحاجة الى تخصيص العلامات حتى نقوم باعطاء تنسيق لكل محتوى علامة على حدا لاحقاً عبر css. لذلك انظر كيف سيكون اعطاء علامة مميزة أو كلاس لهذه العلامات .

<div class="container"></div>
<content class="content"></content>
<header class="navbar"></header>
<footer class="footer-bottom"></footer>

كما تلاحظ قمنا باعطاء كل تاغ او علامة , كلاس مخصص لكي نستطيع أن نميزها عن بعضها ,

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

الآن ماذا بعد ؟

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

<div class="container">
   
  Hello World, مرحباً بكم

 </div>

كما تلاحظ قمنا بشكل مبدأي بادخال النص ما بين دالتي div ومباشرة بعد اغلاق الدالة الأولى التي هي <div class=”container”>

من هنا نستطيع القول بأنك انجزت وتعلمت نصف لغة html والباقي يبقى في اتقان التعامل مع css او تنسيق المحتوى الذي سنقوم بشرحه لاحقاً بشكل مفصل .

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

ماهي اساسيات bootstrap

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

سنأخذ المثال التالي :

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

الاعمدة في Bootstrap .
<div class="row">
  <div class="col">
    العمود الأول 
  </div>
  <div class="col">
    العمود الثاي 
  </div>
  <div class="col">
    العمود الثالث 
  </div>
</div>

 الان كما لاحظت في الصورة السابقة  , لدينا قائمة من ثلاث اعمدة . يمين و منتصف ويسار كما ذكرنا سابقاً , ومن ثم قمنا باضافة الكود السابق لكي نقوم بشرحه الآن .

كلمة row يعني صف واحد , وفي هذا الصف نحتاج لوضع ثلاثة اعمدة والتي عرفناها بالكلاس col , ولكن السؤال والمعلومة التي تلي السؤال هي الأهم , كيف اصبح عرض كل عمود مختلف عن الاخر اذا كان الكلاس class=col هو واحد ,

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

الآن ان كنت قد فهمت كل ما سبق , فانك ستفهم بانه بامكانك ان تنشىء صف مكون من ثلاثة اعمدة وستكون متناسقة مع كل احجام الشاشة

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

<div class="row">
  <div class="col-lg-4">
    العمود الأول 
  </div>
 <div class="col-lg-4">
    العمود الثاي 
  </div>
 <div class="col-lg-4">
    العمود الثالث 
  </div>
</div>

قمنا بتغيير اسم الكلاس كما تلاحظ , وهذا الكلاس هو معرف لدى Bootstrap على انه متناسق مع الشاشات , يظهر على الشاشات ذات العرض الكبير بشكل محاذي ولكن على الشاشات الاقل عرضا سترى ان المحتوى ظهر تحت بعضه البعض بشكل متناسق وبكل تأكيد .

ماذا سأتعلم أيضا ؟

في الدرس القادم سوف نتعلم كيف نقوم بالتعامل مع كلاس Bootstrap او بالاحرى كيف نقوم بادخال كود css وهو ذو الطابع الجمالي لموقعنا الاكتروني .

الدرس التالي هو :

أمثلة لبعض أكواد bootstrap الجزء الرابع



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



الزوار قاموا بقراءة ما يلي أيضاً

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

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

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

تخصيص القالب في ووردبريس customizer هو ما يعرف عند الذهاب الى قسم مظهر , ثم الضغط على تخصيص , ستجد عادة في كل ثيم منصب اقسام معينة مثل التحكم... قراءة المزيد

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

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

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منحة جامعة قطر

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

منحة جامعة أفيرو لدراسة البكالوريوس الماجستير في البرتغال

يمكن الآن التقديم للحصول على طلب منحة جامعة أفيرو لدراسة الماجستير في البرتغال. تحتفظ  جامعة أفيرو كل عام

منحة جامعة ألغوما لدراسة البكالوريوس في كندا

تقدم جامعة ألغوما الدولية الكندية منحة دراسية لكل الطلاب الدوليين الراغبين بدراسة البكالوريوس في كندا, وفقاً لكل المعلومات

منحة ماجستير في المانيا من GISMA Business School

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

STUDYSHOOT ©