موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

ماهو 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



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



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

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

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

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

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

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

انشاء صفحة الأرشيف في وورد بريس نعني بها تلك الصفحة التي تظهر كل المقالات المضافة في الموقع , مثال : شخص ما قام بالضغط على اسم كاتب... قراءة المزيد

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منحة جامعة قطر

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

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

يمكن الآن التقديم للحصول على طلب منحة جامعة أفيرو لدراسة الماجستير في البرتغال. تحتفظ  جامعة أفيرو كل عام

منحة جامعة ألغوما لدراسة البكالوريوس في كندا

تقدم جامعة ألغوما الدولية الكندية منحة دراسية لكل الطلاب الدوليين الراغبين بدراسة البكالوريوس في كندا, وفقاً لكل المعلومات

منحة ماجستير في المانيا من GISMA Business School

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

STUDYSHOOT ©