[حريف برمجة]

مرحبا مره أخرى ،،

تعلمنا في الجزء الأول ،، كيف ندرج ملفات بوتستراب بخصوص Asp.Net

ولمن يعمل على html او php إلخ ،، فقط يحمل مجلدين من موقع بوتستراب ويضيفها لمجلد مشروعه ويضيف الأسطر كما هو موجود في آخر صورة .

   

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

https://getbootstrap.com/docs/4.3/gettin.../download/

بعد التحميل وفك الضغط ستجد مجلدين كالتالي :

   

انقل المجلدين السابقة إلى مشروعك ،، علماً بأن هذي الطريقة تنفع لأي لغة لتصميم المواقع حتى Asp.Net

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

نكمل الجزء الثاني :

الشغل كله حيكون في وسم البودي (body) داخل وسم الفورم هنا :

   

يجب وضع div يكون الحاضن ويسمى كونتينر (container)

مثال :

كود :

<div class="container-fluid">
حاضن بدون هامش يمين ويسار

   </div>

# ملاحظة : الحاضن هذا سيكون بدون هامش يسار ويمين ،، بمعنى كامل الصفحة من اليمين لليسار كما سنوضحه لاحقاً .

كود :

<div class="container">
حاضن مع هامش يمين ويسار

   </div>

# ملاحظة : الحاضن هذا الأعلى يضيف هامش يسار ويمين .

لفهم الموضوع بشكل أكبر انظر للفيديو التالي من شرح الأستاذ حسين الربيعي ،، وأنصح بمشاهدة الدروس كامله لتتضح فكرة البوتستراب :







الآن لم يتبقى لنا سوى إضافة الصفوف والأعمدة :

* الصفوف : على حسب الصفوف التي تريدها في الصفحة ليس لها عدد محدود .

* الأعمدة : 12 عمود اقصى عدد وتوجد حيله لتجاوز هذا العدد لمن أرادها يبحث عنها وأنا بصراحه أرى 12 عمود كافية .

الأعمدة الزامي تكون داخل الصف . كما يمكن إضافة اكثر من عمود داخل الصف كما وضحنا بالأعلى بأقصى عدد 12 عمود ،، بمعنى عمود أو عمودين حتى 12 عمود تكون داخل الصف .

مثال لإضافة صف داخل الحاضن :

كود :

هذا الحاضن
  <div class="container-fluid">

هذا الصف
        <div class="row">

هنا يكون العمود أو الأعمدة حتى 12 عمود

اغلاق ديف الصف
        </div>


اغلاق ديف الحاضن    </div>

مثال : لو اردنا في الصفحة فقط عمود واحد يكون الكود كالتالي :

كود :

ديف الحاضن
     <div class="container-fluid">

ديف الصف
        <div class="row">


هنا العمود
ديف العمود لاحظ -12
            <div class="col-12">

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                One of One column

اغلاق ديف العمود
            </div>



اغلاق ديف الصف
        </div>

اغلاق ديف الحاضن
    </div>

عمود واحد نعطيه الرقم 12 الصفحة تفهم من الرقم 12 بأن عدد الأعمدة 1

لو افترضنا نريد في الصفحة عدد 2 أعمدة كالتالي : كل عمود نعطيه الرقم 6

كود :

 ديف الحاضن
    <div class="container-fluid">

ديف الصف
        <div class="row">


هنا العمود1
ديف العمود لاحظ -6
            <div class="col-6">

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                One of Two columns

اغلاق ديف العمود
            </div>



هنا العمود2
ديف العمود لاحظ -6
           <div class="col-6

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                Two of Two columns

اغلاق ديف العمود
            </div>



اغلاق ديف الصف
        </div>

اغلاق ديف الحاضن
    </div>

لو افترضنا نريد في الصفحة عدد 3 أعمدة كالتالي : كل عمود نعطيه الرقم 4

كود :

