مقدمة في Bootstrap 5 Text/Typography

-

بنتعلم في هذا الدرس كيفية التعامل مع Typography Classes في Bootstrap 5 مثل font-size،line-height، <p> elements و global settings, headings, body text وغيرها  

تمام نبدأ 

Global settings

يحتوي Bootstrap على اعدادت معرفة مسبقا لكثير من الاشياء مثل لكل من global display و typography و link styles. واكيد بنقدر نغير على هذه الاعدادات.

من الامثلة على ذلك : 

  • حجم خط الافتراضي 1rem (16 بكسل) ، وline-height هو 1.5.
  • p> elements> تحتوي على margin-top: 0 و margin-bottom: 1rem (والي بساوي 16 بكسل).

Headings

تستخدم جميع HTML headings ، من <h1> إلى <h6> ، في Bootstrap . والوضع الافتراضي لها بكون bolder font-weight بالاضافة الى ان هذا Headings بكون responsive حسب حجم الشاشة 

في HTML كنا بنكتب هذه Headings بالطريقة التالية(استخدام اوامر HTML) : 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>
        <h3>h3. Bootstrap heading</h3>
        <h4>h4. Bootstrap heading</h4>
        <h5>h5. Bootstrap heading</h5>
        <h6>h6. Bootstrap heading</h6>
    </div>
</body>
</html>

شغل الصفحة وشوف النتيجة: 

طيب كيف ممكن نستخدم Heading في Bootstrap ولنتعلم كيف طبق الكود التالي: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <p class="h1">h1. Bootstrap heading</p>
        <p class="h2">h2. Bootstrap heading</p>
        <p class="h3">h3. Bootstrap heading</p>
        <p class="h4">h4. Bootstrap heading</p>
        <p class="h5">h5. Bootstrap heading</p>
        <p class="h6">h6. Bootstrap heading</p>
    </div>
</body>
</html>

شغل الصفحة وشوف النتيجة:



النتيجة نفسها لكن الفرق هو الكود، في الكود الاخير الخاص Bootstrap استخدمنا Class مع p> Elements> باسم كل Heading (يعني Bootstrap يحتوي غلى class لكل Heading بالمواصفات الافتراضية لكل Tag)

 Customizing headings

يمكن التحكم ب Headings وتغير الخاصئص الافتراضية لها 

نطبق المثال التالي حتي نفهم الموضوع : 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>
            h2. Bootstrap heading
            <small class="text-muted">Customizing headings</small>
        </h2>
        <p class="h1">h1. Bootstrap heading</p>
        <p class="h2">h2. Bootstrap heading</p>
        <p class="h3">h3. Bootstrap heading</p>
        <p class="h4">h4. Bootstrap heading</p>
        <p class="h5">h5. Bootstrap heading</p>
        <p class="h6">h6. Bootstrap heading</p>
    </div>
</body>
</html>

عملنا في المثال السابق تطبيق ل <h2> واضفنا داخلها مباشرة نص يحتوي على h2. Bootstrap heading وبعدها اضفنا نص داخل small> tag> وطبقنا عليه class باسم text-muted . 

شغل الصفحة وشوف النتيجة :


لاحظ النتيجة ان حجم <h2> تم التغيير عليه وهاذ الي بنسميه Customizing headings

Display headings

تُستخدم Display headings بحيث أكثر بروز من العناوين العادية (حجم خط أكبر ووزن خط أخف lighter font-weight) ، ويوجد classes 6 للاختيار من بينها: display-1 to .display-6.

نطبق مثال ونفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>
    </div>
</body>
</html>

 شغل الصفحة وشوف النتيحة: 



Lead

يستخدم لجعل النص بارز، وغالبا يستخدم مع الفقرات 

نطبق المثال التالي في صفحة HTML

<!DOCTYPE html><html lang="en"><head>    <title>Welcome, Bootstrap Example</title>    <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body>    <div class="container">        <p class="lead">            This is a lead paragraph. It stands out from regular paragraphs. </p>        <p > This is paragraph without lead. It stands out from regular paragraphs. </p> </div></body></html>

شغل الصفحة ونشوف النتيجة:


شوف الفرق بين الفقرتين الاول مع Lead والثاني بدون Lead 

<mark>

يتم اضافة خلفية بلون مختلف عند تطبيق هذا الامر 

نشوف المثال التالي : 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <p class="lead">
            This is a lead paragraph. It stands out from regular paragraphs.
        </p>
        <p>
            This is paragraph without lead. It stands out from regular paragraphs.
        </p>
        <h1>Highlight Text</h1>
        <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
    </div>
