Bootstrap3 دورة باللغة العربية

تصميم: أنيس حكمت أبوحميد.
ينورتكللإا ديربلا: nees.com2aneeshikmat@,
aneeshikmat@gmail.com
ينورتكللإا عقوملا :nees.com2www.
أنيس حكمت أبوحميد
aneeshikmat@gmail.com / دورة مجانية

بسم لله الرحمن الرحيم.. بسم لله المعطي المعين.. بسم لله الذي تبارك به
الكون .. بسم لله الذي أشرق له عالمنا, بسم لله الرحمن الرحيم
ﻣﺩﺣہ ل حمدا كما ينبغي لوجهه وعظيم سلطانه .. ﻣﺩﺣہ ل رب العالمين. ﻠ ﻠ
إخواني, بفضل من لله تعالى, نعود لكم اليوم, بدورة جديدة, بعنوان
هذه الدورة المهمة جدا, والتي أصبح لا غنا عنها في ,boostrap3
framework عالم الويب, وخصوصا بعد تربعها على عرش أفضل
10 ..تاريخ البدء بكتابة هذه /12/ الآن .. وهذا حتى تاريخ 2014
الدورة المتواضعة .. سائلين المولى عز وجل .. أن يوفقنا وإياكم الى
خير العمل ..ﻣﻟﺩﺣہ ل رب العالمين..بسم لله نبدأ.. ﻠ
أنيس حكمت أبوحميد /
aneeshikmat@gmail.com – دورة مجانية

(1
Html
(2
Css
Js (3
مفاهيم عامة ستحتاجها في الجزء الثالث من الدورة .. jQuery (4
..وبإمكانك تعلم هذه الدورة بسهولة ... وخصوصا كيفية التعريف
وال click وبعض الأوامر مثل ال ..jQuery والبدء باستخدام ال
الخ .. on

هذه المتطلبات التي يتجب أن تعرفها قبل البدء بالدورة.. لأن الشرح
بشكل framework سيعتمد عليها .. علما أن العمل على هذا ال
لكن الآن يكتفي .. LESS أو SASS أكثر احترافية يتم من خلال ال
ومن ثم استخدم .. css اعتمادا على ال bootstrap بأن تتعلم ال
... css ل compilation لعمل SASS ال
اذا كنت لا تعرف عن أحد المتطلبات السابقة ..فيمكنك تحميلها مجانا من
2nees.com/courses خلال

aneeshikmat@gmail.com / دورة
مجانية

صمم بواسطة framework هو bootstrap ال
من شركة تويتر, يعد هذا ال Jacob Thornton و Mark Otto
الأول والأكثر انتشارا الآن عبر عالم الويب, حيث وضع في framework
ك GitHup عام 2011 على ال
وخلال 3 أعوام تقريبا وفي عام 2014 أصبح هو open source
المشروع الأول عليه ..
يمثل مجموعة كبيرة ومجانية من الأدوات والخيارات framework هذا ال
لتطوير وتصميم المواقع الالكترونية بشكل سهل, سريع, ومتوافق مع
المتصفحات, والهواتف المحمولة ..وهو صمم خصيصا على مبدأ
أسرع مشروع وأسهل framework ويعد هذا ال ..mobile first
لتصميم المواقع... framework مشروع في عالم ال

فإننا نقصد Framework .. وعندما نقول الآن
وهذا أمر مهم ..ويقصد بال .. Front-end framework
هو الجزء المسؤول عن تصميم وتنسيق الصفحات front-end
الالكترونية, وما يتعلق بالأمور التفاعلية مع المستخدمين ..
يحتوي على تصاميم bootstrap بالإضافة الى ما ذكرنا فان ال
الرئيسية مثل ال html, css وتنسيقات جاهزة لمجموعة ال
الخ من المكونات التي يمكن ...text, forms, buttons
اضافتها والتحكم بتنسيقها.

مبني على framework أصبح هذا ال bootstrap 1) من ال 3
وهذا يعني أن هناك مكتبات كاملة صممت لجعل .. mobile-first
وبشكل افتراضي يتم تضمينها ... mobile موقعك متوافقا مع ال
يدعم جميع المتصفحات الرئيسية, وبهذا تتخلص bootstrap 2) ال 3
من مشكلة التوافقية بين المتصفحات .. (هناك بعض الاستثنائات أو
الاضافات التي تضاف للمتصفحات القديمة ..أو حالات شاذة حسب
طبيعة الأمر والمتصفح.. لكن في المجمل والأمور الرئيسية
..فجميعها توافقية ^_^).
وهذا أمر رائع html, css, js 3) سهلة التعلم, وتعتمد على ال
يعد موقع رائع لفهم بيئة bootstrap ..أيضا الموقع الخاص بال
.bootstrap العمل هذه .. وهو المرجع الرئيسي لنا ^_* في ال

(4Responsive Web Design : صاخلا عقوملا نأ ينعي اذهو كب .. ةفلتخملا تاشاشلا ىلع رهظيس .. لا لثمtablet, mobile,normal screen _^.*
لدعم ال bootstrap من المميزات التي يقدمها ال 
هي أنه يوجد طريقة العمل ..لذلك تجد أنه من responsive
السهل التعديل أو التطوير أو فهم عمل الآخرين ^_*.
مفتوح المصدر ..ويقدم أدوات كثيرة تساعدك 
على العمل وتطوير الموقع وفحص و
.. responsive تخصيص ال

أو يمكن تضمينه يندرج تحت هذه bootstrap إن ما يحتويه ال
التصنيفات:
ويقصد بها كل ما يقوم عليه التصميم من بنية :Scaffolding (1
تركيبة ..واذا حاولت ترجمة هذا المصطلح ترجمة حرفية فستكون
الترجمة هي سقالة .. أي وهي المكونات والرفعة الموجودة لبناء أي
مبنى .. وهنا في عالم الويب ..تعني مجموعة المواد التي تبني هيكلية
grid system, التصميم أو الصفحة .. وتحتوي على ال
responsive design, contains layout, Fluid Grid
وهو مجموعة الكلاس التي نستخدمها للتحكم بتنسيق :Base Css (2
الخ .. btn العناصر مثل الجداول, والصور, وال

وتحتوي هذه على أي مجموعة عناصر قابلة :components (3
navbar, للإستخدام والتفاعل مع المستخدمين مثل ال
الخ. .. dropdowns
هناك العديد من مكاتب الجافا سكربت التي يمكن أن :Js plugIn (4
تضمنها دفعة واحدة.. أو واحدة ..واحدة ..
بإمكانك أنت أن تقوم بعمل مكون خاص بك . :Customize (5

سهلة جدا .. وعملية استخدامه bootstrap إن عملية تنصيب ال
الخاصة به ..أمر سهل أيضا .. basic page وانشاء ال
قم بالدخول الى هذا الرابط (هذا الرابط يحتوي bootstrap لتحميل ال
وفي دورتنا هذه أحدث bootstrap على أحدث نسخة من ال
.(bootstrap نسخة هي 3
طبارلا :started/ http://getbootstrap.com/getting-



ملاحظة:
بدون تحميله وذلك عن طريق استخدام bootstrap يمكنك استخدام ال
.. CDN ال
هي اختصار ل CDN فال :CDN اذا كنت لا تعرف عن ال
ومن خلالها يمكنك تحميل .. Content Delivery Network
الملفات عن طريق هذا السيرفر بدلا من أن تكون متواجد على
سيرفرك أنت .. وفائدتها اذا قمت بزيارة موقع يوجد به
على جهازك ..وهذا cashe فسيقوم بانشاء ملفات bootstrap
يسرع عملية التحميل للصفحات .. ويقلل من عملية طلب الملفات من
السيرفر الخاص بك لكل مستخدم ...

جاهزة لدينا لبدء العمل bootstrap والآن .. أصبحت ملفات ال
..وسأقوم هنا باستخدام النسخة التي قمنا بتحميلها لتنفيذ الأمثلة ..
داخل ال index تكون هي ال html ماذا بعد؟ سأقوم بانشاء صفحة
الذي قمنا بتحميله ..والذي سيمثل ملف folder الخاص بال root
المشروع للموقع الخاص بي ..
الذي سنقوم بوضعه داخل ال basic template والآن ..لنشاهد ال
والذي ستجده بنفس صفحة التحميل ..الخاصة بال .. index.html
... Bootstrap

السابق: template شرح ال
في أول الصفحة مباشرة <!doctype html> 1) لقد قمنا بتعريف
على أن نوع الملف html وال css ..وهو أمر الزامي لتتعامل ال
.. html الذي سنعمل عليه سيكون 5
و *_^ mobile-first عبارة عن bootstrap 2) لقد قلنا أن ال
قلنا أن التضمين يتم بشكل تلقائي ..لكن لزيادة الثقة أو التأكيد على
.. meta tag العمل ..نقوم بإضافة هذه ال

داخل ال zooming تخبرنا أننا سنسمح بعمل meta tag هذه ال
وعملية استدعاء طبيعية .. أيضا يمكنني عمل mobile
للشكل الأصلي أو الإفتراضي الذي قمنا بوضعه ..مثل override
وذلك عن طريق ال zoom الرغبة في منع المستخدم من عمل
شاهد المثال: ... user-scalable=no
هذه meta tag 3) أما ال
القديمة IE لا يدعم متصفحات ال bootstrap فهي تستخدم لأن ال

فهذا يمكنني ie لا يدعم المتصفحات القديمة لل bootstrap وبما أن ال
من أن أضع شرطا لطريقة العرض للمتصفحات القديمة ..
ان السكربت الذي سيتم استدعائه هو .. hack condition 4) ال
...Respond.js

..bootstrap وال jQuery 5) وأخيرا ..وهو تضمين ملفات ال
والآن .. لنقم بتنفيذ الصفحة ... ^_*..
شاهد الشريحة التالية: ولاحظ ..كيف أنك بكل سهولة ..وكأنك تتعامل مع الشكل
سهل ^_* .. bootstrap قمت باستخدام .. html الإعتيادي لل

شاهد المثال– هذا
الشكل يمثل زر
لمشاهدة الأمثلة في
كل شريحة تراها ..

أنه لتنظيم العمل .. css والآن ... نحن نعلم ..وكما تعلمنا بدورة ال
..والحفاظ عليه ..ورغبة في تحقيق التوافقية وتجنبا للإخطاء ..فإننا
wrapper هذا ال .. wrapper نضع المحتوى جميعه ..داخل
container-fluid أو container هو bootstrap في ال
2 ..ويكتبان على الشكل التالي: classes هذان هما
أو

في المثال سابق.. ستلاحظ كيف أن ال
fixed-.. ولكن بعرض ثابت responsive هو .. Container
ويكون في .. px فعلى سبيل المثال تجد أنه 1170 .. width
وهذا ما تعلمناه margin:0 auto; منتصف الشاشة ..بسبب ال
*_^ ...css بال
فيكون العرض الخاص بها ..عرض container-fluid أما ال
على الأطراف .. وهذا يفسر padding الشاشة ..مع وجود مسافة
المسافة الموجودة في المثال السابق لهذا الحاوي ... ^_^

container-fluid وال container والآن .. بعد تعرفنا على ال
هذا ..Grid System فإننا سنتطرق الى موضوع مهم جدا .. وهو ال
الموضوع مهم جدا..في تصميم وتنسيق الصفحات الإلكترونية ..
للمصممين والمطورين .. اضافة الى أهميته في العمل على ال
بشكل كبير .. ^_* bootstrap
ومن ثم الإنتقال الى Grid system والآن سأبدأ بتعريف ال
.. Bootstrap grid system
هو نظام/ بنية تركيبية ابتكرت/ أوجدت في عالم :Grid system ال
الويب لتنظيم المحتوى ضمن خطوط متقاطعة عاموديا و أفقيا وعادة
ما يكون هذا النظام ثنائي البعد ..

لا ىلع لمعلل ةعونتم لمع تائيبك ةمظنأ ةدع دوجوب حمسي ملاكلا اذهوgrid system لا اهرهشأ نوكي دقGrid system 960
بشكل أكبر ..شاهد الصورة Grid system ولتتضح فكرة ال
..وستفسر كل ما قلناه لوحدها ^_*
شاهد الصورة في الشريحة التالية ..والتي تليها أيضا ..

هل لاحظت الصورتين السابقتين ..وأمعنت النظر؟
قام بتقسيم الصفحة على شكل أعمدة grid system نعم .. فال
وصفوف .. الصفوف هذه ستحتوي محتوى معين ..هذا المحتوى ال
الخاص به سيكون بنائا على عدد الأعمدة ..فتلاحظ .. أنه width
كانت مثلا 8 أعمدة + 4 أعمدة ..(على فرض block تقسيمة ال
أننا اعتمدنا نظام ال 12 عامود في الصفحة) ثم تجد أسفل منه
6أعمدة + 6 أعمدة = 12 عامود ..وهكذا ....
طريقة لضبط المحتوى بنائا على .. grid system هذه هي فكرة ال
الأعمدة ..(تقاطع الخطوط عاموديا وأفقيا) ..
*) ملاحظة: يجب أن يكون التصميم مصمم على هذا النظام أصلا ..^_*

بوجود Grid هو نظام ال .. bootstrap Grid System والآن ال
12 مع امكانية التغيير colmn ويحتوي على bootstrap ال
وهو .. bootstrap على عدد الأعمدة وخصائصها باستخدام ال
فلا يعني .. mobile first ومبني على أساس responsive
وإنما قد يحتاج ذلك الى responsive وحده أنه grid استخدام ال
فيكون bootstrap تخصيص العمل ..لكن باستخدام ال
بشكل تلقائي .. ^_* responsive
*_^ bootstrap Grid system والآن لنرى كيف يعمل ال
الى الشريحة التالية: (سيتم توضيح النقاط بالأمثلة بعد ذكرها بإذن لله
تعالى ^_*)

أو container داخل grid 1) يجب أن يوضع ال
ويوضع بداخلها الصفوف وبداخل الصفوف container-fluid
فهذا يعني container-fluid الأعمدة.. اذا قمنا باستخدام ال
فهذا يعني container واذا قمنا باستخدام full-width
.. grid لل fixed-width
2) نستخدم الصفوف لإنشاء مجموعات أفقية كل مجموعة تحجز مساحة
معينة من عدد الأعمدة ..^_*
3) يجب أن يكون المحتوى جميعه داخل أعمدة .. ويمكن اضافة صفوف
داخل هذه الأعمدة .. فيصبح الشكل صف – عامود – صف – عامود
بشكل سريع . grid لإنشاء .col-xs- و 4 .row 4) يمكنك استخدام

grid 5) يمكنك عمل فراغات / ازاحة بين الأعمدة الموجودة داخل ال
وهذه الإزاحة يمكنك تحديدها بشكل يدوي.. هذه الإزاحة تقابل ب
بالسالب لأول وآخر للصف.. margin
هو bootstrap 6) إن عدد الاعمدة الإفتراضي الذي نتعامل معه بال
يجب أن يكون المحتوى grid 12 عامود .. لذلك عند تقسيمك لل
مقسما الى مجموعات ..لو افترضنا الى 3 مجموعات ..فهذا يعني أننا
..col-xs- سنجعل لكل مجمعة أربعة أعمدة وذلك عن طريق 4
7) اذا زاد عدد أو مساحة المجموعات عن ال 12 عامود ..فإن هذا يعني
انشاء عامود العامود على سطر جديد ..كوحدة متكاملة لوحدها ^_*
وبهذا يمكنك تحديد كيف .. mobile 8) قلنا أن هذا النظام يدعم ال
بنائا على حجم الشاشة باستخدام ال grid يمكن أن تتعامل مع ال
الخ ....col-lg- أو .col-md- مثل css class

وهي bootstrap grid 9) اختصارات مهمة في حين التعامل مع ال
وهي تعني أن Extra small devices وهي اختصار ل :xs
على جميع أحجام الشاشات التي تكون أصغر من grid يعمل ال
768 .. وهذا لا يعني أنها لن تعمل على الشاشات ذات px الحجم
الحجم الكبيرة ..بل على العكس ..ستعمل بالشكل المطلوب .. ولكن ما
عندما grid لل responsive أقصده أنه سيبدأ العمل بنظام ال
*_^.. يصبح حجم الشاشة أقل من 768
xs وبنفس مفهوم ال Small devices وهي اختصار ل :sm
*_^..768px لكن هذه لحجم شاشة أكبر أو يساوي

xs ونفس مفهوم ال Medium devices وهي اختصار ل :md
.^_^ 992px لكن هذه لشاشة أكبر أو يساوي
لكن هذه xs وبنفس مفهوم ال Large devices وهي اختصار ل :lg
.. 1200px تعمل لأحجام الشاشة الأكبر أو يساوي ال
responsive فسيعمل ال xs وكل واحدة تعني ..أنني اذا استخدمت ال
على جميع أحجام الشاشات التي تقل عن 768 ..غير هيك grid
اذا responsive فسيعمل ال sm ..ستعمل باشكل الطبيعي ..أما
كان حجم الشاشة أكبر أو يساوي 768 .. وفي حال أن حجم الشاشة
أقل... فيصبح العامود ..بحجم العرض كامل ..

والآن ..لنشاهد أمثلة على ما تم ذكره من نقاط ^_* .. وخصوصا آخر
نقطة ..لنسير من آخر نقطة بشكل عكسي ^_^ ..لاحظ المثال:

هل قمت باستعراض المثال السابق؟
أريدك الآن أن تقوم بتصغير حجم المتصفح .. وانظر التغييرات التي ستطرأ ..
وأريدك أيضا أن تنظر الى الشيفرة البرمجية .. بعد ذلك سأقوم ان شاء لله
بتفصيل كل حالة ..وشرح مبسط للشيفرة البرمجة ..بما أنه أول مثال جميل
*_^
أرجوا أن تدقق الآن على المثال ..نتائجه ..والشيفرة البرمجية ..ثم الانتقال الى
الشريحة التالية ..وهذا لمصلحتك ^_*
ملاحظة: الامثلة لأنها طويلة تم قطع الصورة لإجزاء حتى يسهل وضعها
بالشرائح ..^______^..(الصور جميعها طولية..من أعلى لإسفل)

1200px أكبر أو يساوي

والآن .لو تتبعنا ناتج الجزء الأول لوحده ..لوجدناه بالشكل التالي:
bootstrap اذا فهمت ..هذه الفكرة ..فأنت أنهيت جزئية مهمة في ال
..والباقي أسهل من هذا ان شاء لله ^_*.. والآن .أريدك أن تحاول أن تنشئ
بالشكل التالي : grid
الصف الأول: فيه 12 عامود ..الصف الثاني: فيه 2 عامودان... الثالث: فيه 4
*_^ لا تنسى أن مجموع أطوال الأعمدة يجب أن يساوي 12

الآن.. هل خطر ببالك سؤال على الأمثلة السابقة ؟ هل خطر ببالك كيف
بنائا على حجم الشاشة..؟ يعني اذا كانت أكبر grid يمكنني تقسيم ال
من 1200 خليها 12 عامود ..اذا كانت أكبر أو يساوي 768 خليها 4
؟... واذا أقل من هيك خليها 2
هذا الأمر سهل جدا ^_^.. كل ما عليك القيام bootstrap باستخدام ال
التي ذكرناها معا ..مثل class به ..هو وضع ال
^_^ col-xs-2 col-md-4 col-lg-1
لنشاهد مثالا عمليا ^_^

شاهد النتائج عن تطبيق المثال .وتصغير وتكبير حجم المتصفح ^_*

هذا الموضوع رغم بساطته .. الى أنه رائع جدا ..ومفيد جدا ..
والآن ..شاهد المثال ^_*
والآن ..أرجوا أن تهتم بالنظر وتجربة النتائج بيدك .. أيضا انظر الى
الشيفرة البرمجية ..بانتباه ..بعذ ذلك ..أريدك أن تحل هذا السؤال:
.. lg يحتوي على 6 أعمدة اذا أكان حجم الشاشة grid قم بانشاء
ويحتوي على 2 من الأعمدة اذا كان md ويحتوي على 4 اذا كان
.*_^ sm

مثال على الإزاحة بين الأعمدة ^_*..
قلنا بالنقاط أنه يمكننا أن نحدد مقدار الإزاحة (اذا اردنا ذلك) للأعمدة
ويكون ذلك عن طريق استخدام ال .. grid الموجودة داخل ال
ال * ترمز الى عدد الأعمدة التي ستمثل .. col-md-offset-*
مقدار الإزاحة .. وهي تشبه تماما فكرة تعريف عامود ..أو حجز مساحة
فهذا يعني احجز ازاحة col-md-offset- عامود.. فلو وضعنا 4
ترمز الى حجم الشاشة أكبر أو md بمقدار 4 أعمدة ..^_^.. وال
*_^ ... يساوي 992
والآن ..لنشاهد مثالا ^_^

هل لاحظت.. إن معاملة الإزاحة فعليا ..هي معاملة انشاء فراغات بمقدار
عدد معين من الأعمدة ..لهذا أمكنني أيضا التحكم بوجود الإزاحة من عدمه
حسب حجم الشاشة

لاحظ كيف تختفي الإزاحة وتظهر..ولاحظ كيف
أنها تحسب من اليسار .. ولاحظ اختلاف
الإزاحة باختلاف حجم الشاشة ..

الآن ..نقطة أخرى مهمة ..وهي اختلاف الأطوال بين الأعمدة ..؟ هل
لاحظت أنك حين تقوم بتصغير الشاشة في بعض الأحيان ..تجد أن
عامود أصبح أطول من الآخر ..وهذا يجعل من العواميد التي تأتي بعده
ترتب بجانبه .. لاحظ الصورة ..
under اذا لاحظت .. فإنه من المفروض أن تأتي أي حقل فيه كلمة
أسفل بالشكل التالي ..

** طبعا هذا الأمر يحدده التصميم .قد تريد ابقائه بالشكل الذي يظهر عليه
..وهذه حريتك أو بنائا على رغبة الزبون ..المصمم ..الخ ^_*
class يحتوي على هذه ال div للقيام بمثل هذه الحركة يلزمنا اضافة
.. visible-xs-block - clearfix وهي
هذا الكلاس يقوم على اجبار المحتوى بأن تأتي بعد :clearfix ال
..css بال clear:both الحاوي الذي قبله ..وهي تشبه عمل
هو كلاس يستخدم لإظهار عنصر معين :visible-xs-block ال
بنائا على حجم الشاشة ..وهذا يعني أن يمكنني التحكم متى تظهر ال
بنائا على ال حجم الشاشة ... clear fix

أرجو أن تنتبه جيدا لهذا المثال المهم ...وقم بتصغير الشاشة لترى النتائج في جميع الأحجام وقارنها مع ال
.. under وأهم ما تركز عليه هو موقع الأعمدة التي تحتوي كلمة .. md
حاول أن تغيير بالشفرة البرمجية... .. xs الى md قم بتجربة تغيير ال

أيضا من الأمور المهمة التي تكلمنا عنها بالنقاط ..هي امكانية وجود
التسلسل الآتي وهو صف عامود صف عامود ..
.. Nesting Column أي بمعنى آخر وجود

