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


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


1- ل CLASS TEXT-*-RIGHT ف BOOTSTRAP

ل class text-*-right كتمكني باش نحط واحد الكلمة أو جملة فاليمين ديال div لي هي ل parent ديالها وبلاصت النجمة كنحط الحجم ديال الجهاز لي بغيت تنفذ فيه ل classe.
فالمثال لي عندنا زدت div لي فوسطها زدنا h1 لي عطيتها classe text-center و text-md-right لي كتخلي ل h3 تكون فاليمين فقط فالأجهزة المتوسطة يعني pc portable بينما فالهاتف أو الطابليت ل h3 كيكون فلوسط يمكنلك تصغر المتصفح باش تشوف الفرق.
الكود لي زدنا هو :

                                <!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">
                <h1 class="text-md-right text-center text-lowercase">DCoding</h1>
            </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 TEXT-*-LEFT ف BOOTSTRAP

ل class text-*-left كتدير عكس ل classe text-*-right كتمكني باش نحط واحد الكلمة أو جملة فاليسار ديال div لي هي ل parent ديالها وبلاصت النجمة كنحط الحجم ديال الجهاز لي بغيت تنفذ فيه ل classe.
فالمثال لي عندنا هو نفس المثال السابق فقط غيرنا اسم ل classe
الكود لي زدنا هو :

                                <!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">
                <h1 class="text-md-left text-center text-lowercase">DCoding</h1>
            </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 text-capitalize ف BOOTSTRAP

ل class text-capitalize كتمكني باش نحول اول حرف من كلمة أو جملة ل Majuscule.
فالمثال لي عندنا عطيت ل div لي شفنا قبل classe text-capitalize لي كتخلي أول حرف من ل h3 يكون Majuscule.
الكود لي زدنا هو :

                                <!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">
                <h1 class="text-md-left text-center text-capitalize">dcoding</h1>
            </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 lead ف BOOTSTRAP

ل class lead كتمكني باش كنخدمو بها ف les paragraphes وكتخلي ل paragraphe يكون حجم الخط كبير.
فالمثال لي عندي زدت p فوسطوا زدت texte لي عطيتو ل classe lead فتح الكود فالمتصفح باش تشوف الفرق.
الكود لي زدنا هو :

                                    <!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">
                <h1 class="text-md-left text-center text-capitalize">dcoding</h1>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa minima aliquam nemo natus quo provident sequi libero magni vero? Iure sequi veniam ipsam. At reiciendis quibusdam accusamus veniam totam asperiores.</p>
            </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 -display ف BOOTSTRAP

ل class display  كتمكني باش نخدم بنفس الطريقة لي كنخدم بها ب h1,h2,h3,h4,h5 فكتعطيني أحجام ديال الخط مختلفة فالمثال لي عندنا كاين h3 لي عطيتو class display ولي كنحدد الحجم من 1 ل 4 الكود لي زدنا هو :

                                    <!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">
                <h1 class="text-md-left text-center text-capitalize">dcoding</h1>
                <h3 class="display-1">dcoding</h3>
                <h3 class="display-2">dcoding</h3>
                <h3 class="display-3">dcoding</h3>
                <h3 class="display-4">dcoding</h3>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa minima aliquam nemo natus quo provident sequi libero magni vero? Iure sequi veniam ipsam. At reiciendis quibusdam accusamus veniam totam asperiores.</p>
            </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>