تصاویر در بوت استرپ
در این بخش از آموزش رایگان کار با تصاویر در بوت استرپ مباحث مهمی بررسی می شود مانند گرد کردن گوشه های عکس ، بیضوی کردن عکس ، انداختن کادر دور عکس ، ریسپانسیو کردن تصویر و غیره همراه با مثال و توضیحات کامل.
در این بخش از آموزش بوت استرپ 4 از تاپ سایت 98 به سراغ تصاویر در بوت استرپ می رویم.
تصاویر در همه پروژه های طراحی سایت وجود دارند و به همین دلیل دارای اهمیت زیادی می باشد.
کلاس rounded
در بوت استرپ 4 ، کلاس rounded برای تصاویر استفاده می شود و برای گرد کردن گوشه های عکس استفاده می شود.
در مثال زیر در تگ img از کلاس rounded استفاده شده است.
حتما یک فایل با نام a.jpg را در کنار فایل html خود قرار دهید تا خروجی را ببینید.
سایز عکس ما 320 در 180 میباشد. می توانید یک عکس با همین سایز انتخاب کنید.
<h1>TopSite98.com</h1>
<p>bootstrap image rounded class</p>
<img src="a.jpg" class="rounded" alt="image1" width="320" height="180">
</div>
کلاس rounded-circle
از کلاس rounded-circle برای گرد کردن تصویر در بوت استرپ 4 استفاده می شود.
خروجی کد زیر نمایش یک عکس بصورت بیضوی خواهد بود.
لطفا یک تصویر با عنوان a.jpg را در کنار فایل قرار دهید.
<h1>TopSite98.com</h1>
<p>bootstrap rounded circle class</p>
<img src="a.jpg" class="rounded-circle" alt="image a">
</div>
کلاس img-thumbnail
کلاس img-thumbnail در بوت استرپ جهت قرار دادن کادر دور عکس در بوت استرپ بکار می رود.
معمولا یک کادر سفیدرنگ دور تصویر قرار می گیرد.
با استفاده از کلاس های آماده بوت استرپ براحتی می توانید یک قالب زیبا طراحی نمایید.
<h1>TopSite98.com</h1>
<p>bootstrap rounded circle class</p>
<img src="a.jpg" class="img-thumbnail" alt="image a">
</div>
کلاس float-left
کلاس float-left برای قرار دادن تصویر در سمت چپ صفحه بکار می رود.
به مثال زیر توجه کنید.
کلاس float-right
کلاس float-right برای قرار دادن تصویر در سمت راست صفحه بکار می رود.
در مثال زیر عکس در سمت راست قرار می گیرد.
وسط چین کردن تصویر
جهت وسط چین کردن تصویر یا عکس می توانیم از کلاس های mx-auto و d-block استفاده نماییم.
در مثال زیر با نحوه کار این کلاس ها اشنا می شویم.
می توانیم همزمان از چندین کلاس در کنار هم استفاده نماییم که در مثال زیر می بینید.
ریسپانسیو کردن عکس با بوت استرپ
برای ریسپانسیو کردن عکس با بوت استرپ 4 می توانیم از کلاس img-fluid استفاده نماییم.
یکی از کارهای مهمی که بوت استرپ انجام می دهد ریسپانسیو یا واکنشگرا کردن قالب سایت و تصاویر است.
ریسپانسیو کردن تصویر باعث می شود قالب بهم ریخته نشود و از بهم ریختگی قالب سایت جلوگیری می کند.
<h1>TopSite98.com</h1>
<p>bootstrap rounded circle class</p>
<img class="img-fluid" src="a.jpg" alt="image">
</div>
امیدواریم این آموزش مورد توجه شما عزیزان قرار گرفته باشد.
موفق باشید.
منبع: دبلیو 3 اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-04-29 23:39:33
با عرض سلام ، چطور می توان در یک صفحه وب که به سه قسمت مساوی تقسیم شده است عکس هایی با سایزهای مختلف را طوری با بوتسرپ چیدمان کرد که در یک راستا قرار بگیرند
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید