۱۰ هدر و فوتر زیبا برای فریم‌ورک بوت‌استرپ

۱۰ هدر و فوتر زیبا برای فریم‌ورک بوت‌استرپ

Beautiful Bootstrap Headers

 

هدرهای زیبا برای بوت استرپ

 

در این مقاله قصد داریم مجموعه ای از هدرهای زیبا بهمراه منو (header + navigation menu) که توسط فریم ورک بوت استرپ نسخه ۳ طراحی شده اند را معرفی کنیم.  تمپلیت هایی که در این مقاله معرفی می شوند براحتی در وب سایت های شما قابل استفاده می باشند.

 

هدرهای بوت استرپ (Bootrap Headers):

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

 

هدرها

 

هدرهایی که در این مقاله معرفی می کنیم می توانند در یک قالب موجود و آماده درج شوند و حتی می توانید در صورتی که با html و css و bootstrap آشنایی دارید، این هدرها را ویرایش و شخصی سازی کنید. در برخی از هدرها، از فونت های گوگل (Google Fonts) و آیکون های glyphicon پیش فرض بوت استرپ استفاده شده است.

 

bootstrap headers

 

نحوه استفاده (How to Use):

برای استفاده از هر کدام از قالب های هدر معرفی شده در این مقاله، فقط کافیست مراحل زیر را انجام دهید:

۱- سورس کد ۵ هدر آماده بوت استرپ را دانلود کنید و extract کنید.

۲- فایل .html هر کدام از هدرهایی که برای قالب وب سایت شما مناسب تر می باشد را توسط یک ادیتور باز کرده و کدهای آن را در قالب خود درج کنید. پس از دانلود دموی این مقاله، ۵ هدر با نام های زیر در فولدر وجود دارند:

  • Basic-header.html
  • Header-blue.html
  • Header-icons.html
  • Header-nightsky.html
  • Header-picture.html

 

۳- استایل های مربوط به هر یک از هدرها، در فایل مجزایی به نام همان هدر در فولدر assets/css موجود می باشد.

این هدرها هیچگونه حق کپی رایتی ندارند و براحتی می توانید در پروژه های شخصی و شرکتی خود استفاده نمائید.

 

فوترهای زیبا برای فریم ورک بوت استرپ

Fantastic Bootstrap Footers

فوترهای زیبا برای بوت استرپ

 

در مقاله قبل، ۵ هدر زیبا از فریم ورک بوت استرپ را معرفی کردیم و سورس آنها را برای دانلود قرار دادیم. در این مقاله قصد داریم ۵ فوتر آماده-برای-استفاده (ready-to-use) تحت فریم ورک بوت استرپ را به شما عزیزان معرفی کنیم و سورس آن را بصورت رایگان برای دانلود در اختیار شما قرار خواهیم داد. مانند هدرها، این فوترها نیز کاملا واکنش گرا می باشند و ۱۰۰% رایگان و فاقد کپی رایت می باشند.

 

فوترهای بوت استرپ (Bootstrap Footers):

تمامی فوترهای این مقاله توسط کتابخانه قدرتمند بوت استرپ (bootstrap library) نسخه ۳ طراحی شده اند. آنها کاملا ریسپانسیو می باشند و در تمامی دستگاه ها و انواع رزولوشن ها بدرستی نمایش داده می شوند. هر یک از این ۵ فوتر، یک فایل css مجزا دارد که براحتی قابل ویرایش و شخصی سازی می باشد. استایل هایی که در فایل های css تعریف شده اند کاملا مستقل می باشند و ویرایش آنها تاثیری بر سایر بخش های قالب بوت استرپ شما نخواهد داشت.

 

فوترها (the Footers)

 

نحوه استفاده (How to Use):

به منظور استفاده از هریک از فوترهای این مقاله، کافیست مراحل ساده زیر را طی کنید:

۱- فایل zip فوترهای بوت استرپ را دانلود کرده و آنرا extract کنید.

۲- فایل های با فرمت .html را توسط یک ادیتور باز کرده و کدهای مربوطه را به قالب سایت خود اضافه کنید. لیست فوترهایی که در این مقاله وجود دارند بصورت تصویر زیر می باشد:

 

انواع فوترهای بوت استرپ

 

۳- هریک از فوترها دارای فایل css مستقل می باشند که در فولدر assets/css قرار دارند.

کتابخانه هایی که به غیر از بوت استرپ در این فوترها مورد استفاده قرار گرفته اند Font-Awesome و Google-Map می باشند.

 

نقشه گوگل در فوتر

 

همانطور که قبلا عرض کردیم، استفاده از این فوترها کاملا آزاد و رایگان می باشد.

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

 

منبع:

 https://tutorialzine.com/2016/10/freebie-5-fantastic-bootstrap-footers

https://tutorialzine.com/2016/09/freebie-5-beautiful-bootstrap-headers


برچسب‌ها:

bootstrap headerبوت استرپسورس کد بوت استرپسورس کد هدرسورس هدرفوتر bootstrapفوتر بوت استرپهدر bootstrapهدر بوت استرپ

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

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

2 × 1 =