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 ساس

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

دوره های آموزشی
آموزش jQuery پروژه محور
کامل شده
% 10 تخفیف

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

آموزش jQuery به همراه 4 پروژه. jQuery یک کتابخانه برای جاوا اسکریپت است. منظور از کتابخانه مجموعه کدهایی است که در یکجا...

99,000 89,000 تومان
04:30:09
آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)
درحال برگزاری
% 10 تخفیف

آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)

بعد از دوره آموزش نکست (next.js) که مورد استقبال شما دوستان عزیز قرار گرفت.حالا وقت آن رسیده که در قالب یک پروژه کاربردی...

799,000 719,000 تومان
35:52:53
آموزش HTML5 & CSS3 پروژه محور
کامل شده

آموزش HTML5 & CSS3 پروژه محور

برای اینکه وارد دنیای طراحی وب شوید اولین چیزی که باید با آن آشنا شوید HTML است، HTML یک زبانه نشانگذاری برای ایجاد وبسا...

رایگان
04:51:23
آموزش رایگان گیت و گیت هاب (git & github)
کامل شده

آموزش رایگان گیت و گیت هاب (git & github)

گیت (Git) یک سیستم کنترل ورژن است که با آن می‌توانید تغییرات اعمال شده در فایل‌ها را ساده‌تر پیگیری کنید. مثلاً، اگر فای...

رایگان
07:58:20
مشاهده تمام دوره های آموزشی

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

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

  • 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>

    • علی شیخ

      10 ماه پیش

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

  • alent

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

    • علی شیخ

      3 سال پیش

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