دورة bootstrap 4 للمبتدئين الدرس السابع


فهاد الجزء السابع من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نتعاملو مع الصور كيفاش نزيدولهم des classes bootstrap لي غادي يمكنونا باش ندخلوا عليهم تغييرات فالشكل.


1- ل CLASS IMG-FLUID ف BOOTSTRAP 4

أول حاجة غادي تديرها غادي تزيد تصويرة ف dossier ديال ل projet ديالك منبعد غادي نزيدو الصورة فل fichier ديالنا ب tag img لي فل src ديالها عطينها إسم الصورة.
ل class img-fluid كتمكني باش نخلي ل image ديالي responsive يعني كتوافق حسب الأجهزة فالمثال كيف قلنا زدنا الصورة من بعد عطيناها ل class img-fluid.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <img src="bg.jpg" class="img-fluid" alt="">
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

2- ل CLASS rounded ف BOOTSTRAP 4

ل class rounded كتمكني باش نزيد ل image ديالي الحواف يعني الجوانب ديالها كيولي عندهم شكل دائري.
فالمثال لي عندنا زدنا ل classe rounded ل image ديالنا.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <img src="bg.jpg" class="img-fluid rounded" alt="">
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

3- ل CLASS rounded-circle ف BOOTSTRAP 4

ل class rounded-circle كتمكني باش نرد ل image ديالي  دائرية.
فالمثال لي عندنا زدنا ل classe rounded-circle ل image ديالنا.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <img src="bg.jpg" class="img-fluid rounded-circle" alt="">
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

4- ل CLASS img-thumbnail ف BOOTSTRAP 4

ل class img-thumbnail كتمكني باش نزيد  ل image ديالي  border يعني خط سميك داير بها.
فالمثال لي عندنا زدنا ل class img-thumbnail ل image ديالنا.
الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <img src="bg.jpg" class="img-fluid img-thumbnail" alt="">
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                                

4- ل CLASS float-right & float-left ف BOOTSTRAP 4

ل  class float-right كتمكني باش نحط الصورة فاليمين ديال ل parent ديالها بينما ل class float-left كتمكني باش ندير العكس.
فالمثال لي عندنا زدنا les classes بجوج للصورة ديالنا متنساش ت commenter واحد فيهم باش تشوف الفرق بيناتهم.
الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- <img src="bg.jpg" class="img-fluid float-left img-thumbnail" width="200" alt=""> -->
                <img src="bg.jpg" class="img-fluid float-right img-thumbnail" width="200" alt="">
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>