راکت

جایگزینی ایکن بجای باتن درحالت ریسپانسیو وکوچک شدن صفحه

10 پاسخ

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

دومی درحالت کوچک شدن صفحه

ثبت پرسش جدید

پاسخ‌ها

10
سیدعلی موسوی
سیدعلی موسوی
@juza66

تخصص: سی شارپ و پی اچ پی

اگر از بوتسرپ استفاده میکنی میتونی توی دگمه ات یک span قرار بده که متن دگمه ات توش باشه و یک آیکن قرار بده که با کلاس بوتسرپ نمایش داده نشه تا زمانی که صفحه ات کوچیک شد

مثال

<button type="button" class="btn btn-light-secondary">
    <i class="bx bx-x d-block d-sm-none"></i>
    <span class="d-none d-sm-block">بستن</span>
</button>

اگر هم از css میخوای استفاده کنی که دیگه خودت باید با مدیا کوئری بنویسی!

فائزه ف
فائزه ف
@f.ferasat77

چجوری میشه با مدیا کوئری نوشت؟ کد کامل html,مدیا کوئری رو میشه بفرستین؟@juza66

شاید پاسخ شما همین‌جا باشد

فائزه ف
فائزه ف
@f.ferasat77

همین که فرستادین کد بوت استرپش چی میشه؟@juza66

سیدعلی موسوی
سیدعلی موسوی
@juza66

تخصص: سی شارپ و پی اچ پی

توی css اون کلاس مدنظرت رو بین این تگ ها مینویسی

@media only screen and (min-device-width: 480px){}

@media only screen and (min-device-width: 768px){}
سیدعلی موسوی
سیدعلی موسوی
@juza66

تخصص: سی شارپ و پی اچ پی

همین که فرستادین کد بوت استرپش چی میشه؟

یعنی چی؟!
خب برات نوشتم دیگه کدش رو !! این کلاس های بوتسرپ هستن!

d-block d-sm-none d-none d-sm-block

کد دگمه بوتسرپ

<button type="button" class="btn btn-light-secondary">
    <i class="bx bx-x d-block d-sm-none"></i>
    <span class="d-none d-sm-block">بستن</span>
</button>
فائزه ف
فائزه ف
@f.ferasat77

ممنون ولی متاسفانه مشکلم حل نشد😔😔@juza66

navid
navid
@navid.khab
@media only screen and (min-width : 350px){
    <i class=""></i>
}
@media only screen and (min-width : 768px){
    <button></button>
 }

توی media اولی آیکون رو قرار بدین و توی دومی باتن

علیرضا کفایتی
علیرضا کفایتی
@alirezakefayati

تخصص: برنامه نویس laravel, vue.js

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

فائزه ف
فائزه ف
@f.ferasat77

میشه یه شماره واتساپ بدین کدم رو بفرستم ببینید@navid.khab

navid
navid
@navid.khab

@f.ferasat77 به این ادرس ایمیل کنید navid.khab@yahoo.com

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام