CSS, طراحي وب

۱۰ کد آماده برای فریم ورک Bootstrap

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

فریم ورک Bootstrap این روزها کاربرد فراوانی در طراحی سریع و استاندارد صفحات وب دارد . در این مطلب می خواهیم ۱۰ نمونه کد را معرفی کنیم که فقط با کپی/پیست کردن می توانید قابلیت های جالبی را توسط آنها به سایت اضافه کنید .

برای استفاده از این مثال ها کافیست کد های HTML و CSS هر کدام را دریافت کرده و در پروژه خود قرار دهید.


۱- فرم ورود داخل کادر

یک فرم ورود و ثبت نام جمع و جور که داخل Modal می توانید از آن استفاده کنید . برای موارد “برای ادامه لاگین کنید…” مناسب است.

Login_form_in_modal-1024x503

۲- تایم لاین BOOSTRAP

اگر می خواهید رویدادهایی را به ترتیب زمانی و در یک ساختار ساده و جذاب و قابل فهم نمایش دهید ، پیشنهاد ما به شما این گزینه است.

Timeline_-1024x562

۳- جدول قیمت هاستینگ

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

Hosting_pricing_table-1024x621

۴- انجمن

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

Forum-1024x576

۵- قالب ساده رزومه

یک ساختار ساده با بخش های مجزا، نوار پیشرفت و دکمه های شبکه های اجتماعی.

Resume_-1024x569

۶- پنل های زیبا و ریسپانسیو

قابلیت نمایش امکانات یک محصول و یا مهارت های شخصی و … با این اسنیپت مهیاست.

skills_listing-1024x576

۷- جدول قیمت واکنش گرا

یک لیست قیمت دیگر با رنگ آمیزی متفاوت و سازگاری کامل یا قالب شما.

Pricing_table-1024x588

۸- فرم ورود / ثبت نام

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

sign-in-up

۹- لوگوی پارالکس منو

یک نمونه از منوهای بوت استرپ به علاوه امکان تغییر سایز لوگو هنگام پیمایش صفحه به بالا و پایین. همچنین این مثال از کمی کد جاوااسکریپت برای این عمل استفاده می کند که حتما باید آن را نیز به صفحه اضافه کنید.

navbar-logo-1024x560

۱۰- صفحه نمونه کارها

مناسب برای نمایش گالری تصاویر و نمونه کارها

cats-1024x576

منبع

 

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

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