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

.أنيس حكمت أبوحميد: تصميم:البريد اإللكتروني

nees.com2aneeshikmat@, [email protected]: الموقع اإللكتروني

أنيس حكمت أبوحميد [email protected] / دورة مجانية

mailto:[email protected]�


http://www.2nees.com/�

بسم هللا الذي تبارك به .. بسم هللا المعطي المعين.. بسم هللا الرحمن الرحيمبسم هللا الرحمن الرحيم, بسم هللا الذي أشرق له عالمنا.. الكون

.الحمد ل رب العالمين.. الحمد ل حمدا كما ينبغي لوجهه وعظيم سلطانه

بعنوان , بدورة جديدة, نعود لكم اليوم, بفضل من هللا تعالى, إخوانيboostrap3 ,والتي أصبح ال غنا عنها في , هذه الدورة المهمة جدا

frameworkوخصوصا بعد تربعها على عرش أفضل , عالم الويبتاريخ البدء بكتابة هذه .. 10/12/2014وهذا حتى تاريخ .. اآلن

أن يوفقنا وإياكم الى .. سائلين المولى عز وجل .. الدورة المتواضعة ..بسم هللا نبدأ..والحمد ل رب العالمين..خير العمل

دورة مجانية–[email protected]/ أنيس حكمت أبوحميد


(1Html(2Css(3Js(4jQuery .. مفاهيم عامة ستحتاجها في الجزء الثالث من الدورة

وخصوصا كيفية التعريف ... وبإمكانك تعلم هذه الدورة بسهولة ..وال clickوبعض األوامر مثل ال ..jQueryوالبدء باستخدام ال

on ..الخ



ألن الشرح .. هذه المتطلبات التي يتجب أن تعرفها قبل البدء بالدورةبشكل frameworkعلما أن العمل على هذا ال .. سيعتمد عليها

لكن اآلن يكتفي .. LESSأو SASSأكثر احترافية يتم من خالل ال ومن ثم استخدم .. cssاعتمادا على ال bootstrapبأن تتعلم ال

... cssل compilationلعمل SASSال

فيمكنك تحميلها مجانا من ..اذا كنت ال تعرف عن أحد المتطلبات السابقة 2nees.com/coursesخالل



أنيس حكمت أبوحميد [email protected] / دورة

مجانية

صمم بواسطة frameworkهو bootstrapال Mark Otto وJacob Thornton يعد هذا ال , من شركة تويتر

framework حيث وضع في , األول واألكثر انتشارا اآلن عبر عالم الويبك GitHupعلى ال 2011عام

open source أصبح هو 2014أعوام تقريبا وفي عام 3وخالل.. المشروع األول عليه

يمثل مجموعة كبيرة ومجانية من األدوات والخيارات frameworkهذا ال ومتوافق مع , سريع, لتطوير وتصميم المواقع االلكترونية بشكل سهل

وهو صمم خصيصا على مبدأ..والهواتف المحمولة , المتصفحات mobile first.. ويعد هذا الframework أسرع مشروع وأسهل

...لتصميم المواقع frameworkمشروع في عالم ال



فإننا نقصد Framework.. وعندما نقول اآلن Front-end framework .. ويقصد بال ..وهذا أمر مهم

front-end هو الجزء المسؤول عن تصميم وتنسيق الصفحات..وما يتعلق باألمور التفاعلية مع المستخدمين , االلكترونية

يحتوي على تصاميم bootstrapباإلضافة الى ما ذكرنا فان ال الرئيسية مثل ال html, cssوتنسيقات جاهزة لمجموعة ال text, forms, buttons... الخ من المكونات التي يمكن

.اضافتها والتحكم بتنسيقها



مبني على frameworkأصبح هذا ال bootstrap3من ال 1)mobile-first .. وهذا يعني أن هناك مكتبات كاملة صممت لجعل

...وبشكل افتراضي يتم تضمينها mobileموقعك متوافقا مع ال وبهذا تتخلص , يدعم جميع المتصفحات الرئيسية bootstrap3ال 2)

هناك بعض االستثنائات أو .. (من مشكلة التوافقية بين المتصفحات أو حاالت شاذة حسب ..االضافات التي تضاف للمتصفحات القديمة

لكن في المجمل واألمور الرئيسية .. طبيعة األمر والمتصفح).^_^فجميعها توافقية ..

وهذا أمر رائع html, css, jsوتعتمد على ال , سهلة التعلم3)يعد موقع رائع لفهم بيئة bootstrapأيضا الموقع الخاص بال ..

bootstrap.في ال * ^_وهو المرجع الرئيسي لنا .. العمل هذه



(4Responsive Web Design : وهذا يعني أن الموقع الخاص ,tabletمثل ال .. سيظهر على الشاشات المختلفة .. بك

mobile, normal screen _^.*

من المميزات التي يقدمها الbootstrap لدعم الresponsive لذلك تجد أنه من ..هي أنه يوجد طريقة العمل

*.^_السهل التعديل أو التطوير أو فهم عمل اآلخرين ويقدم أدوات كثيرة تساعدك ..مفتوح المصدر

على العمل وتطوير الموقع وفحص و .. responsiveتخصيص ال



أو يمكن تضمينه يندرج تحت هذه bootstrapإن ما يحتويه ال : التصنيفات

1 (Scaffolding : ويقصد بها كل ما يقوم عليه التصميم من بنيةواذا حاولت ترجمة هذا المصطلح ترجمة حرفية فستكون ..تركيبة

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

,grid systemوتحتوي على ال .. التصميم أو الصفحة responsive design, contains layout, Fluid Grid

2 (Base Css : وهو مجموعة الكالس التي نستخدمها للتحكم بتنسيقالخ.. btnوال , والصور, العناصر مثل الجداول



3 (components : وتحتوي هذه على أي مجموعة عناصر قابلة ,navbarلإلستخدام والتفاعل مع المستخدمين مثل ال

dropdowns ..الخ.

4 (Js plugIn : هناك العديد من مكاتب الجافا سكربت التي يمكن أن..واحدة ..أو واحدة .. تضمنها دفعة واحدة

5 (Customize : بإمكانك أنت أن تقوم بعمل مكون خاص بك.




مجانية

وعملية استخدامه .. سهلة جدا bootstrapإن عملية تنصيب ال .. أمر سهل أيضا ..الخاصة به basic pageوانشاء ال

هذا الرابط يحتوي (قم بالدخول الى هذا الرابط bootstrapلتحميل ال وفي دورتنا هذه أحدث bootstrapعلى أحدث نسخة من ال

). bootstrap3نسخة هي

started/-http://getbootstrap.com/getting: الرابط


http://getbootstrap.com/getting-started/�


: مالحظةبدون تحميله وذلك عن طريق استخدام bootstrapيمكنك استخدام ال

.. CDNال

هي اختصار ل CDNفال : CDNاذا كنت ال تعرف عن ال Content Delivery Network .. ومن خاللها يمكنك تحميل

الملفات عن طريق هذا السيرفر بدال من أن تكون متواجد على وفائدتها اذا قمت بزيارة موقع يوجد به .. سيرفرك أنت

bootstrap فسيقوم بانشاء ملفاتcashe وهذا ..على جهازكويقلل من عملية طلب الملفات من .. يسرع عملية التحميل للصفحات

...السيرفر الخاص بك لكل مستخدم



جاهزة لدينا لبدء العمل bootstrapأصبحت ملفات ال .. واآلن ..وسأقوم هنا باستخدام النسخة التي قمنا بتحميلها لتنفيذ األمثلة ..

داخل ال indexتكون هي ال htmlماذا بعد؟ سأقوم بانشاء صفحة root الخاص بالfolder والذي سيمثل ملف ..الذي قمنا بتحميله

..المشروع للموقع الخاص بي

الذي سنقوم بوضعه داخل ال basic templateلنشاهد ال ..واآلن index.html .. الخاصة بال..والذي ستجده بنفس صفحة التحميل

Bootstrap ...



:السابق templateشرح ال doctype!>لقد قمنا بتعريف 1) html> في أول الصفحة مباشرة

على أن نوع الملف htmlوال cssوهو أمر الزامي لتتعامل ال .... html5الذي سنعمل عليه سيكون

و * ^_ 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في ال

: ويكتبان على الشكل التالي.. classes 2هذان هما


أو


ستالحظ كيف أن ال .. في المثال سابقContainer .. هوresponsive ولكن بعرض ثابت..fixed-width .. 1170فعلى سبيل المثال تجد أنهpx .. ويكون في

وهذا ما تعلمناه ;margin:0 autoبسبب ال ..منتصف الشاشة *^_... cssبال

عرض ..فيكون العرض الخاص بها container-fluidأما ال وهذا يفسر .. على األطراف paddingمع وجود مسافة ..الشاشة

^_^... المسافة الموجودة في المثال السابق لهذا الحاوي



container-fluidوال containerبعد تعرفنا على ال .. واآلن هذا .. Grid Systemوهو ال .. فإننا سنتطرق الى موضوع مهم جدا

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

bootstrap بشكل كبير .._^*

ومن ثم اإلنتقال الى Grid systemواآلن سأبدأ بتعريف ال Bootstrap grid system ..

أوجدت في عالم / بنية تركيبية ابتكرت/ هو نظام: Grid systemال الويب لتنظيم المحتوى ضمن خطوط متقاطعة عاموديا و أفقيا وعادة

..ما يكون هذا النظام ثنائي البعد



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

*^_وستفسر كل ما قلناه لوحدها ..

.. والتي تليها أيضا ..شاهد الصورة في الشريحة التالية


http://960.gs/�


وأمعنت النظر؟..هل الحظت الصورتين السابقتين قام بتقسيم الصفحة على شكل أعمدة grid systemفال .. نعم

هذا المحتوى ال ..الصفوف هذه ستحتوي محتوى معين .. وصفوف width أنه .. فتالحظ ..الخاص به سيكون بنائا على عدد األعمدة

على فرض ..(أعمدة 4+ أعمدة 8كانت مثال blockتقسيمة ال ثم تجد أسفل منه ) عامود في الصفحة 12أننا اعتمدنا نظام ال

....وهكذا ..عامود 12= أعمدة 6+ أعمدة 6

طريقة لضبط المحتوى بنائا على .. grid systemهذه هي فكرة ال ) ..تقاطع الخطوط عاموديا وأفقيا..(األعمدة

*^_..يجب أن يكون التصميم مصمم على هذا النظام أصال : مالحظة*)



بوجود Gridهو نظام ال .. bootstrap Grid Systemواآلن ال مع امكانية التغيير 12colmnويحتوي على bootstrapال

وهو .. bootstrapعلى عدد األعمدة وخصائصها باستخدام ال responsive ومبني على أساسmobile first .. فال يعني

وإنما قد يحتاج ذلك الى responsiveوحده أنه gridاستخدام ال فيكون bootstrapلكن باستخدام ال ..تخصيص العمل responsive بشكل تلقائي .._^*

*^_ bootstrap Grid systemواآلن لنرى كيف يعمل ال سيتم توضيح النقاط باألمثلة بعد ذكرها بإذن هللا : (الى الشريحة التالية

*)^_تعالى



أو containerداخل gridيجب أن يوضع ال 1) container-fluid ويوضع بداخلها الصفوف وبداخل الصفوف

فهذا يعني container-fluidاذا قمنا باستخدام ال .. األعمدةfull-width واذا قمنا باستخدامcontainer فهذا يعني

fixed-width للgrid ..نستخدم الصفوف إلنشاء مجموعات أفقية كل مجموعة تحجز مساحة 2)

*^_..معينة من عدد األعمدة ويمكن اضافة صفوف .. يجب أن يكون المحتوى جميعه داخل أعمدة 3)

عامود–صف –عامود –فيصبح الشكل صف .. داخل هذه األعمدة .بشكل سريع gridإلنشاء col-xs-4.و row.يمكنك استخدام 4)



gridازاحة بين األعمدة الموجودة داخل ال / يمكنك عمل فراغات 5)هذه اإلزاحة تقابل ب .. وهذه اإلزاحة يمكنك تحديدها بشكل يدوي

margin بالسالب ألول وآخر للصف ..هو bootstrapإن عدد االعمدة اإلفتراضي الذي نتعامل معه بال 6)

يجب أن يكون المحتوى gridلذلك عند تقسيمك لل .. عامود 12فهذا يعني أننا ..مجموعات 3لو افترضنا الى ..مقسما الى مجموعات

..col-xs-4سنجعل لكل مجمعة أربعة أعمدة وذلك عن طريق فإن هذا يعني ..عامود 12اذا زاد عدد أو مساحة المجموعات عن ال 7)

*^_كوحدة متكاملة لوحدها ..انشاء عامود العامود على سطر جديد وبهذا يمكنك تحديد كيف .. mobileقلنا أن هذا النظام يدعم ال 8)

بنائا على حجم الشاشة باستخدام ال gridيمكن أن تتعامل مع ال css class مثل.col-md- أو.col-lg-...الخ



وهي bootstrap gridاختصارات مهمة في حين التعامل مع ال 9)xs : وهي اختصار لExtra small devices وهي تعني أن

على جميع أحجام الشاشات التي تكون أصغر من gridيعمل ال وهذا ال يعني أنها لن تعمل على الشاشات ذات .. 768pxالحجم

ولكن ما .. ستعمل بالشكل المطلوب ..بل على العكس ..الحجم الكبيرة عندما gridلل responsiveأقصده أنه سيبدأ العمل بنظام ال

*^_.. 768يصبح حجم الشاشة أقل من

sm : وهي اختصار لSmall devices وبنفس مفهوم الxs *^_..768pxلكن هذه لحجم شاشة أكبر أو يساوي



md : وهي اختصار لMedium devices ونفس مفهوم الxs .^_^ px992لكن هذه لشاشة أكبر أو يساوي

lg : وهي اختصار لLarge devices وبنفس مفهوم الxs لكن هذه.. 1200pxتعمل ألحجام الشاشة األكبر أو يساوي ال

responsiveفسيعمل ال xsأنني اذا استخدمت ال ..وكل واحدة تعني grid غير هيك .. 768على جميع أحجام الشاشات التي تقل عن

اذا responsiveفسيعمل ال smأما ..ستعمل باشكل الطبيعي ..وفي حال أن حجم الشاشة .. 768كان حجم الشاشة أكبر أو يساوي

..بحجم العرض كامل ..فيصبح العامود ... أقل



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



هل قمت باستعراض المثال السابق؟

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

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

_^ *

ثم االنتقال الى ..والشيفرة البرمجية ..نتائجه ..أرجوا أن تدقق اآلن على المثال *^_وهذا لمصلحتك ..الشريحة التالية

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




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



:لوجدناه بالشكل التالي..لو تتبعنا ناتج الجزء األول لوحده .واآلن

bootstrapفأنت أنهيت جزئية مهمة في ال ..هذه الفكرة ..اذا فهمت أريدك أن تحاول أن تنشئ .واآلن *.. ^_والباقي أسهل من هذا ان شاء هللا ..

grid بالشكل التالي: 4فيه : الثالث... عامودان 2فيه : الصف الثاني..عامود 12فيه : الصف األول

* ^_ 12ال تنسى أن مجموع أطوال األعمدة يجب أن يساوي



مجانية


هل خطر ببالك سؤال على األمثلة السابقة ؟ هل خطر ببالك كيف .. اآلن؟ يعني اذا كانت أكبر ..بنائا على حجم الشاشة gridيمكنني تقسيم ال

4خليها 768اذا كانت أكبر أو يساوي ..عامود 12خليها 1200من ؟... 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للقيام بمثل هذه الحركة يلزمنا اضافة .. clearfix - visible-xs-blockوهي

هذا الكالس يقوم على اجبار المحتوى بأن تأتي بعد : clearfixال ..cssبال clear:bothوهي تشبه عمل ..الحاوي الذي قبله

هو كالس يستخدم إلظهار عنصر معين : visible-xs-blockال وهذا يعني أن يمكنني التحكم متى تظهر ال ..بنائا على حجم الشاشة

clear fix حجم الشاشة بنائا على ال ...



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

...حاول أن تغيير بالشفرة البرمجية.. xsالى mdقم بتجربة تغيير ال



مجانية


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

.. Nesting Columnأي بمعنى آخر وجود



ونريد ..أن أي عامود ننشئه .. اذا الحظت من الشيفرة البرمجية السابقة طبعا هذا الكالم ألننا .. (عامود 12فإنه يقسم الى .. التعامل معه

فإنه اذا قمت بحجز عامود ..ولذلك .. ) عامود 12باألصل نتعامل مع ..عامود 12فهذا يعني أن المساحة هذه تحتوي أيضا .. 8بطول

.. 1170لو فرضنا أن العرض الكلي .. ولتبسيط األمر فهذا يعني أن المساحة الخاصة بهذا الحقل ..أعمدة 8أخذنا منها مساحة

