با شما در این روزهای سخت همراهیم (۴۰٪ تخفیف کمپین همدلی)
۰ ثانیه
۰ دقیقه
۰ ساعت
۰ امیر حق شناس
خلاصه مطالب این جلسه - بررسی utility‌ها - بخش دوم
جامعه Html & CSS ایجاد شده در ۱۷ دی ۱۴۰۴

🧩 Flex

✔️ برای ساخت Layoutهای منعطف و مدرن

🔧 فعال‌سازی:
• d-flex
• d-inline-flex

🔄 جهت:
• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

📐 تراز افقی:
• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-between
• justify-content-around
• justify-content-evenly

📏 تراز عمودی:
• align-items-start
• align-items-center
• align-items-end
• align-items-stretch

📱 ریسپانسیو:
• flex-md-row
• justify-content-lg-between
• align-items-sm-center


🪶 Float

✔️ شناورسازی المان‌ها (قدیمی ولی هنوز کاربردی)

🔹 کلاس‌ها:
• float-start
• float-end
• float-none

📱 ریسپانسیو:
• float-sm-start
• float-md-end


🖱️ Interactions

✔️ کنترل تعامل کاربر

🔹 کلاس‌ها:
• user-select-none
• user-select-auto
• pe-none (غیرفعال کلیک)
• pe-auto


🔗 Link

✔️ کنترل استایل لینک‌ها

🔹 کلاس‌ها:
• link-primary
• link-secondary
• link-success
• link-danger
• link-warning
• link-info
• link-dark
• link-light


🖼️ Object-fit

✔️ کنترل نحوه نمایش تصویر یا ویدیو

🔹 کلاس‌ها:
• object-fit-contain
• object-fit-cover
• object-fit-fill
• object-fit-scale
• object-fit-none


🌫️ Opacity

✔️ کنترل شفافیت

🔹 کلاس‌ها:
• opacity-0
• opacity-25
• opacity-50
• opacity-75
• opacity-100


📦 Overflow

✔️ کنترل سرریز محتوا

🔹 کلاس‌ها:
• overflow-hidden
• overflow-auto
• overflow-scroll
• overflow-visible


📍 Position

✔️ کنترل جایگاه المان‌ها

🔹 موقعیت:
• position-static
• position-relative
• position-absolute
• position-fixed
• position-sticky

🎯 ابزار همراه:
• top-0
• bottom-0
• start-0
• end-0
• translate-middle


🌥️ Shadows

✔️ ایجاد سایه

🔹 کلاس‌ها:
• shadow-none
• shadow-sm
• shadow
• shadow-lg


📐 Sizing

✔️ کنترل عرض و ارتفاع

🔹 عرض:
• w-25
• w-50
• w-75
• w-100
• w-auto

🔹 ارتفاع:
• h-25
• h-50
• h-75
• h-100
• h-auto