آموزش کامل فریم ورک بوت استرپ 3 برای طراحی صفحات ریسپانسیو

آموزش بوت استرپ 3

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

جلسه اول - مقدمه آموزش بوت استرپ

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

جلسه دوم - دانلود و راه اندازی بوت استرپ

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

جلسه سوم - آموزش گرید بندی بوت استرپ( قالب ریسپانسیو)

در جلسه سوم از دوره آموزشی بوت استرپ 3 به مهمترین مبحث یعنی گرید بندی( همان ریسپانسیو) می پردازیم

جلسه چهارم - ساخت منوی ریسپانسیو (بخش اول)

یکی از چالش هایی که طراحان وب با آن دست و پنجه نرم میکنند، ایجاد کردن یک منوی دراپ دان و ریسپانسیو کردن آن در حالت موبایل و تبلت می باشد. در این ویدئوی آموزشی به طور کامل با ساختن منوی در بوت استرپ 3 آشنا می شویم

جلسه چهارم - ساخت منوی ریسپانسیو (بخش دوم)

جلسه چهارم - ساخت منوی ریسپانسیو (بخش سوم)

جلسه چهارم - ساخت منوی ریسپانسیو (بخش چهارم)

جلسه پنجم - تگ viewport چیست؟

جلسه ششم بوت استرپ - ریسپانسیو کردن تصاویر

جلسه هفتم -ساخت جداول ریسپانسیو در بوت استرپ

جلسه هشتم- آموزش ساخت تب در بوت استرپ 3

جلسه نهم - ساخت اسلایدر تصویر در بوت استرپ

جلسه دهم - کار کردن با فرم ها