اذا قمنا باضافة عامودين .اآلن .. 780)8* 1170/12(ستصبح داخل الحقل الذي حسبنا حجمه 8واآلخر بطول 4جديدين واحد بطول

4عامود حسبما ذكرنا وبهذا يصبح حجم ال 12سيقسم الى .. 780وهكذا .... 260= 4* 780/12الموجودة هي



.. لنشاهد مثاال عمليا معا ..ولتتصح الفكرة أكثر

.. levelوخصوصا اختالف ال .. أرجوا أن تنتبه للنتائج جيدا Level 1 يقصد أنهما بنفس الصف ..Level 2 .. يقصد به أنهما عامودان داخل صف موجود داخل عامود

Nesting Column ..وانظر الشيفرة البرمجية وتتبعها ..منهم gridوانتبه لكل : شاهد المثال

اطلع وقارن .. ألنه سهل جدا.. gridوقارن بعد اطالعك على أول ..وشاهد كيف أن استخدام الكالس التي ذركناها يمكن ..بين الثاني والثالث

^_^وتعطي منظرا رائع ..أن تغير بالشكل وتسهل العمل علينا



وهو التحكم بترتيب * ..^_نأتي على أمر راااااااااائع ..^_^ماذا ..واآلن فقد responsiveخصوصا في حاالت ال .. gridاألعمدة داخل ال

أو ..تحتاج الى تبديل موقع عامودين في حال كانت الشاشة صغيرة ..إلظهار المحتوى مرتبا بشكل يختلف عن شاشات األحجام الصغيرة

: وهما class 2ويتم ذلك عن طريق (1.col-md-push-* : العامود دفعوتقوم هذه الخاصية على

...اليمينبمقدار معين باتجاه (2.col-md-pull-* : العامود سحبوتقوم هذه الخاصية على

... اليساربمقدار معين من األعمدة باتجاه فهذه تعمل بنائا على حجم الشاشة ومقدار ..وكما ذكرنا بالخصائص السابقة

*^_..الدفع والسحب يكون بنائا على عدد األعمدة



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



هل الحظت كيف يختلف الترتيب عن تغيير حجم ..هل قمت برؤية المثال؟؟...الشاشة

سيقوم بتغغير الترتيب حسب ..تقوم بتغغير حجم الشاشة ..نعم كلما pushمن ..أيضا عملية الترتيب .. القياسيات التي قمت بوضعها أنت

.. فإنها ارتبطت بعدد االعمدة كما الحظت .. pullو

ولننتثل معا الى موضوع ..الى آخر شريحة في هذا الموضوع ..واآلن *^_جديد بإذن هللا تعالى



http://getbootstrap.com/css/

^_^هذا الجدول يلخص ما ذكرناه



مجانية


وال .. ترمز الى ما يتم طباعته على الشاشة Typographyطبعا ال bootstrap لكنه ..يقوم بتعديل بعض الخصائص بشكل ليس كبير

وأول ما سنبدأ به هو .. يحدث فرقا نوعا ما بالطباعة

يتم تغيير شكل الطباعة .. h6الى h1حميع ال : headingال ) 1قم بتطبيق المثال لتشاهد : (الحظ الفرق بين الشكلين.. الخاصة بهم

عادي و htmlهذا .. ال يوجد كود–الفرق بنفسك على المتصفح bootstrap template -(



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

.. كقيمة افتراضية

ودرجة ..والمسافة بين الفقرات ..الحظ حجم الخط ..اللون للخط



3 (Inline text elements : وهي العناصر مثلmark وhighlight والabbr..الخ

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

اضغط هنا


http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp�


لنبدأ فعليا بسرد وذكر خصائص بعض العناصر ومكونات ال ..واآلن html وتنسيقها أو التعامل معها باستخدام الbootstrap ^_^

^_^..tableوأول عنصر هو ال

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



إلظهار الجدول على شكل bootstrapكما يمكنك أيضا استخدام ال Stripedوتسمى هذه بال ..) أقصد صفوف مختلفة األلوان(تخطيط

الذي class table-stripedويتم تفعيل هذه الخاصية باستخدام ال هذه الخاصية ie-8ال تدعم ال : (شاهد المثال.. tableيضاف الى

*)^_ ()nth:childبخاصية تسمى css3إلنها تعتمد على



وذلك عن طريق ..كما يمكنك اضافة اطار لجمع خاليا الجدول والجدول ... class table-borderedاستخدام ال

..)ال تنسى تطبيق كل مثال مباشرة : (شاهد المثال



فهناك خاصية ..ياإلضافة الى الخصائص الجميلة والمريحة التي ذكرناها أي عندما يمر مؤشر الفأرة قوة ... row hoverرائعة أيضا وهي

يمكنك اضافة خيارات –سيقوم بتغير لونه ..صف من صفوف الجدول امر رائع ويتم ذلك عن طريق استخدام الكالس * ..^_.. -أخرى أيضا

table-hover ..شاهد المثال :



-class tableأيضا يمكنك استخدام ال ال condensed لتقليل الpadding ونستخدم هذه الخاصية في حال ..الموجود داخل الخاليا

خصوصا اذا كان المحتوى ..صغير paddingأردنا أن يكون ال *^_خاصية اضافة لك اذا أحببت استخدامها يوما أو احتجتها .. كبير

: شاهد المثال



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

.. من األلوان المختلفة المخصصة لتنفيذ تنبيه معين

: هي Contextual classesهذه ال



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



*^_وهي ال tableالى آخر نقطة وأجمل نقطة تخص ال ..واآلن Responsive table ___^ ... * إن الجدول من مشاكله التي كناوهذا .. responsiveداخل تصميم tableننزعج بحلها هي وجود

إما ببناء ..األمر كان يدعنى نتعمل مع الجدول بعدة طرق responsive grid ).. يحول الجدول على شكلdivs من

أو التحكم بالجدول والصفوف واألعمدة وتحويلها ..) الصفوف واألعمدة mediaاعتمادا على ال ..(واعطائها خصائص blocksالى

query .. ( أو نقوم بعملcustomize .. وبنطلعscroll .. الخيصبح الجدول ..بحركة واحدة ..الحمد ل .. لكن اآلن .. من الطرق

Responsive _^ ..* ويكون ذلك عن طريق استخدام الكالس..table-responsive



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



مجانية


, وتنسيق الفورم وخصائصه من األمور المهمة Formsنحن نعلم أن ال لكن ..والتي قد تأخذ من وقت ال بأس به من حيث التنسيق والترتيب

بخصائص ..يمكنك اختصار كل ذلك bootstrapباستخدام ال ..أو للفورم بشكل عام bootstrapللعناصر التي يمكنها استخدام ال

له الخصائص bootstrapداخل ال Formبشكل عام فإن ال : اإلفتراضية التالي

تأخذ input, textarea, and selectجميع عناصر ال ) 1.. form-control.اذا تم استخدام الكالس % .. 100العرض

div wrapperداخل htmlوعنصر ال labelيتم وضع ال ) 2form-group..ويحمل الكالس ) حاوي يحتوي هذه الخصائص(



*.^_ <form>الى ”role="formقم بإضافة ) 3

نماذج مختلفة 3يقدم لك bootstrapفال layoutأما بخصوص ال : يمكنك تنسيق الفورم بها

1 (Vertical (default) form 2 (Inline form 3 (Horizontal form

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



Vertical form (default)



على formهو تصميم بحيث تكون عناصر ال .. inline formال ويكون .. aligned leftواإلزاحة الخاصة بها لليسار inlineشكل

..htmlمطبوعا بجانب عنصر ال ..الخاص بهذا الشكل labelال

عن طريق اضافة الكالس form inlineويتم تفعيل ال form-inline الى ال<form>...

ال ينطبق هذا الشكل اال على حجم أكبر أو يساوي : مالحظة*) 768px).. قم بتجربة ذلك على المتصفح بعد رؤية المثال في الشريحة

*)^_التالية



Inline form code

Inline form result



هذا الكالس يقوم اخفاء ال .. sr-only.يوجد كالس اسمه : مالحظةlabel من الform .. ولكن لماذا نستخدم هذا الclass خصوصا

! ..؟

مع اتاحة قرائته labelهذا الكالس يقدم مزية رائعة وهي اخفاء ال وهذا األمر إن لم .. Screen Reader.. برامج قرائة الشاشات

*^_قد يسبب مشكلة لهذه القارئات labelيستخدم ولم تضع

وانتبه لقم قمت بوضع الشيفرة البرمجية .. شاهد المثال في الشريحة التالية srالخاصة بال class .. لكي تعرف ما هي الفكرة التي اتبعها إلخفاء

* ^_ labelال



.sr-only



وال inlineبهذا الشكل يكون ما بين ال .. Horizontal Fromال ..أخيرا vertical .. بحيث يظهر الlabel بجانب الform component

*^_.. على سطر لوحده group(wrapper)ويظهر كل ..

يتم التعامل مع هذا الشكل عن طريق استخدام الكالس form-horizontal وتوضع داخل ال<from> _^*

.. له control-labelنقوم باضافة الكالس .. labelبالنسبة لل ويكون ذلك * ^_فهنا سنستخدم األعمدة التي تعلمناها ..باإلضافة الى ما ذكرنا

formجديد نضعه ليحتوي ال wrapperول labelلل component ..

*^_شاهد المثال



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



مجانية


التي يدعمها أو يتعامل معها ال htmlما هي عناصر ال ..واآلن bootstrap والتي تتواجد أو تستخدم داخل الform ؟

:يمكننا تقسيمها الى(1Input(2textarea(3checkbox(4radio(5Select(6Others ^_*

..^_^درسناها ونعرفها html tagهذه جميعها ...لننظر معا الى الخصائص التي يمكننا العمل معها ..واآلن



1 (Input : وهي جميع عناصر الhtml التي تستخدم الinput :والتي تندرج بهذه القائمة

text, password, datetime, datetime-local , date, month, time, week, number, email, url,

.search, tel, and colorاستخدم ..لوحدة مباشرة bootstrapهذا النوع يتعامل معه ال ..واآلن

..ويكفي هذا .. form-controlفقط الكالس هو أمر الزامي inputالخاص بال ) type(لكن انتبه من أن تحديد النوع

^_^شاهد مثاال * ... ^_



2 (textarea : نقوم باستخدام هذا الtag لنقوم بعملية ادخال متعددة) ..أكثر من سطر واحد(األسطر

فقط قم باستخدام الكالس ..أيضا يمكنك العمل على هذا النوع بكل سهولة form-control .. ويمكنك ايضا تحديد عدد السطور باستخدام ال

rows ..الحظ المثال :



3 &4 )checkbox & radio :( جميعنا نعرف أن الcheckbox والradio من األمور الرائعة جدا في عالم البرمجة

.. فهي مفيدة بعرض مجموعة من الخيارات يمكنه اإلختيار من خاللها بينما ال ..امكانية أختيار أكثر من خيار checkboxبحيث يدعم ال

radio ال يدعم اال خيار واحد ..

ال checkboxوال radioأننا مع ال ..واآلن أريدك أن تعرف .. form-controlنستخدم ال

: خيارات يمكننا استخدامهايمكننا استخدام كالس اسمه ) 1

checkbox-inline أوradio-inline . هذا الكالس يجعل الbox أوradio تأتي على نفس السطر.



أو حاوي مثل wrapperداخل radioأو ال boxنقوم بوضع ال ) 2.. labelأو divال

داخل ال الحاوي الذي ذكرناه ..كالس disabledيمكننا استخدام ال ) 3وهذا االستخدام يعطي تصميم مباشرة من ال .. 2بالنقطة رقم

bootstrap للعناصر التي تم تعطيلها..

: ^_^واآلن لنرى مثاال على ذلك classالذي يمثل الحاوي وال divوانتبه لل ..شاهد الشريحة التالي^_^كل أمر مهم أريدك االنتباه عليه ملون .. الموجودة بداخله

*^_أيضا أرجوا أن تقوم بالتطبيق مباشرة



5 (Select : بكل بساطة فإن الselect تعمل ..كباقي الخصائص selectوتستخدم هذه ال .. bootstrapبشكل سهل ومباشر بال

ويمكن من خاللها ...إلدارج خيارات متعددة وكثيرة أو غير محددة العدد ^_^ ... multipleالسماح باختيار خيار أو أكثر باستخدام ال

هل رأيت كيف أن ال..الحظ المثالBootstrap وكأنك ..سهل جدا

وبذات الوقت.. htmlتعمل على ..يقدم خصائص كثيرة



يتبقى لنا نقطة أخيرة .. 5الى 1بعد حديثنا عن العناصر من .. واآلن ) others( 6وهي النقطة رقم ..

6 (Others :سمات يمكن /وأقصد بها هي مجموعة من خصائصأو تمييز أمر معين مثل وجود .. استخدامها للتحكم بتصميم أمر معين

هل تقوم .. labelبجانب plan textخاصية في حال أردت وضع ..يتكفل بهذا bootstrapال ..الجواب ال ..بكتابة تصميم خاص فيها

التي تقدم لنا هذه الخصائص المفيدة للتصميم classواآلن لنبدأ بذكر ال ^_^



labelويقصد بها عند وجود نص ثابت بجانب : Static control)أويكون ذلك باستخدام الكالس , horizontalعلى شكل

form-control-static داخل الp tag &_&..وضع معلومات اتصال فوق ال ..من أكثر األمثلة التي نستخدمها لذلك

form .. مثل وضع الemail الخ ..ورقم الهاتف

): الشيفرة البرمجية بالشريحة التالية(شاهد المثال



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

^_^أنني تعاملت مع األعمدة



العديد من bootstrapيوفر ال : form control stateال ) بالتصاميم الخاصة في المستخدم عندما يقوم بعمليات اإلدخال أو استخدام

التصميم الذي نعرفه جميعا عند القيام بمثل هذا األمر ..عالمات التبويب لكن بوجود ال .. ^_^ focus:هو الشكل اإلفتراضي لل

bootstrap ..تصاميم أخرى يمكنك ادراجها /فهناك خصائص..

: يمكن تجزئة هذه الجزئية الى عدة نقاط وهيINPUT FOCUS : ينطلق هذا التصميم عندما يقوم المستخدم بال

focus وتقوم هذه الخاصية على حذف ال .. على عنصر معينoutline الموجود وإنشاءbox-shadow .._^*

تابع الى الشريحة التالية



هال الحظت كيف تم تصفير ال 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 : فيوجد اضافات اختيارية يمكن .. أيضا باإلضافة الى ما سبق iconsهذه ال .. ^_^ iconsمثل ال .. inputالحاقها لعناصر ال

باإلضافة .. has-feedbackيمكنك التعامل معها باستخدام الكالس مجموعة كبيرة ورائعة من ال bootstrapفإنه يتوفر بال .. الى ذلك

ico وهذا الجزء يندرج تحت .. التي يمكنك استخدامها مباشرة.. bootstrapداخل ال componentموضوع ال

هل شاهدت مجموعة ال ..من خالل الرابط السابق ...شاهد هذا الرابط ico المتوفرة ؟....

: واآلن انظر الى الصورة في الشريحة التالية


http://getbootstrap.com/components/�


..^_^واآلن لنشاهد مثاال على عمليا على ذلك

^_^له 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والموجودة داخل ال

css ال:active (

: هي button stateواآلن ال ACTIVE StateDISABLED State



هذه الخاصية تقوم على اعطاء خصائص التصميم Active stateال ) 1..مثل الخلفية واإلطار الغامق buttonلل activeالخاصة بال

active:مثل ال pseudo-classلن يدعنا نستخدم ال ..هذا األمر ...لهذه الحالة

إما أن ) ..اضافة هذا الكالس(يكون على جزئين activeالتعامل مع ال ... <a>أو الى buttonيضاف الى ال


إن التصميم أصبح وكأنك اآلن تقوم بالضغط على الزر .. الحظ ألنه ..ال تعمل هنا hoverلذلك حتى ال ..ولم تقم باإلفالت

.. activeباعتبار



2 (Disabled State : يمكننا اضافة خاصية الdisabled الى الbutton هنا في ال ..لنمنع المستخدم من الضغط على زر معين

bootstrap يعطينا أيضا تنسيق جميل لوحده لهذه األزرار عندوتكون على شكل حذف التدرج باللون وتقليل disabledاستخدام ال

%...50نسبة ظهور الزر الى نسبة

: شاهد المثال.. <a>وال buttonهذا التصميم يظهر أيضا لل

النتائج قد قمنا باستخدام ال buttonانتبه الى أنه في ال Disabled attribute ينما في ال<a> فقد قمنا

... disabledباستخدام الكالس



.. disabledمالحظات مهمة حول خاصية ال :pointer-eventsيتم استخدام ال bootstrapفي ال 1)

none الموجودة في الcss لمحاولة جعل ال<a> غير قابللكن هذه الخاصية غير مدعومة من جميع المتصفحات حتى من .. للنقرلذلك لتستخدم خاصية مثل هذه بأمان .. opera 18وال Ie11ال ^_^..يلزمك كتابة جافا سكربت <a>لل

فلماذا ال أستخدم <button>وال <a>بما أننا نتعامل مع ال 2)وال navالجواب هو بسبب وجود ال .. وأكتفي بهذا ؟ <a>دائما ال

navbar سنأتي له في الشرائح التالية ..وهي موجودة تحت عنوانهي التي تعمل هناك buttonستكون فقط ال .. بإذن هللا تعالى

... لذلك وجب التنويه ..



... ^_^ Button tagوهو ال Buttonالى آخر موضوع داخل ال ..واآلن ...^_^ شعور جميل ..الحمد ل

3كان تطبيق واستخدام ل.. buttonفي أول مثال ذكرناه في موضوع ال للتذكير شاهد .. buttonلتعطينا تصميم ال tagأنواع مختلفة من ال

..الصورة

أو أن يكون هو األكثر !! ؟..الذي يجب أن أقوم باستخدامه tagالكن ما ال استخداما بالنسبة لدي ؟



فإنه ينصح باستخدام ال bootstrapحسب نصيحة موقع ال <button> وذلك لضمان التوافقية بين جميع .. أكثر ما يمكن

باإلضافة الى ذلك وعلى سبيل المثال ال , ..المتصفحات قدر اإلمكان Firefox ال يدعم خاصية ال.. 30اإلصدار األقل من

line-height لل<input> ..... لذلك وجب تنبيهك لذلك^_^

يجعل من ال .. الذي نستخدمه htmlال , هل تعلم: ^_^معلومة هدية لك <button> أمر مميز؟ الجواب هو امكانية وضعhtml tag داخله

مثل <button>Value <b>this</b></button>

..بأن يحتوي محتوى tagوالفكرة الرئيسية هي انه يسمح هذا ال



..اذا أردت المزيد ..واآلن عرض المقالة من هنا .. ^_^.. قم بزيارة هذا الرابط

...من داخل المقالة ^_^ مقتطف مهم

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

...التطبيق يعني المعرفة والخبرة


http://particletree.com/features/rediscovering-the-button-element/�


مجانية


فيمكنك جعل ... هو التعامل مع الصور bootstrapمن الجميل بال وهي اضافة كالس الى ..بحركة بسيطة responsiveالصورة ..كما يمكنك التحكم بشكل الصورة أيضا بإضافة الكالس ..الصورة

:وهذا يعني أننا سنتحدث عن(1Responsive images(2Image shapes



(1Responsive Image : وهي عملية التجاوب للصورة مع أحجاممن اضافة bootstrapويمكننا باستخدام ال .. الشاشات المختلفة

... img-responsiveكالس ال


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



1حجم شاشة

2حجم شاشة



(2Image shapes : ويقصد بها شكل الصورة الذي سيظهر في 3كالس لعمل 3يمكنك استخدام bootstrapوبال ..المشروع

: أشكال مختلفة للصورة وهي

.Iimg-rounded : تكون الصورة لها منحنى وليس زاوية..IIimg-circle :يصبح شكل الصورة دائري...IIIimg-thumbnail : تصميم لصورة بحيث تظهر وكأنها داخل

..)نشاهدها بكثرة في معارض الصور ..(اطار : شاهد المثال



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

img-rounded img-circle img-thumbnail




موجودة ..هي مجموعة من الكالس المختلفة helper classesيقصد بال ولنبدأ ب.. لستهل عملك

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

يكون أغمق من اللون .. hoverأن اون ال ..الجميل بهذه الخصائص : شاهد المثال للكالس التي يمكن استخدامها...^_^.. المحدد بشكل تلقائي



2(Contextual backgrounds : وهي الكالس التي يمكنوهي مشابه للكالس .. استخدامها لتغيير لون الخلفية لعنصر معين

أيضا اذا كان *..^_... *-bgلكن الكالس يبدأ ب .. textالخاصة بال ...فإن لون الخلفية يصبح أغمق .. hoverله




3 (Close icon : هذاclass يمكنك من انشاء زر اغالقx .. مثلوذلك عن طريق استخدام .. بكل سهولة ..وغيرها alertالموجود بال

..^_^ closeالكالس


هذا التنسيق ظهر .. xالحظ ال ..^_^.. النتائج xوحرف ال closeإلنني استخدم الكالس اذا كنت ال ..( ;times&ظهر من استخدام ال ) ..HTMLتعرف ذلك راجع ال



4(caret : يستخدم هذا الكالس لتعيين خلفية على شكل سهم صغيرفي .ونراه افتراضيا ..وظيفته هي الداللة أو اإلشارة الى أمر معين ..

DropDown(القوائم المنسدلة menu .. ( كما نستخمه في القوائم... sup menuللداللة على وجود


مختلفة cssإلعطاء خصائص custom classلقد قمت باستخدام ال )..^_^المؤشر كما في الصورة (لتغيير اتجاه السهم

النتائج

قم بالبحث أو محاولة كتابة الخصائص لتخرج بنتائج كما في

..المثال الذي أمامك



5(Quick floats : إن من خصائص الcss ال ..المهمةfloat .. وكماويكون هذا .. rightوإما leftيكون إما floatنعلم فإن استخدام ال

ألن ) اجبار(ولكن مع اعطاء أفضلية بالتنفيذ .. bootstrapأيضا بال .. flaot: * !importantالخاصية المكتوبة من تنفيذ الكالس هي

: أما بخصوص الكالس التي يمكن استخدامها فهي navbar-leftو pull-left) أ

navbar-rightو pull-right) ب

فسنتحدث عنها بإذن هللا في ال .. *-navbarبخصوص ال component .. لكن اآلن سنكتفي بالpull-*...



:شاهد مثاال على الشيفرة البرمجية وناتج التنفيذ

لذلك نراها ..float: leftقامت بعمل .. pull-leftفإن ال .. كما تالحظ فأخذ أقصى .. hikmat ..float: rightبينما .. بأقصى اليسار

ستجد ..اذا قمت بالنظر الى الشيفرة البرمجية ..والحظ .. اليمينimportant..._^*

الناتج



6 (Clearfix :ستجد أنني استخدمت .. اذا امعنت النظر في المثال السابقdiv ويحتوي على كالس وهوclearfix .. هذا الكالس كان مهم

العناصر التي ستأتي بعد هذا المثال من أن / ألمنع الصفوف ..استخدامه وهي بال ..بمعنى آخر floatلل clearأي تقوم بعمل .. تتداخل معها

css تقوم بكل بساطة على استخدام الخاصيةclear: both ..

: شاهد المثاللقد قمت بأخذ المثال

لكنني لم أقم ..السابق clearfixبوضع ال

..فانظر اآلن النتائج ...وقارنها بنتائج المثال السابق

النتائج



:شاهد المثال بشكل كامل

فهذا ال يعني أنني ..وحالة استخدام كل منهما ..بعد مشاهدتنا للمثالين ..واآلن ففي .. أو أن عدم استخدامها خطا..دائما clearfixيجب ان أستخدم ال

.. وهذا مفيد جدا..مؤجل استخدامها لمرحلة أخرى ..بعض الحاالت فلو استخدمت ال .. الصور التي يأتي بجابنها النص .. وكمثال مشهور

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

^_^



7(Center content blocks : من األمور التي نستخدمها ونحتاج blockهو تنصيص المحتوى داخل ..اليها في كثير من األحيان

.. الذي أتواجد فيه blockويكون هذا العمل على مستوى ال ... معينوهي جعل cssونستخدمها كثيرا بال ..بسيطة جدا ..وفكرة التنصيص

... margin: 0 autoونقوم بإعطائه .. blockالعنصر

وهي * ^_يمكنك القيام بذلك بحركة واحدة bootstrapواآلن باستخدام ال ^_^ center-blockاستخدام الكالس

ثم انتقل الى ..اآلن شاهد النتيجة –ال تنسى تطبيق كل مثال: (شاهد المثال) ^_^الشريحة التالية لمعرفة الكود ومن ثم تطبيقه



..شاهد الشيفرة البرمجية اآلن

لكن .. spanداخل center-blockالحظ أنني قمت باستخدام الكالس سيتحول الى spanألن ال ..هذا لن يحدث مشكلة في عملية التنصيص

div .. فإنه يوجد ..واذا الحظتset-block-size.. هذا كالس أنالل widthأو max-widthوالهدف منه هو تحديد ..قمت بانشائه

block حتى تتم عملية التنصيص وتعمل بشكل صحيح ..^_^..فعرفنا ما هي .. bg-infoأما ال

... blockالحظ التنصيص لل



8(Showing and hiding content : إظهار وإخفاء المحتوى أمرلقد تطرقنا ..والتحكم بعملية اإلظهار واإلخفاء أمر أكثر أهمية ..مهم

كالس 2سنتكلم عن ..لكن اآلن .. hideسابقا الى استخدام الكالس .. hiddenوال showوهما ال .. آخرين

أنها أكثر أداء hideما تتميز به عن ال show & hiddenهذه الكالس باإلضافة الى .. screen readerوتفاعلية في حال كنا نتعامل مع

عنصر معين على اإلختفاء فإنني ) اجبار(اذا احتجنا الى الزام ..ذلك أن ..والسبب في ذلك hideبدال من ال ..كمثال hiddenأستخدم ال

وبوجود خاصية ال importantهذا اإلخفاء يكون مع استخدام ال display وخاصية الvisibility .. أما الshow فتكون

Display: block !important ...



ويقوم .أيضا invisibleفيمكننا استخدام كالس ..باإلضافة الى ما ذكرنا بدون ;visibility: hiddenهذا الكالس على استخدام خاصية ال

important أوdisplay ..وال displayاذا كنت ال تعرف الفرق بين ال ... مالحظة مهمة**)

visibility فيمكنك اإلطالع على دورة الcss من موقع2nees.com ...




9(Screen reader and keyboard navigation contentوقلنا أنها تخفي المحتوى وتبقية .. sr-onlyهل تتذكر عندما تحدثنا عن ال

قادرة على قارئة المحتوى الذي قمت بإخفائه screen readerال ونسهل على ..SRألزيد من التحكم لهذه ال ..لكن باإلضافة الى ذلك ..

يمكننا استخدام .. إخواننا أصحاب اإلحتياجات الخاصة العمل على الموقع هذا الكالس يقوم على عرض .. sr-only-focusableال

يتجاوب مع الفعل الذي يقوم به الشخص على لوحة (المحتوى للشخصوالكالس sr-onlyويكون هذا الفعل ناتج عملية دمج الكالس , )المفاتيح

sr-only-focusable ) ... كالس معا 2اي استخدام ال .. (



10(Image replacement :هذه خاصية تستخدم كالس text-hide .. هذا الكالس يقوم على تعريف خصائص تخفي النص

وهذه العملية بغرض وضع خلفية صورة بدال من النص .. المكتوبالخاصة بوسائل التواصل icoوكثيرا ما نستخدمها في تعاملنها مع ال ..

.. ^_^ اإلجتماعي : شاهد المثال

0هي جعل حجم الخط ..الفكرة بهذا الكالس ...والخلفية shadowواخفاء اإلطار وال



.. helper classمن ال ..نكون انتهينا بفضل من هللا تعالى ..بهذا ! هو هل قمت بتطبيق األمثلة ؟... لكن األهم من كونك وصلت الى هنا

فال .. أبقى أركز على تطبيق األمثلة ألنه الموضوع المهم لكسب المعرفة ... تتكاسل وتكتفي بالقرائة

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



مجانية


mobile firstمن أهم مميزاته أنه .. bootstrapلقد ذكرنا أن ال مجموعة من الكالس المميزة التي bootstrapلذلك يقدم لك ال ..

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

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

إنما نريد أن نقوم فقط ببعض ..ال نريد أن نأخذ نسخة من المشروع ..... التعديالت لنصل الى المطلوب

الجداول الخاصة بالكالس المخصصة للتعامل مع ..لنشاهد معا ..واآلن ^_^الشاشات المختلفة



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

^_^من خالل الجدول الذي أمامك ..الحظ الفرق بين الكالسين



أصبح بإمكاننا استخدام الشكل .. والذي نعمل عليه اآلن في هذه الدورة ... bootstrapلل 3.2من اإلصدار ال .. classesالتالي من ال

فإن ما تقوم به هذه ال ..وللتوضيح ..تشرح ما سيقوم به cssفإن الكالس وخصائص بال ..وكما تالحظ من الجدول classes .. هو تحويل شكل الdisplay أي التحويل اال ال .. لخاصية معينة من اإلختفاء الى الظهورblock وإما

^_^.... inline-blockوإما الى ال inlineالى ال

: شاهد المثال في الشريحة التالية



النتائج

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



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

..األمر وهي في هذا الجدول

): في المتصفح وعند الطباعة..(ما هي النتائج التي تتوقعها (شاهد المثال



هل قمت بتطبيق األمثلة؟ ..اآلن

bootstrapأريدك اآلن أن تنظر الى مثال رائع موجود على موقع ال )عرض المثال من هنا(وهو

: ^_^شاهد األمثلة السابقة من هنا ..أيضا

نكون انتهينا بحمد هللا تعالى من الجزء األول من دورة ال .. واآلن bootstrap .. وهو الجزء المتعلق بالcss ) مجمل ما تم ذكره الى

... ^_^ ) cssهذه الصفحة هو


http://getbootstrap.com/css/�


مجانية

Components


مجانية


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

..اذن لنتابع .. هل تذكرت الموضوع اآلن ... شاهد الصورة



:مالحظاتوالسبب في ذلك استخدام كالس مشترك لكل .. عالي icoاألداء لهذه ال 1)

icoومن ثم استخدام كالس خاص لكل .. glyphiconوهو icoال ..نحتاجها

حتى ال تتداخل الكتابة .. icoتأكد دائما من وجود مسافة بين النص وال 2)icoمع ال

داخل كالس العنصر الرئيسي glyphiconال تستخدم كالس ال 3)...يحتوي هذه الكالس <span>وإنما قم بتعريف ... مباشرة

أو أي حاوي آخر ..الذي قمنا بتعريفه <span>يجب أن يكون ال 4),no textأي بدون نص أو عناصر أخرى ..(فارغا no child(



: مثال



لنبدأ معا في الموضوع الثاني .. بعد استرجاعنا لبعض المعلومات .. واآلن .. Dropdownsوهو componentمن ال

والتي يكثر استخدامها .. يقصد بها القوائم المنسدلة Dropdownsال أو في الختيار خيار من مجموعة .. الصفحات الرئيسية لعرض الروابط

^_^..الخ من اإلستخدامات المهمة ... خيارات أخرى

يلزمك استخدام كالس واحد فقط لتحويل قائمة الى .. bootstrapفي ال dropdowns وهوdropdown ^_^ .. يوضع هذا الكالس داخل

... ^_^ الحاوي الخاص بالقائمة

^_^لنشاهد مثاال معا



: شرح مكونات المثال السابقهو كالس الزامي لتعمل ال .. divالموجود في ال dropdownكالس 1)

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

(2data-toggle="dropdown” هذه الattr .. هي المسؤولة عن عملية..التبديل بين اإلظهار واإلخفاء للقائمة عند الضغط عليها

(3class="dropdown-menu” هذا الكالس مهم ليعطي تنسيق القائمة نسقاوهو الزامي لتعمل القائمة المنسدلة بشكل صحيح ..مختلفا عن الشكل اإلفتراضي

...(4divider ..هذا الكالس يستخدم إلنشاء فاصل بين عناصر القائمة..

الخصائص التي تم ذكرها هي اإللزامية والتي يجب أن تتوافر في كل dropdown ... الما الخصائص المتبقية فهية اضافة...



ما هي فائدة الخصائص األخرى ؟..السؤال الطبيعي الذي يتوارد اليك ..واآلن

: الجواب هو(1Tabindex : تستخدم إلعطاء أولية بتحديد عنصر معين عند الضغط

وفي ..1والقيمة الخاصة للبدأ هي .. من لوحة المفاتيح Tabعلى ال على tabفهذا يعني أنني سأوقف عمل ال .. 1-حال استخدمنا ال

... عناصر هذه القائمة(2Role : أهمها أننا نخبر ال ..هذه الخاصية لها عدة استخدامات

screen reader لذلك تجد .. كيف يمكنه أن يتعامل مع هذا العنصرواذا أخذ الرابط .. أي عنصر من قائمة .. menuitemتأخذ aأن ال

فهذا يعني أن هذا يجب معاملته على أنه زر .. ”role=“buttonال ..أيضا ... screen readerمن قبل ال ..وليس رابط



.. أيضا فإنه مفيد في التعامل مع الجافا سكربت ) .. تابع النقطة الثانية(2)كمثال فهنا .. ["role="button]*باستخدام ..وذلك لتنفيذ أمر معين

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

لكن .. html5الموجودة بال <main>تدعم ال ..الجديدة كمثال لمعرفة ذلك .. ”role=“mainالمتصفحات القديمة يمكنها استخدام ال

...وبهذا تحل أيضا مشكلة ..اال أن استخدامه قد يكون ..طبعا هذا األسلوب قد يكون غير مهم جدا اآلن

ستصبح غير .. لكن عما قريب .. ذو فائدة لتأكيد التوافقية بين األجهزة ... ^_^ لنشاهد مثاال ..واآلن ...ضرورية



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



!هل هذه القائمة يجب أن يتم عرضها باتجاه واحد فقط ؟..واآلن

وذلك .. بشكل سهل جدا alignيمكنك التحكم بال bootstrapبال ..ال الى ال dropdown-menu-right.. عن طريق اضافة الكالس

ul ^_^ ... الفكرة أن الul بتكون الها خصائص من كالس الdropdown-menu .. هذه الخصائص تكونtop 100 .. % و

left عندما أقوم باستخدام ال.. 0هو dropdown-menu-right فإن هذا يختلف وتصبح القيم ..

Left: auto والright: 0 ...

..بالشريحة التالية^_^ شاهد المثال



^_^ headerننتقل الى ال .. بعد اإلتجاه

.....^_^ P...:ما بك يا أخ العرب ؟

أو بعد عدد ..هل خطر ببالك أن تقوم بإضافة عنوان لكل جزء من القائمة ^_^..لتمييز العناصر الموجودة داخل القوائم ..معين من العناصر

لنتابع معا كيف يمكننا فعل ذلك .. ذلك أو لم يخطر ببالك ..اذا خطر ببالك ^_^

) -_-أنا ما خطرت على بالي .. مالحظة(



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

^_^لنشاهد مثاال



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

disabledيتم تعطيل أي من عناصر القائمة عن طريق استخدام كالس ^_^شاهد المثال .. <li>داخل ال



:مالحظاتللقائمة المنسدلة قمنا باستخدام ال alignلعمل ال 1)

dropdown-menu-right .. لل 3.2وهذا األمر من اإلصدار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أريدك أن تقوم بحذف ال.. بعد تطبيقك للمثال <button> واإلبقاء على الwrapper الرئيسي....

: ليصبح الشكل كاآلتي

_^ثم عد لتكمل الموضوع ...وشاهد النتيجة ..بعد ذلك قم بتنفيذ المثال



:مالحظاتعليك بوضعها داخل .. justifiedنريد أن نضعها داخل ال btnكل 1)

btn-group .. ويمكنك وضع أكثر منbtn داخل الbtn-group استخدام ال ..فال تنسى ذلك .. الواحدbtn-group كحاوي

باإلضافة Nestingوهذا يعني أننا نعمل على .. أمر مهم btnلكل ..الى هذا الكالس

اال اذا تم .. aأو ال btnالخاصة بال borderال يدعم ال ie-8ال 2)... btn-groupوضعها داخل

لننتقل معا الى .. ^_^نكون انتهينا من هذه الجزئية أيضا ان شاء هللا ..بهذا : لكن شاهد المثال أوال..^_^ موضوع جديد



مجانية


.. dropdownsلقد تكلمنا في الموضوع الثاني من الجزء الثاني عن ال .. Button dropdownsسأتكلم عن موضوع ال ..لكن اآلن

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

^_^وأوال لنضع المثال بأبسط أشكاله كالمعتاد .. ^_^لنشاهد معا



استخدمناه أيضا في ..والمثال السابق .. عرفناها .. الصيغة العامة.. واآلن !! لكن ما الجديد واإلضافة الى اآلن .. btn-groupموضوع ال

^_^لنبدأ بهذا العنوان .. اذا رغبت بمعرفة ذلك Split button dropdowns

) toggle(وهذه تعني قائمة منسدلة مع وجود زر مسؤول عن تفعيل ال ... ^_^ وليس الكبسة ككل ..للقائمة المنسدلة




..اضفط هنا لتظهر القائمة

*_..*ال تنسى تطبيق المثال



المسؤولة عن عمل القائمة المنسدلة وذلك btnيمكننا التحكم بحجم ال ..أيضا : باستخدام أحد الكالس التالية

btn-sm أوbtn-xs أوbtn-lg....

: ^_^شاهد مثاال

^_^الناتج



: 2مثال



..النتائج للمثال السابق

^_^أريد أن أرى النتائج ..قم بتطبيق المثال



Dropupالى آخر نقطة بهذا الموضوع وهي ..واآلن variationمن أسفل الى .. ^_^ ويقصد بها هو تغيير اتجاه أو مسار القائمة من المسندلة

.. dropup.ويكون ذلك عن طريق استخدام الكالس .. أعلى




^_^نكون انتهينا من هذا الموضوع أيضا ..وهكذا

وال تنسى أن ما تعلمناه * ...^_لكن يحتاج منك الى التطبيق ..األمر سهل gruopكالمثال الذي استخدمنا فيه ال .. يمكن أن يكون مفيدا ..سابقا

* ..^_.. btnلتغيير الحجم بدال من نفس ال

^_^العب بالخصائص كما تشاء لتحقق ما تريد ..بمعنى آخر

*_*لنشاهد جميع األمثلة السابقة من هنا ..واآلن



مجانية


هذا .. input groupسنتلكم عن موضوع جميع وهو ال ..اآلن input> tag>التي تستخدم ال htmlالموضوع يتعلق بعناصر ال

هذا الكالس يكون موجود داخل .. هو عبارة عن كالس input groupال وليس كالس لل ..مضمن .. childداخل أي ( <form>ال

<form> .. ( ... ويكون الinput group هذا كالس داخلdiv ... inputلل ) wrapper(حاوي

inputويستخدم هذا الكالس لعمل اضافة قبل أو بعد أو قبل وبعد ال $أو .. twitter nameقبل @واإلضافة تكون مثل استخدام ال ...

الخ...قبل حقل لسلعة معينة



: نقوم بالتالي) append(أو بعد ) prepend(لتتم عملية اإلضافة قبل input-group.يحتوي على كالس wrapper divنقوم بانشاء 1)

spanداخل input-group-addonنقوم باستخدام الكالس 2) wrapperيعني اضافة عنصر الى ال ..( wrapperننشئه داخل ال

)...ويحتوي الكالس spanمن نوع

أو appendهو الذي يحدد هل هو spanمكان وضع ال 3)prepend .. فإذا وضع الspan قبل ال<input> فهذا يعني أن

فإن الشكل سيطبع بعد ..واذا وضع بعد .. inputالشكل سيطبع قبل ال فهذا يعني أنه سيطبع من ..وبعد ..واذا وضع قبل .. inputال

...االتجاهيين



: مالحظات مهمة قبل البدء.. form-groupوال input-groupال تخلط بين ال 1)

بنفس ال form-groupوال input-groupال تستخدم ال 2)level .. يعني ال تستخدم كالس الinput-group مع الform-

group .. وإنما يمكنك أن تستخدم الinput-group داخل الform-group .. مهمة جدا ..انبه لهذه..

ولكن يمكن أن .. input-groupمع ال grid classال تستخدم ال 3)مهم جدا... grid classداخل input-groupيكون ال



<textarea>وال <select>تجنب استخدام هذه الخاصية مع ال 4)بالنسبة ( webkitألن هذه الخاصية غير مدعومة من متصفحات ال

وتجنب استخدامها مع ) <select>لهذه الخاصية ان استخدمت مع ال ...ألنها يمكن أن تكون أكثر من سطر <textarea>ال

داخل ال form-controlهذه الخاصية ال تدعم استخدام أكثر من 5)input-group .. سيكون الشكل هو ظهور ...وإن قمت بفعل هذا

..الجزء الذي قمت بإضافته على طول العناصر التي قمنا باضافتها

^_^فهيا بنا ..^_^لنشاهد أمثلة توضح النقاط والمالحظات ..واآلن



)الشكل السهل لهذه الخاصية: (1مثال



:^_^ناتج تطبيق المثال األول

.. الحظ اإلضافة )prepend(قبل : الحقل األول)append(بعد : الحقل الثاني^_^ قبل و بعد : الحقل الثالث



: 2مثال

الناتج



:3مثال form controlاستخدمت أكثر من ..الحظ في هذا الجزء من المثال

)المالحظة الخامسة.. ( input-groupداخل ال

كيف أن اَالضافة امتدت الى كل ... الحظ شكل النتائج ..ولم يقم بانشاء اضافة لكل واحد على حدى .. العناصر



وهو الحجم الخص باإلضافة... Sizingالجزء الثاني بهذا الموضوع هو ال يقوم على تغيير .. input-formالجميل بالموضوع هو أن تغيير حجم ال

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

input-group-* ...^_^ .. لنشاهد مثاال_^*... lgأو smإما *:



بدال من الكالم فقط .. htmlوهو كيف يمكننا اضافة عناصر : الجزء الثالثمثل ال <input>بجانب ال

(1Radio/checkbox(2Button(3Dropdown Button(4Segmented button

قصدي الى !! ..تالل ؟*... _..*هيا بنا لننظر الى التالل الخضراء ..واآلن ^_^والى شرح النقطة األولى ... P:النقاط الزرقاء



تتم اضافتها بكل سهولة وذلك بوضع ال .. radio/checkboxال : أوال<input> الخاص بالradio أوcheckbox داخل الspan

input-group-addonالذي يحتوي الكالس )وقم باكمال الشيفرة البرمجية لتحصل على نفس الصورة: (شاهد المثال



ف�إن األم�ر يختل�ف اختالف�ا بس�يطا btnإلض�افة أي .. buttonاض�افة : ثانياه��ذا .. radio/checkboxع��ن الطريق��ة الت��ي اس��تخدمناها ب��ال

يحتوي الكالس btnلل الزامي wrapperاإلختالف هو باضافة input-group-btn ... وه��ذا الwrapper يك��ون موج��ود داخ��ل ال

input-group ..._^ .. *

ال بدال م�ن ال spanيكون موجود داخل input-group-btnالكالس input-group-addon ...

ه�و ..الزام�ي input-group-btnالس�بب ف�ي ك�ون الك�الس : مالحظة* overrideمنع التنسيق اإلفتراضي للمتصفح من عمل

<input>مع ال btnعلى التنسيق الذي سيصبح عليه شكل ال




النتائج



وه�ي األزرار ..وه�ذه نعرفه�ا .. Buttons with dropdowns: ثالث�اواآلن لنرى مث�اال عل�ى طريق�ة اإلض�افة .. ^_^التي تحتوي قوائم منسدلة

الت�ي ذكرناه�ا بالنقط�ة الثاني�ة قب�ل buttonوهي تشبه طريقة اضافة ال )^_^اريد نفس النتائج الموجودة بالصورة ..طبق المثال ...(^_^قليل



ويقص��د به��ا القائم��ة المنس��دلة والت��ي .. Segmented buttons: رابع��اوق�در ش�رحناها ..للقائمة المنس�دلة toggleتحتوي زر خاص لعملية ال

وب��نفس الفك��رة ..^_^ dropdown buttonsأيض��ا ف��ي درس ال اض��افة بس��يطة فق��ط للمث��ال الس��ابق (س��نقوم بانش��اء ه��ذا المث��ال ..الس��ابقة

) طبق المثال لتصل الى الشكل الذي بالصورة..يصبح عندنا المثال الجديد



ولننتق�ل ال�ى ج�زء ..م�ن ه�ذا الج�زء ..بهذا نكون انتهينا الحم�د ل وبفض�ل من�ه .. آخر

فه�ذا أم�ر .. بالنسبة الى األمثلة التي لم أظهر الشيفرة البرمجية لها بشكل كامل أن تع�رف كي�ف تس�تخدم ال ..ألنه يفترض ب�ك اآلن ..يجب أن تعتاد عليه

bootstrap .. نكتفي فقط ب�الفكرة ..وما تعلمناه يجب أن ال يعاد شرحهل��ذلك كن��ت أرك��ز عل��ى الفك��رة وأطل��ب من��ك ح��ل المث��ال * .. ^_الجدي��دة

يمكن�ك االط�الع عل�ى ح�ل جمي�ع ..وفي حال لم تستطع حل أح�د األمثل�ة ..^_^والمهم أن تستمر بالمحاولة والتطبيق ... األمثلة السابقة من هنا



مجانية


هي مجموعة م�ن ال�روابط الت�ي يمكنن�ا اس�تخدامها لع�رض محت�وى Navsال .. معين أو مختلف بنائا على كل رابط في نفس الحيز المحجوز من الموقع

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

...يمكن أن تجمع مجموعة من الروابط معا

ك��ل م��ا علي�ك فعل��ه ه��و ..ورائ�ع ..فه��ذا األم�ر س��هل ج��دا .. bootstrapب�ال وللتب�ديل أو التنق�ل ب�ين ال�روابط المختلف�ة ك�ل م�ا .. navاستخدام الكالس

ويتم هذا ..الى الرابط المراد عرضه activeعليك فعله هو نقل الكالس وه�ذا س�نتطرق ل�ه ب�الجزء الثال�ث م�ن ال�دورة ..عن طريق الجافا سكربت

^_^واآلن نكتفي بالمكونات وطريقة بنائها ..^_^..بمشيئة هللا تعالى



-bootف��ي ال tabولك��ي نس��تطيع اس��تخدام ال , tabأول خاص��ية ه��ي ال strap يج��ب علي��ك اس��تخدام الك��السnav-tab .. باإلض��افة ال��ى

هذا الك�الس ض�روري لك�ل خاص�ية ستس�تخدم ال ( navاستخدام الكالس navs والتي سنذكرها بالشرائح التالية أيضا تحت هذا الموضوع. (

:^_^لنشاهد مثاال هي التي activeالحظ أن ..التي ستظهر tabتحدد ال

والحظ أن الTab تعمل

<ul>على ال

لتصل ..طبق المثال الى هذا الشكل



وه��و الش��كل الث��اني ال��ذي يمكنن��ا اس��تخدامه لع��رض الق��وائم .. Pillsال : ثاني��ا... nav-pillsويمكن استخدامه عن طريق الكالس


قم بتطبيق هذا المثال السهل وأعطني نفس النتائج .. أيضا

^_^التي بالصورة



nav-pillsيمكنن�ا اس�تخادمه م�ع ال nav-stacked.أيضا هناك كالس ^_^ بدال من أن تكون أفقة ..ليجعل من الروابط عامودية

: شاهد المثال)^_^ال تنسى تطبيق المثال (



tabsم��ن الس��هل ج��دا جع��ل ال bootstrapف��ي ال .. Justified: ثالث��احجمه��م أو الع��رض الخ��اص به��م عل��ى ق��در ع��رض ال pillsوال

parent ويكون هذا األمر باستخدام الكالس .. ^_^ الخاص بهمnav-justified _^... * ويشترط أن يكون الحجم ل�لparent أكب�ر م�ن

768px ... لنشاهد مثاال^_^ :



:النتيجة من تطبيق المثال السابق

:أريدك أن تقوم بكتابة الشيفرة البرمجية الخاصة بهذه النتيجة..اآلن

... سهل جدا* ..^_أعمدة 6علما أن مساحة كل قائمة هو



.. بكس�ل 768ع�ن parentاذا ق�ل حج�م ال .. justifiedفي ال : مالحظة* ..^_ stackedالى شكل navفستتحول ال

ه��ل .. -_-حفظناه��ا ع��ن ظه��ر قل��ب ..ه��ذه الخاص��ية .. disabled: رابع��اnavس�تجعل ال ..أخب�رك م�اذا تعم�ل؟ link زذل�ك ... غي�ر قاب�ل للنق�ر

: ^_^شاهد المثال ... disabledباستخدام الكالس )اذهب الى الشريحة التالية..بعد تطبيقك المثال (



:النتيجة من تطبيق المثال السابق

هل الحظ أمرا عند تطبيقك للمثال ؟) التص�ميم(تغي�ر س�لوكه .. disabledف�الرابط ال�ذي قمن�ا بوض�عه ..نع�م ..مم

وله��ذا فه��ذه الخاص��ية تحت��اج من��ك ال��ى كتاب��ة !!.. ولك��ن ل��م تتغي��ر وظيفت��ه ....إليقاف وظيفة الرابط ..سكربت

: قم بتجرية كتابة التاليوسنقوم بالتطرق الى

استخدام السكربت بالجزء^_^ الثالث من الدورة بإذن هللا تعالى



نع��م فيمكن��ك .... ^_^ navداخ��ل ال Dropdown.. خامس��ا وأخي��را كيف ؟.. navاستخدام القوائم المنسدلة داخل ال

ونق��وم باعط��اء ال ..buttonب��دال م��ن ال <a>بك��ل بس��اطة ستس��تخدم ال <li> كالس الdropdown .. وانتهى الموضوع^_^...




والت��ي س��يتم ش��رحها componentأن ه��ذه ال ..أري��د أن أذك��رك .. واآلن تعتمد على الجافا سكربت .. bootstrapفي الجزء الثاني من دورة ال

وهذا األمر سيتم التط�رق .. ولتعمل كما نريد ..لتعطيها نوعا من التفاعلية ... بإذن هللا تعالى ) JSجزء ال(اليه بالجزء الثالث من الدورة

..^_^ لنشاهد جميع األمثلة السابقة ..واآلن



مجانية


.. navbarننتقل الى مفهوم آخر وهو ال .. navبعد حديثنا عن ال

الت��ي يمك��ن bootstrapوم��ن ممي��زات ال , ه��و مي��زة رائع��ة navbarال اس�تخدامها ف�ي انش��اء المواق�ع االلكتروني��ة وه�ي عب�ارة ع��ن مجموع�ة م��ن

وهي , الصفحة headerالمكونات التي تعرض داخل شريط موجود في أي ي��دعم أحج��ام الشاش��ات المختلف��ة , Responsiveذات تص��ميم

تعرض بشكل مختلف على الشاشات الصغيرة بحي�ث تص�بح عل�ى ش�كل ..collapse .. وهذا يعني أنك ستجدbtn تقوم بالضغط عليه لتظه�ر ل�ك... navbarمكونات ال



: navbarطريقة انشاء الشكل االفتراضي من ال nav> tag>قم باضافة 1)ال��ى ال navbar-defaultو navbarق��م باض��افة الك��الس 2)

<nav>وق��د ش��رحنا ( <nav>ال��ى ال ”role=“navigationق��م بإض��افة 3)

*)^_ html5 tagفهذه ..roleسابقا لماذا يمكن أن نستخدم ال وب��داخل navbar-headerيحت��وي الك��الس <div>نق��وم بانش��اء 4)

وهذه .. navebar-brandتحتوي الكالس <a>يوجد divهذا ال الخاص��ية الرائع��ة تعط��ي ن��ص مع��ين حج��م أكب��ر للخ��ط م��ن اآلخ��رين

الخ..ونستخدمه لوضع اسم الموقع كمثال قبل القوائم أو البحث ..



ulبك�ل بس�اطة ق�م بانش�اء ال .. navbarال�ى ال ) nav(إلضافة ق�وائم 5)....navbar-navو navوق��م باعطائه��ا الك��الس

*^_ navbarاإلفتراضية لشكل ال / لنشاهد مثاال على الصيغة العامة,واآلنانظ�ر ال�ى الش�ريحة ..وبعد تمعنك بالنتائج .. وسنبدأ أوال بالنتيجة التي ستظهر

^_^..التالية



كل لون في المثال يمثل انتبه جيدا ..فكرة

في الدرس navتعلمنا انشاء ال لذلك لن أعيد شرحه .. السابق

لكن انظر الى الكالس .. هنا navالجديد الذي اضيف الى ال

navbar-navوهو

يقوم باعطاء navbar-default ال navbarالتنسيق االفتراضي لل

وهذا له دور كبير في تحسين الموقع لدى محركات البحث .. navانتبه أننا استخدمنا ال ...لكن أنصحك بمواكبة التطور ..!! .. بدال منها divيمكنك استخدام ..وعلى فكرة



فه��ذا .. navbarلم��اذا أس��تخدم ال ..ق��د تتس��ائل ..اذا تمعن��ت المث��ال الس��ابق ف�أقول ل�ك ال تتعج�ل وت�ابع مزاي�ا .. !! navالشكل يمكنن�ي تص�ميمه ب�ال

* ..^_..الى النهاية navbarوخصائص ال ... navbarمالحظات يجب أن تنتبه لها وهي تخص ال

ال يمكنه معرفة مقدار الفراغات الموجودة لديك أو التي bootstrapال ) 1لذلك هذا قد يسبب مشكلة في حال كان هناك المحت�وى أكب�ر م�ن , صنعتها

وال��ذي س��يحدث ه��و أن��ك س��تجد ال ... عن��د نقط��ة معين��ة navbarال navbar ولح��ل ه��ذه المش��كلة يمكن��ك عم��ل اآلن��ي..عل��ى س��طرين:

.لك��ل عنص��ر widthأن تق��وم بتقلي��ل ال ) أ..الت��ي ذكرناه��ا ب��الجزء األول Responsiveتس��تخدم أدوات ال ) ب mediaباس��تخدام ال breakpointأن تق��وم بتغيي��ر ال ) ج

query..



ال يمك��ن أن navbar-collapseباس��تخدام الك��الس collapseال ) 2سنتحدث عن ه�ذا الج�زء ف�ي ال�زء الثال�ث ... (يعمل الى بوجود السكربت

)من الدورة بإذن هللا تعالى

3 (@grid-float-breakpoint تس��تخدم ه��ذه لتغيي��ر الbreakpoint .. وبالحال��ة اإلفتراض��ية يك��ون الbreakpoint عن��د

)LESSالتعديل لهذه يكون عن طريق استخدام ال ... ( 768النقطة

4 (collapse plug-in ه��و الjs المس��ؤول ع��ن عم��ل الresponsive الخاص بالnavbar ..



^_^لنبدأ بسرد الخصائص واإلمكانيات التي يمكننا استخدامها ..واآلن ^_^ Brand imageوسنبدأ أوال بال

-navbarالموج��ود داخ��ل ك��الس textب��دال م��ن ال imgيمكن��ك اض��افة brand ..شاهد المثال :



يمكننا التحكم navbarداخل ال ..نعم .. component alignال : ثانياوذل�ك ع�ن طري�ق اس�تخدام ..بمحاذاة العناصر يمينا أو يسارا بك�ل س�هولة

^_^ .. navbar-rightو navbar-leftالكالس

: ^_^لنشاهد مثاال



داخ�ل formيمكن�ك تض�مين ..فال تتعج�ب ..Formsنعم ... Forms: ثالثا^_^ .. searchمثل استخدام ال .. وهذا أمر رائع جدا .. navbarال

واألجم��ل ه��و س��هولة التض��مين وذل��ك ع��ن طري��ق اس��تخدام الك��الس navbar-form داخل ال<form> tag ..

: ^_^: شاهد المثال



rightأو leftب formل�ل alignيفضل أن تق�وم بتحدي�د ال : 1مالحظةوه��ذا مفي��د عن��د تغي��ر حج��م الشاش��ة لتحدي��د موق��ع موق��ع ال ..

form.. ف��إن الك��الس ..باإلض��افة ال��ى ذل��كnavbar-form يختص��رفكم��ا تالح��ظ م��ن ن��اتج تطبي��ق ..علي��ك الكثي��ر م��ن التنس��يق والخص��ائص

* ^_.. form-inlineفإن الفورم لوحده عومل وكأنه ..المثال السابق

في بعض األحيان نضر الى تحدي�د الع�رض الخ�اص بف�ورم مع�ين : 2مالحظة ... navbarليظهر الفورم بشكل سليم داخل ال

^_____^ bootstrapهل رأيت مقدار روعة ال



الغي��ر مض��منة btnال ( navbarداخ��ل ال buttonاس��تخدام ال : رابع��ا navbar-btnوذل��ك يك��ون بإض��افة الك��الس ..).. <form>داخ��ل

*.. ^_ button> tag>الى إلنش��اء <input>أو م��ع ال <a>ويمك��ن اس��تخدام ه��ذا الك��الس م��ع ال

btn داخل الnavbar ..._^ * واآلن لنشاهد المثال معا^_^ :



ع�ادة م�ا نرغ�ب بوض�ع ن�ص ف�ي .. navbarداخل ال textوضع : خامسابكل سهولة باستخدام bootstrapوهذا أمر يتيحه ال .. navbarال

*_...* p> tag>وعادة ما يكون ل .. navbar-text.الكالس




Non-nav: سادسا link .. ال�ى وض�ع * _*ق�د نحت�اج ف�ي بع�ض األوق�اتالج�واب ال .. ؟ navلكن هل هذا يعني أنن�ي يج�ب أن أس�تخدم ال ..رابط

ه��ذا الك��الس .. navbar-linkي��وفر ل��ك ك��الس bootstrapال ..^_^.. navbarيمكنك استخدامه لتضمين رابط داخل ال

: شاهد طريقة استخدامه



^_^ Fixed to Bottomو Fixed to top: سابعا

فم�ن خاللهم�ا يمكن�ك ..^_^ من األمور الجد رائعة هي وجود هذه الخاص�يتين وه�ذا أم�ر رائ�ع ..أعلى الشاش�ة أو اس�فل الشاش�ة navbarمن تثبيت ال

..وتراه في العديد من المواقع ..جدا

ولنستطيع عمل ذلك كل ما عليك استخدامه هو الكالس navbar-fixed-bottom أوnavbar-fixed-top ... باإلض��افة

و topبكس�ل لألعل�ى اذا ك�ان body ..70لل paddingالى وضع وه��ذا لك��ي تحج��ز مس��احة .. bottomبكس��ل لألس��ف اذا ك��ان 70

دون أن ت�ؤثر عل�ى محت�وى آخ�ر navbarمخصصة لبداية أو نهاي�ة ال ^_^



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

مالحظة*^_سريعة

االرتفاع االفتراضي

fixedللبكسل 50هو

تطبيق المثال (عن طريق اضافة محتوى scrollأظهر ..لترى المثال بالشكل الصحيح )مهم



navbarتغيي�ر التنس��يق الع�ام ل��ل bootstrapيمكن�ك باس��تخدام ال : ثامن�ا... navbar-inverseوذلك باستخدام الكالس ..




) componantبج��زء ال ( navbarوآخ��ر موض��وع يخ��ص ال ..تاس��عا وه�و الخاص�ية األه�م بالنس�بة لن�ا .. Responsive navbarوه�و ال

..!! باإلضافة الى ما سبق بكل تأكيد .. navbarلكي نستخدم ال

؟ navbar Responsiveولكن كيف يمكننا من بناء ال نق��وم بوض��ع ..متجاوب��ة م��ع الشاش��ات المختلف��ة navbarلتحوي��ل أو جع��ل ال

يحت��وي عل��ى الك��الس wrapperالمحت��وى الخ��اص به��ا داخ��ل .collapse, .navbar-collapse ... نق�وم ..باإلضافة ال�ى ذل�ك

م�ع اض�افة زر يحت�وي ..خاص ب�ه wrapper --- IDبإعطاء هذا ال وتحتوي data-toggleوخاصية navbar-toggleعلى كالس

^_^لنشاهد مثاال ...ههه * ^_وشكل الزر .. collapseقيمة



): فهو يمثل فكرة..انتبه لكل لون موجود (مثال



الت��ي breakpointيعم��ل بنائ��ا عل��ى ال Responsiveال : مالحظ��ة toggleوبنائ��ا عل��ى ه��ذا ف��إن ال .. ذكرناه��ا ف��ي أول موض��وعنا ه��ذا شاهد نتيجة المثال .. responsiveسيظهر عندما يتحول التصميم الى

*: _*السابق



بحيث يك�ون ال ... data-targetوال تنسى أيضا أن تستخدم أو تحدث ال data-target يحت��وي عل��ى الid ل��لwrapper ال��ذي أري��ده أن

...يظهر

الى ج�زء ..ولننتقل معا .. بإذن هللا تعالى navbarوبهذا نكون انتهينا من ال *^______________جديد

) انتبه جيدا لألمثلة وطريقة تنفيذها... (يمكنك مشاهدة جميع األمثلة من هنا : 2مثال : 1مثال



مجانية


عب��ارة اس��لوب Breadcrumbs؟ ال .. Breadcrumbsم��ا ه��ي ال مثل ..نستخدمه لمعرفة التسسلسل للصفحة التي تقف عليها بشكل متتابع

Home / pages / about us ... وم�ن خ�الل ه�ذا الش�كل يمكنن�االرجوع الى أي صفحة من خ�الل النق�ر عل�ى الج�زء الم�راد الرج�وع الي�ه

..)في هذا المثال ..(about usهو ..وآخر جزء والذي نحن فيه ..

بخي��ث ق��ام .. فه��ي م��ن قص��ة قط��ع الخب��ز ..^_^أم��ا القص��ة الخاص��ة بتس��ميتها ص��ديقنا بقط��ع الخب��ز ال��ى قط��ع ص��غيرة ال يض��يع الطري��ق ال��ذي ج��اء من��ه

^____________^ وبنفس الفكرة تعمل على المواقع ..



بكل بساطة وجمال ..؟ bootstrapكيف يمكننا العمل عليها في ال ..واآلن <ol>ال�ى قائم�ة مث�ل ال breadcrumbيلزمنا فق�ط اض�افة ك�الس

باستثناء القطع�ة األخي�رة والت�ي ..وتكون القطع عبارة عن روابط .. ^_^ *^_تمثل الصفحة التي نقف عليها




وكثي��را م��ا تش��اهد أس��فل .. ن��رى ص��فحات لألخب��ار ..ف��ي كثي��ر م��ن األحي��ان .. ^_^.. prevو nextالص��فحة مجموع��ة م��ن األرق��ام وبجانبه��ا

أي .. Paginationه��ذه تس��مى ... ونس��تخدمها للتنق��ل ب��ين الص��فحات ..ترقيم الصفحات

وهو .. يقدم لك أيضا كالس لدعم تنسيق هذه الصفحات bootstrapال ... ulويوضع داخل قائمة مثل ال ..^_^ paginationكالس ال



ه��و الش��كل ..ال��ذي ش��اهدناه بالص��فحة الس��ابقة Paginationه��ذا ال الخ�اص بالص�فحة activeويمكنن�ا أيض�ا ال�تحكم بش�كل ال ..اإلفتراضي

باإلضافة الى ) .. أقصد ماذا يكون شكل الرقم حينما نكون بنفس الصفحة(ف��ي ح��ال pagerلوق��ف التعام��ل م��ع ال disabledذل��ك اس��تخدام ال

: ^_^شاهد المثال .. أو آخر صفحة ..كنت في أول صفحة



س��يؤخذ disabledوه��ي أن ال ..هن��اك مش��كلة بس��يطة ..ف��ي المث��ال الس��ابق ولح�ل ه�ذه المش�كلة ..لك�ن س�يبقى العنص�ر قاب�ل للض�غط .. تنسيق التوق�ف

ويكمنن��ا أن نق��وم باس��تخدام ال .. سنس��تخدم الس��كربت preventDefault() أو يمكن�ك تب�ديل .. كما ف�ي أح�د األمثل�ة الس�ابقة

^_^..حتى تصبح غير قابلة للضغط <span>الى <a>ال

..^_^لك الحرية في اتخاذ اإلجراء المناسب

: شاهد كمثال على سكربت



بك��ل بس��اطة pagerفإن��ه يمكن��ك ال��تحكم بحج��م ال .. باإلض��افة ال��ى ذل��ك وذلك عن طريق استخدام الكالس ..^_^ وجمال

pagination-lg أوpagination-sm ...




فق�ط pagerوه�و اس�تخدام ..هناك أس�لوب أبس�ط م�ن الش�كل الس�ابق ..واآلن وه��ذا مفي��د للمواق��ع ..ب��دون أرق��ام ..فق��ط prevو nextويقص��د ب��ذلك

..وغيرها blogمثل ال ..الصغيرة ك��ل م��ا علين��ا القي��ام ب��ه ه��و اس��تخدام الك��الس ..ولك��ي نس��تخدم ه��ذا األس��لوب

pager بدال منpagination ...^_^... شاهد المثال^_^

نتائج المثالستكون في parentمنتصف ال



pagerونجع��ل ال .. pagerكم��ا يمكنن��ى تغيي��ر موق��ع ك��ل م��ن ه��ذه ال وذلك باستخدام الكالس التالي ..بمحاذاة اليسار واألخرى الى اليمين

next وprevious داخل ال<li> ...




وما .. paginationمثل ال .. disabledوأخيرا يمكنك استخدام الكالس ^_^ ينطبق على هذه ..ينطبق على تلك

breadcrumbلموض��وع ال ..(واآلن لنش��اهد جمي��ع األمثل��ة الس��ابقة مع��ا ^_^..) paginationوموضع ال



مجانية


ق��ام باعطائ��ه ..ب��ل عل��ى العك��س .. labelل��م يهم��ل ال .. bootstrapال يمكننا تنسيقها لتعطينا شكال جم�يال يمكنن�ا التعام�ل مع�ه ..خصائص رائعة وخوص��ا ف��ي ح��االت وص��ف أو تق��ديم اقت��راح مع��ين أو ..ب��أكثر م��ن حال��ة

ويك��ون ذل��ك بك��ل بس��اطة باس��تخدام ..ع��رض جزئي��ة مهم��ة للمس��تخدمين ..^_^ *-labelوالكالس labelالكالس

الخ ..default, primary, infoتعني الخصائص •

*)^_ال تنسى تطبيق األمثلة : (^_^لنشاهد مثاال على ذلك



^_^ناتج المثال السابق



يدل على highlightهي شكل مميز يظهر باسلوب ال Badgesال ويمكن استخدامها في ..وجود عناصر جديدة أو عناصر غير مقروئة

FBصندوق الوارد في ا..وكمثال عليها .. ^_^... الكثير من المواقع .. ^_^

وذلك باستخدام .. فاألمر سهل جدا .. ^_^أما بخصوص طريقة اإلستخدام spanويحتوي هذا ال * ...^_ spanداخل ال badgeالكالس

... على القيم المراد طباعتها : ^_^لنشاهد مثاال



ويقصد به .. Self collapsingلهذا الكالس هناك مصطلح اسمه ال يوجد (أو العنصر ما زال فارغا .. عندما ال يتواجد عناصر جديدة

empty:باستخدام خاصية ال bootstrapسيقوم ال ..) ..قيمة :displayعن طريق spanمن اخفاء هذا ال .. cssالموجودة بال

none ... شاهد المثال^_^



.. ^_^مالحظة بخصوص النقطة السابقة وذلك بسبب استخدام الخاصية ) ... -_-(_ ie8النقطة السابقة ال تدعم ال

:empty ...

: 2مثال



تقوم على تمييز محتوى أو جزء معين من .. هذه الخاصية الجميلة ...^_^ ومستغل لحجم الشاشة , ويكون الشكل مرن..المحتوى

bootstrapفكما عودنا ال .. ^_^..أما بخصوص طريقة اإلستخدام يحتوي كالس wrapperفإنه سهل جدا وذلك يكون بانشاء

jumbotron ...



كالس رائع يقوم على اعطاء خصائص اضافية page-headerال <*h>لتقوم بترويسة معينة ويحتوي أو يوضع بهذا الكالس ال

.. مثال لتتحكم بالشكل النهائي smallباإلضافة الى خاصية ال : شاهد المثال



..^_^على المواضيع السابقة ..وبعد هذه األمثلة المتنوعة ..واآلن

وال تنسى أن تقوم ..أرجو أن تهتم بالتطبيق (لنقم معا باستعراض األمثلة ) ...بتطبيق كل مثال أوال بأول



مجانية


هي عينة مصغرة وغالبا ما ترفق الى Thumbnailsيقصد بال .صورة مصغرة..فنقول ..الصور

بل على العكس .. Thumbnailsلم يهمل ال bootstrapبال grid systemأعطاها جانبا رائع في التعامل وخصوصا مع ال

فأصبحت مفيدة عند استخدام الصور كروابط أو حين تنسيقك لمجموعة * ^_... Thumbnailsداخل ال htmlمن ال

أما بخصوص طريقة اإلستخدام فهي عن طريق اضافة الكالس Thumbnails أو الى .. الى العنصر بذاتهwrapper يحتوي

*_*مجموعة من الخصائص بداخله



:شاهد المثال

هذا المثال يمثل الشكلاإلفتراضي لل

Thumbnails___^*



ويحتوي العديد من خصائص .. wrapperقلنا أنه يمكننا وضع : 2مثال . htmlال

^_^لنشاهد ذلك



وطرق عرض تنبيهات ورسائل النظام .. إن التعامل مع المستخدمين لذلك تم اعطائه جانب مهم من قبل ال .. المختلفة أمر مهم جدا

bootstrap ..

الرسائل أو التنبيهات التي تأتي بعد أو بنائا على alertيقصد بال action وهدفها هو ايصال ..ارتبط بالمستخدم أو تفاعل معه المستخدم

الخ ...معلومة أو لفت المستخدم لمشكلة ما أو تحذير ما

و alertويكون استخدام هذا النوع من خالل استخدام الكالس alert-* )* ...success, info, danger, warning(




*.. ^_الحظ المثال

alertال يوجد بكالس ال : مالحظة.. defaultتنسيق افتراضي



-alertوهو alertيمكننا استخدامه مع ال ..هناك أيضا كالس اضافي dismissible ... هذا الكالس مفيد جدا للتفاعل مع المستخدمين

وبما أننا تحدثنا عن ... وانتظار أي حدث يمكن أن يقوم به المستخدم وسنتكلم عن هذا األمر في .. فهذا يعني وجود سكربت ..وجود تقاعل

لكن اآلن سنقوم بشرح كيف .. الجزء الثالث من الدورة بإذن هللا تعالى * ..^_ htmlالخاص بال markupيمكننا كتابة ال




تعمل xفستجد أن ال ... -_-اذا قمت بتنفيذه ..في المثال السابق : مالحظةمنذ jsمع ملف ال templateوسبب ذلك أننا قمنا بتضمين ال

*^_ bootstrap.min.js* ^_البداية ان كنت تذكر

-dataالخاصية buttonال تنسى أن تستخدم داخل ال : 2مالحظة dismiss="alert” داخل الbutton ليعمل اإلغالق لهذا ال

alert ...

وذلك باستخدام .. alertيمكنك وضع روابط داخل ال ..وأخيرا alert-link .. هذا الكالس يقوم باعطاء خصائص تناسب الalert

^_^..الذي تستخدمه



^_^..واآلن

لموضوع ال ..وهي مشاهدة نتائج جميع األمثلة السابقة ..الحلقة األروع Alert والthump ..

... _^ .. *ال تنسى التطبيق



مجانية


تستخدم هذه الخاصية الرائعة إلبقاء المستخدم مطلعا على مخطط أو نسبة هذه الخاصية الرائعة التي يدعمها ال .. سير العمل لنطقة معينة / انجاز

bootstrap .. تعتمد عتنسيقها على الcss3 .. وهي غير مدعومةال يدعم هذه الخاصية ..وأقل ie-9فال ..اال من المتصفحات الحديثة

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

الموجودة بال transitionsوال animationباستخدام ال css3 ...^_^

*_* Progress barلنشاهد كيف يمكننا كتابة واستخدام ال ..واآلن



): الشكل اإلفتراضي(شاهد المثال

ليكون الشكل area-valuenowوكما تالحظ يجب أن يساوي القيمة .. widthاللون األزرق هو ال ..المهم أن يكون هناك عالقة معينة ليصبح الشكل صحيح .. أو يعطى قيمة مباشرة widthويقدر ال ..منطقي

^_^وإنما سيحدث خطأ منطقي فقط ..لن يحدث خطأ .. 60والقيمة % .. 80وهذا ليس شرطا فلو قمت بوضع ^_^وهذا األمر لتتعامل معه مع السكربت الخاص بك بشكل جيد



مخفية %60فإنني قمت بوضع ..اذا الحظت المثال السابق : 2مثال لكن ماذا لو أردت أن أطبع .. Screen Readerوذلك ألجل ال ..

؟ Progress barالقيمة فوق ال

: في هذا المثال..الجواب بكل بساطة



:3مثال فإن الحد %) 0بمعنى آخر تساوي أو تؤول الى (في حال لم يتواجد قيمة

Lowوهذا يسمى بال * ^_.. 30pxهو widthاألدنى لل percentages .. ما العمل ..أي لما تكون القيمة قليلة^_^..




الشيفرة البرمجية والناتج للمثال السابق بشكل واضح هو



وهي امكانية تغيير اللون ..هناك خاصية رائعة جدا ..أيضا : 4مثال buttonوذلك باستخدام نفس الخصائص التي نستخدمها داخل ال ..

.. وغيرها لتغيير اللوون

*-progress-barوهنا الكالس المستخدم لذلك هو

,warning, info: تمثل* ال danger, success

)ال تنسى تطبيق المثال: (لنشاهد المثال في الشرحة التالية..واآلن



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

progress-bar-striped .....شاهد المثال :



ما رأيك أن نقوم بعمل تأثير جميل على الخاصية السابقة ..واآلن : 6مثال نعم يمكنك ذلك من خالل .. ^_^ونضيف اليها نوعا من الحركة ؟ ..

^_^.. activeاستخدام الكالس السابق مضافا اليه الكالس : شاهد المثال



هل ..^_^ويتمحور حول سؤال ..والمثال األخير حول هذا الموضوع أسلوب األمثلة السابقة في مثال واحد ..يمكن أن أستخدم أكثر من لون

..!! مثل أن يتوفر األربع الوان بتنسيق معين ..أو جزئية واحدة ..

progressبكل بساطة قم بوضع جميع ال .. ^_^الجواب هو نعم bar داخل كالس الprogress شاهد المثال ...^_^واحد_^*



:شاهد الشيفرة البرمجية

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

)ie8مالحظة الحركة والتموج ال يدعمها ال ..(^_^ معا



مجانية


نسق معين يمكننا استخدامه بوجود أحد media objectيقصد بال باإلضافة الى وجود ..مثل الصور أو الفيديو mediaعناصر ال

... مكونات أخرى ستأتي بجانبها مثل نص معين

التعليق الي بنشاهده في أي ..(ومن األمثلة المشهورة على هذا النسق bloger .. أو الtweet .. ستجد الصورة الخاصة بك بجانب مربع

).. الخ...النص

ويمكن بكل سهولة التحكم باتجاه الصورة من خالل الكالس الى اليمين أو *^_...الى اليسار



: ^_^واآلن لنشاهد كيف يمكننا تصميم هذا األمر

الحاوي للجزء النصي^_^كالس العنوان

الحاوي الرئيسي..mediaاإلخبار بعنصر ال



: 2مثال



يمكننا استخدام اسلوب جميل ومفيد لنا في حال وجود قوائم من ال ..أيضا news أوarticles هذا األسلوب يكون ..أو تعليقات متداخلة

.. ulداخل ال mediaباستخدام ال ): انتبه للكالس والتضمين(شاهد المثال



بكل بساطة نقوم باضافة ..في حال وجود شجرة من التداخالت : 2مثال الخاص باألول bodyداخل ال mediaالحاوي الخاص بكالس ال

: شاهد المثال..



غير المعتاد ..يمكن أن يتم تنسيقها بشكل آخر bootstrapالقوائم بال هذا الكالس يعطى الى ال .. list-groupوذلك باستخدام الكالس ..

<ul> )ويقوم بدوره بجعل ال ) كمثالul مرنة وذات قدرة عالية^_^.مع امكانية اضافة وتضمين العناصر اليها ..على االستجابة

*^_الهدف الفكرة ..ما في مشكلة .. olطبعا من الممكن اتكون *)




طبعا لقد تكلمنا سابقا * .. ^_ groupالى ال Badgesاضافة : 2مثال bootstrapيقوم ال groupوهنا داخل ال .. Badgesعن

فتأخذ محاذاة الى اليمين مباشرة .. Badgesباعطاء تنسيق تلقائي لل : شاهد المثال* ..^_



.. كمثال.. ulفإننا استخدمنا ال .. كما قلنا في أول الشريحة : ... 3مثال مع ال list-group-itemفيمكنك استخدام الكالس .. كمثال..نعم

a داخل الlist-group .._^ .. * وهذا يعطيك صالحة انشاء: شاهد المثال...مجموعة من الروابط داخل مجموعة واحدة



تذكر كتصميم (لتعطيل الرابط disabledيمكننا استخدام ال : 4مثال ) .. ولتعطيل الحدث يجب عليك استخدام السكربت..فقط




ويكون ^_^ .. Contextual classesكما يمكننا استخدام : 5مثال *^___ *-list-group-itemذلك باستخدام الكالس




Custom contentوآخر نقطة في هذا الموضوع وهي : 6مثال فيمكننا داخل ال



Listنكون انتهينا بإذن هللا تعالى من موضوع ال ..وبهذا ..اآلن group ...

*_... *أرجوا أن تكون قد قمت بالتطبيق لكل مثال وفكرة

mediaجميع األمثلة لهذا الموضوع وموضوع ال ..ولنشاهد اآلن معا obejct _^ *



مجانية


النشاء مساحة معينة أو حجز مكان معين أو صفحة panelنستخدم ال ذو panelويكون ال .. لعرض محتوى معين ..ما باسلوب ما

الخ.. bodyأو ال headerخصائص مثل وجود ال

والتي panelهناك مجموعة من الكالس التي نقوم باستخدامها مع ال : وهي bootstrapيقدمها ال

(1panel : وهو الكالس الرئيسي إلعطاء الخصائص أليpanel).الزامي.(

(2panel-heading : هذا الكالس المسؤول عن اعطاء خصائصبداخلها panel-titleويمكن استخدام الكالس ..لترويسة الصفحة

.إلعطاء عنوان داخل الترويسة



(3panel-body : هذا الكالس يحتوي على المحتوى الخاص بالpanel _^*

(4panel-footer : هذا الكالس يقوم باعطاء تنسيق للfooter.(5panel-* * ) وأقصد بها هنا

info, warning, default, primary, danger, success

والحظ أن هذا نسق عام ..انبته للكالس..الشكل االفتراضي(شاهد المثال): وليس الزامي



وذلك من panelالموجود لل headerأيضا يمكنك تغيير للون ال وكما تعلمنا سابقا .. Contextual alternativesخالل

وذكرناها بجزء * ..^_كمثال panel-info..وبنفس األسلوب ..)5النقطة رقم (الكالس لهذا الجزء




وال headerفستالحظ أن اللون الخاص بال .. اذا طبقت المثال السابقborder للpanel لكن ال .. قد تغيرfooter وهذه ..لم يتغير

وال .. headerال يخضع لتغييرات ال footerفال ..نقطة مهمة ... Contextual alternativesيقبل ال

وهي تعريف أو بناء جدول داخل ال ..نذهب الى نقطةة أخرى .. واآلنpanel... ويكون ذلك كما تعلمنا في درس الجداول بالجزء األول

^_^مع الجدول tableعن طريق استخدام الكالس ..

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



* ^_شاهد المثال .. List groupأيضا يمكننا التعامل مع ال



وهو ال .. ^_^ لنستحدث عن موضوع جميل جدا ورائع ..واآلن Responsive embed ...

ليكون متجاوبا مع أحجام embedكثيرا ما احتجنا الى تنسيق ال وذلك * ..^_ bootstrapهذا األمر متوفر بال .. الشاشات المختلقة

) ratio(وكم هي نسبة العرض للطول ..بكل سهولة بتحديد الكالس ^_^...

أو <object>أو <iframe>هو embedيقصد بال : مالحظة<embed> ....



لجعل العنصر نفسه embed-responsive-itemنستخدم الكالس .. متجاوب

:يحتوي الكالس التالية..له wrapperونقوم بانشاء (1embed-responsive : وهو الكالس الذي يحتوي على القيم

..للحاوي ليكون متجاوب ..اإلفتراضية أو embed-responsive-4by3يمكنك استخدام الكالس 2)

embed-responsive-16by9 لتكون كنسبة لعلمية)scale(التجاوب بين الطول والعرض مع اختالف حجم الشاشة



: نتيجة المثال السابق



التي شرحناها jumbotronهو صورة مصغرة عن ال wellال وتستخدم هنا لعرض أو اظهار فكة معينة بشكل مبسط أو سريع .. سابقا

simple inset highlight .. ويتم استخدام الwell ككالس well-smو well-lgمن خالل wellويمكن التحكم بحجم ال ..

: ^_^لنشاهد مثاال



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

نكون انتهينا من الجزء الثاني ..^_^الحمد ل رب العالمين ..^_^بهذا لننتقل معا ..واآلن .. ^_^ Componentوهو جزء ال ..للدورة

سائلين هللا * ..^_الى الجزء الثالث واألخير من هذه الدورة المتواضعة وموفقين في األجزاء ..تعالى أن نكون قد وفقنا في األجزاء السابقة

..اللهم آمين ..^_^الالحقة



مجانية

Java Script


مجانية


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

...االنترنت اال بوجودها

ولكن لشرح الية التفاعل بينه وبين ..ولذلك سنتطرق الى هذا الجزء المهم فكما ...المستخدمة فيه plug-inوما هي ال .. bootstrapال

التي تكلمنا عنها بالجزء .. componentالحظت من دروس ال وهذا ما ..تحتاج الى الجافا سكربت للتفاعل مع المستخدمين ..الثاني

^_^ونحن نتكلم عن الذهاب الى الجزء الثالث ..الحظناه بشدة

^_^لنبدأ على بركة هللا ..واآلن



: مالحظات مهمة قبل البدءجافا سكربت مختلف ليجعل من ال plug-in 12هناك أكثر من 1)

component التي درسناها فعالة مع المستخدمين^_^من خالل Plug-Inفي الشكل اإلفتراضي يتم تضمين جميع هذه ال 2)

.الذي قمنا بتحميله templateال ) المراد استخدامها plug-inاختبار ال (يمكنك تخصيص السكربت 3)

وتضمينها داخل plug-inوذلك من خالل تحديد ما ستحتاج من .. folderالجافا سكربت

أي تضمين كل ال(في حال تم اختيار الشكل االفتراضي 4) plug-in ( فإن شكل الملف سيكونbootstrap.min.js أو

bootstrap.js



^_^ js.*سيكون اسم الملف هو ..في حال تم تخصيص السكربت 5)على مكونات plug-inتعتمد ال ..ولكن انتبه أنه في بعض األحيان

...فيجب عليك تضمنيها أيضا ..أخرى للعمل على ال bootstrap.min.jsسنقوم باستخدام 6)

bootstrap ..وعلى المشاريع القادمة بإذن هللا تعالى.(7bootstrap.min.js وbootstrap.js يحتوي جميع ال

Plug-in .. وهذا يتيح لنا عملrequest واحد فقط لجلب* ^_السكربت

يجب أن تكون componentعندما نتعامل مع الجافا سكربت وال 8)مثل ..لنفس العنصر attributeحذرا من استخدام أكثر من

)الصفحة التالية....( tooltipو toggleاستخدام الخاصية



wrapperولحل هذه المشكلة يمكنك اسنشاء .. buttonداخل ال الذي conflictوبهذا نتخلص من ال ..وحتوي أحد هذه الخصائص

^_^يمكن أن يحصل فال تنسى أن .. Plug-inاذا قمت باستخدام التضمين المخصص لل 9)

...قبل ذلك jQueryتقوم بتضمين ال

لنتكلم عن بعض األمور التي يجب معرفتها أيضا حول تعامل ال .. واآلن js مع الخصائص والplug-in ^_^



wrapperولحل هذه المشكلة يمكنك اسنشاء .. buttonداخل ال الذي conflictوبهذا نتخلص من ال ..وحتوي أحد هذه الخصائص

^_^يمكن أن يحصل فال تنسى أن .. Plug-inاذا قمت باستخدام التضمين المخصص لل 9)

...قبل ذلك jQueryتقوم بتضمين ال

لنتكلم عن بعض األمور التي يجب معرفتها أيضا حول تعامل ال .. واآلن js مع الخصائص والplug-in ^_^

هو bootstrapما أستخدمه لتصميم الصفحات باستخدام ال (bootstrap.min.js (



Data attributes :فإنه يتم ... bootstrapفي APIبسبب امكاينة استخدام ال ) أ

تجهيز العمل والتعامل مع الخصائص مباشرة عن تضمين السكربت وهذا ما .. ^_^ودون الحاجة الى كتابة سطر برمجي واحد ..

بدون تضمين الجافا سكربت .ستالحظه اذا قمت بتنفيذ األمثلة السابقة وقم بحذف تضمين الجافا سكربت html.17ارجع الى المثال ..(

).toggleوانظر هل سيتم تنفيذ ال

يمكنك ايقاف التمهيد أو استخدام أي سطر أسلوب افتراضي وبناء ) بdata-api.ال ويكون ذلك عن طريق استخدام..اسلوبك الخاص



eventتستخدم كحاوي ألي namespaceهذه data-apiال ) namespaceأي داخل (يمكن أن تكون موجودة داخل الملف

فإن هذا سيمنع أي .. data-apiلل offولهذا اذا قمت باستخدام ..الخ.. alertأو ال ..toggleحدث موجود داخل مثل ال

الذي سأوقف عنه plugInفإنه يمكنني من تحديد ال ..وكما تالحظ alert.data-api.ويكون ذلك عن طريق وضع .. التفاعل

)alert الكالس الخاص بالAPI المطلوب إيقافه.(: شاهد المثال



Programmatic API : كان عندهم ايمان ..أصدقائنا المبرمجين APIبأن على جميع المطورين أن يستطيعوا استخدام الجافا سكربت

لذلك تجد بكل بساطة امكانية اضافة .. bootstrapللتعامل مع ال كالس أو حذفه أو اضافة أي من الخصائص أو حذفها باستخدام الجافا

...سكربت




كما يمكنك أيضا من تغيير الخيارات أو االعدادات اإلفتراضية للوصول ألن التغيير .... الى القدرة على تغيير الشكل اإلفتراضي مباشرة

: شاهد المثال.. constructorيصبح على مستوى ال

لكن هذا * ..^_.. سيتم شرح الشيفرة البرمجية بشكل كامل فيما بعد ** .. الشرح لتحصل على المفاهيم العامة قبل البدء



No conflict : عند تضمين أكثر من مكتبة مع بعضهم البعضوخصوصا في حال وجود أكثر من مكتبة قد تشترك في مسميات ..

فإن هذا األمر يؤدي الى وقوع .. الخ namespaceالدوال وال وصوال الى ..وقد يسبب مشاكل عالية المستوى .. خطأ بالتداخل بينهم

bootstrapلذلك ولتفادي هذا األمر مع ال .. توقف السكربت آخر تعمل عليه من خالل frameworkخصوصا اذا وجد ..

..المشروع : شاهد المثال



JavaScript is disabled : للتعامل مع الجافا سكربت في حالتم تعطيله قبل المستخدم يكون عن طريق استخدام ال

<noscript> tag _^.. * وليس الbootstrap نفسه...

..بإذن هللا تعالى PlugInلنبدأ معا بأول المواضيع وأول ال .. واآلن

لكي تأخذ معلومات عامة حول ..مجرد مقدمة فقط ال غير ..الكالم السابق واآلن سنبدأ بشرح ... والجافا سكربت bootstrapآلية عمل ال

P:وهي أبسط بكثير من المقدمة .. بإذن هللا تعالى ... plug-inال



مجانية


لعرض محتوى معين داخل صفحة منبثقة على شكل Modalتستخدم ال وهي .. windowالخاص بها هو ال Parentيكون ال ..نافذة

child ويمكن وضع ..^_^ لهheader, body, footer ^_^بداخلها

bootstrap.jsمضمن تلقائيا داخل ال ..كما قلنا plug-inهذا ال لكن اذا أردت أن تضيف هذا .. ^_^ bootstrap.min.jsأو modal.jsعليك تضمين ..لوحده plug-inال :مالحظة

يمكن modalفقط .. modalلل overlappingال يوجد مفهوم لل واحد فقط ظاهر..تنفيذه في نفس الوقت



^_^اآلن لنشاهد طريقة كتابته



..هي modalطريقة اظهار ال

وانتبه للكود: شاهد المثال



^_^لنأتي على شرح خصائص والكالس التي ورد ذكرها ..واآلن 1 (data-toggle="modal” .. بنفس مفهوم الbtn والlink

...modalفمن خاللها نقوم بالتبديل بين اظهار واخفاء ال ..

2 (data-target="#identifier” .. تستخدم لتحديد الmodal ..الذي سيظهر عند النقر على هذا الزر أو الرابط

بخصوص الجافا سكربت فقد تم استخدام ) 3$('#identifier').modal(options) في حال أننا نريد

وليس ال ..من خالل السكربت modalاستعراض ال target.. والoption هي مجموعة خيارات..



بعد ذكر بعض النقاط والمالحظات ..سنأتي على ذكرها بإذن هللا تعالى *^_وشرح الشكل الذي نتج

ويكون modalهو الكالس الرئيسي لتنسيق ال .. modalالكالس ) 4*^_ modalلكامل محتوى ال wrapperهو ال

هو الذي يعطينا على اإلختفاء والظهور بشكل تدريجي fadeالكالس ) 5*^_ toggleوينطلق عند حدوث .. ^_^وهذا أمر رائع

6 (aria-labelledby هذه تعطي مرجعية لعنوان الmodal *^_) modalضع عنوان ال ..(وشرحناها سابقا



7 (<div class="modal-header"> هذا الwrapper تم*^_ modalداخل ال headerاستخدامه لوضع تنسيق لل

يتم استخدامه لتعطي تنسيق لكبسة اإلغالق الخاصة .. closeالكالس ) 8.. modalبال

هي المسؤولة عن اغالق ”data-dismiss="modalالخاصية ) 9.. html5وهي خاصية .. modalال

10 (modal-body : هذا كالس أيضا من الbootstrap إلعطاء.. modalالخاص بال bodyتنسيق لل



فهو الكالس المسؤول عن اعطاء .. modal-footerأما الكالس ) 11* ..^_ modalلل footerتنسيق ال

وال bodyلل wrapperهو.. model dialogالكالس ) 12header والfooter .. أيضا يمكننا اضافة كالس معه مثل

modal-lg أوmodal-sm ... لتغيير حجم الmodal^_^



-dataبدال من ”href=:”#modal-idيمكن استخدام ال ) 13target في الرابط_^*

وخيار ال ^_^ وهي السكربت ..^_^نأتي الى النقطة المهمة ..واآلن option _^ ...*

لتمرير البيانات باستخدام الجافا سكربت وتغيير optionتستخدم هذه ال هل عرفت لماذا ذكرنا ..( modalالشكل أو المظهر الخاص بال

)^_^المفاهيم في المقدمة

*^_شاهد المثال حول الحجم والرابط



1 (backdrop : هذه الخيار األول الذي يمكن استخدامه مع الmodal وهو يحتمل قيمتين..true أوfalse .. أو كلمةstatic

modalوتعني امكانية اغالق ال .. trueالحالة اإلفتراضية هي أو ال falseأما ال .. modalمن خالل النقر خارج اطار ال

static فهي تمنع اغالق الmodal اذا قام بالضغط خارج الmodal ... لنشاهد مثاال^_^



ال يغلق اذا قمت بالضغط خارجا

ال يغلق اذا قمت بالضغط خارجا



2 (keyboard : هذا الخيار يمنع المستخدم كم اغالق الmodal من.. falseأو true..وله قيمتان * ..^_.. Escapeخالل زر ال

فهذا يعني منع المستخدم من الخروج عن .. falseاذا تم وضع الخيار ... trueوالحالة اإلفتراضية هي .. Escapeطريق

: شاهد مثال



modalوهي خاصية تمكننا من ايقاف اظهار ال .. showالخاصية ) 3 true or falseوالقيم الخاصة بها هي ..عندما يتم تحميل الصفحة

initializedوتعني عند عمل ... trueوالحالة االفتراضية .. * ^_ modalقم بفتح ال modalلل


فقط ضعها داخل .. clickبدون أن تربطها ب ... قم بتربة هذا السكربت .…)ready.(document)$ال



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

data-* .. ترمز الى * و)backdrop أوkeyboard ..الخ (: شاهد مثال

التي Methodsسنتحدث عن ال ..بعد حديثنا الخصائص بذاتها ..واآلن ^_^.. modelيمكننا أن نستخدمها أيضا مع ال



التي ذكرناها optionال (التي يمكن نستخدمها هي methodال فهي *-dataأما اذا استخدمت ال .. methodفتطبيقها كان

showوال toggleوال ..) Attribute optionأصبحت ... hideوال




وهو ال modalحول ال ..الى آخر موضوع بإذن هللا تعالى ..واآلن modal event ^_^

لل hookصممت لتقوم بعمل eventبمجموعة من ال ..ويقصد بها function .. أي عمل اضافة حدث معين عند وقت معين مرتبط

.. بالتنفيذ : أوقات 4وهي على

(1show.bs.modal : ينطلق عند انطالق الshow modal(2:shown.bs.modal ينطلق عند مشاهدة المستخدم للmodal(3hide.bs.modal : ينطلق عندما ينطلق الhide modal(4hidden.bs.modal : ينطلق عند اختفاء الmodal

..من أمام المستخدم



مجانية


لن نزيد على ..وهنا بالجافا سكربت .. لقد تكلمنا كثيرا عن القوائم المنسدلة فإذا قمت بتطبيق األمثلة .. األمثلة التي ذكرناها سابقا الى بعض المعلومات

-dataوالسبب في هذا استخدام ال ..كانت تعمل دون مشاكل ..السابقة toggle="dropdown” .. هذه الdata-api المهمة لصنع ال

toggle نكون انتيهنا ...وبوجد تضمين الجافا سكربت ..للقوائم المنسدلة... ^_^من تهيئتها

لكن ما أود اضافته الى هذه النقطة هي وجود األربع أوقات للتنفيذ أيضا مثل show.bs.modal....الخ

بشكل يدوي toggleيمكنك استخدام الجافا سكربت لعمل ال $('.dropdown-toggle').dropdown() ولكن

لذلك ابقى واستخدم ال.. الزامي data-toggleهنا يبقى ال Data-toggle %_*



الموجود activeيقوم على تغيير ال ^_^ ..الجميل plug-inهذا ال scrollingبنائا على موقعك بالصفحة أثناء عمل ال navبال

هذا األمر كنا نقوم به يدويا من خالل تحديد النقاط ونقل كالس ال ..active لكن هذا ال ..الى العنصر الذي نحدده بنائا على الموقع

plug-in ... سيقوم بذلك_^... *

بإمكانك تضمين .. plug-inاذا أردت استخدام هذا ال : مالحظة*) scrollSpy.js )أما بالحالة ) في حال التضمين المخصص

الخ... bootstrap.min.jsاإلتراضية فهو مضمن من خالل فيجب أن يكون مع .. plug-inاذا أردت استخدام هذا ال :2مالحظة

nav ...



للجزء الذي سيحتوي هذا relativeيجب أن يكون التنسيق : 3مالحظة ... plug-inال

وبعد ذلك سنشاهده ..قمت بأخذ المقاطع المهمة من المثال (شاهد المثال ...):مباشرة بإذن هللا تعالى



:بعد مشاهدة األجزاء المهمة لنأتي الى شرحها1(data-spy="scroll” : هذه الخاصية مسؤولة لتفعيل المراقبة

وغالبا ما تستخدم داخل ...من قبل األعضاء scrollingلعملية ال ألن في الغالب نقوم بتغيير القائمة بنائا على موقع ال .. bodyال

scrolling في<body> ....2 (data-target : هذه الخاصية مهمة جدا لتحديد نقطة االنطالق

هو idويجب أن يكون ال ..أو اي عملية أخرى spyلعملية ال parent للعناصر التي سيتم عمل أيaction عليها..

الذي سيتم االنتقال اليه عند idهو ال .. الذي يوضع بالرابط idال ) 3 scrollingلذلك وأنت تقوم بعملية ال ..عنده scrollوصول ال

*^_.. hrefوال idيقوم بالتبديل بنائا على ال



4 (data-offset : وهي مقدار قيمة البعد من أعلى أو من أسفل targetبنائا على ال .. actionللبدأ بتنفيذ ال ) موجب أو سالب(

targetتعني ابدأ من موقعك مباشرة لل 0و ... الذي تم تحديده ..بكسل من األعلى 10والحالة االفتراضية هي ..الذي تم تحديده

لنشاهد مثال..واآلن يجسد النقاط الرئيسية

ومن ثم تتبع النتائج .. وهذا أمر مهم جدا



.. methodواآلن بعد حديثنا عن الخصائص هناك أمر مهم وهو ال وهي مهمة جدا في حال spyمع ال refreshيمكنك استخدام الدالة

من عمليات الحذف أو اإلضافة DOMحدوث أي تغيير على ال ويكون ذلك عن طريق ال .. spyلذلك يلزمك تحديث ال ..

refresh ...شاهد المثال التالي :



eventولدينا هنا ال .. eventوأخيرا سنتحدث عن ال active.bs.scrollspy .. وينطلق هذا الevent عندما يصبح

) أي تم تنفيذه(العنصر نشط : شاهد طريقة كتابة الشيفرة البرمجية



مجانية


وهي ..وتوقفنا عند نقطة مهمة .. وأهميتها كثيرا tabsلقد تكلمنا عن ال والتنقل بينها وعرض محتوى .. tabكيف يمكننا فعال استخدام ال

وكان الجواب هو ...التي تم اختيارها tabبنائا على ال ...مخلتف ...باستخدام الجافا سكربت

التي تريد تفعيلها عند tabيامكانك أيضا باستخدام السكربت أن تحدد ال مثل ..تحميل الصفحة

عند النقر tabتفعيل ال

بنائا على tabتفعيل ال selector معين..



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

htmlأنني هنا أريد تفعيل العنصر بمجرد التحميل من خالل ال فهو fadeأما الكالس .. activeوكان ذلك عن ططريق الكالس ..

الزامية ألول inوال ..كالس يعطي نوع الختفاء والظهور التدريجي *^_... activeعنصر سيكون



هو خيار اضافي * ..^_يمكنك حذفه ..ليس الزامي fadeأيضا كالس ال ^_^حسب الرغبة

:فهنا نوعان eventأما بخصوص ال (1show.bs.tab : وتنطلق عند انطالق أمر العرض ألحد الtab(2shown.bs.tab : وتنطلق عندما يرى المستخدم محتوى الtab

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



هي وسيلة رائعة لوصف أو شرح أو ايصال معلومة tooltipال مثل ال eventللمستخدم عن وظيفة عنصر معين عند القيام ب

hover ... هذا الtooltip عبارة عنcss3 .. والbootstrap 3 وال يعتمد على صور ..يستخدم هذا الشكل.._^ *




تحتوي data-toggleكانت ال ..في المثال السابق ..هل الحظت * ^_.. tooltipالقيمة

وهي مسؤولة data-placementأيضا هناك خاصية جديدة وهي ^_^ tooltipعن تحديد موقع ظهور ال

*^_ tooltipفهو الذي سيظهر بال ..هنا titleأما ال



فهو تنسيق افتراضي tooltipبالنسبة للتنسيق الخاص بال : 1مالحظةوهذا أفضل لل .. ولتغيير التنسيق يلزمك تغييرها بنفسك..

performance ..

وتجهيزه يكون htmlبعد استخدام ال tooltipلتفعيل ال : 2مالحظة : شاهد المثال) initializedعمل ..(عن طريق سكربت

والحظ optionيمكن أن يأتي مجموعة من ال {}أن بين ال ..الحظ أقوم بتحديده حسب العناصر أو لعنصر selectorأيضا أن ال

*^_ tooltipمحدد يجب أن يظهر له ال



وتريد اظهار ال disabledاذا كنت ترغب باستخدام ال : 3مالحظة tooltip يجب عليك أن تقوم بانشاء ..بذات الوقتdiv ك

wrapper ومن ثم القيام بوضع الtooltip أما ال ..لهdisabled تكون للbutton .._^... *




triggerواحد لتفعيل ال selectorيمكنك استخدام : 4مالحظة التالي selectorوذلك عن طريق ال tooltipالخاص بكل ال

بالطبع لم أستخدمه في المثال ألن هناك تطبيقات كثيرة .. (^_^استخدم هذا ..لكن في الحالة االفتراضية .. P..:ومحتلفة أريد تنفيذها

)^_&الشكل



التي يمكننا أن Optionsلننتقل الى موضوع آخر وهو ال ..واآلن ^_^نستخدمها

1 (animation : هذا الخيار يقوم على استخدام الfade ... والحالة true or falseويمكن أن يكون اما ... trueاالفتراضية له هي

كل ما عليك هو جعل القيمة .. fadeلذلك اذا أردت ايقاف ال false ...

2 (delay : وهي خاصية تستقبل إما رقم وإماobject .. وتستخدم* ^_.. tooltipلتحديد الوقت الالزم إلظهار أو اخفاء ال

فيتم objectبينما ال .. hide, showالرقم لوحده يكون للخاصيتين )msالوقت بال : (شاهد المثال..تحديد المدة لكل عنصر على حدى



3 (html : وهي خاصية تحتمل قيمتانtrue أوfalse .. والحالة htmlوتستخدم لغايات طباعة أو تنفيذ ال ... falseاالفتراضية هي

لكن .. trueويتم ذلك من خالل جعل قيمتها .. tooltipداخل ال * ^_..عند استخدامها XSSعليك أن تحذر من هجمات ال




4 (placement : وهذا الخيار يسمح لنا بتحديد موقع الtooltip منمن placementويمكن اسناد القيمة لهذا ال ... خالل السكربت

.. functionأو من خالل ارجاع القيمة من stringخالل : شاهد المثالنص مباشرة

functionأو باستخدام ال وهو مفيد جدا في حال كان

الخ..هناك شرط معين



5 (Template : وهو الشكل اإلفتراضي لتركيبة الtooltip . ويكون: بالشكل التالي

يحتوي wrapperوال ..الشكل الذي بالصورة هو الشكل اإلفتراضي في حال أردت تغيير أي من الخصائص أو .. tooltipالكالس

شاهد .. templateيمكنك ذلك باستخدام ال ..اضافة عناصر ما : المثال



الشيفرة البرمجية موجودة داخل الجافا سكربت ..في المثال السابق .اآلن tooltipيتوافق مع ال ..لنقوم باعطائها تصميم معين ..واآلن ..

_^ ... *^_^الناتج



6 (title : وهو النص الذي سيخرج بالtooltip ويمكننا وضعه منلكن اذا ... “”والقيمة االفتراضية له هو ..خالل الجافا سكربت

هو الذي سيتم تنفيذه htmlفإن ال .. htmlك titleاستخدمت ال : شاهد المثال... ^_^



7 (trigger : هذه الخاصية الرائعة من الoption تقوم على تحديد tooltipالتي من خاللها سيظهر ال actionمجموعة من ال

ويمكن تحديد خيار واحد أو أكثر من خيار ويفصل بينهم ..الخ .. hoverأو clickمثل ال ...فراغ




التي يمكننا استخدامها مع Methodsننتقل الى نقطة جديدة وهي..واآلن : ويمكننا تقسيمها الى.. toottipال

Show, hide, toggle, destroy ...(1show : تعني اعرض الtooltip(2hide : تعني اخفي الtooltip(3toggle : تعني بدل الحالة الحالية ألخرىhide show(4destroy : وتعني قم بتدمير الtooltip ).. يخفي العنصر

..)enableأي لن يظهر مجددا اال اذا استخدم ال ..ويدمره ..(5Enable : هي خاصية يمكننا استخدامها إلعادة تفعيل الtooltip

)enable(-Re)بهذا المعنى * (^_التي تم تدميرها




الموجودة داخل الصفحة tooltipفي هذا المثال سيتم تدمير جميع ال _^ *



الخاصة eventوهو ال ..^_^واآلن الى آخر جزئية في هذا الموضوع وهي tooltipبال

(1show.bs.tooltip : ينطلق عندما ينطلق أمر الshow(2hide.bs.tooltip // // // // //hide(3shown.bs.tooltip // // تظهر الtooltip للمستخدم(4hidden.bs.tooltip // // عن المستخدم// // تختفي

: مثال



^_^بهذا نكون انتهينا من هذا الجزء والحمد ل ..واآلن

ويكون ذلك عن , وكما رأيت فإني استعرضت تغيير لبعض الخصائص, الخ..مثل تغيير اللون أو الخط .. cssطريق استخدام ال

الخاص بال templateكما يمكنك أيضا اضافة عناصر على ال tooltip ولكل أمر أهميته الخاصة ... كما رأينا..._^*

): انتبه جيدا لكل ما هو موجود(^_^ واآلن لنشاهد األمثلة السابقة



مجانية


لكنها تمتلك .. تقريبا tooltipخاصية مشابه لل Popoverال فمثال يمكنك من خالل .. tooltipخصائص أخرى تميزها عن ال

أن تقوم بوضع عنوان ومحتوى ويمكن أن يأخذ popoverال *...^_صورة

: مالحظاتفي حال ..( popoverإلستخدام ال tooltip.jsيجب تضمين ال ) 1

.. )أنك قمت بتضمين بشكل فردي ... popoverلل initializeيستخدم السكربت لعمل ) 2



^_^ popoverلنشاهد مثاال على طريقة استخدام ال .واآلن



popoverينطبق على ال tooltipحقيقة إن أغلب ما ينطبق على ال *_*لذلك سأمر على النقاط الجديدة فقط

..وهو النص الذي سيظهر كعنوان : titleال 1)..يوجد به المحتوى الجديد: contentال 2)(3data-trigger="focus” هذه احدى الtrigger التي يمكن

وهي الحالة االفتراضية clickولها popoverاستخدامها مع ال كمثال focusوهنا قمت باستخدام ال ... foucsأو hoverأو يفضل استخدامها مع ال focusلكن أرجو أن تنبه الى أن ال *..^_

<a> وليس مع الbutton .. وذلك ليكون متوافقا مع جميع بيئات...العمل



tooltipفهي ذاتها الخاص بال ..المتاحة optionأما بخصوص ال : مضافا اليها

1 (container : وهي خاصية تمكنني من اختيار الwrapper الذي windowوهو مفيد عند ال .. popoverال divسينتمي له ال

resize *_... * والخاصية اإلفتراضية له هيfalse .. ويمكنشاهد )..الذي سنضعه به wrapperيكون اسم ال ( stringوضع : المثال

wrap-1الحظ أن اإلضافة كانت على wrapperتحديد ال



2 (content : وهي الخاصية المستخدمة لوضعcontent عن طريق“”والقيمة االفتراضية هي data-contentالسكربت بدال من ال



الموجودة هي ذاتها التي تم شرحها بال methodأيضا فإن ال tooltip وهيhide, show, toggle, destroy..الخ




الخاصة eventوهو ال ..^_^واآلن الى آخر جزئية في هذا الموضوع وهي popoverبال

(1show.bs.tooltip : ينطلق عندما ينطلق أمر الshow(2hide.bs.tooltip // // // // //hide(3shown.bs.tooltip // // تظهر الpopover للمستخدم(4hidden.bs.tooltip // // عن المستخدم// // تختفي

وهو طريقة وضع صورة داخل ال ^_^ أحب أن أريكم أمر جميل ..اآلن popover *_.. *شاهد المثال :

رابط عادي نفس األمثلة والطريقة السابقة



..شاهد السكربت والنتيجة

^_^ نكون انتهينا من هذا الجزء أيضا ..بفضل من هللا تعالى ..واآلن destroyمالحظة اذا قمت بالضغط على : (لنشاهد جميع األمثلة السابقة

) -_-..popoverفلن يعمل ال



مجانية


واآلن سنرى أمر بسيط جدا وهو كيف .. سابقا alertلقد تكلمنا عن ال وكيف يمكننا اغالق * .. ^_ alertيمكننا استخدام السكربت مع ال

والفكرة البرمجية من استخدام ال ..عن طريق السكربت alertال close )علما أننا تطرقنا لها سابقا عن طريق ال

data-dismiss _^ ... ( *واآلن لنشاهد مثاال



data-dismiss="alert” تقوم هذه الخاصية على اغالق الalert ويكون * ^_الذي تتواجد به بشكل تلقائي عن الضغط عليها

...DOMمن ال alertمبدأ العمل الخاص باإلغالق هو حذف ال

: أما بخصوص الدوال التي يمكن استخدامها في1 ($().alert()2 ($().alert('close')

امكانية استخدام هذه األدوات فقط بإيضاح فكرة أنه يمكنك استخدام ...التي نستخدمها عادة data-apiالسكربت بدال من ال



: شاهد المثالdata-dismissالحظ عدم وجود

الحظ أن السكربت هو الذي سيقوم بعملية اإلغالق



: فهي alertالخاصة بال eventأما بخصوص ال(1close.bs.alert : وينطلق الحدث بها عند القيام باطالق حدث

اإلغالق (2closed.bs.alert : ينطلق هذا الحدث عن انتهاء االغالق لل

alert ..._^*


^_^لنشاهد جميع األمثلة ..واآلن



*^_ js buttonsواآلن الى موضوع جديد وهو ال

منها التعامل ..يتيح لك مجموعة من الخيارات الرائعة bootstrapال أو أن buttonفيمكنك من خالله تغيير حالة ال .. buttonمع ال

على radioأو checkboxتتحكم بمجموعة أو تقوم بعمل ال هذه األمور الرائعة يمكننا القيام ..^_^والتفاعل معها buttonشكل

^_^واآلن لنبدء .. bootstrapبها من خالل ال

اذا buttonمع ال ”autocomplete="offقم باستخدام : مالحظةال firefoxوالسبب في ذلك أن ال ..كان هناك تعامل مع السكربت

disablednessيدعم عملية and checkedness عندما*^_يتم تحميل الصفحة



: لنبدأ معا بأول جزئية وهي..واآلن ويقصد بها هي الحالة التي تتغير منها الحالة من *: ^_ Statefulال

ويكون ذلك يإضافة الخاصية , *^_الحالة الطبيعية الى حالة التحميل data-loading-text=“value...“ باإلضافة الى استخدام

.. button(“string').()$السكربت




$().button(“string') قمت ..هنا كما شاهدت في المثال السابقهي التي loadingفال .. resetو ال loadingباستخدام ال

ويقصد بها عملية اإلشغال لهذا (تخبر الزر بالبدء بعملية التحميلتفيد بانتهاء (فتعيد الزر الى الحالة األصلية .. resetأما ال ) .. الزر) ...loadingال

هذه ”data-complete-text=“valueكما أنه يوجد خاصية ويكون ذلك باستخدام .. الخاصية تنطلق عند انتهاء عمل معين

... button('complete').(this)$السكربت معها أيضا



Single toggle : وتستخدم هذه الحالة لتبديل التصميم الخاص بالزروإلستخدام هذه الخاصية ..والعكس activeمن الحالة العادية الى

تعني falseو ... ”aria-pressed="false or trueيلزمنا تعني الحالة trueبينما ) ..activeبدون (الشكل الطبيعي للزر

active .. ولكن اذا أردت عملtrue عليك أن تقوم بإضافة كالس: شاهد المثال* .. ^_معها activeال

active



Checkbox / Radio : لجعل الcheckbox والradio علىنقوم بإضافة ..قابلة للضغط btnشكل

data-toggle="button” الى الbtn-group _^ *

: الحظ المثال



لكن أريدك أن تنتبه ..فإن هذه الخصائص جميعها نعرفها ..اذا الحظت أحد ال checkedلنقطة مهمة وهي أنه في حالة أردنا أن يكون

checkbox أوradio .. يجب أن نقوم باعطاء كالسactive ارجع وانتبه الى المثال السابق واللون ...(الخاص به labelلل

*)_*النهدي

*^_لنشاهد جميع األمثلة معا ..واآلن



مجانية


الرائع يقدم لنا امكانية اخفاء pluginهذه ال .. ^_^يا سالم ^_^ وتكون ..وإظهار أحد أجزاء المحتوى باسلوب رائع ويستغل المساحة

^_^ .. accordionsعلى الحركة على شكل

: ^_^واآلن سأبدء بشرح مجموعة من الكالس المهمة 1 (collapse : هذا الكالس لوحد يستخدم إلخفاء المحتوى الذي بداخله

*)_*باألحرى عندما ترى هذا الكالس لوحد فالمحتوى غير ظاهر(2 (collapse.in : وهذا يشير الى الجزء الظاهر من المحتوى* ^_

يصبح ظاهرا inبوجود الكالس ..لذلك قلت في الكالس السابق لوحده 3 (collapsing : هذا الكالس تشاهده فقط حين عملية الcollapse

*_* collapseيضاف عند البدء ويحذف عند انتهاء ال ..



:واآلن لنقم بشرح بعض األمور المهمةداخل collabseالحظ أنه تم حصر الرابط والمحتوى لل 1)

wrapper وهو .. واحدpanel panel-default وتم تحديد parentمن خالل ال accordionالرئيسي بأنه parentال

له من collapseالخاص بالمحتوى المراد عمل ال idيتم تحديد ال 2)... ”href=“#idخالل ال

collabseهنا تكون قيمتها data-toggleال 3)وهذا ال يعني أنه ال يمكننا عمل panalلقد قمنا هنا باستخدام ال 4)

collapse مثال ال ..على أمور أخرىlist-group ..ظاهرة نقوم بوضع collapseفي حال كنا نريد أحد محتويات ال 5)

^_^ area=trueوال .. collapseمع inالكالس



: شاهد نتائج تطبيق المثال



^_^لكني لن أقوم بشرحها * ..^_..موضوعان بسيطان جدا ..بقي اآلن

لذلك ..أنه ال تختلف األفكار الخاصة بها على ما تم ذكره ..والسبب في ذلك ولتطور من .. لكي تقرأ بنفسك .. سأقوم بترك هذان الجزئان لك

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

..الموضوع *...._* Just Google Itوتذكر دائما مصطلح

: روابط الموضوعانhttp://getbootstrap.com/javascript/#carousel

http://getbootstrap.com/javascript/#affix


http://getbootstrap.com/javascript/�

http://getbootstrap.com/javascript/�


الذي تريد انشائه bootstrapليس بالضرورة أن يكون ال 1)responsive .. فيمكنك تعطيل ذلك بكل سهولة..

: يمكنك قرائة الموضوع من هنا-http://getbootstrap.com/getting

responsive-started/#disableكما يمكنك تغيير الخصائص اإلفتراضية وبناء األلوان الخاصة بك 2)

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

http://getbootstrap.com/customize/




http://getbootstrap.com/customize/�


مجانية


الحمد ل صاحب .. الحمد ل رب العالمين.. الحمد ل الذي بحمد تتم النعم الحمد ل ... الحمد ل العظيم العزيز الرحمن الرحيم... المن والفضل

الحمد ل رب العالمين ...حمدا كثيرا طيبا مباركا فيه

في النهاية ال أملك إال أن أقول أنني قد , إخواني وأصدقائي الرائعين لعلي , عرضت ما لدي وأدليت بأفكاري في هذه الدورة المتواضعة

وأخيراً ما أنا إال , أكون قد وفقت في كتابة هذه الدورة والتعبيرعنهابشر قد أخطئ وقد أصيب فإن كنت قد أخطأت فأرجو مسامحتي وإن

والحمد ل رب . كنت قد أصبت فهذا كل ما أرجوه من هللا عزوجلالعالمين



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

أي معصية قد يرتكبها أي دارس لهذه الدورة منة خالل ما تعلمه هنا وأن تتقبل ما هذا العمل .. وأشهدك أني ما فعلت هذا اال رغبة برضاك

وأن تجلعه رصيدا لنا في سبيل عز االسالم والمسلمين ودعم .. يا هللا وهللا على ما أقول ,, والمساهمة في إعمار األرض..المحتوى العربي

شهيد..اللهم آمين ...اللهم اغفر لي ما أعلم وما ال أعلم

اللهم اغفر لي ولوالدي وللمسلمين أحيائهم وأمواتهم إنك سميع عليم رحيم .غفور كريم



مجانية

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

Education