السلام عليكم و رحمة الله وبركاته
في هذا الدرس إن شاء الله سنتعرف على الخطوط في البوتستراب 3 .
يختلف نوع حجم و شكل الخطوط في البوتسراب 3 على خطوط المتصفح الإفتراضية أي بدون إستعمال البوتستراب .
1 – الخطوط في البوتستراب 3 :
حجم الخط العام و الإفتراضي في البوتستراب 3 هو 14px بإرتفاع سطر ( line-height ) حوالي 1.428 . و هو مطبق على جميع العناصر داخل الـ <body> و جميع الفقرات <p> .
في هذا المقال سنتعرف على مجموعة من عناصر و وسوم الـ html الخاصة بالخط و النصوص باستخدام البوتستراب .
أولا : العناوين و الترويسات في البوتستراب 3 .
هذا المثال يستعرض شكل وسوم العناوين و الترويسات ( من h1 حتى h6 ) في البوتستراب 3 :
- وسم الـ <small> في البوتستراب 3 :
في البوتستراب 3 يظهر وسم الـ <small> على شكل نص ثانوي بلون فاتح .
في هذا المثال نستخدم وسم <small> مع وسوم العناوين كالآتي :
<h1> ترويسة 1 <small> نص ثانوي </small> </h1> <h2> ترويسة 2 <small> نص ثانوي </small> </h2> <h3> ترويسة 3 <small> نص ثانوي </small> </h3> <h4> ترويسة 4 <small> نص ثانوي </small> </h4> <h5> ترويسة 5 <small> نص ثانوي </small> </h5> <h6> ترويسة 6 <small> نص ثانوي </small> </h6>
فيظهر كما هو موضح في هذا المثال :
- وسم الـ <mark> في البوتستراب 3 :
يُستخدم وسم الـ <mark> في تعليم و تسليط الضوء على كلمة أو جملة معينة , و يستعمل في البوتستراب 3 كالتالي :
<h1> تعليم <mark> كلمة أو جملة </mark> بإستعمال وسم الـ mark </h1>
فتظهر خلفية الكلمة المُعلمة بلون مختلف عن النص الآخر .
– وسم الاختصار <abbr> في البوتستراب :
كلمة abbr اختصار abbreviation وهذا الوسم يقوم بتعريف أو تحديد اختصار معين وهو يقوم باعطاء معلومات للمتصفح ولأنظمة الترجمة وكذلك لمحركات البحث.
ويتم استخدام خاصية title مع هذا الوسم حيث يتم كتابة الكلمة كاملة داخل title وبمجرد وضع المؤشر على الاسم المختصر تظهر الكلمة كاملة والتى تمت كتابتها داخل title
- وسم الـ <blockquote> في البوتستراب 3 :
يستعمل وسم الـ blockquote بطريقيتين في البوتستراب 3 :
بطريقة عادية بدون إضافة صنف سي أس أس من البوتستراب فيظهر الإقتباس في جهة اليسار
<blockquote> <p> أي شيء يمنعك من أن تكون ودودًا وجارًا جيدًا ، هو تكتيك إرهابي. </p> <footer> ريتشارد ستالمان </footer> </blockquote>
أو بإضافة صنف السي أس أس الخاص بالبوتستراب 3 ( blockquote-reverse ) فيظهر في جهة اليمين
<blockquote class="blockquote-reverse" > <p> أي شيء يمنعك من أن تكون ودودًا وجارًا جيدًا ، هو تكتيك إرهابي. </p> <footer> ريتشارد ستالمان </footer> </blockquote>
شاهد المثال التالي لتستوعب أكثر :
- وسم الـ <code> في البوتستراب 3 :
يستعمل وسم code في الـ Html لكتابة أوسمة الـ html , بالنسبة للبوتستراب 3 يظهر هذا الوسم بلون خط أحمر و بخلفية بلون رمادي .
<h4> وسم الكود يستعمل لتمثيل مجموعة من أكواد الـ HTML كـ : <code> span , p ,h1 ,div </code> .. </h4>
مثال :
2 – ألوان الخطوط في البوتستراب 3 :
تستعمل البوتستراب 3 مجموعة من أصناف السي أس أس لتلوين الخطوط حيث يرمز كل لون الى شيئ معين .
هذا الكود يحتوي على جميع أصناف تلوين الخطوط في البوتستراب 3 مع معنى كل لون .
كود تلوين الخطوط :
<p class="text-info"> لون خط يمثل مجموعة من المعلومات </p> <p class="text-success"> لون خط يدل على نجاح عملية ما </p> <p class="text-primary"> لون خط يدل على شيئ أساسي </p> <p class="text-warning"> لون خط يدل تحدير </p> <p class="text-danger"> لون خط يدل على خطر </p>
كود تلوين خلفيات الخطوط :
<p class="bg-info"> نص بلون خلفية يدل على معلومات </p> <p class="bg-success"> نص بلون خلفية يدل على نجاح العملية </p> <p class="bg-primary"> نص بلون خلفية يدل على نص أساسي </p> <p class="bg-warning"> نص بلون خط يدل على تحديري </p> <p class="bg-danger"> نص بلون خلفية يدل على خطر </p>
فتظهر ألوان الخطوط و ألوان خلفيات الخطوط بالشكل التالي :
3 – محاذاة النصوص في البوتستراب 3 :
تحتوي البوتستراب على مجموعة من الأصناف css classes التي تمكن المستخدم من التحكم في إتجاه النص سنذكر في هذا المثال 3 أصناف و هي : text-right و text-center و text-left و التي تقوم بمحاذا ة النص الى ( اليمين الوسط و الشمال ) على الترتيب .
الكود :
<h3 class="text-right"> نص بمحاداة الى اليمين </h3> <h3 class="text-center"> نص بمحاداة الى الوسط </h3> <h3 class="text-left"> نص بمحاداة الى اليسار </h3>
النتيجة :
هذا كل ما يتعلق بالخطوط (typography) في البوتستراب 3 .
نرجو من الله أنكم إستفدتم من هذا الدرس .
شكرا جزيلا على المتابعة .
المصـادر : المصدر 1 , المصدر 2 , المصدر 3 , المصدر 4 .
أحدث التعليقات