ماهو BOOTSTRAP بوتستراب وفيم يستخدم ؟ الدرس الأول

ماهو BOOTSTRAP بوتستراب وفيم يستخدم ؟ الدرس الأول

ماهو BOOTSTRAP بوتستراب وفيم يستخدم ؟ الدرس الأول

ماهو BOOTSTRAP بوتستراب وفيم يستخدم ؟ : هو اطار عمل بلغات HTML , CSS , JS واطار العمل هو مجموعة من الاكود الجاهزة التى توفر الجهد والعناء للقيام بالكثير من الاشياء نقوم بأعطاء كلاس معين وهذا الكلاس معرف فى ملفات البوتسراب لعمل وظيفة معينة وعلى سبيل المثال تريد أن يكون عرض الصفحة ليس بالعرض الكامل فهناك مثللا كلاس container عندما تكتبه في نموذج ملف الثيم سواء للصفحة أو الارشيف أو نموذج المقالات او المقالات المخصص فسوف يعطيك هذا الكلاس عرضا يتناسب حجماً مع كل من شاشة الديسكتوب وكذلك الجوال أو التابلت . وبالاضافة الى انه يقلل من عرض المحتوى على الشاشة بالتناسق.

ما هو Boostrap Grid System

نظام يقوم ببناء الموقع على هيئة صفوف واعمدة وهذا لجعل الموقع متجاوب ويمكنه العمل على جميع مقاسات الشاشات  فمثلًا تقسيمة الموقع فى الصورة هى للشاشات الكبيرة اما فى حالة التابلت او الموبيل فالشكل سيختلف مثلا تحتاج في مساحة الشاشة الظاهرة ان تقوم بانشاء ثلاثة اقسام متتالية بجانب بعضها البعض ومتناسقة مع كل احجام الشاشات , فسوف تقوم بكل بساطة باستخدام هذه الخاصة بكتابة كلاس خاص ببوتستراب , وهو كلاس row و كذلك col . شرح ماهو الفرق بين col و col-lg ..: الفرق هو بأن الاول col يبقي المحتوى في نفس العمود على كل شاشات العرض . وهو للاستخدام اذا كنت تريد ان تظهر عمودان او ثلاثة مثلا على شاشة الجوال بدلاً من سدل الاعمدة تحت بعضها البعض . أما الثاني col-lg او col-sm فهو متناسق مع حجم الشاشة و يغير من حجمة كلما زادت أو قل حجم الشاشة .

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

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


 <div class="container">  
  <div class="row">  
   <div class="col">
   </div>
   <div class="col">
   </div>  
   <div class="col">
   </div>   
  </div> 
</div>
<div class="container">  
  <div class="row">  
   <div class="col-lg-3">
   </div>
    <div class="col-lg-6">
   </div>  
    <div class="col-lg-3">
   </div>   
  </div> 
</div>
<div class="container">  
  <div class="row">  
   <div class="col-lg-6">
   </div>
    <div class="col-lg-6">
   </div>    
  </div> 
</div>

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

كيف يمكنني استخدام Bootstrap في موقعي في وورد بريس ؟ الجزء الثاني المصدر bootstrap

أحدث المواضيع الى الآن

منحة جامعة قطر 2022 بتمويل كامل

منحة جامعة قطر 2022 بتمويل كامل

لاتفوت الآن فرصة التسجيل في منحة جامعة قطر المقدمة للطلاب الدوليين الراغبين بالدراسة في احدى اهم الجامعات في قطر تعتبر الدراسة في قطر... قراءة المزيد

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

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

تقدم منحة جامعة برشلونة لدراسة الماجستير في الاقتصاد في  كل عام و تمنح جائزة جامعة برشلونة في اسبانيا حوالي 800000 يورو كمساعدة... قراءة المزيد

ماهي شروط المنحة التركية والاوراق المطلوبة

ماهي شروط المنحة التركية والاوراق المطلوبة

هذه شروط المنحة التركية لمنحة الحكومة التركية 2022 للبكالوريوس والماجستير والدكتوراه شروط الحد الأدنى من التحصيل الدراسي للمتقدمين في... قراءة المزيد

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

ما هي المنحة التركية؟ ما هي شروط ومتطلبات الحصول على منحة دراسية في تركيا؟ التسجيل في المنح التركية وماهي مواعيد التقديم وماماهو رابط... قراءة المزيد

منحة رومانيا الحكومية

منحة رومانيا الحكومية

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

دراسة الطب في المانيا باللغة الانجليزية

دراسة الطب في المانيا باللغة الانجليزية

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