لوگوی جشنواره وب و موبایل ایران

CSS, طراحي وب

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

تبلیغات
دوره آموزش طراحی وب تبریز
کانال تلگرام فتولیا

فریم ورک 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

منبع

 

پاسخ دهید

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