</body>
</html>
شغل الصفحة وشوف النتيجة:

Inline text elements

يستخدم لاضافة inline ل HTML5 elements 

نطبق المثال التالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <p>You can use the mark tag to <mark>highlight</mark> text.</p>
        <p><del>This line of text is meant to be treated as deleted text.</del></p>
        <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
        <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
        <p><u>This line of text will render as underlined.</u></p>
        <p><small>This line of text is meant to be treated as fine print.</small></p>
        <p><strong>This line rendered as bold text.</strong></p>
        <p><em>This line rendered as italicized text.</em></p>
    </div>
</body>
</html>

شغل الصفحة ونشوف النتيجة:

ملاحظات على الكود السابق:

ينصح بعدم استخدام هذه tags للأغراض الدلالية semantic purpose:

يمثل <mark> نصًا تم تمييزه أو تمييزه لأغراض مرجعية أو تدوين reference or notation purposes.

يمثل <small> التعليقات الجانبية side-comments والحروف الصغيرة small print، مثل حقوق النشر والنص القانني copyright and legal text.

تمثل <s> العنصر الذي لم يعد ذا صلة no longer relevant أو لم يعد دقيقًا no longer accurate.

يمثل <u> امتدادًا لنص مضمّن inline text يجب تقديمه بطريقة تشير إلى أنه يحتوي على تعليق توضيحي غير نصي non-textual annotation.


إذا كنت تريد تنسيق النص الخاص بك ، فيجب عليك استخدام classes التالية بدلاً من ذلك:

mark. سيطبق نفس الأنماط مثل <mark>.

small. سيطبق نفس الأنماط مثل <small>.

سيطبق text-decoration-underline. نفس أنماط <u>.

text-decoration-line-through. سيطبق نفس الأنماط مثل <s>.

يمكن استخدام tags التالية <b> و <i>

في HTML5 يستخدم <b> لابراز الكلمات أو العبارات ، بينما <i> في الغالب مخصصة للصوت والمصطلحات الفنية وما إلى ذلك.

abbr> Abbreviations>

يستخدم هذا الامر  في Bootstrap 5 لاضافة حد سفلي منقط ومؤشر مع علامة استفهام عند التمرير

طريقة الكتابة بتكون :

<abbr title="Cascading Style Sheets">CSS</abbr>


لاحظ ان هذا الكود يحتوي على title وهو النص الي ببين لما نمرر المؤشر فوق النص

نطبق الكود التالي في صفحة HTML ونشوف النتيجة:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <p>You can use 
           <abbr title="Cascading Style Sheets">CSS</abbr> 
           to style your <abbr title="HyperText Markup Language">HTML</abbr>.
        </p>
    </div>
</body>
</html>

نتيجة التنفيذ:

Blockquotes 

يستخدم هذا الامر عند الاقتباس من محتوى آخر quoting blocks،وايضا عند التسمية naming a source .

نطبق المثال التالي ونشوف النتيجة:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Blockquotes</h1>
    <p>The blockquote element is used to present content from another source:</p>
    <blockquote class="blockquote">
        <p>A well-known quote, contained in a blockquote element.</p>
    </blockquote>
</body>
</html>

النتيجة بتكون:

Naming a source

لتطبيق Naming a source يجب وضع blockquote خارج <blockquote>. عند تقديم الاسناد attribution، وتوضع <blockquote> في <figure> وبنستخدم <figcaption> أو block level element (على سبيل المثال ، <p>) مع blockquote-footer class. تأكد من التفاف Naming a source في <cite> أيضًا.

نطبق المثال التالي حتى نفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Blockquotes</h1>
    <p>The blockquote element is used to present content from another source:</p>
    <figure>
        <blockquote class="blockquote">
            <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
        </figcaption>
    </figure>
</body>
</html>

نتيجة التنفيذ بتكون :

 

<Description Lists <dl

يستخدم مع description list ويمكن محاذاة النصوص بشكل افقي على شكل شبكة ويمكن اقتطاع جزء من النص باستخدام text-truncate class.

نطبق المثال التالي حتي نفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <dl class="row">
        <dt class="col-sm-3">Description lists</dt>
        <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
        <dt class="col-sm-3">Term</dt>
        <dd class="col-sm-9">
            <p>Definition for the term.</p>
            <p>And some more placeholder definition text.</p>
        </dd>
        <dt class="col-sm-3">Another term</dt>
        <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
        <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
        <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
        <dt class="col-sm-3">Nesting</dt>
        <dd class="col-sm-9">
            <dl class="row">
                <dt class="col-sm-4">Nested definition list</dt>
                <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
            </dl>
        </dd>
    </dl>
