Bootstrap 5 Images

-

بنتعلم في هذا الدرس امكانيات Bootstrap بالتحكم بالصورة وكيف بتم عرضها على الشاشة بطريقة تكون متناسبة مع حجم الشاشة، بالاضافة الى مجموعة من الخصائص الي ممكن نغيرها على الصورة

Responsive images

يحتوي Bootstrap على class باسم img-fluid. الي من خلالو بتم عرض الصورة بشكل تتناسب مع حجم الشاشة او حجم parent element في حال كانت مثلا موجوده في Div Element. في هذا class يتم تطبيق max-width: 100% و height: auto 

ملاحظة: اكيد بتم عرض الصورة حسب الحجم الاصلي للصورة. بمعنى ان max-width: 100%بكون بحد اقصى عرض الصورة الاصلي
نطبق المثال التالي حتى نفهم كيف تشتغل.
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Responsive images with <code>.img-fluid class</code></h2>
       
        <img src="Programming.jpg" class="img-fluid" alt="...">
    </div>
</body>
</html>

نتيجة التنفيذ بتكون :



واكيد حتى تشوف كيف بتم تغيير حجم الصورة لازم تغير حجم المتصفح(حاول تكبر وتصغر حجم المتصفح وشوف النتيجة)

Image thumbnails

يستخدم هذا class لاضافة اطار border بحجم 1px حول الصورة ويستخدم class المسمى img-thumbnail. 
لاحظ ان تم اضافة اطار حول الصورة. 

Rounded Corners
يستخدم هذا class لاضافة زوايا مستديرة rounded corners حول الصورة 
نفهم الموضوع بتطبيق المثال التالي:

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Responsive images with <code>.img-rounded class</code></h2>
        <!--<img src="Programming.jpg" class="img-fluid" alt="...">-->
        <img src="Programming.jpg" class="img-fluid" alt="...">
        <hr />
        <img src="Programming.jpg" class="img-fluid rounded" alt="...">
    </div>
</body>
</html>

شغل الصفحة وشوف النتيجة: 


شوف الاختلاف بين الصورتين الصورة الأولى ما طبقنا امر rounded class. وبالتالي الصورة ما تغير عليها اشي. الصورة الثانية شوف كيف الحواف حولها تغيرت.

Circle Class

يستخدم هذا class لجعل الصورة على شكل دائرة وبنستخدم class باسم rounded-circle.
نفهم الموضوع بتطبيق المثال التالي:
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body>    <div class="container">        <h2>Responsive images with <code>.rounded-circle class</code></h2>        <img src="Programming.jpg" class="rounded-circle" alt="...">    </div></body></html>
نتيجة الصفحة بتكون :

Aligning images

 يستخدم هذا class لمحاذاة الصورة لليمين باستخدام الامر float-end. والمحاذاة الى اليسار باستخدام float-start.

نطبق المثال التالي :

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Responsive images with <code>.Aligning Images class</code></h2>
        <img src="bootstrap.jpg" class="float-start">
        <img src="bootstrap.jpg" class="float-end">
    </div>
</body>
</html>

النتيجة بتكون :


توسيط الصورة text-center

يمكن توسيط الصورة في وسط الشاشة باستخدما class المسمى text-center 

نطبق الكود التالي:

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Responsive images with <code>.text-center class</code></h2>
        <div class="text-center">
            <img src="bootstrap.jpg" class="rounded" alt="...">
        </div>
    </div>
</body>
</html>

نتيجة التنفيذ بتكون :