السلام عليكم و رحمة الله وبركاته .
سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 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 .
أحدث التعليقات