ارسال نظر درباره این موضوع

  • علی
    ممنونم از اموزش تون عالی بود
  • mohammad
    سلام من تمامی آموزش های شما رو دیدم شما اموزش wordpress هم دارید
    • در حال حاضر خیر و برنامه ای هم برای ضبط ندارم فعلا

  • Affetto
    سلام استاد امیدوارم خسته نباشید.دوره فتوشاپ مقدماتیتون رو یک شبه کامل دیدم و تمرین کردم حالاومدم سراغ بوتسترپ.واقعا ممنونم ازتون.سوالم اینه که این اموزش کامله یا مثل فتوشاپ مقدماتی و پیشرفته داره؟
    • سلام. این دوره برای بوت استرپ 3 هست و در کل بوت استرپ هیچ چیز خاصی نداره جز مفهوم گرید بندی که بسیار بسیار مهم هست. مابقی چیزها کپی پیست هست. حتی نیاز نیست اسم کلاس هاش رو حفظ باشید.. 

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

  • Hamed
    سلام واقعا بد تدریس شده و اصلا واسه افراد مبتدی قابل فهم نیست. بخاطره همین هست که میگن نباید آموزش رایگان استفاده کرد. و...
    • سلام دوست عزیز.. دقیقا مشکل تدریس کجاس؟ چه جاهایی براتون قابل فهم نبود؟

  • پویا
    سلام نمیشه فونت آیکون هارو خودمون بسازیم یا نه
    • از طریق سایت flaticon.com میتونید این کارو انجام بدید

  • حسین
    با سلام و عرض ادب و احترام خدمت شما. با تشکر از مطالب مفید شما. بنده طراح قالب های بیان بلاگ هستم و حدودا دوسال هست که به صورت حرفه ای در این زمینه فعالیت میکنم. اخیرا با بوت استرپ آشنا شدم و در زمینه طراحی با بوت استرپ تازه کارم و در همین زمینه میخواستم سوالی رو مطرح کنم که اگر جوابش رو لطف کنید بگید ، لطف بزرگی به من کردید. "سایت هایی هستند که قالب بوت استرپ آماده رو برای دانلود و استفاده قرار میدن (https://bootstraptaste.com/ مثل این سایت) . آیا میشه قالب های دانلود شده رو در بوت استرپ import کنیم و در بوت استرپ به ویرایش اون قالب ها بپردازیم؟
    • به طور کلی قالب های آماده بوت استرپ رو شما میتونید تغییر بدید. ولی بهترین کار این هست خودتون کد نویسی کنید. با توجه به اینکه میگید برای بیان قالب میزنید باید بر اساس امکانات بیان قالب رو پیاده سازی کنید. معمولا قالب های آماده به کار شما نمیان. import کردن معنی نداره. شما میتونید کدهای html اون قالب ها رو توی قالب های خودتون استفاده کنید. در صورتی که سی اس اس اختصاصی هم نوشته باشن که باید اون هارو هم کپی کنید

  • s.gh
    سلام توی فایل زیپ بوت استرپ این دوتا نبودند ازکجا پیداشون کنم؟ bootstrap-rtl.css style.css
    • سلام فایل های rtl رو باید به صورت جداگانه دانلود کنید. اون فایل style.css هم فایلی بوده که خودم ایجادش کردم

  • پویا
    سلام چگونه در فرم ها دکمه ای بگزاریم که پسورد را پنهان کند یا نمایش دهد
    • $("body").on('click', '.toggle-password', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#pass_log_id"); if (input.attr("type") === "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } });

      • پویا
        چگونه از اینها استفاده کنم
        • برای این کار باید کمی جی کوئری بلد باشید.. بلد هستید؟

          • پویا
            نه فقط html و css بلدم
            • برای انجام این مدل از کارها باید با کد نویسی جی کوئری هم آشنا باشید . یه جورایی میتونم بگم html , css خالی یاد گرفتن کافی نیست و حتما جی کوئری هم آموزش ببینید

  • پویا
    سلام من توی گرید بندی فرم ها مشکل دارم عکسش هم اینجا آپلود کردم http://s7.picofile.com/file/8392174168/Annotation_2020_03_26_235047.jpg
    • آیا به input ها به صورت دستی width دادین؟

      • پویا
        نه . چجوری این کار رو انجام بدم
        • سورس کد خودتون رو برای بررسی بهتر برام آپلود کنید و بفرستید تا تست کنم

          • پویا
            http://s6.picofile.com/file/8392523692/Sign_Up.html.html این html http://s6.picofile.com/file/8392523734/Sign_Up.css.html این css
            • همونطور که گفتم به Input شما به صورتی دستی width دادی اونم به پیکسل

              نباید اینجوری باشه خط 3334 توی فایل سی اس اس رو ویرایش کن و width:100% بزن جای px

              • پویا
                خیلی ممنونم.
  • امیر
    سلام ممنونم از آموزشتون فقط این اینپوت پیامتون رو میشه توضیح بدید؟
    • سلام. متوجه نشدم. یعنی چی؟

  • hadi
    سلام. واسه منوی قالبم از رویداد hover در جی کوئری استفاده کردم برای pc به خوبی کاربرد داره ولی متاسفانه وقتی که برای مبایل یا تبلت استفاده میشه این رویداد رو نمیشناسه و زیر منو باز نمیشه ایا این قابلیت هست که در حالت ریسپانسیو در ابعاد کوچک بشه این رویداد رو به کلیک تبدیل کرد؟
    • سلام. اگر از hover استفاده میکنید نیازی نیست که از جی کوئری استفاده بشه. توی خود سی اس اس میتونید این کارو انجام بدید و به راحتی هم توی موبایل کار میکنه دستورش به این صورت میشه 

      .menu li:hover >ul{

       

      }

  • حسام
    بسیار عالی بود حتما اموزش بوت استرپ 4 را هم ضبط کنید
  • مجید
    سپاس از زحمات شما و آموزش بسیار خوبتون موفق و پیروز باشین
  • پویا
    سلام برای ساخت منوی ثبت نام و ورود باید از تگ form استفاده کنیم؟
    • سلام. بله . به طور کلی فرم ها برای انتقال اطلاعات از کلاینت به سرور استفاده می شود

  • hadi
    سلام استاد. میخواستم بدونم چجوری میشه سایز ریسپانسیو منو رو از 768 به 992 تغییر داد(منظور ظاهر شدن navbar-toggleهست)
    • سلام از دستور زیر استفاده کنید در فایل سی اس اس 

      @media (min-width: 768px) and (max-width: 1000px) { .collapse { display: none !important; } }

  • Homaion
    سلام یعنی شما کل بوت استرپ ۳ رو توی ۱۰ جلسه درس دادید یا ادامه هم داره؟؟؟
    • سلام. زمانی که من داشتم این آموزش هارو ضبط میکردم بوت استرپ 4 خیلی فراگیر نشده بود. تصمیم گرفتم کلا توی جلسات بعدی یه پکیج بوت استرپ 4 رو ضبط کنم

  • feelinggood
    سلام . ممنون از آموزشتون لطف میکنید آموزش بوت 4 رو هم بزارین !؟ با تشکر
    • سلام. انشالله بعد از عید آموزش های جدید روی سایت قرار خواهد گرفت

  • پویا
    سلام چجوری فونت استفاده شده در یک سایت رو به صفحه خودمون بیاریم
    • منظورتون اینه مثلا یک سایت از یک فونتی استفاده کرده شما فونت های اون سایت رو استفاده کنید؟

      • پویا
        بله من میخوام از فونت سایت خودتون استفاده کنم
        • به طور کلی نمیشه توی کامنت این مورد رو توضیح داد باید براش یه فیلم اموزشی ضبط کنم

  • امیرحسین
    سلام خدا قوت دست شما درد نکنه خیلی خیلی ممنون واقعا عالی و کاملا کارآمد هست امیدوارم موفق ُ سلامت و پاینده باشید تشکر
  • ramtin
    سلام و عرض ادب خدمت شما استاد عزیز . میخواستم بگم که بقیه آموزش هاتون کجاس؟ منظورم اینه که کلاً همین ده جلسه هستش؟
    • با سلام. در حال حاضر همین قسمت ها ضبط شده. فیلم آموزشی بعدی به صورت عملی و 0 تا صد یک قالب پیاده سازی میشه. البته قبلش باید بوت استرپ 4 رو آموزش بدم که پیش نیاز پروژه عملی بشه

      • ramtin
        پس هنوز ضبط نشده . حدوداً چه وقت آموزش رو قرار میدهید ؟ منتظریم . باتشکر
        • فعلا توی اولویت ضبط آموزش های فتوشاپ رو دارم چون به خیلی ها قول دادم فتوشاپ رو ضبط کنم بعد از اون میرم سراغ ضبط بوت استرپ. تقریبا فکر میکنم اوایل دی ماه بتونم بوت استرپ رو استارت بزنم برای ضبط فیلم آموزشی

  • ramtin
    سلام و خسته نباشید خدمت استاد عزیز فایل جلسه دوم وجود ندارد ( یعنی اینکه جلسه دوم همون ویدئو جلسه اول را نشان میدهد ) و لطفاً جلسه دوم را قرار دهید باتشکر
    • سلام. با تشکر از اطلاع رسانی شما لینک دانلود اصلاح شد

  • وحید
    با سلام ممنونم از آموزشتون دانلود کردم بسیار مفید بود و دقیق و ساده فقط من یه مشکلی دارم ؟ کجا مطرح کنم ؟؟
    • با سلام. می تونید سوالتون رو توی نظرات همین بخش مطرح کنید.
      • وحید
        من میخوام با کوچیک شدن صفحه مثلا زیر ۷۲۰ کلا استایلام عوض بشه این کارو چطور باید انجام بدم
        • شما باید از دستور مدیا استفاده کنید @media (max-width: 720px) and (min-width: 0px) {} هرچیزی که بین این دستور بنوسید بین رزولوشن 0 تا 720 عمل میکنه فقط
          • وحید
            دست شما درد نکنه همین و میخواستم واقعا ممنونم
            • خواهش میکنم دوست عزیز. موفق باشید
  • وحید
    سلام با این آموزش کاملا بحث رسپانسیو و میشه اوکی کرد...؟؟؟
    • سلام. بله مبحث گرید گرید بندی و ریسپانسیو به طور کامل توضیح داده شده 

  • لیلا
    سلام فایل bootstrap که دانلود میکنم پوشه font رو نداره...چیکار باید بکنم؟
    • سلام چه فونتی مد نظرتون هست؟ فونت آیکن میخواید استفاده کنید؟

      • لیلا
        همین فونت صمیم که شما هم استفاده کردین دو تا مشکله دیگه هم دارم اینکه تو فولدر css اصلا style.css نیستش و اینکه bootstrap-rtl کار نمیکنه و راست چین نمیشه متنام
        • برای دانلود فونت صمیم میتونید از این لینک استفاده کنید www.rastikerdar.github.io/samim-font

          برای اینکه بتونم بهتر شمارو راهنمایی کنم کل سورس پروژه رو یه جایی آپلود کنید و لینک دانلودش رو در ادامه همین نظر برام قرار بدید تا بررسی کنم.

  • پویا
    چجوری باید دو تگ p متفاوت رو توی یک کلاس jumbotron قرار دهیم
    • خب کافیه یه Div تعریف کنی با کلاس مد نظری که گفتی و دوتا تگ p رو داخلش قرار بدی
      • پویا
        ممنون

ارسال نظر درباره این موضوع