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

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

اسلاید 1: Bootstrap (components & plugins)ارائه دهنده : زهرا حیاتیمقطع : کارشناسی (ورودی 96)رشته تحصیلی : مهندسی کامپیوتر گرایش فناوری اطلاعاتشماره دانشجویی : 9625510491استاد راهنما : استاد کی نژادZahrahayati2017@gmail.com1

اسلاید 2: چکیده2میخواهیم در این آموزش یکی از محبوب ترین فریم ورک های طراحی ظاهری صفحات وب را که با html ، css ،javascript انجام می شود بررسی کنیم . Bootstrap (بوت استرپ) در واقع مجموعه ای است برای ایجاد و شخصی سازی قالب و ظاهر صفحات و نرم افزار های تحت وب که به صورت متن باز و رایگان عرضه شده و در دسترس است اما فریم ورک های دیگری مانند pure css هم قابل استفاده هستند اما بدلیل اینکه از هیچ گونه پلاگین های جاوا اسکریپت یا جی کوئری استفاده نمیکند و تنها از صفات و کلاس های css بهره میبرد به اندازه بوت استرپ کاربردی نیست. در این اینجا میخواهیم به بررسی برخی قسمت های components و plugins در بوت استرپ بپردازیم. Component ها کد هایی در بخش های مختلفی مانند : alerts ،progress bars ،media object و... دارد که کار طراحی واکنش گراء صفحات وب را آسان تر میکنند. Plugins ها در فریم ورک jQuery در بوت استرپ نقش مهمی در گسترش قابلیت های آن دارند و در این بخش به transition plugin و modal plugin نگاه دقیقی خواهیم داشت. امیدوارم که برداشت خیلی خوبی را داشته باشید. کلمات کلیدی : framework ، css ، jQuery ،component و plugin

اسلاید 3: 3 فهرستComponents1) Alerts2) Progress Bars3) Media Object4) List Group5) Panels6) Wells

اسلاید 4: 4Plugins7) Plugins Overview8) Transition Plugin9) Modal Plugin

اسلاید 5: در ابتدا میخواهیم درباره هشدار ها (alerts) و کلاس های بوت استرپ بحث کنیم که قابلیت هشدار دهی را فراهم میکنند. هشدار ها یک روش برای ارسال پیام به کاربر می باشند و همچنین پیام های متنی را برای اقدامات کاربر ارائه می کنند. ما میتوانیم یک آیکون close اختیاری را برای هشدار اضافه کنیم و برای بستن درون خطی (inline) از پلاگین Alerts JQuery استفاده می کنیم.اول یک هشدار پایه را با ایجاد یک تگ <div> اضافه کنیم و یک کلاس .alert و یکی از چهار کلاس متنی ( .alert-success , .alert-info , .alert-warning یا .alert-danger ) را اضافه می کنیم. حالا این مثال ساده نحوه کار را نشان می دهد :51) Alertsهشدارها

اسلاید 6: 6مثال هشدار ها :[2]

اسلاید 7: 7