۱۰ کد آماده برای فریم ورک 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

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

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

در همین رابطه :   چگونه یک صفحه در GitHub ایجاد کنیم؟

Pricing_table-1024x588

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

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

sign-in-up

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

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

navbar-logo-1024x560

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

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

cats-1024x576

منبع

 

2 Comments

  1. سلام علی آقا عزیز و گرامی
    دانشجوی رشته کامپیوتر علمی کاربردی هستم
    برای پروژه خود یک سایت نیمه حرفه ای را انتخاب نمودم و خیلی هم نکته سنج نسبت به ایده هایم دارم .
    سایت صفحات اول تا ۵ را توانستم کد نویسی کنم البته با html – css و در حال اشنایی با وضعیت دیگر زبان ها هستم
    از جمله PHP .
    چگونه می توانم پنل مدیریت را کد نویسی کنم از کجا شروع کنم و از چه برنامه در کد نویسی استفاده کنم ؟
    سایت شما کمک خوبی برایم است . سایت ۳SCHOOL را شما کامل میکنید . و بعد از اینکه نتیجه کار را می بینم بسیار لذت بخش می باشد .
    از زحمات شما سپاس گذارم .
    پروژخ بعدی من ساخت یک سایت دانشگاهی است . تا به برنامه های دیگر بیشتر مسلط و توانمند شوم .
    از هر گونه راهنمایی شما سچاسگذارم .
    ابراهیم از مازندران

پاسخ دهید

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

More in CSS, طراحي وب
آموزش عبارات (Expression) در AngularJs

در این پست می خواهیم در مورد عبارات یا Expression ها رد AngularJs صحبت کنیم . عبارات در انگولار جی...

Close