دورة البوتستراب 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