ماهي اساسيات 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 الجزء الرابع