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


فهاد الدرس التاسع من دورة bootstrap للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع les boutons غادي نشوفوا جميع الأشكال لي كيوفر bootstrap  مع ألوانها المختلفة مع العديد من الأمور الأخرى.


1- ل CLASS btn ف BOOTSTRAP 4

 ل class btn ف bootstrap 4 كتمكن باش نزيد style ديال bouton لل bouton ديالي لكن بإضافة des classes آخرين ممكن نزيد des styles آخرين فعندنا :

- btn btn-primary لي كتعرض bouton بخلفية زرقاء غامقة.
- btn btn-info لي كتعرض bouton بخلفية زرقاء فاتحة.
- btn btn-danger لي كتعرض bouton بخلفية حمراء.
- btn btn-success لي كتعرض bouton بخلفية خضراء.
- btn btn-warning لي كتعرض bouton بخلفية صفراء.
فالمثال لي عندنا خدمنا بهاد 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">
                <button type="button" class="btn btn-primary">DCoding</button>
                <button type="button" class="btn btn-danger">DCoding</button>
                <button type="button" class="btn btn-success">DCoding</button>
                <button type="button" class="btn btn-info">DCoding</button>
                <button type="button" class="btn btn-warning">DCoding</button>
            </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 btn ف BOOTSTRAP 4 تتمة

شفنا جزء من les classes لي عندها علاقة بلون خلفية les boutons دبا غادي نشوفوا جزء آخر عندنا:

- btn btn-dark لي كتعرض bouton بخلفية سوداء غامقة.
- btn btn-secondary لي كتعرض bouton بخلفية سوداء فاتحة.
- btn btn-link لي كتعرض bouton على شكل رابط.
- btn btn-light لي كتعرض bouton بخلفية فاتحة بزاف.
فالمثال لي عندنا خدمنا بهاد 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">
                <button type="button" class="btn btn-dark">DCoding</button>
                <button type="button" class="btn btn-light">DCoding</button>
                <button type="button" class="btn btn-link">DCoding</button>
                <button type="button" class="btn btn-secondary">DCoding</button>
            </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 btn-outline- ف BOOTSTRAP 4

ل -class btn-outline ف bootstrap 4 كتمكن باش نزيد border ل les boutons وملي كنحط la souris فوقها كيتغير لون الخلفية ديال ل bouton فعندنا :

- btn btn-outline-primary لي كتزيد border لل bouton أزرق مع خلفية زرقاء غامقة.
- btn btn-outline-info لي كتزيد border لل bouton أزرق مع خلفية زرقاء فاتحة.
- btn btn-outline-danger  لي كتزيد border لل bouton أحمر مع خلفية حمراء.
- btn btn-outline-success  لي كتزيد border لل bouton أخضر مع خلفية خضراء.
فالمثال لي عندنا خدمنا بهاد 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">
                <button type="button" class="btn btn-outline-primary">DCoding</button>
                <button type="button" class="btn btn-outline-danger">DCoding</button>
                <button type="button" class="btn btn-outline-success">DCoding</button>
                <button type="button" class="btn btn-outline-info">DCoding</button>
        </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 btn-outline- ف BOOTSTRAP 4 تتمة

شفنا جزء من-class btn-outline دبا غادي نشوفوا جزء آخر عندنا :

- btn btn-outline-dark  لي كتزيد border لل bouton أسود مع خلفية سوداء غامقة.
- btn btn-outline-secondary لي كتزيد border لل bouton أسود مع خلفية سوداء فاتحة.
- btn btn-outline-warning  لي كتزيد border لل bouton أصفر مع خلفية صفراء.
فالمثال لي عندنا خدمنا بهاد 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">
                <button type="button" class="btn btn-outline-dark">DCoding</button>
                <button type="button" class="btn btn-outline-secondary">DCoding</button>
                <button type="button" class="btn btn-outline-warning">DCoding</button>
            </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- تغيير حجم les boutons ف bootstrap 4

فباش نغير الحجم ديال les boutons ديالي bootstrap 4 عندها des classes لي كيمكنوا من هادشي كاين :
- ل class btn-lg لي كتمكن باش نعرض bouton كبيرة الحجم.
- ل class btn-xs كتمكن باش نعرض bouton صغيرة الحجم.
- ل class btn-block لي كتمكن ل bouton تاخد لعرض ديال ل parent ديالها كامل.
المثال لي عندنا خدمنا بهاد 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">
                <button type="button" class="btn btn-lg btn-outline-dark">DCoding</button>
                <button type="button" class="btn btn-xs btn-outline-secondary">DCoding</button>
                <button type="button" class="btn btn-block btn-outline-warning">DCoding</button>
            </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>