در خدمت شما هستیم با آموزش Bootstrap 4 جلسه هفتم (تصویر)
آموزش Bootstrap 4 جلسه هفتم (تصویر) از سری آموزش های تک قسمتی است.
تصاویر در بوت استرپ ۴
در این جلسه از آموزش بوت استرپ ۴ میپردازیم به مبحث تصاویر. تقریبا میشه گفت تصاویر یکی از مهمترین موارد در سایت هستند و همچنین یکی از بزرگترین مشکل ها در دستگاه های مختلف اگر سایت شما رسپانسیو نباشد. بوت استرپ ۴ علاوه بر رسپانسیو کردن تصاویر چند کلاس دیگر نیز برای راحتی کاربران به وجود آورده است. به واسطه این کلاس ها هم میتوانید در ظاهر تصاویر تغییر به وجود آورید و هم موقعیت آنها را در صفحه تعیین کنید.
ظاهر تصاویر
بوت استرپ برای ظاهر تصاویر چند کلاس ایجاد کرده است که به واسطه این کلاس ها میتوانید تصاویر زیباتری برای وسایت خود بسازید این کلاس هارا برای شما لیست میکنیم و هر کدام را توضیح میدهیم:
- rounded: به کمک این کلاس میتوانید گوشه های تیز تصاویر خود را گرد و نرم کنید
- rounded-circle : به کمک این کلاس میتوانید تصاویری با قاب بیضی و دایره بسازید
- img-thumbnail: به کمک این کلاس میتوانید برای تصاویر خود قاب بسازید
کافیست کلاس های بالا را به تگ img تصاویر خود اختصاص دهید و از هر کدام استفاده کنید. بوت استرپ css این کلاس هارا آماده کرده است و کافیست شما هرجا که میخواهید از کلاس های آن استفاده کنید.برای واضح شدن موضوع یک مثال برای شما میزنیم
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
در کد بالا ما از کلاس rounded استفاده کردیم که گوشه تصاویر را نرم میکند.
چپ چین و راست چین کردن تصاویر
قرار دادن تصاویر در موقعیت های مختلف اگر شما از cms استفاده نکنید نیازمند تعریف css است اما بوت استرپ خود این css را تعریف کرده است کافیست شما از کلاس های آن استفاده کنید و تصاویر خود را راست چین و یا چپ چین کنید در حالت عادی در css این کار با استایل float انجام میشود و میتوانید به آن مقدار right یا left بدهید و موقعیت تصاویر خود را مشخص کنید بوت استرپ هم از همین قاعده استفاده کرده و کلاس های float-right و float-left را تعریف کرده است کافیست شما بنا به نیاز هر کدام از کلاس هارا به تگ Img خود اضافه کنید.
وسط قرار گرفتن تصاویر به صورت اتوماتیک
گاهی اوقات اینکه تصویر کاملا وسط صفحه قرار بگیرد دردسر ساز است مخصوصا اگر بحث قرار گرفتن این حالت در دستگاه های مختلف مطرح باشد چرا که دیگر نمیتوان از دستورات margin و padding به صورت پیکسلی و عددی استفاده کرد بوت استرپ برای این حالت نیز چاره ای دارد کلاس وسط چین کردن تصاویر که به صورت اتوماتیک این کار را برای شما انجام میدهد و تصاویر شما را در وسط صفحه قرار میدهد. در حالت عادی شما باید از ۲ استایل استفاده کنید که این کار برای شما انجام شود یکی کلاس margin :auto و دیگری کلاس display : block بوت استرپ خود این استایل ها را ایجاد کرده و کلاس های آن را با نام های mx-auto و d-block برای شما آماده کرده است تا از آن ها استفاده کنید. برای واضح شدن موضوع از کد زیر کمک بگیرید:
<img src="paris.jpg" class="mx-auto d-block">
رسپانسیو کردن تصاویر
رسیدیم به مهم ترین کلاس مربوط به تصاویر که برای رسپانسیو بودن تصاویر از آن استفاده میکنیم بوت استرپ کلاسی را آماده کرده که تشکیل شده از ۲ استایل است با قرار دادن این کلاس در تگ Img خود تصاویرتان برای تمام دستگاه ها به اندازه قابل قبول و داخل کادر قابل نمایش است . بوت استرپ برای ساخت این کلاس از استایل های max-width:100% و height:auto استفاده کرده است و با این دو استایل کلاسی با نام img-fluid را ساخته است برای آگاهی از نحوه استفاده از این کلاس میتوانید از کد زیر کمک بگیرید:
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
دوستانی که با بوت استرپ ۳ کار کرده اند میدانند که کلاس رسپانسیو تصاویر در نسخه ۳ Img-responsive بوده است که در نسخه ۴ به img-fluid تغییر پیدا کرده است.
برای راحتی شما عزیزان تمامی موارد آموزش این جلسه را در کد زیر قرار داده ایم:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Rounded Corners</h2> <p>The .rounded class adds rounded corners to an image:</p> <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> </div> ------------------------------------------------------------------------------------------------------ <div class="container"> <h2>Circle</h2> <p>The .rounded-circle class shapes the image to a circle:</p> <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div> ------------------------------------------------------------------------------------------------------ <div class="container"> <h2>Thumbnail</h2> <p>The .img-thumbnail class creates a thumbnail of the image:</p> <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> </div> ------------------------------------------------------------------------------------------------------ <div class="container"> <h2>Aligning images</h2> <p>Use the float classes to float the image to the left or to the right:</p> <img src="paris.jpg" class="float-left" alt="Paris" width="304" height="236"> <img src="paris.jpg" class="float-right" alt="Paris" width="304" height="236"> </div> <div style="clear:both"></div> ------------------------------------------------------------------------------------------------------ <div class="container"> <h2>Centered Image</h2> <p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:</p> <img src="paris.jpg" class="mx-auto d-block" style="width:50%"> </div> ------------------------------------------------------------------------------------------------------ <div class="container"> <h2>Image</h2> <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p> <img class="img-fluid" src="img_chania.jpg"> </div> <br> </body> </html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه ششم (table)
آموزش Bootstrap 4 جلسه هشتم (alert)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید