ابدأ بقالبك البسيط
ابد بقالبك البسيط ال 1470/1 ويوجد فيه استدعاء لمكتبة البوتستراب الخاصة بالستايل أيضاً مكتبة ال 15 الخاصة بالبوتستراب وبالتأكيد كأول كود تقوم به
تقوم بطباعة “أهلاً بلعلم” :)
جا ماع86 / ><" 38 سقس مرق عط و امه ط/ و "جمع اماع >
طبعاً هنا يجب حفظ هذا الملف بنفس المجلد الذي توجد فيه ملفات المكتبة التي سبق تحميلها.

»حزان زاج ل
أمثلة عن البوتستراب
على هذا المثال البسيط الذي كتبته سابقاً ستتمكن من انشاء أي موقع تريد وإليك بعض الأمثلة عن مواقع بسيطة تم انشاءها بكود البوتستراب البسيط هذا
المثال التالي يوضح كيفية استخدام احد عناصر البوتستراب وهي القائمة الرئيسية (لاحظ كيف يتم تغير شكلها بمجرد تصغير شاشة المستعرض أي التصفع
على شاشة الجوال على سبيل المثال)
ستعرض هذا المثال بشيء من التفصيل ...
كما نلاحظ فإن هذه الصفحة تحتوي على قائمة رئيسية مع عنوان الموقع وعنوان محتوى في الصفحة ونص عشوائي...

, حزان ا زاج ل
ِِ اموق 1222 اح جوع
<-- استدعاء ملف الستايل الغاص بالبوتستر ايدام
الاك الوم مسا ن 277 ميال"
مله موده فط ركز /2 1 دده ودج
'لن نهتم حاليا بالتفاصيل الموجودة داخل هذا الكود وخصوصاًاسما الصفوف (25585) هذا المثال هو لتوضيح قوة البوتستراب
ان نفس الصفحة السابقة وعن عرضها على شاشة الجوال على سبيل المثال ( قم بتصغير شاشة المتصفح لديك بعد تشغيل الود السابق) لتحصل على الشكل
التلي (لاحظ كيف تحولت القائمة الرئيسية لتلائم عرض شاشة الجوال مثلا )

ل حزان ا زاج ل ٍ
وكأنها أصبحت القائمة الخاصة بتطبيقات الأندرويد ©
وهناك امثلة أخرى سيتم عرضها ضمن هذا الكتاب بشيء من التفصيل ‏
دعم المتصفحات
الموقع في المتصفحات القديمة.
يهذا السطر ستحصل على تلام في المتصفح لموقعك بشكل جيد ويبقى هناك بعض الفروقات الصغيرة. (الفروقات الصغيرة موضحة ضمن الجدول بإشادة *)
2 ٍ ٍ سنا

تخصيص الستايل
اذا كنت تريد أن تقوم بالتعديل على عناصر البوتستراب فالأمر بسيط جداً فقط بإعادة الكتابة على اسم العنصر بملفك ال 5و» ستحصل على ستايل جديد خاص
أيضاً إذا لم تكن بحاجة لكل العناصر أو تريد تخصيص بعض الاعدادات يمكنك اختيار العخاصر التي ستتضمنها مكتبة البوتستراب وإعادة إعدادها من جديد من
“مركز تخصيص وتحميل”
هكذا تكون قد أنشك مكتبتك الخاصة البوتستراب وبدأت بلتعامل معها.
في النهاية أود أن أقول الموضوع جداً بسيط فقط ابد ©

إعدادات ال55© في البوتستراب
ال55© في تقنية وملفات البوتستراب لنرى معا القوة والفعالية والسرعة في كتابة الكرد الخاص بستايل موقعك.
هناك في البداية بعض أمور التهيئة يجب ان تقوم بها قبل ان تكتب أي كود في صفحتك وهي مهمة جدا جدا وخاصة ضمن موضوع (لتلازم مع المتصفحات):
- 4620/08 1170015 : وهي اعتماد لغة ال 40/15 ضمن صفحتك وهو امر مهم لايأخده متصفح :1086م« 10062068 بعين الاعتبار لذلك وجب
0ه 3031323-56 راة613 203010-23 اا مويه بعصا مكو
اما إذا أردنا ان نلغي هذه الميزة ونجبر الشخص على عدم القيام ب 2000 ويستطيع فقط عمل 56011 كما هو الحال في 1000116 3660016
دون تكبير الصفحة (حيث ان الموقع على شاشة الجوال سوف يتلاءم افتراضياً معها) نقوم بإضافة الأمر 87-52313018-00كن إلى الوسم
على سبيل المثال ان الوسم </«00> بحاجة إلى
يل جميع رسوم لغة ال470/1ا بحاجة إلى هذه التهيئة لأن ال 200708م الافتراضي في متصفح 3660# يختلف عنه في متصفح 20008« لذلك فإن
ة صقر هو من افضل اللول
يمكنك مراجعة محتوى 000103112©.255 من اجل فهم اكبر للفكرة ويمكنك تحميل هذا الملف من خلال الرابط انقر هنا
4 600131066 : محتوى الصفحة الرئيسي وضمنه يوجد ما يسمى نظام الشبكة الوهمية 575480 6814) ؛ إن هذا المحتوى يحمل صفة
+008108. والتي تحتوي على صفات مايسمى 06015 التي من خلالها يتم تنسيق محتوى الموقع ضمن عرض معين للشاشة على سبيل المثال
بشكل افقي عند عرض شاشة 800 بيكسل وان يقوم بعوضها بشكل عمودي عند عرض شاشة 400 بيكسل . كل هذه
الأوامر يتم التحكم بها من خلال التحكم بعرض هذا العنصر البسيط +008108». وسيتم الغرص في هذا الموضوع لاحقا.

