پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در این آموزش به مبحث تصاویر در Bootstrap میپردازیم.
به نحوه ساخت تصاویر با لبه های گرد ، تصاویر دایره ای ، عکس بند انگشتی ، تصاویر واکنشگرا و ساخت گالری تصاویر خواهیم پرداخت.
در بوت استرپ کلاس های آماده ای برای ساخت تصاویر در حالت های مختلف وجود دارد.
با سلام خدمت همراهان عزیز وب سایت پرنیان طرح
با آموزش مبحث تصاویر در بوت استرپ در خدمت شما هستیم.
در این مطلب کلاسهای بوت استرپ برای ایجاد تصاویر مختلف را آموزش میدهیم.
گوشه ها گرد ( Rounded Corners ) :
کلاس rounded. گوشه های تصویر را گرد میکند.
مثال :
[php]
<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>
</body>
[/php]
تصویر زیر خروجی مثال بالا است :
تصاویر دایره ای (circle) :
کلاس rounded-circle. تصاویر را به شکل دایره ای نمایش میدهد.
به مثال زیر توجه کنید:
[php]
<body>
<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>
</body>
[/php]
خروجی مثال بالا :
تصاویر بندانگشتی ( Thumbnail ) :
کلاس img-thumbnail. تصاویر را به تصویر بند انگشتی تبدیل میکنند.
نمونه مثال زیر را ببینید :
[php]
<body>
<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>
</body>
[/php]
خروجی مثال بالا :
تراز کردن تصاویر (Aligning Images) :
برای تراز کردن تصویر در سمت راست از کلاس flout-right. و برای تراز کردن تصاویر در سمت چپ از کلاس flout-left. استفاده میشود.
یک نمونه مثال :
[php]
<body>
<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>
</body>
[/php]
خروجی کلاس های flout-right. و flout-left. تصویر زیر است.
وسط چین کردن عکس ( Centered image ) :
برای وسط چین کردن تصاویر از کلاس mx-auto. و کلاس d-block. استفاده میکنیم.
برای آشنایی بیشتر به مثال زیر توجه کنید.
[php]
<body>
<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>
</body>
[/php]
تصویر زیر یک تصویر وسط چین شده است:
تصاویر ریسپانسیو در بوت استرپ :
این کلاس تصاویر را در تمام ابعاد ارائه میدهد پس میتوانید در هر صفحه نمایشی تصویر را مشاهده نمایید.
تصاویر ریسپانسیو هستند و به طور خودکار متناسب با اندازه صفحه تنظیم میشوند.
تصاویر ریسپانسیو را با افزودن کلاس img-fluid. به تگ img ایجاد کنید.
سپس تصویر به خوبی نسبت به عنصر والدین مقیاس میابد.
به مثال زیر توجه کنید :
[php]
<body>
<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” alt=”Chania” width=”460″ height=”345″>
</div>
</body>
[/php]
این تصویر یک تصویر ریسپانسیو شده است:
