الفرق بين المراجعتين ل"Bootstrap/jumbotron"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:مكوِّن Jumbotron (شاشة الإعلانات) في إطار العمل Bootstrap}}</noinclude> تصنيف:Bootstrapتصنيف:Boot...') |
(إضافة محتوى الصفحة) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مكوِّن Jumbotron (شاشة الإعلانات) في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:مكوِّن Jumbotron (شاشة الإعلانات) في إطار العمل Bootstrap}}</noinclude> | ||
− | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | + | [[تصنيف:Bootstrap]] |
+ | [[تصنيف:Bootstrap components]] | ||
+ | استخدم مكوِّن Jumbotron (شاشة الإعلان) للتركيز على محتوى ذي أهميّة في صفحة الويب. | ||
+ | |||
+ | مكوِّن مرن وخفيف يمكنه التمدّد على كامل إطار العرض لإبراز رسائل دعائيّة أساسيّة على الموقع.<syntaxhighlight lang="html"> | ||
+ | <div class="jumbotron"> | ||
+ | <h1 class="display-4">مرحبا أيّها العالم!</h1> | ||
+ | <p class="lead">هذا مثال على محتوى شديد الأهميّة، مكوِّن يشبه شاشات الإعلانات لجذب انتباه أكبر لمحتوى مميَّز. | ||
+ | </p> | ||
+ | <hr class="my-4"> | ||
+ | <p>يستخدم المكوِّن أصنافًا خدميّة للخطوط والتباعد لنشر المحتوى ضمن الحاويّة الأعرض.</p> | ||
+ | <p class="lead"> | ||
+ | <a class="btn btn-primary btn-lg" href="#" role="button">اقرأ المزيد.</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </syntaxhighlight>طبِّق الصنف المعدِّل <code>.jumbotron-fluid</code> مع الصنف <code>.jumbotron</code> وأضف في الداخل الصنف <code>.container</code> أو <code>.container-fluid</code> للحصول مكوِّن Jumbotron مائع.<syntaxhighlight lang="html"> | ||
+ | <div class="jumbotron jumbotron-fluid"> | ||
+ | <div class="container"> | ||
+ | <h1 class="display-4">مكوِّن Jumbotron مائع</h1> | ||
+ | <p class="lead">هذا صنف Jumbotron مُعَدَّل يشغل المساحة الأفقيّة للعنصُر الأب كاملة.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | == مصادر == | ||
+ | * [https://getbootstrap.com/docs/4.0/components/jumbotron/ صفحة Jumbotron في توثيق Bootstrap]. |
مراجعة 12:37، 15 أبريل 2018
استخدم مكوِّن Jumbotron (شاشة الإعلان) للتركيز على محتوى ذي أهميّة في صفحة الويب.
مكوِّن مرن وخفيف يمكنه التمدّد على كامل إطار العرض لإبراز رسائل دعائيّة أساسيّة على الموقع.
<div class="jumbotron">
<h1 class="display-4">مرحبا أيّها العالم!</h1>
<p class="lead">هذا مثال على محتوى شديد الأهميّة، مكوِّن يشبه شاشات الإعلانات لجذب انتباه أكبر لمحتوى مميَّز.
</p>
<hr class="my-4">
<p>يستخدم المكوِّن أصنافًا خدميّة للخطوط والتباعد لنشر المحتوى ضمن الحاويّة الأعرض.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">اقرأ المزيد.</a>
</p>
</div>
طبِّق الصنف المعدِّل .jumbotron-fluid
مع الصنف .jumbotron
وأضف في الداخل الصنف .container
أو .container-fluid
للحصول مكوِّن Jumbotron مائع.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">مكوِّن Jumbotron مائع</h1>
<p class="lead">هذا صنف Jumbotron مُعَدَّل يشغل المساحة الأفقيّة للعنصُر الأب كاملة.</p>
</div>
</div>