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


فهاد الدرس العشرون من دورة bootstrap للمبتدئين غادي نشوفوا مجموعة من les propriétés ديال bootstrap لي غادي يمكنونا من إضافة des styles css بلا ما نحتاجو نزيدو css لل projet ديالنا.


1- تغيير لون ل border

ف bootstrap ممكن نزيد border كيف كنشوف فالصورة :



ونغير اللون ديالو كيف شفنا قبل بل class :
- border-success للون الأخضر.
- border-danger للأحمر إلخ...
فالمثال لي عندنا زدنا span عطيناها class border لي زدتلها ل border والطول والعرض ب css منبعد زدتلها اللون لي بغيت كيف قلنا باستعمال les classes bootstrap.
الكود لي زدنا هو :

                                <!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>
    <style>
        .border {
            display: inline-block;
            width: 70px;
            height: 70px;
            margin: 6px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mt-4 mx-auto">
                <span class="border border-primary"></span>
                <span class="border border-secondary"></span>
                <span class="border border-success"></span>
                <span class="border border-danger"></span>
                <span class="border border-warning"></span>
                <span class="border border-info"></span>
                <span class="border border-light"></span>
                <span class="border border-dark"></span>
                <span class="border border-white"></span>
            </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 mx-auto

يمكني نستعمل ل class mx-auto باش نغير لموقع ديال واحد ل élément ونحطو ف centre ديال ل parent ديالو.
فالمثال لي عندنا كيف كنشوف فالصورة :

زدنا div عطيناها لون الخلفية زرق من بعد حطيتها فوسط الصفحة باستعمال ل class mx-auto الكود لي زدنا هو :

                                <!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="bg-primary mx-auto mt-4 p-2 rounded text-white" style="width:150px;">DCoding</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  w

ل class w كتمكن من تغيير العرض ديال ل élément كيف كنشوف فالصورة :

فممكن انني نحدد العرض ياخد 25% أو 50% أو 75% أو 100%
فالمثال لي عندنا زدنا 4 ديال les divs كل وحدة عطيناه عرض كيف قلنا قبل وعطيناهم كاملين لون خلفية زرق.
الكود لي زدنا هو :

                                <!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 mt-4">
                <div class="w-25 bg-primary p-2 rounded mb-2 text-white">DCoding</div>
                <div class="w-50 bg-primary p-2 rounded mb-2 text-white">DCoding</div>
                <div class="w-75 bg-primary p-2 rounded mb-2 text-white">DCoding</div>
                <div class="w-100 bg-primary p-2 rounded mb-2 text-white">DCoding</div>
            </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 h

ل class h كتمكن من تغيير الطول ديال ل élément كيف كنشوف فالصورة :

فممكن انني نحدد الطول ياخد 25% أو 50% أو 75% أو 100%
فالمثال لي عندنا زدنا 4 ديال les divs كل وحدة عطيناه طول كيف قلنا قبل وعطيناهم كاملين لون خلفية زرق.
الكود لي زدنا هو :

                                    <!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 mt-4">
                <div style="height: 200px">
                    <div class="h-25 bg-primary p-2 text-white rounded d-inline-block">DCoding</div>
                    <div class="h-50 bg-primary p-2 text-white rounded  d-inline-block">DCoding</div>
                    <div class="h-75 bg-primary p-2 text-white rounded d-inline-block">DCoding</div>
                    <div class="h-100 bg-primary p-2 text-white rounded  d-inline-block">DCoding</div>
                </div>
            </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>
                                

5- استعمال ل class shadow

ل class shadow كتمكني باش نزيد الظل ل élément ديالي كيف كنشوف فالصورة :

فالمثال لي عندنا احتفظنا بنفس الكود السابق فقط زدنا ل class shadow لكل div الكود لي زدنا هو :

                                    <!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 mt-4">
                <div style="height: 200px">
                    <div class="h-25 bg-primary shadow p-2 text-white rounded d-inline-block">DCoding</div>
                    <div class="h-50 bg-primary shadow p-2 text-white rounded  d-inline-block">DCoding</div>
                    <div class="h-75 bg-primary shadow p-2 text-white rounded d-inline-block">DCoding</div>
                    <div class="h-100 bg-primary shadow p-2 text-white rounded  d-inline-block">DCoding</div>
                </div>
            </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>