آموزش بوت استرپ قسمت component و plugin مخصوص اراِئه دانشگاهی

صفحه 1:
Bootstrap (components & plugins) ارائه دهنده : زهرا حیاتی مقطع : کارشناسی (ورودی ‎)٩۶‏ ‏رشته تحصیلی : مهندسی کامپیوتر گرایش فناوری اطلاعات شماره دانشجویی : ‎۹۶۲۵۵۱۰۴٩۱‏ ‏استاد راهنم: استاد کی نژاد ‎Zahrahayati2017@gmail.com™‏ 

صفحه 2:
چکیده لعا ۳ میخواهیم در این آموزش یکی از محبوب ترین فریم ورک های طراحی ظاهری صفحات وب را که با ۴ 7 ۰۲55 ۱۲۲۳ انجام می شود بررسی کنیم . 800/51730 (بوت استرپ) در واقع مجموعه ای است برای ایجاد و شخصی سازی قالب و ظاهر صفحات و نرم افزار های تحت وب که به صورت متن باز و رایگان عرضه شده و در دسترس است اما فریم ورک های دیگری مانند 655 0۱1۲6 هم قابل استفاده هستند اما بدلیل اينکه از هیچ گونه پلاگین های جاوا اسکریپت یا جی کوثری استفاده نمیکند و تنها از صفات و کلاس های 255 بهره میبرد به اندازه بوت استرپ کاربردی نیست. در اين اینجا میخواهیم به بررسی برخی قسمت ‎SNES cole‏ 7 و 0۱۱9175 در بوت استرپ بپردازیم. ‎Component‏ ها کد هایی در بخش های مختلفی مانند : ‎alerts progress bars .media‏ ‎Object‏ و... دارد که کار طراحی واکنش گراء صفحات وب را آسان تر میکنند. ‎Plugins‏ ها در فريموركاا 0106[ در بونلستريهقشههمودر كسترشرقابليتهاىآ زدارند و در لين بخشبه ‎Modal plugin » transition plugin‏ نكاد دقيقىخولهيمدلشتلميدوايم كه بردلشتخیلی‌خوبی‌را دلشته بساشید. ‎ ‎ ‎ ‎ ‎ ‎y framework . css . jQuery ۰6۵۳۳۵0۳6۳۴ : ‏کلمات کلیدی‎ ‎ 

صفحه 3:
Components [aes 8 ‎Panels‏ )5 | ا ۳ ها ‎Media‏ )3 ‎ ‎ ‎ ‎ ‎ ‎i ‎q ‎© 

صفحه 4:


صفحه 5:
von در ابتدا میخواهیم درباره هشدار ها (21676) و کلاس های بوت استرپ بحث کنیم که قابلیت هشدار دهی را فراهم میکنند. هشدار ها یک روش برای ارسال پیام به کاربر می باشند و همچنین پیام های متنی را برای اقدامات کاربر ارائه می کنند. ما میتوانیم یک آیکون 6 اختیاری را برای هشدار اضافه کنیم و برای بستن درون خطى (©11110) از يلاكين ‎Alerts JQuery‏ استفاده می کنیم. اول یک هشدار پایه را با ایجاد یک تگ < 01۷ > اضافه کنیم و یک کلاس .216۲1 و یکی از چهار کلاس متنی (۵16۳-۷۷3۲۳۱۳9۰. , ۱6۲-1۴0 , کوععلاوتا6۲اه يا .-1671و 1 ©0270 ) را اضافه مى كنيم. حالا اين مثال ساده نحوه كار را نشان می دهد : 

صفحه 6:
‎Tues‏ <سعع و[ ‎pre ered‏ ‎Rone eee Cia eigen cco‏ ‎<strong>Success!</strong> This alert box could indicate a successful or‏ ‎Pesce Nae 00۰‏ ‎</div>‏ ‎<div class="alert alert-info">‏ ‎Perens at ee em CT ea emer here Macy‏ ‎Rees‏ 2۴0۳9۵۷۰ ‎pacts‏ ‎at sien Lr as‏ ۱ ا ‎Rec‏ ل 0 ا > وصنههادوممی ال 00 «حذة / > <“معومه6-0مع1ه غم16و"-وومكء 37ل ‎or‏ ا ل ا ا ۱ اا ال 00 > ‎</div>‏ ‏<رهوط/> ‎</html>‏ ‎ 

صفحه 7:
أخروجى كد قبلى را در اين جا که کلاس ‎alert‏ اصلی داخل قسمت های جداگانه ( تگ های 11©) در كنار كلاس هاى متنى ذكر شده كه ‎GW By plas ya‏ مشخصى دارند را به كاربر با عنوان ييام هاى مختلف نشان ميدهد. Alerts ‘Success! This alert box could indicate a successful or positive action, Info! This alert box could indicate a neutral invormative change or action. ‘Warning! This alert Dox could inaicate a vaming that might need attention. Danger! This alert box could indicate a dangerous or potentially negative action 

صفحه 8:
کلاس ها و قابلیت های دیگری هم برای کاربر دارند که در اینجا | به توضیح آنها می پردازیم. (Dismissal Alerts ) 33> 6 ‏هشدارهای‎ براى ساختن اين كلاس كه با قا بيغام هشدار به كاربر(ع105ح) استفاده همانند کلاس های دیگر 216۳5 در كنار كلاس ‎alert. ab‏ و یکی از كلاس هاى متنى كفته شده که داخل تگ < 01۷ > میگذاریم , کلاس ‎aalal ) alert-dismissible. algsdo‏ ميكنيم . برای مثال : 

