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

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

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

 

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

سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron , page-header  و  well .

1 – صنف الـ jumbotron. :

الـ jumbotron.  هو عبارة عن مربع كبير يعمل على إظهار بعض المحتويات و المعلومات الخاص و يستعمل عموما في أعلى صفحات الويب .

يظهر الـ jumbotron.  في البوتستراب 3 كمربع كبير بلون رمادي  و زوايا دائرية و حجم خط كبير . كما يمكن وضع جميع عناصر الـ html  داخله بجميع أصناف (css-classes) الخاصة بالبوتستراب 3 .

و يستعمل بوضع صنف الـ jumbotron.  داخل وسم الـ <div> . كما يوضحه الكود التالي :


<div class="jumbotron">
<h1 class="text-center"> جمعية البرمجيات الحرة و غنو لنيكس </h1>
<h2 class="text-center"> دروس بوتستراب 3 </h2>
<h3 class="text-center"> <code> jumbotron. </code> مثال على </h3>
</div>

  • مثال على إستخدام صنف الـ jumbotron. :
  • كما يمكن إستعمال صنف الـ jumbotron.  داخل صنف الـ container. للحصول على المحاذاة من اليمين و الشمال بهذه الطريقة :

<div class="container">
<div class="jumbotron">
<h1 class="text-center"> جمعية البرمجيات الحرة و غنو لنيكس </h1>
<h2 class="text-center"> دروس بوتستراب 3 </h2>
<h3 class="text-center"> <code> .jumbotron </code> مثال على </h3>
</div>
</div>

  • مثال على إستخدام صنف الـ jumbotron.  داخل صنف الـ container.  :

2 – صنف الـ page-header. :

يستعمل صنف الـ page-header.  لوضع خظ أفقي بلون رمادي فاتح تحت عنوان أو ترويسة و يستخدم في البوتستراب 3 بإضافته إلى وسم الـ <div>  بهذه الطريقة :


<div class="container">
<div class="page-header">
<h1 class="text-center"> جمعية البرمجيات الحرة و غنو لنيكس </h1>
</div>
<h3 class="text-right"> <code> .page-header </code> مثال على </h3>
</div>

  • مثال على إستخدام صنف الـ page-header. :

3 – صنف الـ well. :

يقوم صنف الـ well.  بوضع عناصر الـ html  داخل إطار بخلفية رمادية و بزوايا دائرية  و محاذاة صغيرة بين كل الجهات و يستعمل عموما للتأشير على النصوص والفقرات .

ويستعمل صنف الـ well.  بإضافته إلى وسم الـ <div>  كما يوضح الكود التالي :


<div class="container">

<div class="well">
<h1 class="text-center"> جمعية البرمجيات الحرة و غنو لنيكس </h1>
<h3 class="text-center"> <code> .well </code> مثال على صنف الـ </h3>
</div>

</div>

  • مثال على إستخدام صنف الـ well. :
  • يحتوي صنف الـ well.  على صنفين فرعيين آخرين و هما الـ well-sm. و الـ well-lg. و يستعملان لتقليص أو زيادة حجم المحاذاة من كل الجهات للعناصر داخل صنف الـ well.

  • الكود التالي يوضح كيفية إستعمال هذان الصنفان :


<div class="container">

<div class="well well-sm">
<h3 class="text-center"> <code> .well-sm </code> مثال على صنف الـ </h3>
</div>
<div class="well ">
<h3 class="text-center"> <code> .well normal </code> مثال على صنف الـ </h3>
</div>
<div class="well well-lg">
<h3 class="text-center"> <code> .well-lg </code> مثال على صنف الـ </h3>
</div>

</div>

  • مثال على إستخدام صنف الـ well-sm. , الـ well. و الـ well-lg.  على التوالي :

 

نرجو من الله أنكم إستفدتم من هذا الدرس وشكرا جزيلا.

 

 

المصـادر : المصدر 1 , المصدر 2 , المصدر 3 .

 

دورة البوتستراب 3 - الدرس الخامس Bootstrap 3 Images
دورة بوتستراب 3 - الدرس السابع bootstrap alerts

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

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

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

    السلام عليكم و رحمة الله و بركاته . مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل... دورة بوتستراب 3 – الدرس السابع bootstrap alerts اقرأ المزيد
  • دورة البوتستراب 3 – الدرس الخامس  Bootstrap 3 Images

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

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

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

      السلام عليكم و رحمة الله و بركاته. مرحبا بكم في درس جديد في دورتنا حول البوتستراب 3 و سيكون عن الجداول في البوتستراب... دورة بوتستراب 3 – الدرس الرابع bootstrap 3 tables اقرأ المزيد

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

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

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

  • مع 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 على البرمجيات المفتوحة المصدر ، مصدر مفتوح لتعدد اللغة كيفما تشاء ..
بتقنية مهارتي | ووردبريس