کار با تصاویر در بوت استرپ

بهاره حسنیبهاره حسنی
136 بازدید

در این آموزش به مبحث تصاویر در 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]

تصویر زیر خروجی مثال بالا است :

rounded

 

تصاویر دایره ای (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]

خروجی مثال بالا :

circle

تصاویر بندانگشتی ( 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]

خروجی مثال بالا :

thumbnail

تراز کردن تصاویر (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. تصویر زیر است.

aligning

وسط چین کردن عکس ( 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]

تصویر زیر یک تصویر وسط چین شده است:

centered image

تصاویر ریسپانسیو در بوت استرپ :

این کلاس تصاویر را در تمام ابعاد ارائه میدهد پس میتوانید در هر صفحه نمایشی تصویر را مشاهده نمایید.

تصاویر ریسپانسیو هستند و به طور خودکار متناسب با اندازه صفحه تنظیم میشوند.

تصاویر ریسپانسیو را با افزودن کلاس 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]

این تصویر یک تصویر ریسپانسیو شده است:

responsive

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
232+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت