پروژه مدیریت سیستم مدرسه با سی شارپ و sql server
فروردین ۲۱, ۱۳۹۶
نرم افزارهای موبایلی آموزش انواع زبان های برنامه نویسی
نرم افزارهای موبایلی آموزش انواع زبان های برنامه نویسی
اردیبهشت ۱۳, ۱۳۹۶

سورس کد سایدبار سایت با بوت استرپ

سورس کد سایدبار سایت با بوت استرپ

سورس کد سایدبار سایت با بوت استرپ

سورس کد سایدبار سایت با بوت استرپ ، ستون کناری یا sidebar یکی از بهترین ابزار ها در طراحی وب سایت برای نمایش امکانات سایت است که در اکثر مواقع در صفحات بخش ادمین برای جابجایی راحت ادمین بین امکانات و ویژگی های سایت استفاده میشود.

سورس کد ساید بار با بوت استرپ

برای ایجاد sidebar با bootstrap تنها کافیست رفرنس های بوت استرپ را به صفحه html خود اضافه کرده و با کدهای ساده ای که در ادامه آموزش خواهیم داد یک ساید بار ساده و کارا در سمت راست یا چپ بنا به سلیقه خود ایجاد میکنیم.

ما بوت استرپ را در پروژه خود نصب کرده و رفرنس های مورد نیاز را بدین صورت به قسمت head فایل html اضافه میکنیم به علاوه کدهای html که در نتیجه تمامی کدهای html بصورت زیر میشود

و کدهای جاوا اسکریپت که زمانی اجرا میشوند که مرورگر به سایز کوچکی درآید(برای مثال در موبایل اجرا شود) و دکمه menu-toggle#  ظاهر شود سپس براساس دستور جاوا اسکریپت نوشته شده میتوان با کلیک کردن برروی این دکمه ساید بار مخفی یا ظاهر کرد

و در انتها نیز کد های شخصی سازی Css

در نهایت یک ساید بار زیبا به طرح زیر خواهیم داشت

sidebar

sidebar

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *