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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


  • پویا (شنبه, 23 شهریور 1398 ساعت 19:28:56)
    چجوری باید دو تگ p متفاوت رو توی یک کلاس jumbotron قرار دهیم

    • (شنبه, 23 شهریور 1398 ساعت 21:11:15)
      خب کافیه یه Div تعریف کنی با کلاس مد نظری که گفتی و دوتا تگ p رو داخلش قرار بدی

      • پویا (چهار شنبه, 27 شهریور 1398 ساعت 00:58:25)
        ممنون

  • لیلا (سه شنبه, 07 آبان 1398 ساعت 20:42:57)
    سلام فایل bootstrap که دانلود میکنم پوشه font رو نداره...چیکار باید بکنم؟

    • (چهار شنبه, 08 آبان 1398 ساعت 22:08:04)

      سلام چه فونتی مد نظرتون هست؟ فونت آیکن میخواید استفاده کنید؟


      • لیلا (پنج شنبه, 09 آبان 1398 ساعت 14:20:55)
        همین فونت صمیم که شما هم استفاده کردین دو تا مشکله دیگه هم دارم اینکه تو فولدر css اصلا style.css نیستش و اینکه bootstrap-rtl کار نمیکنه و راست چین نمیشه متنام

        • (جمعه, 10 آبان 1398 ساعت 09:08:09)

          برای دانلود فونت صمیم میتونید از این لینک استفاده کنید www.rastikerdar.github.io/samim-font

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


  • وحید (سه شنبه, 07 آبان 1398 ساعت 22:42:42)
    سلام با این آموزش کاملا بحث رسپانسیو و میشه اوکی کرد...؟؟؟

    • (چهار شنبه, 08 آبان 1398 ساعت 22:07:37)

      سلام. بله مبحث گرید گرید بندی و ریسپانسیو به طور کامل توضیح داده شده 


  • وحید (سه شنبه, 28 آبان 1398 ساعت 23:49:24)
    با سلام ممنونم از آموزشتون دانلود کردم بسیار مفید بود و دقیق و ساده فقط من یه مشکلی دارم ؟ کجا مطرح کنم ؟؟

    • (چهار شنبه, 29 آبان 1398 ساعت 08:51:11)
      با سلام. می تونید سوالتون رو توی نظرات همین بخش مطرح کنید.

      • وحید (جمعه, 01 آذر 1398 ساعت 12:53:01)
        من میخوام با کوچیک شدن صفحه مثلا زیر ۷۲۰ کلا استایلام عوض بشه این کارو چطور باید انجام بدم

        • (جمعه, 01 آذر 1398 ساعت 15:44:03)
          شما باید از دستور مدیا استفاده کنید @media (max-width: 720px) and (min-width: 0px) {} هرچیزی که بین این دستور بنوسید بین رزولوشن 0 تا 720 عمل میکنه فقط

          • وحید (جمعه, 01 آذر 1398 ساعت 22:18:04)
            دست شما درد نکنه همین و میخواستم واقعا ممنونم

            • (جمعه, 01 آذر 1398 ساعت 22:40:33)
              خواهش میکنم دوست عزیز. موفق باشید

  • ramtin (شنبه, 09 آذر 1398 ساعت 16:50:53)
    سلام و خسته نباشید خدمت استاد عزیز فایل جلسه دوم وجود ندارد ( یعنی اینکه جلسه دوم همون ویدئو جلسه اول را نشان میدهد ) و لطفاً جلسه دوم را قرار دهید باتشکر

    • (شنبه, 09 آذر 1398 ساعت 17:07:11)

      سلام. با تشکر از اطلاع رسانی شما لینک دانلود اصلاح شد


  • ramtin (یک شنبه, 10 آذر 1398 ساعت 10:36:44)
    سلام و عرض ادب خدمت شما استاد عزیز . میخواستم بگم که بقیه آموزش هاتون کجاس؟ منظورم اینه که کلاً همین ده جلسه هستش؟

    • (یک شنبه, 10 آذر 1398 ساعت 12:29:56)

      با سلام. در حال حاضر همین قسمت ها ضبط شده. فیلم آموزشی بعدی به صورت عملی و 0 تا صد یک قالب پیاده سازی میشه. البته قبلش باید بوت استرپ 4 رو آموزش بدم که پیش نیاز پروژه عملی بشه


      • ramtin (یک شنبه, 10 آذر 1398 ساعت 18:38:12)
        پس هنوز ضبط نشده . حدوداً چه وقت آموزش رو قرار میدهید ؟ منتظریم . باتشکر

        • (یک شنبه, 10 آذر 1398 ساعت 20:27:10)

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


  • امیرحسین (جمعه, 20 دی 1398 ساعت 21:49:53)
    سلام خدا قوت دست شما درد نکنه خیلی خیلی ممنون واقعا عالی و کاملا کارآمد هست امیدوارم موفق ُ سلامت و پاینده باشید تشکر

  • پویا (دو شنبه, 30 دی 1398 ساعت 17:14:26)
    سلام چجوری فونت استفاده شده در یک سایت رو به صفحه خودمون بیاریم

    • (دو شنبه, 30 دی 1398 ساعت 20:18:13)

      منظورتون اینه مثلا یک سایت از یک فونتی استفاده کرده شما فونت های اون سایت رو استفاده کنید؟


      • پویا (دو شنبه, 30 دی 1398 ساعت 20:37:37)
        بله من میخوام از فونت سایت خودتون استفاده کنم

        • (چهار شنبه, 02 بهمن 1398 ساعت 09:04:21)

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


  • feelinggood (دو شنبه, 28 بهمن 1398 ساعت 13:56:16)
    سلام . ممنون از آموزشتون لطف میکنید آموزش بوت 4 رو هم بزارین !؟ با تشکر

    • (سه شنبه, 29 بهمن 1398 ساعت 08:57:20)

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


  • Homaion (پنج شنبه, 08 اسفند 1398 ساعت 13:03:14)
    سلام یعنی شما کل بوت استرپ ۳ رو توی ۱۰ جلسه درس دادید یا ادامه هم داره؟؟؟

    • (پنج شنبه, 08 اسفند 1398 ساعت 15:49:51)

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


  • hadi (جمعه, 23 اسفند 1398 ساعت 18:18:42)
    سلام استاد. میخواستم بدونم چجوری میشه سایز ریسپانسیو منو رو از 768 به 992 تغییر داد(منظور ظاهر شدن navbar-toggleهست)

    • (شنبه, 24 اسفند 1398 ساعت 16:23:40)

      سلام از دستور زیر استفاده کنید در فایل سی اس اس 

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


  • پویا (دو شنبه, 26 اسفند 1398 ساعت 14:14:31)
    سلام برای ساخت منوی ثبت نام و ورود باید از تگ form استفاده کنیم؟

    • (دو شنبه, 26 اسفند 1398 ساعت 14:31:23)

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


  • مجید (پنج شنبه, 29 اسفند 1398 ساعت 11:56:41)
    سپاس از زحمات شما و آموزش بسیار خوبتون موفق و پیروز باشین

  • حسام (جمعه, 01 فروردین 1399 ساعت 12:34:57)
    بسیار عالی بود حتما اموزش بوت استرپ 4 را هم ضبط کنید

  • hadi (دو شنبه, 04 فروردین 1399 ساعت 17:25:35)
    سلام. واسه منوی قالبم از رویداد hover در جی کوئری استفاده کردم برای pc به خوبی کاربرد داره ولی متاسفانه وقتی که برای مبایل یا تبلت استفاده میشه این رویداد رو نمیشناسه و زیر منو باز نمیشه ایا این قابلیت هست که در حالت ریسپانسیو در ابعاد کوچک بشه این رویداد رو به کلیک تبدیل کرد؟

    • (دو شنبه, 04 فروردین 1399 ساعت 18:32:55)

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

      .menu li:hover >ul{

       

      }


  • امیر (سه شنبه, 05 فروردین 1399 ساعت 15:07:16)
    سلام ممنونم از آموزشتون فقط این اینپوت پیامتون رو میشه توضیح بدید؟

    • (سه شنبه, 05 فروردین 1399 ساعت 16:18:18)

      سلام. متوجه نشدم. یعنی چی؟


  • پویا (پنج شنبه, 07 فروردین 1399 ساعت 23:55:46)
    سلام من توی گرید بندی فرم ها مشکل دارم عکسش هم اینجا آپلود کردم http://s7.picofile.com/file/8392174168/Annotation_2020_03_26_235047.jpg

    • (جمعه, 08 فروردین 1399 ساعت 11:28:23)

      آیا به input ها به صورت دستی width دادین؟


      • پویا (جمعه, 08 فروردین 1399 ساعت 20:41:40)
        نه . چجوری این کار رو انجام بدم

        • (یک شنبه, 10 فروردین 1399 ساعت 09:32:29)

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


          • پویا (یک شنبه, 10 فروردین 1399 ساعت 23:46:25)
            http://s6.picofile.com/file/8392523692/Sign_Up.html.html این html http://s6.picofile.com/file/8392523734/Sign_Up.css.html این css

            • (سه شنبه, 12 فروردین 1399 ساعت 11:23:48)

              همونطور که گفتم به Input شما به صورتی دستی width دادی اونم به پیکسل

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


              • پویا (سه شنبه, 12 فروردین 1399 ساعت 15:24:43)
                خیلی ممنونم.

  • پویا (چهار شنبه, 24 اردیبهشت 1399 ساعت 12:18:53)
    سلام چگونه در فرم ها دکمه ای بگزاریم که پسورد را پنهان کند یا نمایش دهد

    • (پنج شنبه, 25 اردیبهشت 1399 ساعت 11:02:54)

      $("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"); } });


      • پویا (جمعه, 26 اردیبهشت 1399 ساعت 22:33:27)
        چگونه از اینها استفاده کنم

        • (دو شنبه, 29 اردیبهشت 1399 ساعت 09:23:25)

          برای این کار باید کمی جی کوئری بلد باشید.. بلد هستید؟


          • پویا (سه شنبه, 30 اردیبهشت 1399 ساعت 10:25:32)
            نه فقط html و css بلدم

            • (چهار شنبه, 31 اردیبهشت 1399 ساعت 09:55:36)

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


  • s.gh (سه شنبه, 13 خرداد 1399 ساعت 11:58:43)
    سلام توی فایل زیپ بوت استرپ این دوتا نبودند ازکجا پیداشون کنم؟ bootstrap-rtl.css style.css

    • (سه شنبه, 13 خرداد 1399 ساعت 16:43:15)

      سلام فایل های rtl رو باید به صورت جداگانه دانلود کنید. اون فایل style.css هم فایلی بوده که خودم ایجادش کردم


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

    • (یک شنبه, 18 خرداد 1399 ساعت 16:24:36)

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


  • پویا (چهار شنبه, 04 تیر 1399 ساعت 17:24:54)
    سلام نمیشه فونت آیکون هارو خودمون بسازیم یا نه

    • (جمعه, 06 تیر 1399 ساعت 10:05:44)

      از طریق سایت flaticon.com میتونید این کارو انجام بدید