telegram

توضیحات

در این بخش در مورد Cards ها در Bootstrap صحبت میکنیم

HTML CSS طراحی وب طراحی واکنشگرا Bootstrap Bootstrap v4 آموزش Bootstrap بوت استرپ طراحی سایت

برای دانلود ابتدا وارد سایت شوید

مدرس دوره علی شیخ
مدت دوره 06:29:27
تعداد ویدیو 35
وضعیت دوره : کامل شده
قیمت دوره : رایگان
برای دانلود ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پشنهادی

دوره های آموزشی
آموزش نست جی اس (nest.js)
کامل شده
% 10 تخفیف

آموزش نست جی اس (nest.js)

نست جی اس (nest.js) فریمورک یا چارچوبی برای ایجاد برنامه های کارآمد و مقیاس پذیر node.js در سمت سرور است. این فریمورک از...

699,000 629,000 تومان
12:52:59
آموزش Laravel
کامل شده

آموزش Laravel

لاراول یکی از بهترین و محبوب ترین فریمورک های زبان php است که برای توسعه نرم افزارهای تحت وب و بر پایه ای معماری MVC ساخ...

رایگان
29:19:35
آموزش Sass پروژه محور
کامل شده

آموزش Sass پروژه محور

اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام Sass یا پیش‌پردازنده‌ها را شنیده‌اید. اگر مطمئن نیستید که Sass چیست...

رایگان
02:28:26
آموزش بوت استرپ 5 (Bootstrap) پروژه محور
کامل شده

آموزش بوت استرپ 5 (Bootstrap) پروژه محور

Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع ج...

رایگان
12:08:39
مشاهده تمام دوره های آموزشی

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • zarrinbabak

    درود فراوان استاد بزرگوار
    سوال : در طراحی card columns کارت هایی که طراحی میکنم وسط چین نمیشن حتی با justify-content-center و دائما سمت راست قرار میگیرند ، راه حل محبت میکنید ارائه بدید ؟؟ ضمنا تمام چیزی که نوشتم مثل چیزی هست که در فایل تمرین هست . 

    

    <div class="container">

          <div class="card-columns border border-success">

            <div class="card">

              <img

                src="./img/mobile-accessories-1.webp"

                class="card-img-top"

                alt=""

              />

    

              <div class="card-body">

                <h2 class="card-title text-center">لورم ایپسوم</h2>

                <p class="card-text text-center">

                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ،

                </p>

              </div>

            </div>

    

            <div class="card">

              <img

                src="./img/mobile-accessories-1.webp"

                class="card-img-top"

                alt=""

              />

    

              <div class="card-body">

                <h2 class="card-title text-center">لورم ایپسوم</h2>

                <p class="card-text text-center">

                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ،

                </p>

              </div>

            </div>

            <div class="card">

              <img

                src="./img/mobile-accessories-1.webp"

                class="card-img-top"

                alt=""

              />

    

              <div class="card-body">

                <h2 class="card-title text-center">لورم ایپسوم</h2>

                <p class="card-text text-center">

                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ،

                </p>

              </div>

            </div>

            <div class="card">

              <img

                src="./img/mobile-accessories-1.webp"

                class="card-img-top"

                alt=""

              />

    

              <div class="card-body">

                <h2 class="card-title text-center">لورم ایپسوم</h2>

                <p class="card-text text-center">

                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ،

                </p>

              </div>

            </div>

          </div>

        </div>

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      باید inspect بگیرید و کلاس ها و استیالها را بررسی کنید. با سورس کدی که در اختیارتون هست خط به خط مقایسه کنید.

  • alent

    سلام. وقت بخیر.
    در carousel کد img-fluid را برای ریسپانسیو داریم، من در carousel به جای عکس از card استفاده کردم، آیا کدی مشابه img-fluid برای ریسپانسیو کردنش هست؟

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ببنید شما هنوز bootstrap را درک نکردید و همچنین با css به خوبی آشنا نیستید، اگه قسمت های اولیه را مشاهده کنید.عرض کرده ایم که bootstrap یکسری کلاس آماده داره همین!!.طبیعتا من تو پروژه ام نیاز میشه که از یکسری کلاس، با استایل های خاص، که bootstrap نداره، استفاده کنم.پس خودم یک کلاس ایجاد میکنم و مقادیر خودم را بهش میدم و هر کجا خواستم استفاده میکنم.شما قصد دارید برای تصویر کلاس ریسپانسیو داشته باشید،خب خودتون میتونید ایجاد کنید.هر چند از img-fluid و یا card-img-top توی card میتونید استفاده کنید.الزاما اینجوری نیست که شما فقط از کلاس های bootstrap استفاده کنید.
      اگه امکانش هست لطف کنید و داکیومنت bootstrap هم مطالعه داشته باشید، چون خیلی بهتون کمک میکنه