جشنواره تخفیف‌های تابستانی به مدت یک هفته! کد تخفیف ۲۵% : SUMMER 

4 قالب برای گالری عکس در بوت استرپ

پنج شنبه ۰۷ تیر ۹۷ توسط محمدسینا مرادی

در این مقاله که فکر می کنم برایتان خیلی جذاب باشد می خواهیم به شما 4 قالب عالی برای گالری عکس هایتان در بوت استرپ 3 معرفی و تحویل دهیم. نکته جالب تر که باید به عرض شما برسانم این است که این قالب ها کاملا رایگان هستند و می توانید از آنها با خیال راحت استفاده کنید.این قالب ها علاوه بر این ویژگی ها کاملا رسپانسیو و فوق العاده آسان برای استفاده هستند ، تنها کافیست کپی و پیست کنید (*:

می توانید دمو را مشاهده کنید و یا فایل این پروژه کوچک بوت استرپ را دانلود کنید.

و اما بریم سراغ قالب ها...

چهار قالب ما از گرید بوت استرپ 4 برای لایه هایشان استفاده می کنند. HTML نیز کاملا با فریمورک سازگار است و همچنین از شیوه های توصیه شده استفاده می کند. برای استایل دهی ما از <ol> های خوبی استفاده کرده ایم.

هر قالب دارای افکت هاور اختصاصی می باشد که باید بخاطر زیبایی و کارکرد خوب آن از افزونه (پلاگین)  baguetteBox.js متشکر باشیم. کتابخانه های فراوان دیگری نیز برای Lightbox موجود هستند که ما آن را انتخاب کردیم.(اگر چه هیچ dependencies برای آن موجود نمی باشد)

چگونگی استفاده از قالب ها

ابتدا دوباره به دمو نگاهی بیندازید و قالب انتخابی خود را با دنبال کردن مراحل ساده زیر بسازید:

1. اول از هر کاری باید فایل پروژه را از بالا یا از این لینک دانلود کنید و از حالت فشرده خارج نمایید.

2. زمانی که این فایل را از حالت فشرده خارج کردید باید برای هر قالب یک فایل جداگانه ببینید و به علاوه یک فایل به اسم images که عکس ها درون آن جاسازی شده اند.(دانلود شده از سایت خوب Unsplash) قالب خود را انتخاب و فایل index.html را اجرا کنید.

3. کد HTML را در پروژه خود پیست کنید و مطمئن شوید صفحه شما از Bootstrap 3 استفاده می کند.

4. کد های CSS در یک فایل جداگانه نوشته شده اند یا به آن لینک دهی کنید یا همانند HTML پیست کنید.

5. برای اضافه کردن افکت Lightbox ، سی اس اس و جاوا اسکریپت  baguetteBox را اضافه نمایید و آن را با اضافه کردن اسکریپت تگ ;('baguetteBox.run('.tz-gallery) مقدار دهی نمایید.

رایگان برای استفاده

این پروژه برای استفاده شخصی و تجاری کامل رایگان است.

برای حمایت از ما لطفا نظرات ، انتقادات و پیشنهادات خود را در قسمت دیدگاه ها با ما به اشتراک بگذارید همچنین لایک کردن شما باعث می شود که ما مقاله های زیادتری را برای شما آماده کنیم.

گالری انتخابی تان پر از عکس های زیبا و کاربرپسند :)


کلیدواژه: بوت استرپ گالری بوت استرپ گالری عکس زیبا قالب گالری بوت استرپ

منابع: tutorialzine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.