صفحه 9:
در اینجا همان پیام هایی که برای کاربر داشتیم را با خاصیت حذف کردن توسط ۱ کاربر میبینیم : ‎Alerts‏ ‘Thea werent ih cass“oee anf daa cames~"aet is used ochse he ale tox علامت ضربدر با کلاس ۱ extra patting tothe close button, SS ‏که در‎ close <2> می باشد ایجاد شده که قابلیت حذف به ‎SS‏ nee anlar ‏کاربر می دهد.‎ [7 ‏سي ل‎ موه مود ههام نموم ‎bacesuls nate‏ بلطت ك1 لوقه در قسمت بعدی برای درک بیشتر دو يبام آخر را که با عنوان کلاس های .21671-0۷5۲1 و .16۲1-0۳96۲ ساخته شده اند را حذف ميكنيم و نتيجه كار را نمايش ميدهيم : 

صفحه 10:
Bootstrap, \ بعد از حذف دو پیام آخر : ‎Alerts‏ ‘The @ element with class="Close" and data-ismiss="ale fs used to close the alert box ‘The alert-<ismissible cass adds some extra paddling tothe close button Success! This alert box could indicate a successful or postive action Info! This alert box could incicate a neural informative change or action, همانطور که انتظار داشتیم فقط دو پیغام اول باقی ماندند . 

صفحه 11:
آلینک ها در هشدارها (۸۵۱6۲5 ‎(Links in‏ 2 bootstrap در این قسمت آخرین قابلیت کلاس های هشدارها را بیان می کنیم بدین صورت که برای ایجاد لینک داخل یک پیغام هشدار دهنده درون تگ <۵ > از کلاس .!31671-۱۲۱ داخل 01۷ ای که در مثال های قبل شامل کلاس های مختلف هشدار بود استفاده میشود که در پیام هشدار رنگ متفاوتی را به خود می گرد و با رفتن موس روی ‎Sed‏ حالت اشاره (001۳26۲) را گرفته و میشود : ۱ [2] 0 read this message ‘ 

صفحه 12:
" خلاصه کلی هشدارها (basic) ab yous alert. | .alert-success ‏یت متنی با رنگ ها‎ -alert-info 1 های مختلف ‎.alert-warning‏ ۳ ‎.alert-danger‏ ‎-alert-‏ ‎dismissible‏ _ .alert-link alerts — 

صفحه 13:
Bootstrap در اینجا به بحث نوار های پیشرفت پا 5۲5 655 میپردازیم . هدف از نوارهای پیشرفت نشان دادن این است که فرآیندهای مورد نظر در حال بارگیری یا انجام شدن هستند و یا اینکه عملی وجود دارد که با توجه به عناصر موجود در صفحه صورت می گیرد . نوار پیشرفت پیش فرض : برای ساخت یک نوار پیشرفت پایه مانند هر بخش دیگر یک تگ 6> با کلاس اصلی .0۳0۲655 اضافه می کنیم و در ادامه داخل تگ 01۷ فوق یک تگ 01۷ خالی با یک کلاس .9۲655 ۲ اضافه می کنیم. یک صفت 5۷۱6 را با عرض مشخص شده به عنوان یک درصد پیشرفت اضافه می کنیم. 

صفحه 14:
Bootstrap, Basic Progress Bar 46 ۲۷/۱۵۲۳ <۱۵ 500 " نشان می دهد که نوار رفته است. 

صفحه 15:
3 Progress Bar Height میتوان بجز ویژگی میزان روند نوار پیشرفت که از ۷۷10111 استفاده میشود. ارتفاع پا ضخامت نوار پیشرفت را هم با ویژگی ]16191۱ مشخص کنیم کافیست در قسمت 52۱6 دهی 6۱9/۱۲ را هم اضافه : > ‏ذل‎ ontainer"> 0 ‏ا‎ eaves 

صفحه 16:
a Progress Bar Height در اینجا نوار های پیشرفت داخل 01۷ های جداگانه دارای ارتفاع یا ضخامت های مختلف هستند که در کد اسلاید قبلی مشخص کردیم چه مقداری برحسب 0 باشند. 

صفحه 17:
cat Progress Bar Labels |« برای نوشتن متن داخل نوار پیشرفت میتوان هرچیز دلخواهی اضافه کرد : [2] Progress Bar With Label مثلا داخل 0/۷ درونی میزان پیشرفت نوار را که 1۷۰ است نوشتیم و روی نوارنشان داده شده است. 

صفحه 18:
3 ‏نوارهای‌پیشرفنتینگی‎ Colored Progress Bars | Bootstrap برای مشخص شدن بهتر و زیبایی نوارهای پیشرفت میتوان رنگ های مختلفی به آنها داد که در بوت استرپ چندتا کلاس معروف که نمایان گر رنگ های مشخصی می باشند را در کنار کلاس .0۲00655-123۲ میتوانیم اضافه کنیم زیرا به صورت پیش فرض نوار های پیشرفت آبی (0۲1۲3۲۷) هستند. در بوت استرپ چندین کلاس پس زمینه متنی ‎ya 45 py sls (Contextual background classes)‏ کدام نمایانگر رنگ های متفاوتی هستند : ‎ybg-danger ybg-success « bg-info .bg-warning‏ همچنین 09-05۳1 ۰ ‎bg-white .bg-secondary .bg-light‏ در مثال بعدی یک نمونه را باهم میبینیم : 

صفحه 19:
ی ‎Pees pea‏ 3 Bootstrap, any of the contextual color classes to change the color of the progress bar:</p 

صفحه 20:
3 Colored Progress Bars Bootstrap Use any of the contextual color classes to change the color of the progress bar: در اینجا نوارهای پیشرفت رنگی داریم 

صفحه 21:
5 ۳۲۵9۲69۹5 5۲۲1060 نوارهایپ یشرفولم 8 رپلجهای پیشرفت می توانند طرحی مانند راه راه داشته باشند که با اين شكل بار پیشرفت بسیار در بارگذاری ویدئو ها د | « برای ساختن این نوع بار پیشرفت هم مانند قسمت های قبلی در کنار کلاس 0۲09۲655-۰ ‎bar‏ كافيست كلاس ‎progress-bar-striped.‏ را اضافه میکنیم. در این داده شده است [2] 00 Se eee eee 

صفحه 22:
‎Striped Progress Bars‏ لق ‏در اینجا در بارهای پیشرفت میبینیم که کنار رنگارنگ بودن آنها ویژگی راه راه هم اضافه شده است. ‎ 

صفحه 23:
Bootstrap, < نوارهای پیشرفت میتوانند در کنار راه راه بودن متحرک هم باشند که کافیست ‎progress-bar-striped‏ در اینجا به نوار پیشرفت متحرک نشان داده مشود 

صفحه 24:
Bootstrap, 7 يك ور پیشرفت میتواند چند تکه ای رنگی باشد بدین صورت که كلاس 7 داخل تگ های 01۷ داشته باشیم که همه آنها داخل تگ 01۷ Multiple Progress Bars ‏سس سا‎ [2] 

صفحه 25:
أ خلاصه کلی نوارهای پیشرفت Progress Bars .progres ad ‏كلاس يايه‎ .Progress- pak .-Pprogress- animated | ys ‏كلاس نوار ييشراه0‎ .bg-info bg-danger, _.progress-bar- ‏کلاس راهلق099 5 کلاس های بک گزاند‎ “YY 

صفحه 26:
Components Jaen] Jager ١ 

صفحه 27:
2 | 3) Media Object ‏شی ء ۲۱6013 در بوت استرپ ۳ بیشتر به کار میرفت . این شی ء ها نوعی‎ « ‏شی ء انتزاعی هستند که برای ساخت انواع مختلفی از موّلفه ها ( مانند نظرات‎ ‏وبلاگ . توییتر ها و غیره) مورد استفاده قرار می گیرند و دارای یک تصویر‎ ‏در سمت چپ پا سمت راست در کنار محتوای متنی می باشند. هدف شیء‎ ‏ایجاد کد برای توسعه بلوک های اطلاعاتی به مراتب کوتاه تر‎ media است. کار با شی ء ۲16013 < دو فرم برای شیء 0۱6013 وجود دارد : ۱-.۲۱6012: اين کلاس اجازه می دهد که یک شی ‏ ۲۱603 (تصاویر . ویدئو و صوت) را به سمت چپ یا راست بلوک محتوا قرار داد. < ۲-.۲۱6012-115:اگر در حال تهیه لیستی باشیم که در آن آیتم ها ء بخشى از ليست غير ترتيبى باشند .از اين كلاس براى ليست نظرات يا مقالات استفاده مى كنيم. در اسلايد هاى بعدى مثال هايى از کاربرد شی ء ۵2 را باهم : 

صفحه 28:
0/۲ <2016»/3 رق1 مهن ‎ur adipiscing [2]‏ jolore magna aliqua. کلاس ۲۳۱۵012-000۰ درون یک Media Object Media ‏جداگانه بدنه اصلی‎ ۷ John Doe Posted on February 19, 2016 ‏شامل‎ eo ‏عايا که مب واهیم‎ میشود در اینجا توییتر شخصی را مايا مح ماک خاک رت سا 0 ‎tian‏ تقامل گس پروفانل سمش ‎sed do eusmod tempor incidunt ut hbor et dolore‏ magna aqua. چپ و پیام مورد نظر در کنار عکس 

صفحه 29:
Nested Media Objects John Doe Posted on February 19, 6 sed do elusmad tempor magna aliqua Jane Doe Posted on February 20 © Lorem jpsum dolor sit amet, consectetur elit sed do elusmod temper idunt ut labore et dolore magna aliqua. [2] 3 Nested Media oe لاس ‎“body‏ 7 و با Pitot startet Sr enna’ ممه عله مله سادمة «مممادم ‎Cerise mare:‏ ee poloren ipsum dolor sit anet, consectetur adipiscing elit, sed do Jetusmod tempor incldidunt ut labore et dolore magna aliqua.</p: tote cere! ‏مد‎ ‏اه مسفتفف ون مها فممست‎ Soe eer 

صفحه 30:
اصلی در کنارش قرار گیرد : Right-Aligned Media Image To tight-align the media image, adel the image after the media-body John Doe Posted on February 19, 2016 sed do eiusmed tempor incididlunt ut labore et dolore magna aliqua همچنین عکس پروفایل ۲۲۱6012 مبتواند سمت راست Bootstrap, بالاتر وبا پایین تر از متن Sea Roca eRe tas sectetur adipiscing elit, sed ei ‏وه داوم‎ /۲ ۳3 8 790 0 [2] 

