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

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

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

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

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

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

افضل التخصصات الجامعية من حيث الراتب

افضل التخصصات الجامعية من حيث الراتب

وفقًا لمركز جامعة جورجتاون للتعليم والقوى العاملة ، اختار 80٪ من الطلاب في الدراسات الجامعية تخصصهم الجامعي بناءً على فرص العمل... قراءة المزيد

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

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

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

نقوم بإدراج أفضل التخصصات الطبية ذات الإمكانات الأكبر للتطوير في المستقبل يقول البعض إن التكنولوجيا ستحل محل 80٪ من الأطباء في... قراءة المزيد

تقديم طلب لجوء عن طريق الانترنت

تقديم طلب لجوء عن طريق الانترنت

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

اخترنا لك المنح التالية للتقديم عليها

دورات جامعة كاليفورنيا المجانية عبر الإنترنت

دورات جامعة كاليفورنيا المجانية عبر الإنترنت

تصفح دورات جامعة كاليفورنيا عبر الإنترنت في مجموعة متنوعة من الموضوعات يمكن مراجعة دورات جامعة كاليفورنيا ، بيركلي الموجودة أدناه... قراءة المزيد

جوائز مالية من مؤسسة Antipode لمشاريع الجغرافيا بقيمة 10,000 جنيه إسترليني

جوائز مالية من مؤسسة Antipode لمشاريع الجغرافيا بقيمة 10,000 جنيه إسترليني

تقدم مؤسسة Antipode جوائز مالية للجغرافيين لدعمهم ومساعدتهم على تنظيم الفعاليات (بما في ذلك المؤتمرات وورش العمل وسلسلة الندوات والمدارس... قراءة المزيد

كورسات السياسة الاجتماعية والاقتصادية في جامعة هارفارد

كورسات السياسة الاجتماعية والاقتصادية في جامعة هارفارد

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

دورات جامعة ستاتفورد في التعلم الآلي

دورات جامعة ستاتفورد في التعلم الآلي

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