الدرس الثالث : نظرة اعمق حول Bootstrap بوتستراب

Unknown


السلام عليكم درس اليوم حول Boostrap

ماهو البوتسراب ؟

البوتسراب هو اطار عمل بلغات HTML , CSS , JS
واطار العمل هو مجموعة من الاكود الجاهزة التى توفر الجهد والعناء للقيام بالكثير من الاشياء

كيف يعمل البوتسراب ؟ 

نقوم بأعطاء كلس معين وهذا الكلاس معرف فى ملفات البوتسراب لعمل وظيفة معينة

مثال بسيط على ذلك


<button type="button" class="btn btn-success btn-lg">Large Success button</button>

كما تلاحظ، لدينا btn و btn-success و btn-lg كلها ستصنع لنا زر كبير وأخضر، رأيت كم الأمر بسيط وسهل وسريع، ولا يحتاج كتابة أي كود ويوجد الكثير من الكلسات الخاصة بالازار والفورمات والنصوص والصور والتعامل مع اي عنصر تقريبًا css
والحصول على تلك الاكود من الموقع الرسمى هنا

والان الى النقطة الاهم فى اطار العمل 


وهى Boostrap Grid System 

نظام يقوم ببناء الموقع على هيئة صفوف واعمدة وهذا لجعل الموقع متجاوب ويمكنه العمل على جميع مقاسات الشاشات 


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

                           

نلاحظ ان الشريط الجانبى اصبح تحت المنشورات ليسمح بتمدد كلاهما فى الشاشة الصغيرة ويمكن عمل هذا بدون Bootstrap بالطبع ولكن الامر اسهل بكثير وسترى بنفسك

كيف يعمل Boostrap Grid System 

يسمح لك البتوستراب بعمل 12 عمود بعرض الصفحة 
يمكن دمج عمود او اكثر لعمل عمود اعرض

  

البتوستراب هو نظام متجاوب بمعنى ان الاعمدة ستقوم باعادة ترتيب نفسها بناء على مقاس الشاشة كما شرحنا فى المثال السابق
ويوجد اربعة كلاسات للبوتستراب
  • xm للموبيل
  • sm للتابلت
  • md للجهاز العادى
  • lg للاجهزة الكبيرة

قواعد البوتستراب

  • يجب ان يكون كلاسات row داخل  .container  للعرض الثابت للصفحة او .container-fluid للعرض الكامل 
  • يستخدم row لعمل مجموعة افقة من الاعمدة 
  • المحتوي يفضل ان يوضع داخل الاعمدة فقط 

         الكود الاساس لبناء البوتستراب


 <div class="container">  
  <div class="row">  
   <div class="col-*-*"></div>  
  </div>  
  <div class="row">  
   <div class="col-*-*"></div>  
   <div class="col-*-*"></div>  
   <div class="col-*-*"></div>  
  </div>  
  <div class="row">  
   ...  
  </div>  
 </div>  

شرح الكود

ستقوم باستبدال كل *-* على حسب عدد الاعمدة المطلوبة فلو اردنا مثلًا
عمل ثلاث تقسيمات افقية للموقع سيكون  عدد الاعمدة فى كل تقسيمة 4
فبيكون لكل منهم الكلاس col-sm-4
يمكن استبدال sm ب md او lg او xm

مثال اخر على بناء الهيدر فى دورتنا 

فى الدرس السابق قمنا بكتابة كود الهيدر ولكن لم نضع كود البوتستراب  الان سنضع كود البوتستراب 


نلاحظ ان عرض الهيدر بعرض الصفحة اي يشمل 12 عمود
بالتالى سنستخدم col-md-12
ونضع بداخلها كود الهيدر من الدرس السابق
 فيكون الكود كامل للهيدر 

 <div class="container">  
     <div class="row">  
       <div class="col-md-12">  
         <header id="site-header">  
           <div id="site-logo">  
             <h2> وادى<span>التقنية </span></h2>  
           </div><!-- #site-logo -->  
           <nav id="site-navbar">  
             <ul class="list-inline">  
               <li><a href="#">الرئيسية</a></li>  
               <li><a href="#">خوارزميات</a></li>  
               <li><a href="#">دورات</a></li>  
               <li><a href="#">مصادر التعلم</a></li>  
             </ul>  
             <span class="social-icons">  
               <a href="#"><i class="fa fa-facebook"></i></a>  
               <a href="#"><i class="fa fa-google"></i></a>  
               <a href="#"><i class="fa fa-twitter"></i></a>  
               <a href="#"><i class="fa fa-youtube"></i></a>  
             </span><!-- .social-icons -->  
             <div class="clear"></div>  
           </nav><!-- #site-navbar -->  
         </header><!-- #site-header -->  
       </div><!-- .col -->    
     </div><!-- .row -->  
 </div><!-- .container -->  

سنتكلم سريعًا على ايقونات fontawesome
ويمكن استخدامها بهذه الطريقة
<i class="fa fa-facebook">

بعد استعداء الملف كما فعلنا فى الدرس السابق
ويتيح لنا fontawesome مجموعة كبيرة من الايقونات  للاستخدام فى الموقع وهذه الايقونات تعامل مثل النص اي يمكن اعطائها لون وحجم خط وكل هذا
يمكن استخدام اي ايقونة عن طريقة معرفة الاسم الخاص بها
واستخدام الكلاس fa fa-icon-name
حيث تسبدل icon-name باسم الايقونة
ويمكنك الاطلاع على جميع ايقونات fontawesome من الموقع الرسمى من هنا

الى هنا يتنهى الدرس وشكرًا

دروس الدورة 

شارك الموضوع

مواضيع ذات صلة