اذا لاحظت من الشيفرة البرمجية السابقة .. أن أي عامود ننشئه ..ونريد
التعامل معه .. فإنه يقسم الى 12 عامود .. (طبعا هذا الكلام لأننا
بالأصل نتعامل مع 12 عامود .. ) ولذلك ..فإنه اذا قمت بحجز عامود
بطول 8 .. فهذا يعني أن المساحة هذه تحتوي أيضا 12 عامود ..
.. ولتبسيط الأمر .. لو فرضنا أن العرض الكلي 1170
أخذنا منها مساحة 8 أعمدة ..فهذا يعني أن المساحة الخاصة بهذا الحقل
780 .. الآن .اذا قمنا باضافة عامودين (8 * 1170/ ستصبح ( 12
جديدين واحد بطول 4 والآخر بطول 8 داخل الحقل الذي حسبنا حجمه
780 ..سيقسم الى 12 عامود حسبما ذكرنا وبهذا يصبح حجم ال 4
260 .... وهكذا = 4 * 780/ الموجودة هي 12

ولتتصح الفكرة أكثر ..لنشاهد مثالا عمليا معا ..
.. level أرجوا أن تنتبه للنتائج جيدا .. وخصوصا اختلاف ال
يقصد أنهما بنفس الصف .. Level 1
يقصد به أنهما عامودان داخل صف موجود داخل عامود .. Level 2
.. Nesting Column
منهم ..وانظر الشيفرة البرمجية وتتبعها grid شاهد المثال: وانتبه لكل
لأنه سهل جدا.. اطلع وقارن .. grid ..وقارن بعد اطلاعك على أول
بين الثاني والثالث ..وشاهد كيف أن استخدام الكلاس التي ذركناها يمكن
أن تغير بالشكل وتسهل العمل علينا ..وتعطي منظرا رائع ^_^

والآن ..ماذا ^_^..نأتي على أمر راااااااااائع ^_* ..وهو التحكم بترتيب
فقد responsive خصوصا في حالات ال .. grid الأعمدة داخل ال
تحتاج الى تبديل موقع عامودين في حال كانت الشاشة صغيرة ..أو
لإظهار المحتوى مرتبا بشكل يختلف عن شاشات الأحجام الصغيرة ..
2 وهما: class ويتم ذلك عن طريق
وتقوم هذه الخاصية على دفع العامود :.col-md-push-* (1
بمقدار معين باتجاه اليمين...
وتقوم هذه الخاصية على سحب العامود :.col-md-pull-* (2
بمقدار معين من الأعمدة باتجاه اليسار...
وكما ذكرنا بالخصائص السابقة ..فهذه تعمل بنائا على حجم الشاشة ومقدار
الدفع والسحب يكون بنائا على عدد الأعمدة ..^_*

والآن ..لنشاهد مثالا ..

هل قمت برؤية المثال؟..هل لاحظت كيف يختلف الترتيب عن تغيير حجم
الشاشة ...؟
نعم كلما ..تقوم بتغغير حجم الشاشة ..سيقوم بتغغير الترتيب حسب
push القياسيات التي قمت بوضعها أنت .. أيضا عملية الترتيب ..من
فإنها ارتبطت بعدد الاعمدة كما لاحظت .. .. pull و
والآن ..الى آخر شريحة في هذا الموضوع ..ولننتثل معا الى موضوع
جديد بإذن لله تعالى ^_*

http://getbootstrap.com/css/
هذا الجدول يلخص ما ذكرناه ^_^

ترمز الى ما يتم طباعته على الشاشة .. وال Typography طبعا ال
يقوم بتعديل بعض الخصائص بشكل ليس كبير..لكنه bootstrap
يحدث فرقا نوعا ما بالطباعة .. وأول ما سنبدأ به هو
يتم تغيير شكل الطباعة .. h الى 6 h حميع ال 1 :heading 1) ال
الخاصة بهم .. لاحظ الفرق بين الشكلين: (قم بتطبيق المثال لتشاهد
عادي و html الفرق بنفسك على المتصفح – لا يوجد كود.. هذا
(- bootstrap template

14 وجميع ال px فحجم الخط الإفتراضي هو :body 2) بخصوص ال
10px يساوي margin-bottom التي تتواجد بداخله لها <p>
كقيمة افتراضية ..
لاحظ حجم الخط ..والمسافة بين الفقرات ..ودرجة
اللون للخط..

و mark وهي العناصر مثل :Inline text elements (3
الخ ..abbr وال highlight
الآن ..سأدعك تكمل قرائة بقية الأمثلة لوحدك .. لأن الموضوع
أصبح واضحا ^_* تفضل وانظر الى هذا الرابط:
اضغط هنا

والآن ..لنبدأ فعليا بسرد وذكر خصائص بعض العناصر ومكونات ال
^_^ bootstrap وتنسيقها أو التعامل معها باستخدام ال html
^_^..table وأول عنصر هو ال
يتم تنفيذه باستخدام bootstrap أولا ..الشكل الإفتراضي للجدول بال
شاهد شكل الجدول: .. *_^ .. class=“table”

لإظهار الجدول على شكل bootstrap كما يمكنك أيضا استخدام ال
Striped تخطيط (أقصد صفوف مختلفة الألوان..) وتسمى هذه بال
الذي class table-striped ويتم تفعيل هذه الخاصية باستخدام ال
هذه الخاصية ie- شاهد المثال: (لا تدعم ال 8 .. table يضاف الى
(*_^ nth:child() بخاصية تسمى css لإنها تعتمد على 3

كما يمكنك اضافة اطار لجمع خلايا الجدول والجدول ..وذلك عن طريق
... class table-bordered استخدام ال
شاهد المثال: (لا تنسى تطبيق كل مثال مباشرة ..)

يالإضافة الى الخصائص الجميلة والمريحة التي ذكرناها ..فهناك خاصية
أي عندما يمر مؤشر الفأرة قوة ... row hover رائعة أيضا وهي
صف من صفوف الجدول ..سيقوم بتغير لونه –يمكنك اضافة خيارات
أخرى أيضا - ..^_* ..امر رائع ويتم ذلك عن طريق استخدام الكلاس
شاهد المثال: .. table-hover

لتقليل ال class table- condensed أيضا يمكنك استخدام ال ال
الموجود داخل الخلايا ..ونستخدم هذه الخاصية في حال padding
صغير ..خصوصا اذا كان المحتوى padding أردنا أن يكون ال
كبير .. خاصية اضافة لك اذا أحببت استخدامها يوما أو احتجتها ^_*
شاهد المثال:

نستخدمها مع الجداول bootstrap أيضا هناك اضافة رائعة داخل ال
تعطيني مجموعة class هذه ال ,Contextual classes وهي
من الألوان المختلفة المخصصة لتنفيذ تنبيه معين ..
هي: Contextual classes هذه ال

والآن ..لنشاهد مثالا معا ^_^:

وهي ال ^_* table والآن ..الى آخر نقطة وأجمل نقطة تخص ال
إن الجدول من مشاكله التي كنا ... *___^ Responsive table
وهذا .. responsive داخل تصميم table ننزعج بحلها هي وجود
الأمر كان يدعنى نتعمل مع الجدول بعدة طرق ..إما ببناء
من divs يحول الجدول على شكل ).. responsive grid
الصفوف والأعمدة ..) أو التحكم بالجدول والصفوف والأعمدة وتحويلها
media واعطائها خصائص ..(اعتمادا على ال blocks الى
الخ .. scroll وبنطلع .. customize أو نقوم بعمل .. ( query
من الطرق.. لكن الآن .. ﻣﺩﺣہ ل ..بحركة واحدة ..يصبح الجدول ﻠ
ويكون ذلك عن طريق استخدام الكلاس .. ..*_^ Responsive
table-responsive

للجدول .. scroll هو اظهار class إن ما يقوم به هذا ال
جديد): div شاهد المثال وطريقة التطبيق: (لاحظ أنني قمت باضافة

وتنسيق الفورم وخصائصه من الأمور المهمة, Forms نحن نعلم أن ال
والتي قد تأخذ من وقت لا بأس به من حيث التنسيق والترتيب ..لكن
يمكنك اختصار كل ذلك ..بخصائص bootstrap باستخدام ال
أو للفورم بشكل عام .. bootstrap للعناصر التي يمكنها استخدام ال
له الخصائص bootstrap داخل ال Form بشكل عام فإن ال
الإفتراضية التالي:
تأخذ input, textarea, and select 1) جميع عناصر ال
.. .form-control العرض 100 % .. اذا تم استخدام الكلاس
div wrapper داخل html وعنصر ال label 2) يتم وضع ال
.form-group. (حاوي يحتوي هذه الخصائص) ويحمل الكلاس

.*_^ <form> الى role="form” 3) قم بإضافة
يقدم لك 3 نماذج مختلفة bootstrap فال layout أما بخصوص ال
يمكنك تنسيق الفورم بها:
Vertical (default) form (1
Inline form (2
Horizontal form (3
والآن ..لنشاهد مثالا ^_*

Vertical form (default)

على form هو تصميم بحيث تكون عناصر ال .. form inline ال
ويكون .. aligned left والإزاحة الخاصة بها لليسار inline شكل
..html الخاص بهذا الشكل ..مطبوعا بجانب عنصر ال label ال
عن طريق اضافة الكلاس inline form ويتم تفعيل ال
...<form> الى ال form-inline
*) ملاحظة: لا ينطبق هذا الشكل الا على حجم أكبر أو يساوي
768 ..(قم بتجربة ذلك على المتصفح بعد رؤية المثال في الشريحة px
التالية ^_*)

Inline form code
Inline form result

هذا الكلاس يقوم اخفاء ال .. .sr-only ملاحظة: يوجد كلاس اسمه
خصوصا class ولكن لماذا نستخدم هذا ال .. form من ال label
.. !؟
مع اتاحة قرائته label هذا الكلاس يقدم مزية رائعة وهي اخفاء ال
وهذا الأمر إن لم .. Screen Reader .. برامج قرائة الشاشات
قد يسبب مشكلة لهذه القارئات ^_* label يستخدم ولم تضع
شاهد المثال في الشريحة التالية .. وانتبه لقم قمت بوضع الشيفرة البرمجية
لكي تعرف ما هي الفكرة التي اتبعها لإخفاء .. sr class الخاصة بال
*_^ label ال

.sr-only

وال inline بهذا الشكل يكون ما بين ال .. Horizontal From أخيرا ..ال
form component بجانب ال label بحيث يظهر ال .. vertical
على سطر لوحده.. ^_* group(wrapper) .. ويظهر كل
يتم التعامل مع هذا الشكل عن طريق استخدام الكلاس
*_^ <from> وتوضع داخل ال form-horizontal
له .. control-label نقوم باضافة الكلاس .. label بالنسبة لل
بالإضافة الى ما ذكرنا ..فهنا سنستخدم الأعمدة التي تعلمناها ^_* ويكون ذلك
form جديد نضعه ليحتوي ال wrapper ول label لل
.. component
شاهد المثال ^_*

لا تنسى تطبيق / كتابة
الأمثلة ... ^_^

التي يدعمها أو يتعامل معها ال html والآن ..ما هي عناصر ال
؟form والتي تتواجد أو تستخدم داخل ال bootstrap
يمكننا تقسيمها الى:
(1
Input
(2
textarea
(3
checkbox
(4
radio
(5
Select
(6
Others ^_*
درسناها ونعرفها ^_^.. html tag هذه جميعها
والآن ..لننظر معا الى الخصائص التي يمكننا العمل معها ...

input التي تستخدم ال html وهي جميع عناصر ال :Input (1
والتي تندرج بهذه القائمة:
text, password, datetime, datetime-local
, date, month, time, week, number, email, url,
search, tel, and color .
لوحدة مباشرة ..استخدم bootstrap والآن ..هذا النوع يتعامل معه ال
ويكفي هذا .. .. form-control فقط الكلاس
هو أمر الزامي input الخاص بال (type) لكن انتبه من أن تحديد النوع
^_* ... شاهد مثالا ^_^

لنقوم بعملية ادخال متعددة tag نقوم باستخدام هذا ال :textarea (2
الأسطر (أكثر من سطر واحد) ..
أيضا يمكنك العمل على هذا النوع بكل سهولة ..فقط قم باستخدام الكلاس
ويمكنك ايضا تحديد عدد السطور باستخدام ال .. form-control
لاحظ المثال: .. rows

جميعنا نعرف أن ال :(checkbox & radio) 4 & 3
من الأمور الرائعة جدا في عالم البرمجة radio وال checkbox
فهي مفيدة بعرض مجموعة من الخيارات يمكنه الإختيار من خلالها ..
امكانية أختيار أكثر من خيار ..بينما ال checkbox بحيث يدعم ال
لا يدعم الا خيار واحد .. radio
لا checkbox وال radio والآن أريدك أن تعرف ..أننا مع ال
.. form-control نستخدم ال
خيارات يمكننا استخدامها:
1) يمكننا استخدام كلاس اسمه
هذا الكلاس يجعل ال . radio-inline أو checkbox-inline
تأتي على نفس السطر . radio أو box

أو حاوي مثل wrapper داخل radio أو ال box 2) نقوم بوضع ال
.. label أو div ال
كلاس ..داخل ال الحاوي الذي ذكرناه disabled 3) يمكننا استخدام ال
بالنقطة رقم 2 .. وهذا الاستخدام يعطي تصميم مباشرة من ال
للعناصر التي تم تعطيلها .. bootstrap
والآن لنرى مثالا على ذلك ^_^:
class الذي يمثل الحاوي وال div شاهد الشريحة التالي..وانتبه لل
الموجودة بداخله .. كل أمر مهم أريدك الانتباه عليه ملون ^_^
أيضا أرجوا أن تقوم بالتطبيق مباشرة ^_*

كباقي الخصائص ..تعمل select بكل بساطة فإن ال :Select (5
select وتستخدم هذه ال .. bootstrap بشكل سهل ومباشر بال
لإدارج خيارات متعددة وكثيرة أو غير محددة العدد ...ويمكن من خلالها
^_^ ...multiple السماح باختيار خيار أو أكثر باستخدام ال
لاحظ المثال..هل رأيت كيف أن ال
سهل جدا..وكأنك Bootstrap
وبذات الوقت .. html تعمل على
يقدم خصائص كثيرة ..

والآن .. بعد حديثنا عن العناصر من 1 الى 5 .. يتبقى لنا نقطة أخيرة
(others) ..وهي النقطة رقم 6
وأقصد بها هي مجموعة من خصائص/سمات يمكن :Others (6
استخدامها للتحكم بتصميم أمر معين .. أو تمييز أمر معين مثل وجود
هل تقوم .. label بجانب plan text خاصية في حال أردت وضع
يتكفل بهذا .. bootstrap بكتابة تصميم خاص فيها ..الجواب لا ..ال
التي تقدم لنا هذه الخصائص المفيدة للتصميم class والآن لنبدأ بذكر ال
^_^

label ويقصد بها عند وجود نص ثابت بجانب : Static control( أ
ويكون ذلك باستخدام الكلاس ,horizontal على شكل
..&_& p tag داخل ال form-control-static
من أكثر الأمثلة التي نستخدمها لذلك ..وضع معلومات اتصال فوق ال
ورقم الهاتف ..الخ email مثل وضع ال .. form
شاهد المثال (الشيفرة البرمجية بالشريحة التالية):

طبعا هذا المثال سريع ..وللتوضح ..هذه الفكرة المهمة ^_^ ...
ولاحظ .. *_^ <p> لاحظ من خلال الشيفرة البرمجية الكلاس ...وال
أنني تعاملت مع الأعمدة ^_^

العديد من bootstrap يوفر ال :form control state ب) ال
التصاميم الخاصة في المستخدم عندما يقوم بعمليات الإدخال أو استخدام
علامات التبويب ..التصميم الذي نعرفه جميعا عند القيام بمثل هذا الأمر
لكن بوجود ال ..^_^ :focus هو الشكل الإفتراضي لل
فهناك خصائص/تصاميم أخرى يمكنك ادراجها .. .. bootstrap
يمكن تجزئة هذه الجزئية الى عدة نقاط وهي:
ينطلق هذا التصميم عندما يقوم المستخدم بال :INPUT FOCUS 
على عنصر معين .. وتقوم هذه الخاصية على حذف ال focus
*_^.. box-shadow الموجود وإنشاء outline
تابع الى الشريحة التالية

هلا لاحظت كيف تم تصفير ال
^_^... outline

تقوم هذه الخاصية على منع المستخدم من :DISABLED INPUTS 
أي تفاعل مع العنصر المحدد .. بالإضافة الى ذلك يقوم بتغيير شكل
مؤشر الفأرة .. ^_*

تستخدم هذه الخاصية في حال أردنا :DISABLED FIELDSETS 
fieldset tag تعطيل التفاعل مع جميع الحقول الموجودة داخل ال
بالإضافة الى تغيير مؤشر الفأرة ^_^..
IE *ملاحظة: هذه الخاصية يوجد بها مشكلة على جميع متصفحات ال
لكي نقوم بحل هذه المشكلة داخل ال js code ..لذلك يلزمك أن تعمل
.. ie

VALIDATION STATES : انل رفوت ةعئارلا ةيصاخلا هذه تانايبلا نم ققحتلا جئاتنب ةصاخلا ميماصتلا نم ةعومجم.. حاجنلا دنع ريذحتلا وأ لشفلا وأ.. لا عم ةيصاخلا هذه مدختست نأ نكميوwrapper نم لكل
.control-label,.form-control,.help-block
التي يمكننا استخدامها فهي: class أما ال
.has-warning,.has-error, or.has-success
والآن ..لنشاهد مثالا عمليا ^_^
..class انظر الى الشريحة التالية بتمعن ..وانتبه الى أماكن وجود ال

مثال:
لكل عنصر wrapper انتبه لكل
من العناصر ^_^.. نفذ
الكود..ولننظر ما هي النتائج ^_^

شاهد نتائج تطبيق المثال السابق ^_^
الذي يحتوي على الكلاس wrapper لاحظ كيف أن اختلاف ال
كيف أثر على النتائج ^_^ ..
Has-warning for label only
Has-warning for text only
Both
Both

ICONS : قبس ام ىلا ةفاضلإاب اضيأ .. نكمي ةيرايتخا تافاضا دجويف لا رصانعل اهقاحلاinput .. لا لثمicons ^_^ .. لا هذهicons سلاكلا مادختساب اهعم لماعتلا كنكميhas-feedback .. ةفاضلإاب كلذ ىلا .. لاب رفوتي هنإفbootstrap لا نم ةعئارو ةريبك ةعومجمico ةرشابم اهمادختسا كنكمي يتلا .. تحت جردني ءزجلا اذهو لا عوضومcomponent لا لخادbootstrap ..
شاهد هذا الرابط ... قباسلا طبارلا للاخ نم.. لا ةعومجم تدهاش لهico ؟ ةرفوتملا....
والآن انظر الى الصورة في الشريحة التالية:

والآن لنشاهد مثالا على عمليا على ذلك ^_^..
له ^_^ ico والحقل المراد اضافة ال ico انتبه الى التتابع بين ال

الآن ما أريده منك هو تطبيق المثال السابق.. واضافة حقلان أيضا لتصبح
نتائج تنفيذ الشيفرة البرمجية الخاصة بك مثل هذه الصورة:
اذا انتبهت جيدا للمثال
السابق ..فإني قمت
باستخدام ال
*_^ Valid state
وبهذا أبقي دائما تفكيرك
كيف يمكنني الإستفادة
من الخصائص التي
نعلمها ..والآن ..هل
قمت بحل السؤال؟

والآن ..هل خطر ببالك سؤال؟ ..وأعتقد انك يجب أن تكون سألت عنه
..أو تراود لك.. أو أعتقد أنك قمت بالحبث عنه حتى ..(هذا طبعا اذا
(^_^ :P قمت بتطبيق الأمثلة ..اعترف
form السؤال هو ..كيف يمكنني التحكم بحجم الحقل الموجود داخل ال
..ان كان هذا الحجم بالإرتفاع أو بالعرض ؟؟؟
^_^.. bootstrap الجواب على هذا السؤال الجميل ..موجود بال
كيف ذلك ..الى الشريحة التالية:

:height 1) ال
الموجود للعنصر عن طريق (height) يمكنك التحكم بالإرتفاع
input- أو input-lg وهي class استخدام مجموعة من ال
شاهد المثال: ...sm
يمكنك مشاهدة الأطول عن طريق ا
لنتائج
inspect element المتصفح

:^_^.. width 2) ال
التحكم بالعرض الخاص بالعنصر bootstrap يمكنك من خلال ال
..وهذا أمر ليس بجديد ^_*..!! ..لا تتعجب ..فكل ما عليك القيام به
....^_^ col-xs- مثل 3 ..^_^ col هو التحكم بال
شاهد المثال: (لا تنسى تطبيق كل مثال تعلمته)
النتائج

(3 نلآاو.. اعبط باوجلا ؟ىدح ىع لقح لك عافتراب مكحتأ نأ بجي له لا.. سلاكلا مادختسا كنكميفform-group-lg وأform-group-sm لا عمgroup .. ليمج رمأ اذهو.. ثيحب سلاكلا مادختساب رصانعلا لكل هصيلقت وأ عافترلإا ةفعاضم كنكمي ةدحاو ةرم.. لا لﯩع لمعي رملأا اذه نكلhorizontal form.. عوضوملا يف ليمجلا.. لا نأlabel عم رايخلا اذهب رثأتت اضيأ لوقحلا.. يأ ليدعتب موقت نأ نود قسانتم لكشب ميمصتلا رهظيس كلذل رمأ^_^
شاهد المثال في الشريحة التالية:

بإذن لله تعالى ..وهو ال form وأخيرا ^_^... آخر موضوع في ال
..^_^ Help text
كثير من الأحيان نحتاج الى وضع نص يساعد المستخدم على معرفة ما
mm-dd-yy سيتم ادخاله داخل حقل معين .. مثل صيغة التاريخ
..كمثال .. أو الطلب من المستخدم ادخال حروف وأرقام لكلمة المرور
..وغيرها ..
سهل جدا..ويكون عن طريق استخدام كلاس bootstrap هذا الأمر بال
شاهد المثال ^_* ... help-text ال

ملاحظة: لم أقم بكتابة عناوين لكل مثال ..وإنما فصلت بينهم بفواصل حتى أتأكد أنك ستقوم
بقرائة الشيفرة البرمجية ومعرفة كل مثال والهدف منه ..ولإساعدك قمت بكتابة بعض
التعليقات في الشيفرة البرمجية ..حتى تستطيع النظر للمثال وفهمه من خلال المتصفح
.. Inspect element مباشرة عن طريق استخدام ال
مجانية

هو التحكم بتصاميم ال bootstrap من الأمور الرائعة التي يقدمها ال
بحيث يقدم لك مجموعة من الخيارات ..من خلالها .. buttons
الى هذا ico يمكنك التحكم بشكل وتصميم الزر.. بالإضافة الى اضافة
والآن لنشاهد ما هي ... ( form الزر ..(كما تعلمنا في درس ال
:button الخيارات المتاحة للتعامل مع ال

والآن ..بعد تعرفنا على الكلاس السابقة ..لنشاهد مثالا كيف يمكننا استخدام
هذه الكلاس .. ^_*

والآن دورك لتقوم بتنفيذ أو كتابة هذا المثال ..(اكتب الشيفرة البرمجية
الخاصة بهذه الصورة ^_^)
ثابت ؟ buttons الآن ..هل حجم ال
مختلفا ..وهذا button الجواب بكل تأكيد ..لا ..يمكن أن يكون حجم ال
أيضا .. ^_* bootstrap الأمر ..يوفره ال
عن طريق استخدام مجموعة من الكلاس button يمكننا التحكم بحجم ال
.btn-block و .btn-xs و .btn-sm و .btn-lg وهي

يعتمد كما bootstrap الآن الخصائص السابقة جميعها مألفوة لدينا ..فال
مباشرة .. btn-lg نشاهد اسلوب موحد للتعامل مع التصميم ..فمثلا
.. btn عرفت أنها تعني حجم كبير لل
.. btn-block لكن الخاصية التي قد تكون جديدة علينا الآن ..هي
وهذا يعني أنها .. block على شكل btn هذا الكلاس يقوم على جعل ال
^_^ ... parent كامل والخاص بال width ستأخذ ال
والآن ..لنشاهد مثالا معا ^_*

النتائج

.. ^_^ Button State والآن بإذن لله تعالى سنتحدث عن ال
تقدم لنا مجموعة من الكلاس الرائعة والتي تسمح لنا button state ال
بكل سهولة عن طريق استخدام هذه الكلاس button بتغيير حالة ال
كنا نستخدم بال ) active مثل .. bootstrap والموجودة داخل ال
(:active ال css
هي : button state والآن ال

ACTIVE State

DISABLED State

هذه الخاصية تقوم على اعطاء خصائص التصميم Active state 1) ال
مثل الخلفية والإطار الغامق .. button لل active الخاصة بال
:active مثل ال pseudo-class هذا الأمر ..لن يدعنا نستخدم ال
لهذه الحالة ...
يكون على جزئين (اضافة هذا الكلاس) ..إما أن active التعامل مع ال
... <a> أو الى button يضاف الى ال
لاحظ .. إن التصميم أصبح وكأنك الآن تقوم بالضغط على الزر
لا تعمل هنا ..لأنه hover ولم تقم بالإفلات ..لذلك حتى ال
.. active باعتبار

الى ال disabled يمكننا اضافة خاصية ال :Disabled State (2
لنمنع المستخدم من الضغط على زر معين..هنا في ال button
يعطينا أيضا تنسيق جميل لوحده لهذه الأزرار عند bootstrap
وتكون على شكل حذف التدرج باللون وتقليل disabled استخدام ال
...% نسبة ظهور الزر الى نسبة 50
شاهد المثال: .. <a> وال button هذا التصميم يظهر أيضا لل
قد قمنا باستخدام ال ا
لنتائج button انتبه الى أنه في ال
فقد قمنا <a> ينما في ال Disabled attribute
... disabled باستخدام الكلاس

.. disabled ملاحظات مهمة حول خاصية ال
pointer-events: يتم استخدام ال bootstrap 1) في ال
غير قابل <a> لمحاولة جعل ال css الموجودة في ال none
للنقر.. لكن هذه الخاصية غير مدعومة من جميع المتصفحات حتى من
لذلك لتستخدم خاصية مثل هذه بأمان .. opera وال 18 Ie ال 11
يلزمك كتابة جافا سكربت ..^_^ <a> لل
فلماذا لا أستخدم <button> وال <a> 2) بما أننا نتعامل مع ال
وال nav وأكتفي بهذا ؟.. الجواب هو بسبب وجود ال <a> دائما ال
وهي موجودة تحت عنوان ..سنأتي له في الشرائح التالية navbar
هي التي تعمل هناك button بإذن لله تعالى .. ستكون فقط ال
..لذلك وجب التنويه ...

... ^_^ Button tag وهو ال Button والآن ..الى آخر موضوع داخل ال
ﻣﺩﺣہ ل ..شعور جميل ^_^ ... ﻠ
كان تطبيق واستخدام ل 3 .. button في أول مثال ذكرناه في موضوع ال
للتذكير شاهد .. button لتعطينا تصميم ال tag أنواع مختلفة من ال
الصورة ..
الذي يجب أن أقوم باستخدامه ..؟!! أو أن يكون هو الأكثر tag لاكن ما ال
استخداما بالنسبة لدي ؟

فإنه ينصح باستخدام ال bootstrap حسب نصيحة موقع ال
أكثر ما يمكن .. وذلك لضمان التوافقية بين جميع <button>
المتصفحات قدر الإمكان .., بالإضافة الى ذلك وعلى سبيل المثال ال
الإصدار الأقل من 30 ..لا يدعم خاصية ال Firefox
لذلك وجب تنبيهك لذلك ^_^ ..... <input> لل line-height
الذي نستخدمه .. يجعل من ال html معلومة هدية لك ^_^: هل تعلم, ال
داخله html tag أمر مميز؟ الجواب هو امكانية وضع <button>
مثل
<button>Value <b>this</b></button>
بأن يحتوي محتوى .. tag والفكرة الرئيسية هي انه يسمح هذا ال

والآن ..اذا أردت المزيد ..
طبارلا اذه ةرايزب مق ..^_^ .. عرض المقالة من هنا
مقتطف مهم ^_^ من داخل المقالة ...
والآن ..لنشاهد جميع الأمثلة معا ...وأرجوا أن تكون قد قمت بتنفيذ الأفكار التي ذكرناها
^_^
التطبيق يعني المعرفة والخبرة...

هو التعامل مع الصور ... فيمكنك جعل bootstrap من الجميل بال
بحركة بسيطة ..وهي اضافة كلاس الى responsive الصورة
الصورة ..كما يمكنك التحكم بشكل الصورة أيضا بإضافة الكلاس ..
وهذا يعني أننا سنتحدث عن:
(1
Responsive images
(2
Image shapes

(1Responsive Image : ماجحأ عم ةروصلل بواجتلا ةيلمع يهو ةفلتخملا تاشاشلا .. لا مادختساب اننكميوbootstrap ةفاضا نم لا سلاكimg-responsive ...
لتشاهد النتائج ..قم بتصغير حجم المتصفح .. وشاهد كيف يتغير حجم الصورة
حسب حجم شاشة العرض ... شاهد نتائج تطبيق المثال بالشريحة التالية

حجم شاشة 1
حجم شاشة 2

(2Image shapes : يف رهظيس يذلا ةروصلا لكش اهب دصقيوعورشملا.. لابوbootstrap مادختسا كنكمي3 لمعل سلاك3 يهو ةروصلل ةفلتخم لاكشأ :
تكون الصورة لها منحنى وليس زاوية . :img-rounded .I
يصبح شكل الصورة دائري.. :img-circle .II
تصميم لصورة بحيث تظهر وكأنها داخل :img-thumbnail .III
اطار ..(نشاهدها بكثرة في معارض الصور ..)

المنحنى) ..) ) curve لا يدعم ال ie- شاهد النتائج: (ملاحظة: ال 8
img-rounded
img-circle
img-thumbnail

هي مجموعة من الكلاس المختلفة ..موجودة helper classes يقصد بال
لستهل عملك .. ولنبدأ ب
وهي مجموعة من الكلاس التي تستخدم :Contextual colors (1
لتغيير خصائص اللون لنص أو رابط معين ..^_*.. أيضا فإنه من
يكون أغمق من اللون .. hover الجميل بهذه الخصائص ..أن اون ال
المحدد بشكل تلقائي .. ^_^...شاهد المثال للكلاس التي يمكن استخدامها:

وهي الكلاس التي يمكن : Contextual backgrounds(2
استخدامها لتغيير لون الخلفية لعنصر معين.. وهي مشابه للكلاس
أيضا اذا كان ..*_^ ... bg-* لكن الكلاس يبدأ ب .. text الخاصة بال
فإن لون الخلفية يصبح أغمق ... .. hover له

مثل .. x يمكنك من انشاء زر اغلاق class هذا :Close icon (3
وغيرها ..بكل سهولة .. وذلك عن طريق استخدام alert الموجود بال
..^_^ close الكلاس
هذا التنسيق ظهر .. x النتائج .. ^_^..لاحظ ال
x وحرف ال close لإنني استخدم الكلاس
اذا كنت لا ).. × ظهر من استخدام ال
.. (HTML تعرف ذلك راجع ال

يستخدم هذا الكلاس لتعيين خلفية على شكل سهم صغير : caret(4
..وظيفته هي الدلالة أو الإشارة الى أمر معين ..ونراه افتراضيا .في
كما نستخمه في القوائم .. (DropDown menu) القوائم المنسدلة
... sup menu للدلالة على وجود
مختلفة css لإعطاء خصائص custom class لقد قمت باستخدام ال
لتغيير اتجاه السهم (المؤشر كما في الصورة ^_^)..
النتائج
قم بالبحث أو محاولة كتابة
الخصائص لتخرج بنتائج كما في
المثال الذي أمامك ..

وكما .. float المهمة ..ال css إن من خصائص ال : Quick floats(5
ويكون هذا .. right وإما left يكون إما float نعلم فإن استخدام ال
ولكن مع اعطاء أفضلية بالتنفيذ (اجبار) لأن .. bootstrap أيضا بال
.. flaot: * !important الخاصية المكتوبة من تنفيذ الكلاس هي
أما بخصوص الكلاس التي يمكن استخدامها فهي:
navbar-left و pull-left ( أ
navbar-right و pull-right ( ب
فسنتحدث عنها بإذن لله في ال .. navbar-* بخصوص ال
...pull-* لكن الآن سنكتفي بال .. component

شاهد مثالا على الشيفرة البرمجية وناتج التنفيذ:
لذلك نراها ..float: left قامت بعمل .. pull-left كما تلاحظ .. فإن ال
فأخذ أقصى .. float: right.. hikmat بأقصى اليسار .. بينما
اليمين.. ولاحظ ..اذا قمت بالنظر الى الشيفرة البرمجية ..ستجد
*_^...important
الناتج

اذا امعنت النظر في المثال السابق.. ستجد أنني استخدمت :Clearfix (6
هذا الكلاس كان مهم .. clearfix ويحتوي على كلاس وهو div
استخدامه ..لأمنع الصفوف / العناصر التي ستأتي بعد هذا المثال من أن
بمعنى آخر ..وهي بال float لل clear تتداخل معها .. أي تقوم بعمل
..clear: both تقوم بكل بساطة على استخدام الخاصية css
لقد قمت بأخذ المثال
السابق ..لكنني لم أقم
clearfix بوضع ال
فانظر الآن النتائج ..
وقارنها بنتائج المثال السابق ...
النتائج

شاهد المثال بشكل كامل:
والآن ..بعد مشاهدتنا للمثالين ..وحالة استخدام كل منهما ..فهذا لا يعني أنني
دائما ..أو أن عدم استخدامها خطا.. ففي clearfix يجب ان أستخدم ال
بعض الحالات ..مؤجل استخدامها لمرحلة أخرى ..وهذا مفيد جدا..
وكمثال مشهور .. الصور التي يأتي بجابنها النص .. فلو استخدمت ال
بعد الصورة مباشرة ..سيقى النص أسفل الصور ..لكنني clearfix
أأجل وضعها الى بعد النص .. وبهذا أنهي كل المشاكل بحركة واحدة
^_^

من الأمور التي نستخدمها ونحتاج : Center content blocks(7
block اليها في كثير من الأحيان ..هو تنصيص المحتوى داخل
الذي أتواجد فيه .. block معين... ويكون هذا العمل على مستوى ال
وهي جعل css وفكرة التنصيص ..بسيطة جدا ..ونستخدمها كثيرا بال
...margin: 0 auto ونقوم بإعطائه .. block العنصر
يمكنك القيام بذلك بحركة واحدة ^_* وهي bootstrap والآن باستخدام ال
^_^ center-block استخدام الكلاس
شاهد المثال: (لا تنسى تطبيق كل مثال– الآن شاهد النتيجة ..ثم انتقل الى
الشريحة التالية لمعرفة الكود ومن ثم تطبيقه ^_^)

شاهد الشيفرة البرمجية الآن ..
لكن .. span داخل center-block لاحظ أنني قمت باستخدام الكلاس
سيتحول الى span هذا لن يحدث مشكلة في عملية التنصيص ..لأن ال
هذا كلاس أنا ..set-block-size واذا لاحظت ..فإنه يوجد .. div
لل width أو max-width قمت بانشائه ..والهدف منه هو تحديد
حتى تتم عملية التنصيص وتعمل بشكل صحيح .. ^_^ block
فعرفنا ما هي .. .. bg-info أما ال
... block لاحظ التنصيص لل

إظهار وإخفاء المحتوى أمر : Showing and hiding content(8
مهم ..والتحكم بعملية الإظهار والإخفاء أمر أكثر أهمية ..لقد تطرقنا
لكن الآن ..سنتكلم عن 2 كلاس .. hide سابقا الى استخدام الكلاس
.. hidden وال show آخرين .. وهما ال
أنها أكثر أداء hide ما تتميز به عن ال show & hidden هذه الكلاس
بالإضافة الى .. screen reader وتفاعلية في حال كنا نتعامل مع
ذلك ..اذا احتجنا الى الزام (اجبار) عنصر معين على الإختفاء فإنني
والسبب في ذلك ..أن hide كمثال ..بدلا من ال hidden أستخدم ال
وبوجود خاصية ال important هذا الإخفاء يكون مع استخدام ال
فتكون show أما ال .. visibility وخاصية ال display
... Display: block !important

أيضا .ويقوم invisible بالإضافة الى ما ذكرنا ..فيمكننا استخدام كلاس
بدون visibility: hidden; هذا الكلاس على استخدام خاصية ال
.. display أو important
وال display **) ملاحظة مهمة... اذا كنت لا تعرف الفرق بين ال
من موقع css فيمكنك الإطلاع على دورة ال visibility
... 2nees.com

Screen reader and keyboard navigation content(9
وقلنا أنها تخفي المحتوى وتبقية .. sr-only هل تتذكر عندما تحدثنا عن ال
قادرة على قارئة المحتوى الذي قمت بإخفائه screen reader ال
ونسهل على ..SR ..لكن بالإضافة الى ذلك ..لأزيد من التحكم لهذه ال
إخواننا أصحاب الإحتياجات الخاصة العمل على الموقع .. يمكننا استخدام
هذا الكلاس يقوم على عرض .. sr-only-focusable ال
المحتوى للشخص(يتجاوب مع الفعل الذي يقوم به الشخص على لوحة
والكلاس sr-only المفاتيح), ويكون هذا الفعل ناتج عملية دمج الكلاس
اي استخدام ال 2 كلاس معا) .. ) ... sr-only-focusable

هذه خاصية تستخدم كلاس : Image replacement(10
هذا الكلاس يقوم على تعريف خصائص تخفي النص .. text-hide
المكتوب.. وهذه العملية بغرض وضع خلفية صورة بدلا من النص
الخاصة بوسائل التواصل ico ..وكثيرا ما نستخدمها في تعاملنها مع ال
الإجتماعي ^_^ ..
الفكرة بهذا الكلاس ..هي جعل حجم الخط 0
والخلفية ... shadow واخفاء الإطار وال

.. helper class بهذا ..نكون انتهينا بفضل من لله تعالى ..من ال
لكن الأهم من كونك وصلت الى هنا ... هو هل قمت بتطبيق الأمثلة ؟!
أبقى أركز على تطبيق الأمثلة لأنه الموضوع المهم لكسب المعرفة .. فلا
تتكاسل وتكتفي بالقرائة ...
والآن ..لنشاهد جميع الأمثلة السابقة معا ...يرجى الإنتباه لكل جزئية في
المثال .. ومشاهدة الشيفرة البرمجية الخاصة بها ... ^_*

mobile first من أهم مميزاته أنه .. bootstrap لقد ذكرنا أن ال
مجموعة من الكلاس المميزة التي bootstrap ..لذلك يقدم لك ال
تمكننا من التعامل مع الشاشات المختلفة ...لكن هناك أمر مهم ..وهو
استخدم هذه الأوامر بذكاء ..وليس بكثرة ..وأقصد بذلك أنه ..اذا
استخدماتها بكثرة دون العناية أو بمعنى أدق ..دون تخطيط ..فستصل الى
مرحلة ..تجد نفسك بها تقوم ببناء موقع من جديد .. وهذا الأمر لا نريده
..لا نريد أن نأخذ نسخة من المشروع ..إنما نريد أن نقوم فقط ببعض
التعديلات لنصل الى المطلوب ...
والآن ..لنشاهد معا ..الجداول الخاصة بالكلاس المخصصة للتعامل مع
الشاشات المختلفة ^_^

وهذه تعني أنه سيظهر في حجم الشاشة المخصص له ... (grid قمنا بشرحها سابقا (تذكر ال .. visible-*-* ال
فهذه تعني قم بإخفاء هذا العنصر في حجم الشاشة هذا .. أما الباقي سيكون ظاهرا .. .. hidden-* أما ال
لاحظ الفرق بين الكلاسين ..من خلال الجدول الذي أمامك ^_^

والذي نعمل عليه الآن في هذه الدورة .. أصبح بإمكاننا استخدام الشكل ... bootstrap من الإصدار ال 3.2 لل
.. classes التالي من ال
تشرح ما سيقوم به ..وللتوضيح ..فإن ما تقوم به هذه ال css وكما تلاحظ من الجدول ..فإن الكلاس وخصائص بال
وإما block لخاصية معينة من الإختفاء الى الظهور .. أي التحويل الا ال display هو تحويل شكل ال .. classes
^_^ .... inline-block وإما الى ال inline الى ال
شاهد المثال في الشريحة التالية:

النتائج
لا يوجد نتائج ..هنا

أيضا ..هناك مجموعة من الكلاس ..التي يمكن أن نستخدمها لغايات الطباعة..
فعند طابعة صفحة معينة .. لا أحتاج الى الكثير من الأمور ..وأهتم بما
لهذا class يقدم لك bootstrap هو مهم في هذه الصفحة .. وال
الأمر وهي في هذا الجدول ..
شاهد المثال(ما هي النتائج التي تتوقعها ..(في المتصفح وعند الطباعة):

الآن ..هل قمت بتطبيق الأمثلة؟
لا عقوم ىلع دوجوم عئار لاثم ىلا رظنت نأ نلآا كديرأbootstrap وهو (عرض المثال من هنا)
أيضا ..شاهد الأمثلة السابقة من هنا ^_^:
والآن .. نكون انتهينا بحمد لله تعالى من الجزء الأول من دورة ال
مجمل ما تم ذكره الى ) css وهو الجزء المتعلق بال .. bootstrap
... ^_^ (css هذه الصفحة هو

Components
مجانية

في موضوع سابق (الفورم) ... والآن أود Glyphicons لقد تكلمنا عن ال
التذكير به لذكر بعض الملاحظات التي يتوجب عليك اتباعها ..
شاهد الصورة ... هل تذكرت الموضوع الآن .. اذن لنتابع ..

ملاحظات:
عالي .. والسبب في ذلك استخدام كلاس مشترك لكل ico 1) الأداء لهذه ال
ico ومن ثم استخدام كلاس خاص لكل .. glyphicon وهو ico ال
نحتاجها ..
حتى لا تتداخل الكتابة .. ico 2) تأكد دائما من وجود مسافة بين النص وال
ico مع ال
داخل كلاس العنصر الرئيسي glyphicon 3) لا تستخدم كلاس ال
يحتوي هذه الكلاس ... <span> مباشرة ... وإنما قم بتعريف
الذي قمنا بتعريفه ..أو أي حاوي آخر <span> 4) يجب أن يكون ال
(no text, no child فارغا ..(أي بدون نص أو عناصر أخرى

مثال:

والآن .. بعد استرجاعنا لبعض المعلومات .. لنبدأ معا في الموضوع الثاني
.. Dropdowns وهو component من ال
يقصد بها القوائم المنسدلة .. والتي يكثر استخدامها Dropdowns ال
الصفحات الرئيسية لعرض الروابط .. أو في لاختيار خيار من مجموعة
خيارات أخرى ... الخ من الإستخدامات المهمة ..^_^
يلزمك استخدام كلاس واحد فقط لتحويل قائمة الى .. bootstrap في ال
يوضع هذا الكلاس داخل .. ^_^ dropdown وهو dropdowns
الحاوي الخاص بالقائمة ^_^ ...
لنشاهد مثالا معا ^_^

شرح مكونات المثال السابق:
هو كلاس الزامي لتعمل ال .. div الموجود في ال dropdown 1) كلاس
بشكل صحيح .. أو يمكنك استخدام كلاس آخر ..المهم أن يكون dropdown
.. relative
هي المسؤولة عن عملية .. attr هذه ال data-toggle="dropdown” (2
التبديل بين الإظهار والإخفاء للقائمة عند الضغط عليها ..
هذا الكلاس مهم ليعطي تنسيق القائمة نسقا class="dropdown-menu” (3
مختلفا عن الشكل الإفتراضي ..وهو الزامي لتعمل القائمة المنسدلة بشكل صحيح
...
هذا الكلاس يستخدم لإنشاء فاصل بين عناصر القائمة.. .. divider (4
الخصائص التي تم ذكرها هي الإلزامية والتي يجب أن تتوافر في كل
الما الخصائص المتبقية فهية اضافة ... ... dropdown

والآن ..السؤال الطبيعي الذي يتوارد اليك ..ما هي فائدة الخصائص الأخرى ؟
الجواب هو:
تستخدم لإعطاء أولية بتحديد عنصر معين عند الضغط : Tabindex (1
من لوحة المفاتيح .. والقيمة الخاصة للبدأ هي 1..وفي Tab على ال
على tab حال استخدمنا ال - 1 .. فهذا يعني أنني سأوقف عمل ال
عناصر هذه القائمة...
هذه الخاصية لها عدة استخدامات ..أهمها أننا نخبر ال :Role (2
كيف يمكنه أن يتعامل مع هذا العنصر .. لذلك تجد screen reader
أي عنصر من قائمة .. واذا أخذ الرابط ..menuitem تأخذ a أن ال
فهذا يعني أن هذا يجب معاملته على أنه زر .. role=“button” ال
أيضا .. ... screen reader وليس رابط ..من قبل ال

2) (تابع النقطة الثانية) .. أيضا فإنه مفيد في التعامل مع الجافا سكربت ..
كمثال فهنا .. *[role="button"] وذلك لتنفيذ أمر معين ..باستخدام
الذي يساوي role سيقوم بتنفيذ أمر معين على جميع من يملك ال
أيضا .. تقوم على دعم المتصفحات القديمة ..فالمتصفحات ... button
لكن .. html الموجودة بال 5 <main> الجديدة كمثال ..تدعم ال
لمعرفة ذلك .. role=“main” المتصفحات القديمة يمكنها استخدام ال
..وبهذا تحل أيضا مشكلة ...
طبعا هذا الأسلوب قد يكون غير مهم جدا الآن ..الا أن استخدامه قد يكون
ذو فائدة لتأكيد التوافقية بين الأجهزة .. لكن عما قريب .. ستصبح غير
ضرورية ...والآن ..لنشاهد مثالا ^_^ ...

طبق الأمثلة السابقة ... ثم انتقل الى الموضوع التالي ^_^

والآن ..هل هذه القائمة يجب أن يتم عرضها باتجاه واحد فقط ؟!
بشكل سهل جدا.. وذلك align يمكنك التحكم بال bootstrap لا ..بال
الى ال dropdown-menu-right .. عن طريق اضافة الكلاس
بتكون الها خصائص من كلاس ال ul الفكرة أن ال ... ^_^ ul
%100 .. و top هذه الخصائص تكون .. dropdown-menu
هو 0 .. عندما أقوم باستخدام ال left
فإن هذا يختلف وتصبح القيم .. dropdown-menu-right
... right: وال 0 Left: auto
شاهد المثال ^_^ بالشريحة التالية..

^_^ header بعد الإتجاه .. ننتقل الى ال
..... ^_^ P:... ؟ ما بك يا أخ العرب
هل خطر ببالك أن تقوم بإضافة عنوان لكل جزء من القائمة ..أو بعد عدد
معين من العناصر ..لتمييز العناصر الموجودة داخل القوائم ..^_^
اذا خطر ببالك ..ذلك أو لم يخطر ببالك .. لنتابع معا كيف يمكننا فعل ذلك
^_^
(ملاحظة.. أنا ما خطرت على بالي -_-)

يمكننا <li> داخل أحد ال .. dropdown-header باستخدام الكلاس
يا سلام على سهولة الموضوع ^_^ .. header من انشاء هذا ال
لنشاهد مثالا ^_^

وهو كيفية تعطيل أحد Dropdowns والآن ..الى آخر موضوع داخل ال
العناصر الموجودة داخل القائمة ^_^ ...
disabled يتم تعطيل أي من عناصر القائمة عن طريق استخدام كلاس
شاهد المثال ^_^ .. <li> داخل ال

ملاحظات:
للقائمة المنسدلة قمنا باستخدام ال align 1) لعمل ال
وهذا الأمر من الإصدار 3.2 لل .. dropdown-menu-right
أما الإصدارات الأقدم فكانت تستخدم ال .. bootstrap
لكنها الآن اهملت ..^_* .. pull-right
2) قد تحدث بعض المشاكل في حال استخدام القوائم المنسدلة ..وتكون
الخاص بها .. parent بينها وبين ال cropped المشكلة عادة مشكلة
لبعض customized ويكون حل هذه المشكلة ..بأن تقوم بعمل
يعني تعديل أو اضافة خصائص) لتعمل بالشكل ) css خصائص ال
الطبيعي ...

فيجب ,(toggle 3) لتعمل هذه القائمة بالشكل الصحيح (أي يحدث هناك
الإفتراضي الذي template تصمين السكربت .. وهنا وحسب ال
نعمل عليه .. فإنه تم تضمين السكربت من خلال استخدام ال
في الصفحات ^_^ .. .. bootstrap.min.js
وآخيرا .. ﻣﺩﺣہ ل رب العالمين .. موضوع سهل وجميل ويختصر عليك ﻠ
الكثير الكثير من الوقت والجهد ^_^...
والآن اذا انتهيت من تطبيق وقرائة الأمثلة السابقة .. قم باستعراض جميع
الأمثلة السابقة من هنا ^____^

على صف button الهدف منها وضع أكثر من Button groups ال
واحد ..وبشكل متلاصق ^_^ ..
والآن ..لنشاهد ملخصا عن ما يحتويه
هذا الموضوع ..
(لكبر حجم الصورة ..
تم فصلها الى 3 قطع)
( (الصورة 1
وتمثل ملخص لأسماء الكلاس التي
يمكننا العمل عليها داخل
...btn-group

الصورة 2
الصورة 3

بعد اطلاعك على الصور السابقة .. ما يهمني هو أن تعرف كل كلاس ..وما
وظيفته .. والأمثلة التي بجانبها ما هي الا مثال على طريقة الإستخدام
لكل كلاس ..^_^..
والآن ..لنشاهد أمثلة على كل كلاس ^_^
الناتج ^_^
btn-group مثال 1

مثال 2
toolbar
الناتج

مثال 3
Size
الناتج

الناتج
لا تنسى تطبيق الأمثلة جميعها ..
مثال 4
Vertical

الناتج
مثال 5
Nesting Group
إن كنت تذكر ..فإنني قلت بأن القائمة المنسدلة ..لا
أو dropdown يمكن أن توجد الى داخل الكلاس
.. relative أي كلاس آخر يحتوي
من خصائصه أنه btn-group كلاس ال
^_^ relative

لهذه Justified هو Button groups وآخر موضوع عن ال
btn المجموعات ^_^ ...هذه الخاصية تعني جعل جميع عناصر ال
التي تأتي على صف واحد ..ذات حجم متساوي .. ومجموع العرض
الخاص بهم ^_^.. parent الخاص بهذه الأزرار يساوي عرض ال
btn-group-justified يمكن القيام باستخدامها عن طريق الكلاس
شاهد المثال: (شاهد النتيجة ..ثم انظر الى الكود في الشريحة التالية)

الآن شاهد الشيفرة البرمجية ^_^: ... ماذا تلاحظ ..قم بتطبيق المثال ..ثم
انتقل الى الشريحة التالية ^_^...

الخاصة بكل btn-group بعد تطبيقك للمثال .. أريدك أن تقوم بحذف ال
الرئيسي .... wrapper والإبقاء على ال <button>
ليصبح الشكل كالآتي:
بعد ذلك قم بتنفيذ المثال ..وشاهد النتيجة ...ثم عد لتكمل الموضوع _^

ملاحظات:
عليك بوضعها داخل .. justified نريد أن نضعها داخل ال btn 1) كل
btn- داخل ال btn ويمكنك وضع أكثر من .. btn-group
كحاوي btn-group الواحد .. فلا تنسى ذلك ..استخدام ال group
بالإضافة Nesting أمر مهم .. وهذا يعني أننا نعمل على btn لكل
الى هذا الكلاس ..
الا اذا تم .. a أو ال btn الخاصة بال border لا يدعم ال ie- 2) ال 8
... btn-group وضعها داخل
بهذا ..نكون انتهينا من هذه الجزئية أيضا ان شاء لله ^_^.. لننتقل معا الى
موضوع جديد ^_^ ..لكن شاهد المثال أولا:

.. dropdowns لقد تكلمنا في الموضوع الثاني من الجزء الثاني عن ال
.. Button dropdowns لكن الآن ..سأتكلم عن موضوع ال
لا يوجد اختلاف جوهري ..فالبنية التركيبة هي واحدة تقريبا .. لكن هناك
مجموعة من الإضافات التي يمكننا استخدامها وتعطينا ميزة جميلة ..
لنشاهد معا ^_^.. وأولا لنضع المثال بأبسط أشكاله كالمعتاد ^_^

والآن .. الصيغة العامة.. عرفناها .. والمثال السابق ..استخدمناه أيضا في
لكن ما الجديد والإضافة الى الآن !! .. btn-group موضوع ال
اذا رغبت بمعرفة ذلك .. لنبدأ بهذا العنوان ^_^
Split button dropdowns
(toggle) وهذه تعني قائمة منسدلة مع وجود زر مسؤول عن تفعيل ال
للقائمة المنسدلة ..وليس الكبسة ككل ^_^ ...
لنشاهد مثالا معا ^_^

Bootstrap3 دورة باللغة العربية

Bootstrap3 دورة باللغة العربية

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Bootstrap3 دورة باللغة العربية

Similar to Bootstrap3 دورة باللغة العربية (20)

More from anees abu-hmaid

More from anees abu-hmaid (19)

Recently uploaded

Recently uploaded (20)

Bootstrap3 دورة باللغة العربية