آموزش Bootstrap

affix & persian bootstrap Bootstrap

سلام
در جلسه بیست و دوم bootstrap به بخش آخر جاوا اسکریپت می پردازیم.ابتدا به سراغ modal رفته و کلاس های
modal
modal-dialog
modal-content
modal-header
modal-title
modal-body
modal-footer
modal-lg
modal-sm
و data-dismiss=”modal” را برسی می کنیم و نحوه ی برخورد و inspect کردن کلاس ها را بیان می کنیم.پس از آن به سراغ crousel رفته ویک crousel ریسپانسیو در هدر پروژمان ایجاد می کنیم و کلاس های
carousel
slide
carousel-indicators
active
carousel-inner
item
carousel-caption
left
right
carousel-control
و data-ride=”carousel”,data-slide-to,data-slide را برسی می کنیم و به شرح تغییرات ایجاد شده در پروژمان می پردازیم . سپس به سراغ مبحث affix در بوت استرپ رفته و یک menu زیبا و انیمیشنی به کمک این پلاگین طراحی کرده و به بررسی تمام نکات و کلاس های آن می پردازیم.
در پایان در یک ویدیو تکمیلی بوت استرپ فارسی را مطرح می کنیم.

The Affix Plugin
The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page.
The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.
Example 1) An affixed navbar:

دمو پروژه

این پروژه به نحوی طراحی شده است که تمام پیچیدگی های مباحث بوت استرپ را شامل شود و بیشتر کامپوننت ها در آن استفاده شده است به طوری که کمترین css در استایل دهی آن به کار برده شده و کاملا مبحث طراحی ریسپانسیو را پوشش می دهد.

مشاهده کل دوره