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


فهاد الدرس الخامس من دورة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع الألوان.
غادي نشوفوا des classes لي كيمكنونا باش نغيروا اللون ديال الخط بأنواع مختلفة من الألوان كما غادي نشوفوا كيفاش نتعاملو بل background colors يعني ألوان الخلفية ولي حتى هي عندنا des classes لي كيمكنونا باش نغيروها.


1- نغيير لون الخط ف bootstrap 4

باش نغير لون الخط ف bootstrap 4 عندي مجموعة ديال les classes كاين :
- text-primary لي كتعطي لون أزرق غامق للخط ديالي.
- text-info كتعطي لون أزرق فاتح للخط ديالي.
- text-danger كتعطي لون أحمر للخط ديالي.
- text-success كتعطي لون أخضر للخط ديالي.
- text-warning كتعطي لون أصفر للخط ديالي.
فالمثال لي عندنا خدمنا بهاد les classes كاملين الكود لي زدنا هو:

                                <!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">
                <h1 class="text-right">DCoding</h1>
            </div>
        </div>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-danger display-1">dcoding</h3>
                <h3 class="text-success display-2">dcoding</h3>
                <h3 class="text-warning display-3">dcoding</h3>
                <h3 class="text-primary display-4">dcoding</h3>
                <h3 class="text-info display-4">dcoding</h3>
            </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- نغيير لون الخط ف bootstrap 4 تتمة

شفنا جزء من les classes لي عندها علاقة بالألوان غادي نشوفوا جزء آخر:
- text-muted كتعطي لون رمادي غامق للخط ديالي.
- text-secondary كتعطي لون رمادي فاتح للخط ديالي.
- text-white كتعطي لون أبيض للخط ديالي.
- text-dark كتعطي لون أسود للخط ديالي.
- text-light كتعطي لون  أزرق خفيف جدا للخط ديالي.
فالمثال لي عندنا خدمنا بهاد les classes كاملين الكود لي زدنا هو:

                                <!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">
                <h1 class="text-right">DCoding</h1>
            </div>
        </div>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-muted display-1">dcoding</h3>
                <h3 class="text-secondary display-2">dcoding</h3>
                <h3 class="text-dark display-3">dcoding</h3>
                <h3 class="text-white display-4">dcoding</h3>
                <h3 class="text-light display-4">dcoding</h3>
            </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- نغيير لون الخلفية ف bootstrap 4

باش نغير لون الخلفية ف bootstrap 4 عندي مجموعة ديال les classes كاين :
- bg-primary لي كتعطي لون أزرق غامق للخلفية ديالي.
- bg-info كتعطي لون أزرق فاتح للخلفية ديالي.
- bg-danger كتعطي لون أحمر للخلفية ديالي.
- bg-success كتعطي لون أخضر للخلفية ديالي.
- bg-warning كتعطي لون أصفر للخلفية ديالي.
فالمثال لي عندنا خدمنا بهاد les classes كاملين الكود لي زدنا هو:

                                <!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">
                <h1 class="text-right">DCoding</h1>
            </div>
        </div>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="bg-danger display-1">dcoding</h3>
                <h3 class="bg-success display-2">dcoding</h3>
                <h3 class="bg-warning display-3">dcoding</h3>
                <h3 class="bg-primary display-4">dcoding</h3>
                <h3 class="bg-info display-4">dcoding</h3>
            </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- نغيير لون الخلفية ف bootstrap 4 تتمة

شفنا جزء من les classes لي عندها علاقة بلون الخلفية غادي نشوفوا جزء آخر:
- bg-secondary كتعطي لون رمادي فاتح للخلفية ديالي.
- bg-dark كتعطي لون أسود للخلفية ديالي.
- bg-light كتعطي لون أزرق خفيف جدا للخلفية ديالي.
فالمثال لي عندنا خدمنا بهاد les classes متنساش هاد les classes مكيغيروش لون الخط لازم تستعمل les classes ديال الخط باش تبدل اللون.
الكود لي زدنا هو:

                                    <!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">
                <h1 class="text-right">DCoding</h1>
            </div>
        </div>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="bg-secondary display-1">dcoding</h3>
                <h3 class="bg-dark display-2">dcoding</h3>
                <h3 class="bg-light display-4">dcoding</h3>
            </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>