جمعية البرمجيات الحرة وغنو لينكس
  • الرئيسية
  • تصنيفات
    • اخبار
    • العاب
    • برامج
    • مراجعات
    • مقابلات
    • مقالات
    • دروس
      • بوتستراب
    • عتاد
  • النوادي
    • النادي الحر
    • نادي التوطين و التوثيق
    • نادي الانترنت و الحماية
    • نادي الغرافيكس و الالعاب
    • نادي الملتيميديا
    • نادي البرمجة
  • نشاطات الجمعية
  • ليبر بلانت الجزائر
اختر صفحة
لـ aleua mehani | 04/04/2018 | بوتستراب، دروس | 0 تعليقات

دورة بوتستراب 3 – الدرس الثالث bootstrap typography

دورة بوتستراب 3 – الدرس الثالث bootstrap typography

 

السلام عليكم و رحمة الله وبركاته

في هذا الدرس إن شاء الله سنتعرف على الخطوط في البوتستراب 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 .

 

 

دورة بوتستراب 3 - الدرس الثاني Bootstrap Grid System
دورة بوتستراب 3 - الدرس الرابع bootstrap 3 tables

مقالات ذات صلة

  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    السلام عليكم و رحمة الله و بركاته . مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل... دورة بوتستراب 3 – الدرس السابع bootstrap alerts اقرأ المزيد
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

    دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

      السلام عليكم و رحمة الله وبركاته . سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron ,... دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells اقرأ المزيد
  • دورة البوتستراب 3 – الدرس الخامس  Bootstrap 3 Images

    دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

      السلام عليكم و رحمة الله و بركاته . سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 3 و التي... دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images اقرأ المزيد

أرسل إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أحدث المقالات

  • مع shellinabox وداعا لبرامج الـ shh
  • اطلاق اوبنتو 19.10 (Eoan Ermin)
  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells
  • دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

أحدث التعليقات

  • hasan mohamed على مع shellinabox وداعا لبرامج الـ shh
  • khammaci hachemi على فيديو: د.رتشارد ستالمان : ماهي البرمجيات الحرة
  • aleua mehani على دورة بوتستـراب 3 – الدرس الأول
  • حياة على دورة بوتستـراب 3 – الدرس الأول
  • Alili Mohamed على البرمجيات المفتوحة المصدر ، مصدر مفتوح لتعدد اللغة كيفما تشاء ..
بتقنية مهارتي | ووردبريس