صفحه 31:
Media Object Place the media abject to the tap, middle or at the bottom with the flex utilities, align-self* cl Media Top (RE ‏جمد‎ ipsum dolor st met consectetur apscing et eo eis tempor ncididunt ut labore et ue magna Lorem ipsum dolar sit amet, con do tetur adipiscing elit, sed magna bore et dol ssmod tempor incididunt ut Lorem jpsum dolor sit amet, consectetur adipiscing elit sed do elusmod tempor incididunt ut labore et dolore magna aliqua 0 cst ‎Cee es ee Oe eo aed‏ موه ‎utilities, align-self-* classes:</p><b‏ ‎on ‎caren ‎1 Caceres eee ‎eiusmod tempor incididunt ut labore et dolore sagna aliqua.< Loren ipsum dolor sit amet, consectetur adipiscing elit, sed do Steet trate rere sneer re rene, ipsum dolor sit amet, consectetur adipiscing elit, sed do Seca a eset etn re riers 

صفحه 32:
‎١ 1 Media Middle‏ و ‎sitamet, consectetur adipiscing elt sed ‎ ‎‘orem ipsum di do elusmod tempor incididunt ut labore et dolore magna Biss rem Coty is ‏ماد‎ ‏اكه ومععذمققة عن رمه عل «ملدة سادمة سعمما.‎ 0 tT Se ‏ی رخفله ا ا‎ 0 eiusmod tenpor incididunt ut labore et dolore magna aliqua.</p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tenpor incididunt ut labore et dolore magna aliqua.</p> ‎ ‎ ‎Lorem ipsum dolor sit amet, consectetur adipiscing elt s do ‎ ‎ ‎jsmod tempor incididunt ut labore et dolore magna ‎ ‏موه ‎sit amet, consectetur adipiscing lt sed do elusmod tempor inca re et dolore magna ‏موه‎ ‎ ‎‘orem ipsum di idunt uta ‎ ‎[2] ‎Media Bottom ‎orem ipsum dolor sit amet, consectetur adipiscing elt, sed ‎ ‎3 incididunt ut labore ‎ ‎iusmod dolore magna ‎ ‎re acce! aliqua, eee cee se eee eet eee ‏دم/>.تنوثلة قدوده عمملمة عه ودمطف1 عن عمنف 1ق لم1‎ Lorem ipsum dolor sit amet, consectetur adipi ipsum dolor sit anet, consectetur adipiscing elit, sed do do eiusmod tempor incididunt ut labor te Re et eta eae eee eee say aliqua ‎ ‎cing eit, s dolore magna ‎ ‎ ‎Lorem ipsum dolor sit anet, consectetur adipiscing elit, sed do ‏ا ا‎ OC cer ۶ Lorem ipsum dolor sit amet, consectetur adipiscing el, sed ‎do eiusmod tempor incididunt ut labore et dolore magna ‏واه‎ ‎ 

صفحه 33:
همانطور دیدیم در کلاس ‎Media-object. pbs ole US Media Lol‏ در 3 تگ ۳09 برای عکس ‎Se 225 ww Gly Media-heading.. bls n‏ پیام در ۳۳۳۳ | تگ های 01 تا 06 و.۲۱60[2-00017 برای متن اصلی مدیا به کار می روند. Media Object (Js aos \ ١ 1060113 ‏كلاس إصلى‎ -Media-list Media -media- Object heading -media- ۲ bReYia-object 

صفحه 34:
كروه ليستى لعا شد. گروه لیس خش 63105 يا همان كارت ها در بوت استرپ ۴ هستند که برای ایجاد یک 4 کلاس 5-9۲0۱(0۰]| را به عنصر الا اضافه ‎list-group-item. o¥‏ 4 ال زیر یک نمونه ساده گر به صورت لیستی می با نی ن صورت عمل میکنیم : مان یک لیست ایجاد شود یم تا موارد دلخواه لیست را سيسمن 15 بنویسیم. Basic List Group First item Second item 0 Thi em [2] 

صفحه 35:
۵ 9381 Adding badges to List Group | “ ما ميتوانيم مؤلفه هاى نشان (©300) را به هر آيتم گروه لیستی اضافه کنیم. این موّلفه ها به طور خودكار در سمت راست قرار مى كيرند. براى انجام اين كار كافيست <50231 6 -< ۱255" >را در داخل عنصر <|| > اضافه كنيم : ‘cul class = “List group"> <li class ~ “List-group-iten"»Free Domain lane Registration</1i> ¢li class = “List-group-iten" Free Window Space hostingé</1i> Free Domain Narre Registration List-group-ites"sllumber of Tuages</1i> Free Window Space hosting <li class = "List-group-iten"> <span class ~ “badge” »Neu</ span> Number of mages 207 support <M 247 support <II class = "List-group-Lten"»Renewal cost per yearc/L> Renewal cast pores <li class = “List-group-iten"> Disocunt Offer <span class ~ "badge" sNen</'span> Disocunt Offer nis ]11 

صفحه 36:
۱ حالت فعال یا ۸1۷6 آیتم های گروه لیستی را اگر بخواهیم یکی از آیتم ها به صورت پیش فرض مشخص شده باشد ‎OT gb‏ گزینه را فعال کنیم بدین صورت که کلاس .3611۷6 را به هر کدام از عناصر ‎li‏ ‏كه ميخواهيم در كنار كلاس 6۳7][-9۲0۱(0-]۱5 اضافه می کنیم : Active Item in a List Group كنا ة مذ منز 4 ‎Second item‏ يا لاا ‎Third item ‎ ‏]2[ ‏در مثال بالا آیتم اول فعال و به رنگ آبی درآمده است به صورت پیش فرض گزینه انتخابی لیست می باشد 

صفحه 37:
Bootstrap, ۱ < با استفاده از نگ های <3> به جای آیتم های لیست . ما میتوانیم به گروه های لیست | لینک دهی کنیم که با رفتن موس بر روی آیتم ها هر کدام۱0۷۲] میشوند. برای انجام اين كار بايد از </1أ0 > به جاى عنصر < الا > استفاده شود : re Me cs ccs regs List Group With Linked Items First item ان 5 ‎Third iten</a‏ jecond item 

صفحه 38:
‎Bootstrap \‏ < برای غير فعال كردن اي كروه يس اس 00 استفاده میشود که با رفتن موس روی آن آیتم م 9 ‎ ‎ ‎ ‎ ‎List Group With a Disabled Item ‎The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect ‎Disabled item ‎ ‎item ‎ ‎[2] ‎Third item ‏فقط گزینه آخری فعال است و رنگ آبی دارد 

صفحه 39:
Bootstrap, ۱ « برای از بين بردن حاشیه دور گروه لیستی از کلاس (۷51]-5-9۲۵۷۱۵[! در کنار کلاس ۱۱5-9۲0۵ داخل عنصر <الا> اضافه می کنیم: ‎Flush / Remove Borders‏ Use the .ist-group-fush class to remave some borders and rounded First item nee etc rae first idem ioe ‏للكت‎ ‎second item Third item Fourth item 

صفحه 40:
Bootstrap, #4] ium tog,5 Horizontal List Group \ < همچنین میتوان یک گروه لیستی بصورت افقی ایجاد کرد با اضافه کردن ‎mais Jol list-group GwlS JUS 4» list-group-horizontal. jus‏ <ألا > مانند مثال زیر : Horizontal List Groups Firstitem Seconditem —Thirditem Fourth item 00 Third iten</1i ‏ی‎ 

صفحه 41:
3 ‏كع ودين‎ Contextual classes’ ت که در داخل ‎ight si5‏ 5۱1655 و غ ‎List ۳ With Contextual Classes Success item secondary item ‎info item 0 ‎| ‎Danger item‏ 1 لخاد" :ا ‎‘Warning iter ‎[2] Datkitem 

صفحه 42:
a میتوان آیتم های رنگی بصورت لینک شده در گروه های لیستی داشت یعنی مانند گروه های لیستی که آیتم های آن لینک شده بودند : Success iter Secondary item Info item Warning item Danger item Primary item cdl list-group-item-action ‏كلاس‎ Derk item ‏الینک هارا از بين میبرد و با‎ 6 ‏رفتن موس روی آیتم ها پررنگ تر ميشوند‎ 

صفحه 43:
List Groups (IS ‏أخلاصه‎ آیتم دلخواه مشخص ی لینک شده با رفقتن موس روی آنها ‎‘sid‏ ‏آیتم های لینکی غیر فعال از بين بردن برد دور ليست كروه ليستى افقى كلاس 9۲0۱10-أ5ا. مع م نامر وهاي ‎.list-group-item‏ ‎ag’ Group-item-‏ ‎action‏ = .list-group-item isabled : l2&-group-flush .list-group- horizontal _ _list-group-item- success .info ... 

صفحه 44:
له وه Components [nes] [ages ‏سر‎ ۶ 

صفحه 45:
كا پنل ها ‎Bootstrap‏ 9 در این قسمت میخواهیم درباره پنل ها که بيشتر در ورژن ۳ بوت استرپ کاربرد داشتند صحبت کنیم. موّلفه های پنل (03۱۱61) زمانی استفاده می شوند که بخواهیم موّلفه ‎DOM‏ ‏خود را در یک 30 قرار دهیم.برای ایجاد یک پنل پایه ای , کافیست کلاس 031۱6۱۰ را به عنصر <01۷> اضافه کنیم کلاس پیش فرض .03061-0673۱ را به این عنصر اضافه می نماییم مانند مثال زیر: Basic Panel A Basic Pane! كلاس 03۳61-0007۰برای محتوای داخل ‎Je DOX‏ تعریف ميشود. 

صفحه 46:
درج عنوان در پنل لا < دو روش برای افزودن عنوان پنل وجود دارد : * از کلاس .03۱6۱-63017 استفاده می کنیم تا به سادگی یک ظرف ۱6201۳9 به پنل خود اضافه کنیم. * از هر کدام از تگ های <6>-<۱1> با یک کلاس .03۱6-18 استفاده می کنیم تا یک عنوان پیش فرض را اضافه کنید: ‎ae‏ div class = “panel-heading"> Panel heading without title sav Panel heading without ile ‘diy class = “panel-body"> Panel content Panel content <a </div> Panel With ttle ۳ Panel With title Panel content 1 11 ل 

صفحه 47:
" در مثال قبل دو پنل جدا دارای عنوان و محتوا بودند که در باکس های متفاوت | مشخص شده اند. Footer 8۵۲6 ‏«پنل با‎ | Footer | “7 ماصتوانيم ‎Gs (ly Seb) La Footer‏ بنل اضافه کنیم. برای اين کار متن ثانویه را در ‎PN Panel Footer‏ : 0 crear Panel Heading meee ‎odes‏ ل ‎Panel Content ‎Panel Footer ‎[2] ‎ 

صفحه 48:
براى سات تيك بعلي بار مالي Panels with Contextual Classes 

صفحه 49:
3 ‏ينلباجدولها‎ Panels with Tables | Bootstrap برای ایجاد یک جدول بدون حاشیه درون یک پنل . از کلاس .121016 در داخل پنل استفاده می کنیم. اگر هیچ تگ < 01۷ > حاوی کلاس 03۲6۱-000۷۰ وجود نداشته باشد در اين Product صورت . آن موّلفه از هدر پنل به جدول انتقال می یابد. Panel title This isa Basic panel [1] Product A Product 6 diy class = “panel panel-deraule”> <div class “ponel-heoding"> hi class = “panel-title”>Panel titdec/h3> yaw <div class = “panel-body"> This is 2 Basic panel </i> <table class = “table"> <thoProguct/th>: <choPrice </th> </tr> <tasProduct </td> <tds200c/ta> > جر دنهد ۱ > جم ممعي ور 

صفحه 50:
خلاصه کلی از ‎Panels‏ 8 کلاس پیش فرض و پایهپنل 0 default كلاس محتواى اصلی پنل ‎-panel-body‏ ‏کلاس عنوان پنل و ع -اعموم. ل واعموم .panel- 5 ‏ب‎ heading كلاس ياورقى ينل ‎.panel-footer‏ .panel-danger ».panel-dark ‏كلاس هاى متنى برای پس‎ . ‏سم زمینه ينل‎ 

صفحه 51:
‎Wells‏ ع ‎Bootstrap, ‎ ‎ ‎ ‏\ ۷۷65 ها نوعی01۷ درین0۲۱]۵16) ها هستند که باعشیشوند محتویات‌رین0۱۷ مااز کنایه ها فاصله مناسبی‌را بسگیرد و یسکا00۲06 منحنی‌واریرا به آنقسمتاا0 ما میدهد لما لیرک لاس ۷۷61۱ در نسسخه ۴ بسونلسترپب‌سیار کمتر لستفاده ‏میشود :محتولی ‎Well ‏۶ ۵51( [1ع ‎asic Well ‎[2] ‎ ‏استفاده از کلاس ۷۷6۱۱ یک شکل آراسته و فاصله استانداردی از حواشی را به محتوای درون 01۷ ما بخشیده است 

صفحه 52:
Bootstrap برای تعیین كردن ضخامت و اندازه 0۷ ها میتوان در کنار کلاس .۷۷۵۱۱ دو کلاس .۷۷61-5۲1۱ برای اندازه کوچک تر از حد معمول و کلاس ۷۷6۱۱-19۰ برای اندازه بزرگ تر از حد معمول را اضافه کرد : Well Size :57211 ۷/۷ ‘Small Well ۱۱0۲۳۵1 ۰ ‏كا‎ SO Cas ‏کلاس .۷۷۵۱۱ خالی اندازه نرمال را‎ Large Wet دارد [2] 

صفحه 53:
| خلاصه نویسی ۱۷6/5 مت کلاس|صلی‌پ‌ایه ۰۷۷6۱۱ wells = — well-sm برای سایزبندی ‎.well-lg‏ 

صفحه 54:
۳۰ ae / | 1) Alerts J |] عي 

صفحه 55:


صفحه 56:
5 بالفزینه ها ۵ * 800151۲۵0 همرلد با ۱۲ پسلاگیر0(6۲۱)ز لسنکه ویژ گی‌ها را گسترش‌می‌دهد و می‌تسولند تسعامل‌سیشترورا بسه ساینشم لضافه کند بسرلی‌شروع کار بسالفزونه های ۵ 3۷۵50۲10[ , نیازی‌نیسنکه یکقوسعه دهنده پسیشرفته 0۷5010[ باشید. بالستفاده از ۸۵۳۱ ۲12 8001561۲30 می‌تولن(کثر لفزونه هارا بدوننوشتنيكخط كد فعللكرد. < افزونه های بوت استرپ به دو شکل در سایت شما موجود است : ‎)١ “‏ به صورت جداگانه - با استفاده از پرونده های شخصی * .5[ بوت استرپ. برخی از پلاگین ها و موّلفه های 60۲۳000۳6۳56 255 به پلاگین های دیگر بستگی دارند. اگر افزونه ها را به صورت جداگانه وارد کردید . مطمئن شوید که اين وابستگی ها را در اسناد پررسی کنید. < ۲) یا کامپایل شده (همه به یک باره) - با استفاده از 0.[5 60015613 يا ‎minst‏ ‏5115 . سعى نكنيد هر دو را وارد كنيد زيرا هر دو ‎bootstrap.js‏ ‏5ز.000151۲30.۳۳01۳ حاوی تمام افزونه ها در یک فایل واحد هستند. 

صفحه 57:
همه افزونه ها به /001617)[ بستگی دارند. بنابراین 00016۲۷[ باید قبل از پرونده های پلاگین موجود باشد. ۱ #ویژگی های داده ‎P|‏ همه پلاگین های 5001507۵0 با استفاده از ۵۳ 0312 موجود قابل دسترسی هستند. از اين رو . برای فراخوانی هر یک از ویژگی های پلاگین . نیازی به درج يك خط جاوا اسکریپت ندارید. « در بعضی شرایط ممکن است مطلوب باشد که این قابلیت ۸۳۱ 2312] خاموش شود. اگر لازم است ۸۳۱ 2212 را خاموش کنید . می توانید ویژگی ها را با اضافه کردن خط زیر ]3۷35۲10[ لفو کنید $(document) .off(".data-api') 

صفحه 58:
ا برنامه نویسی ‎oot API‏ <« توسعه دهندكان 800155113 معتقدند كه شما بايد بتوانيد از همه افزونه ها صرفاً از طریق ۸۵۸۳۱ 3۷3561101[ استفاده کنید. همه رابط های برنامه کاربردی عمومى روش های منفرد و قابل زنجیره ای هستند و به عنوان مثال مجموعه عمل شده را برمی گردانند: ی ۱0 < همه روشها یک شی 0010۲05 اختیاری . رشته ای را که یک روش خاص را هدف قرار می دهد یا هیچ چیز را قبول نمی کنند (که یک پلاگین را با رفتار پیش فرض شروع می کند) همانطور که در زیر نشان داده شده است : // initialized with defaults $(“fmytodal”) modal () Jf initialized with no keyboard $("HmyModal").modal({ keyboard: false }) // anitializes ond invokes show innediately $("timyodal) modal (“show ) 

صفحه 59:
‎Events |‏ رویداد ها ‏* 800151۲30 رويدادهاىس فارشىرا برلئإكثر لقدلماتعنحصر به فرد يلاكين فرلهممىكند به طور كلى ليروقايع بسه دو شکلدر می‌آیند: < شكل مصدر - اين در ابتداى يك رويداد تحريك مى شود. به عنوان مثال. نشان دادن رويدادهاى غير منتظره قابليت جلوكيرى از ييش فرض را فراهم مى كند. اين امكان متوقف كردن اجراى عملى قبل از شروع آن را فراهم مى كند. ‎$(‘#myModal').on("show.bs.modal', function (e) {‏ ‎stops modal from being shown‏ /{ ‎if (!data) return e.preventDefault() ‎» ‏فرم مضارع گذشته - این با تکمیل یک عمل تحریک می شود 

صفحه 60:
‎Transition Plugin‏ لعا |“ افزونه انتقال یک جلوه انتقال ساده را فراهم می کند | « اگر می خواهید این قابلیت پلاگین را به صورت جداگانه در آن بگنجانید . يك بار در كنار | ساير پرونده های 5[ به .1۲۵۳21610۳ نیاز دارید. در غیر این صورت . همانطور که در ‏فصل بررسی اجمالی افزونه های بوت استرپ ذکر ۵ شد . می توانید 0001561730.[5 یا ‎minst bootstrap.min.js‏ ,201421 ‎gtranzEnd oe et ne Transition.js‏ همچنین کش ‎fee‏ سار ‎ ‏مك ‏از موارد استفاده كنيد « چند نمونه از افزونه انتقال هستند : کشویی یا محو شدن در حالت های مختلف 

صفحه 61:
<* ۲001 یکی نجره کودکلسنکه ریپ نجره لصلیآنلایه بسندی‌شده لستبه طور معمول هدفن‌مایش حتوا از یکمنبع جدلگانه لسنکه می‌تسولند بدین‌خارج شدراز پسنجره والد . مقداری‌تعاملدلشته بساشد. پسنجره هایک ود کمی‌تسولنند لطلاعات تسعاملبا موارد دیگر را ارلئه دهند اگر می‌خولهید لیرقٌابلیتیلاگین | به صورنجدگانه وارد کنید. به ۱00۱.5 نیاز خولهید دلشت “« موارد استفاده: < می توانید محتوای پنهان افزونه ۱003۱ را تغییر دهید ‎Via data attributes — Set attribute data-toggle = “modal" ona‏ ‎controller element, like a button or link, along with a data-target =‏ ‎“#identifier" or href = "#identifier" to target a specific modal (with the‏ ‎id identifier") to toggle.‏ > Via JavaScript — Using this technique you can call a modal with id = "identifier" with a sinale line of lavaScript $(‘#identifier' ) modal (options) 

صفحه 62:
چندین مثال از 00 : <hdsExanple oF creating Hodals ‏ومع موف‎ Xoytton class ~ "hte ben prinary bon-Ie" data-toggle ~ “nodal” data-taree قبل از کلیک کردن : زوق ذكنة ا ‘diy class ‏"مم4 لتقف" د‎ id - “modal” tabindex = 1" role = “alalog” Example of creating Modals with Twitter {rla-labelledby = “wodalLabel” aria-hidéen = “trws"> Bootstrap ‎clase = "podal-eilog™>‏ قلقم ‎‘div class ~ "acdal-content">‏ ‎ ‎Seer ‎ ‎‘ely class ~ *wodal-neader"> ames ‏مس‎ ‎hd class ~ “nodal-title” 1g - “medalLabel"> 0 ‏مه ‎edi class= “node body" This Modal title ‘dd sone text here ‎see ‘Add some text here ‏بعد از کلیک روی دکمه 

صفحه 63:
همانطور که دیدیم طراحی صفحات وب با زبان های نشانه گذاری ۱۲۲۳۱,۲55 و فریم ورک محبوب آن 001561730 کار را برای کاربران بسیار منعطف کرده است. استفاده از کلاس های مربوط به 60۲۳۵0۲6۴ که شامل 03۲ ۵16۲5,۲۵9۲655,... ميشدند امکان طراحی واکنش گراء را ساده تر کردند و تنوع کلاس های مختلف در آن یکی از دلایل محبوبیت بوت استرپ شده است. همچنین دیدیم استفاده از پلاگین های ‎JQUETY‏ ‏بکار رفته در این فریم ورک قابلیت گسترش بوت استرپ را فراهم کرده است. استفاده از متدها و ]2۷61۱ ها در کد های بوت استرپ که به صورت آماده بودند لذت طراحی با فریم ورک مفید بوت استرپ را بیشتر کرده است. 

صفحه 64:
منابع [1JTeam@tutorialspoint,2020, Reterieved from ‏منبع اصلى ع‎ https://www.tutorialspoint.com/bootstrap4/index.htm \ [21Team@W3schools,2020.Reterieved from https://www.w3schools.com/bootstrap4/default.asp [s1team@JavaTpoint,2020, Retrieved from https://www.javatpoint.com/bootstrap-tutorial [4] Matt Lambert, “Learning Bootstrap4 “ ,Packet publishing , | 24 edition , 2016 ١ [5] Alan Forbes, “The Joy of bootstrap :A smart way to learn the world’s most popular web framework