تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
اضافة bootstrap لموقعك لتجميله ليصبح أنيق على جميع المتصفحات والأجهزة الذكية
#1
السلام عليكم ورحمة الله وبركاته ،،

لتحريك القسم ،، أيضا زكاة العلم نشرة . نسأل الله الكريم رب العرش العظيم ان يجعل هذا العمل وجميع الأعمال خالصة لوجهه الكريم .

اليوم اقدم لكم حزمة البوتستراب (Bootstrap) آخر إصدار

ومن لا يعرف البوتستراب هي أساسا من برمجة تويتر .

مزاياها :

1- تجعل موقعك جميل وأنيق على جميع المتصفحات .

2- تجعل موقعك يقبل العرض على المتصفحات وأجهزة الهواتف الذكية بجميع قياسات الشاشة بشكل منسق وجميل وكأنك صممت الموقع على نفس مقاس الشاشة التي تعرض موقعك .

3- لا تحتاج جهد ولا اكواد كثيرة .

4- لا تحتاج خبرة في تصميم الصفحات .

5- ابحث عنها بنفسك وستجد ما يسرك عنها .

نبدأ : بسم الله ،،

الشرح على منصة Asp.Net

مع العلم هي أساسا تتعامل مع لغة html لذلك يمكن ادراجها في أي لغة او منصة لتصميم المواقع .

عمل مشروع جديد Asp.Net

   

   

هذا مشروع جديد لم اعمل أي شيء حتى الآن .

لإضافة البوتستراب للمشروع كالتالي :

   

   

   

   

   

   

   

لربط البوتستراب وتفعيلها في مشروعك كالتالي :

   


تذكر تضع الأسطر التي بالصورة في وسم الهيد (head) كالتالي :

PHP كود :
<head runat="server">
 
   <title></title>

 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

 
   <link href="Content/bootstrap.min.css" rel="stylesheet" />
 
   <script src="Scripts/bootstrap.min.js"></script>
 
   <script src="Scripts/jquery-3.3.1.min.js"></script>
 
   <script src="Scripts/popper.min.js"></script>

</
head



إنتهى الجزء الأول .

يتبع الجزء الثاني ،، وهي أسهل مما تتصور .
يا رحمن الدنيا والآخرة ورحيمهما
الرد }}}
تم الشكر بواسطة: بدري , Amir_Alzubidy
#2
مرحبا مره أخرى ،،

تعلمنا في الجزء الأول ،، كيف ندرج ملفات بوتستراب بخصوص 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



بالتوفيق للجميع .
يا رحمن الدنيا والآخرة ورحيمهما
الرد }}}
تم الشكر بواسطة: adel2012 , elgokr , بدري , nabil.1710 , Amir_Alzubidy
#3
اخي انت تستاهل الف شكر جزيت عنا خيرا
الرد }}}
تم الشكر بواسطة: بدري , elgokr , Amir_Alzubidy
#4
(08-04-19, 05:49 PM)nabil.1710 كتب : اخي انت تستاهل الف شكر جزيت عنا خيرا

وانتم تستاهلون كل خير ،،

اسال الله التوفيق لي ولكم وللجميع
يا رحمن الدنيا والآخرة ورحيمهما
الرد }}}
تم الشكر بواسطة: elgokr , Amir_Alzubidy
#5
موضوع اكثر من رائع هذا هو ما كنت ابحث عنه في المنتديات العربية ولم اجد ضالتي شكرا
الرد }}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [مشروع] اكرر اضافة اي خطوة لكي ترسخ في ذهني css and media screen سعود 0 286 15-04-23, 02:42 PM
آخر رد: سعود
  يوتيوب بسيط لموقعك[تم تحديث الرابط - 6 شوال 1440 هـ مشروع مفتوح المصدر] سعود 13 11,857 09-06-19, 07:28 AM
آخر رد: سعود

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم