الدرس الثالث : ماهو Bootstrap بوتستراب

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

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

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

وهى 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>  

شرح الكود

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

 <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 -->  

<i class="fa fa-facebook">