telegram

توضیحات

در این جلسه به ایجاد بخش stats در پروژه چهارم از دوره آموزش بوت استرپ ۵ (Bootstrap) در دنیای واقعی میپردازیم.

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

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

مدرس دوره علی شیخ
مدت دوره 08:43:02
تعداد ویدیو 54
وضعیت دوره : کامل شده
قیمت دوره : 399,000 359,000 تومان
برای دانلود ابتدا وارد سایت شوید
دسته بندی دوره ها
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 ساس

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

دوره های آموزشی
آموزش رایگان javascript (جاوا اسکریپت) پروژه محور
کامل شده

آموزش رایگان javascript (جاوا اسکریپت) پروژه محور

جاوا اسکریپت (javascript) زبانی سطح بالا برای ایجاد صفحات وب پویا و تعاملی است. و هدف این زبان، بهبود تعامل و تجربه کارب...

رایگان
10:20:49
آموزش رایگان flexbox (فلکس باکس) پروژه محور
کامل شده

آموزش رایگان flexbox (فلکس باکس) پروژه محور

در دنیای HTML و CSS که نمایش محتوا را به عهده دارند همیشه یک موضوع، سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی ا...

رایگان
04:32:18
آموزش ساخت فروشگاه اینترنتی سفارش غذا (رستوران و فست فود) با لاراول (laravel)
درحال برگزاری
% 15 تخفیف

آموزش ساخت فروشگاه اینترنتی سفارش غذا (رستوران و فست فود) با لاراول (laravel)

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

699,000 594,000 تومان
16:34:43
آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور
کامل شده

آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

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

رایگان
13:47:11
مشاهده تمام دوره های آموزشی

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

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

  • Amin Valipour

    سلام

    در مورد این درس شما از card استفاده کردی ولی من میخام بدون card پیاده سازیش کنم چون به نظرم نیازی به کارت نیس...ولی مشکلی که هست این گپ بین کارتا بوجود نمیاد هر کاریش میکنم...فقط زمانی بوجود میاد که از کلاس کارت استفاده کنم...میخاسم بدونم چجوری میشه این فاصله بین کارتارو ایجاد کرد؟
    https://uploadkon.ir/uploads/732d18_24card.png 

    <div class="container-fluid">

        <div class="row">

            <div class="col-xl-9">

                <div class="row g-3">

                    <div class="col-6 col-md-3 d-flex align-items-center bg-blue p-3">

                        <div class="stats-icon me-4 bg-purple">

                            <i class="bi bi-eye-fill text-white fs-3"></i>

                        </div>

                        <div class="">

                            <h6 class="fs-7 text-muted m-0">

                                Profile</h6>

                            <h6 class="fw-b purecounter pt-2 m-0" >0</h6>

                        </div>

                    </div>

                    <div class="col-6 col-md-3 d-flex align-items-center bg-green p-3">

                        <div class="stats-icon me-4 bg-blue">

                            <i class="bi bi-person-fill text-white fs-3"></i>

                        </div>

                        <div class="">

                            <h6 class="fs-7 text-muted m-0">

                                Report</h6>

                            <h6 class="fw-b purecounter pt-2 m-0" >0</h6>

                        </div>

                    </div>

                    <div class="col-6 col-md-3 d-flex align-items-center bg-info p-3">

                        <div class="stats-icon me-4 bg-red">

                            <i class="bi bi-eye-fill text-white fs-3"></i>

                        </div>

                        <div class="">

                            <h6 class="fs-7 text-muted m-0">

                                Status</h6>

                            <h6 class="fw-b purecounter pt-2 m-0" >0</h6>

                        </div>

                    </div>

                    <div class="col-6 col-md-3 d-flex align-items-center bg-danger p-3">

                        <div class="stats-icon me-4 bg-green">

                            <i class="bi bi-eye-fill text-white fs-3"></i>

                        </div>

                        <div class="">

                            <h6 class="fs-7 text-muted m-0">

                                Income</h6>

                            <h6 class="fw-b purecounter pt-2 m-0" >0</h6>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-xl-3"></div>

        </div>

    </div>

    • علی شیخ

      3 هفته پیش

      سلام وقت بخیر.
      توی مروگر inspect بگیرید و ببینید چه استایل های داره کلاس card و استفاده کنید یا استایل اضافه کنید.