ديف الحاضن
     <div class="container-fluid">

ديف الصف 
       <div class="row">


هنا العمود1
ديف العمود لاحظ -4
            <div class="col-4">

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                One of Three columns

اغلاق ديف العمود1
            </div>



هنا العمود2
ديف العمود لاحظ -4
            <div class="col-4">

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                Two of Three columns

اغلاق ديف العمود2
            </div>



هنا العمود2
ديف العمود لاحظ -4
            <div class="col-4">

النص أو الأدوات مثل بوتن أو تكست بوكس .... إلخ هنا تضاف                Three of Three

اغلاق ديف العمود3
            </div>




اغلاق ديف الصف
        </div>

اغلاق ديف الحاضن
    </div>

وهكذا مع عدد 4 أعمد كل عمود يأخذ الرقم 3


***** لو افترضنا نريد عدد 3 أعمدة في الصفحة ولكن العمود الأول الثالث متساويين والعمود الثاني أكبر كالتالي :

العمود الأول والثالث ياخذون الرقم 3

والعمود الثاني ياخذ الرقم 6 


وهذي الصورة تخطيط اعمدة البوتستراب :

   


****** ملاحظة :

ممكن عمود يأخذ الرقم 1
وعمود يأخذ الرقم 1
والعمود الأخير مثلاً يأخذ الرقم 10

المهم مجموع الأعمدة = 12

ولمزيد من المعلومات اتبع الرابط التالي :

https://www.w3schools.com/bootstrap/boot..._basic.asp


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


ادراج صفين وداخل كل صف عدد 3 أعمدة :

   



وهذا الكود علماً اني ادرجت الوان لنرى الأعمدة على الواقع :

كود :

   <div class="container-fluid">


       الصف الأول
       <div class="row">

           <div class="col-4" style="background-color: aquamarine">
               One of three columns
           </div>
           <div class="col-4" style="background-color: antiquewhite">
               Two of three columns
           </div>
           <div class="col-4" style="background-color: coral">
               Three of three columns
           </div>

       </div>






       وضع مسافة سطر بين الصفين
       <br />




       الصف الثاني
       <div class="row">

           <div class="col-4" style="background-color:coral">
               One of three columns
           </div>
           <div class="col-4" style="background-color: aquamarine">
               Two of three columns
           </div>
           <div class="col-4" style="background-color: antiquewhite">
               Three of three columns
           </div>

       </div>


   </div>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

**** هناك قياسات للشاشات الصغيرة والمتوسطة والكبيرة :

• [b]xs[/b] — for the smallest screen widths like smartphones [b]< 768 px[/b]
  
  
• [b]sm[/b] — for small screen widths like smartphones and tablets [b]>= 768 px[/b]
  
  
• [b]md[/b] — for medium screen widths like tablets and laptops [b]>= 992 px[/b]
  
  
• [b]lg[/b] — for large screen widths like desktops [b]>= 1200 px[/b]
  

شاهد هذا الفيديو لتتضح الفكرة :

https://www.youtube.com/watch?v=eB8gv4fG0oE


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

في النهاية : نرى كيف صفحة اللابتوب أو الحاسب الآلي وأجهزة الهواتف الذكية تعرض الصفحات :

   

   


هنا يمكن التوسع في الحاضن والصفوف والأعمدة :

https://getbootstrap.com/docs/4.3/layout/grid/


هنا البوتن فقط سطر واحد يعطيك بوتن جميل وأنيق ومتجاوب مع جميع الأجهزة :

https://getbootstrap.com/docs/4.3/components/buttons/

هنا الصفحات والأدوات مثل التكست بوكس والليبل والبوتن والتشيك بوكس ..... إلخ آخر .

https://getbootstrap.com/docs/4.3/components/forms/


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

وهنا صفحة مصممة بالبوتستراب :

https://bootsnipp.com/fullscreen/dlZAN



بالتوفيق للجميع .