</body>
</html>

شغل الصفحة وشوف النتيجة:

لاحظ النتيجة الي هي عبارة عن List مع وصف لكل Item في الجزء الي عليه مربع احمر استخدمنا text-truncate والي بيعني ان سيتم اقتطاع النص عند الحاجة، جرب تكبر او تصغر المتصفح وشوف النتيجة

<Code Snippets <code

يستخدم عند الحاجة الى تضمين الاكواد البرمجية على شكل نصوص داخل HTML Elements. يتم عرضها كما هي. 
نطبق المثال التالي ونشوف النتيجة:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Code Snippets</h1>
    <p>Inline snippets of code should be embedded in the code element:</p>
    <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</body>
</html>

نتيجة التنفيذ بتكون :


    

<Keyboard Inputs <kbd

يستخدم عند الحاجة الى اضافة نص للدلالة على اختصار من لوحة المفاتيح>

نطبق الكود التالي :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h1>Keyboard Inputs</h1>
        <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
        <p>Use <kbd>ctrl + S</kbd> To Save Document.</p>
        <p>Use <kbd>ctrl + P</kbd> To Print Document.</p>
    </div>
</body>
</html>

شغل الصفحة ونشوف النتيجة :

<pre> 

يستخدم عند الحاجة الى اضافة نص كم هو بنفس التنسيق والها استخدمات كتيره منها مثلا اذا كان المطلوب اضافة كود برمجي حتى نعرضو مثل ما هو. ممكن ايضا عند الحاجة الى اضافة نص شعر مثلا وغيرها. 

نطبق المثال التالي : 

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" dir="ltr">
        <pre >
        $lead-font-size:              $font-size-base * 1.25;
        $lead-font-weight:            300;
        $small-font-size:             .875em;
        $sub-sup-font-size:           .75em;
        </pre>
    </div>
</body>
</html>

شغل الصفحة وبتكون النتيجة:

الجدول التالي يعرض مجموعة من Typography Classes


اسم Classالوصف والاستخدام
.lead
يستخدم لجعل النصوص او الفقرات بارزة
.text-start
يستخدم لمحاذاة النص إلى اليسار
.text-break
يتم عرض النص الطويل بسطر واحد ولن يتم كسر السطر بسطر آخر 
.text-center
يستخدم لمحاذاة النص الى الوسط
.text-decoration-none
يزيل التسطير من الرابط
.text-end
يستخدم لمحاذاة النص الى اليمين
.text-nowrap
يشير إلى عدم التفاف النص
.text-lowercase
يشير إلى نص صغير
.text-uppercase
يشير إلى نص بأحرف كبيرة uppercased
text-capitalize
يشير إلى نص بأحرف كبيرة capitalized
.initialism
يعرض النص داخل عنصر <abbr> بحجم خط أصغر قليلاً
.list-unstyled
يزيل نمط القائمة الافتراضي والهامش الأيسر في عناصر القائمة (يعمل على كل من <ul> و <ol>). تنطبق هذه الفئة فقط على عناصر القائمة الفرعية المباشرة (لإزالة نمط القائمة الافتراضي من أي قوائم متداخلة ، قم بتطبيق هذه الفئة على أي قوائم متداخلة أيضًا)
.list-inline
يضع جميع عناصر القائمة في سطر واحد (يُستخدم مع عنصر .list-inline-item في كل عنصر من العناصر <li>)

طبق المثال التالي حتي تشوف شو الفرق بينهم : 

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h2>Typography Classes</h2>
    <p class="lead">This paragraph stands out.</p>
    <p class="text-star">This paragraph stands out.</p>
    <p class="text-break">This paragraph stands out.</p>
    <p class="text-center">This paragraph stands out.</p>
    <p class="text-decoration-none">This paragraph stands out.</p>
    <p class="text-end">This paragraph stands out.</p>
    <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
    <p class="text-lowercase">This paragraph stands out.</p>
    <p class="text-uppercase">This paragraph stands out.</p>
    <p class="text-capitalize">This paragraph stands out.</p>
    <h2>Typography</h2>
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>
    <p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly smaller abbr)</p>
    
    <p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):</p>
    <ul class="list-unstyled">
        <li>Coffee</li>
        <li>
            Tea
            <ul>
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
        </li>
        <li>Milk</li>
    </ul>
    <h2>Typography</h2>
    <p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:</p>
    <ul class="list-inline">
        <li class="list-inline-item">Coffee</li>
        <li class="list-inline-item">Tea</li>
        <li class="list-inline-item">Milk</li>
    </ul>
</body>
</html>