قبل البدء في الكورس المخصص للبوتستراب يجب توضيح ملف مهم مرفق مع مكتبة البوتستراب وف : 20088.1500
هذا الملف يحتوي على متحولات مهمة تعد افتراضية من اجل تهيئتها بحسب حاجة المصمم مثال :
وهو متحول من اجل تحديد اللون الافتراضي للزر المستخدم في الموقع
وهناك متحولات كثيرة سيتم سردها ان شاء اله ضمن الكورس.

9 حزان ا اماج ا
نظام الشبكة او الجدولة لصفحة الويب
من اجل ضمان تنسيق الموقع تقوم البوتستراب على ميد الشبكة الوهمية على اعتبار صفحة الويب مقسمة الى مجموعة من الأسطر والأعمدة هذه الأسطر
والأعمدة تمثل بمجموعها بلوكات للتحكم ببنية الصفحة بشكل عام
تقسم الصفحة بهذه الحالة إلى 12 عمود ويتزايد حجمها بشكل ديناميكي مع زيادة او تناقص حجم الشاشة وتحتوي هذه الاعمدة على *»5واء معرفة مسبقا
ضمن المكتبة.
إن مبداً عمل هذه الشبكة في البوتستراب موضح كما يلي:
الأسطر يجب إن توضع ضمن بلوك (1ك) يدعى +0048108». (بقياس ثابت يتوسط الشاشة) او ضمن بلوك يدعى 0013108-018». (قياس
بحجم الشاشة) وثلك من اجل تأمين البلوكات وتحديد قياساتها بشكل دقيق
-. نستخدم هذه الأسطر من اجل إنشاء شبكة كاملة على مستوى الصفحة
< من خلال الأسطر والأعمدة نحصل على مجموعة من الخلايا وضمن هذه الخلايا نضع محتويات الصفحة الخاصة بنا بحيث ينشاً لدينا (بلوكات)
- يتم تحديد مساحة البلوك من خلال تحديد عدد الخلايا المحجوزة مثلا (601-0:4-4) سيحجز أربع خلايا من اصل 12 أي 1633.3 من عرض الصفحة
تستخدم الأوامر التالية كشروط للتحكم بشكل ‎١‏ حال استعراض الموقع على شاشات مختلفة

اذا اصبح قياس الشاشة بمقدار 050660-50-00 حيث إن هذا المتحول هو عبارة عن قيمة يتم التحكم بها من قبل المصمم في ملف البارامترات الخاص
بالبوتستراب على سبيل المثال أنا سأقوم بوضع هذه القيمة م578 :05006860-58-8010 أي إذا أصبح عرض الشاشة اقل من 570 بيكسل فإنه سيتم
قيم معينة وحالات معينة للبلوكات ضمن الصفحة.
ان أمر 0601© هو امر مهم جدا في 53ي» وبإمكانك التحكم بالعديد من الشروط غير قياس الشاشة يمكنك الاطلاع على هذا الامر المهم جدا من خلال لنقر
على الرابط التالي انقر هنا
يستخدم ضمن هذا الامر شروط اضفية اخرى من خلال كتابة 800 بين الشروط. ففي مثالنا بإمكاننا إضافة شرط آخر من اجل التقييد الأكبر لحجم الصفحة
وتلاؤمها مع المحتوى المعروض ليصبح بالشكل:
يوجد اربع حالات يمكننا تصنيف هذه الشبكة لتلائم العمل على مختلف الشاشات تم تقسيمها كما يلي :
الأجهزة الصغيرة جدذا الأجهزة الصغرة إابلت) الأجهزة المتوسطة (رم4طية0) .. الأجهزة لكبيرة (م055140)
عرض المحتوى اتوماتيكي م750 «م970 م1170
اسم الجوواء لمع لولم -1-0م. -01-18.
آذا اردت ان لايحدث هذا التسلسل (أي عند فتح الصفحة على الجوال لاتريد ان تترتب الخلايا تحت بعضها البعض بل تحفظ على شكلها الموجود في الشاشة.
الكبيرة نقوم باستخدام |الأمر *-4«-001. *-8<-001. كما يلي
د ا ل محلم 9-6*-61
سدة/>4ومحلم. 6حويحلم .<"4وتحام 1-5-6 م
حسدة/>4-ومخلم. 6حويحلم .<"4-ومحام 3-6 »1م
افقلا >
حستة/>6-وبحام .<" 1-5-6 م"