شکل‌دهی به صفحه‌ی خانه به کمک جامباترون

برای به‌روزرسانی صفحه‌ی خانه از یک عنصر بوت‌استرپ¹⁸¹ به نام جامباترون استفاده می‌کنیم. این عنصر جعبه‌ی بزرگی است که از دیگر بخش‌های صفحه متمایز بوده و می‌تواند هر چیزی را که بخواهید دربربگیرد. به طور معمول از این عنصر در صفحه‌های آغازین پروژه و برای بیان شرحی مختصر از آن استفاده می‌شود و می‌تواند بیننده را به انجام عملی در سایت دعوت کند.

این فایل index.html بازبینی‌شده است:

{% extends "learning_logs/base.html" %}

{% block page_header %}
<div class="jumbotron">
<h1 class="display-3">Track your learning.</h1>
<p class="lead">Make your own Learning Log, and keep a list of the
topics you're learning about. Whenever you learn something new
about a topic, make an entry summarizing what you've learned.</p>
<a class="btn btn-lg btn-primary" href="{% url 'users:register' %}"
role="button">Register &raquo;</a>
</div>
{% endblock page_header %}

در ۱ به جانگو می‌گوییم که آن‌چه در قسمت page_header قرار می‌گیرد تعریف کند. جامباترون در عمل یک عنصر div است که تعدادی دستور شیوه‌دهی به آن اعمال می‌شود (۲). انتخاب‌گر jumbotron این دستورهای شیوه‌دهی را از کتابخانه‌ی بوت‌استرپ بر این عنصر اعمال می‌کند.

داخل جامباترون سه عنصر قرار دارد. اوّلی پیامی کوتاه است، Track your learning، که به کاربران تازه‌وارد دیدی کلّی از کل پروژه می‌دهد. کلاس h1 عنوان سطح اوّل است و انتخاب‌گر display-3 این عنوان خاص را کمی نازک‌تر و بلندتر می‌کند (۳). در ۴ پیامی طولانی‌تر می‌آوریم که حاوی اطّلاعات بیشتری درباره‌ی آن‌چه کاربر می‌تواند با دفترچه‌ی آموخته‌های خود بکند است.

به جای استفاده از یک پیوند متنی، در ۵ یک دکمه می‌سازیم که کاربران را به ایجاد حساب دعوت می‌کند. این همان پیوند موجود در عنوان است امّا دکمه در صفحه به چشم می‌آید و به بیننده می‌گوید برای شروع کار در پروژه باید چه بکند. انتخاب‌گرهایی که اینجا می‌بینید این دکمه را بزرگ می‌کنند که بیانگر درخواست انجام یک عمل است. کد » یک عنصر HTML است که مانند دو علامت بزرگ‌تری ترکیب‌شده (>>) به نظر می‌آید. در ۶ بلوک page_header را می‌بندیم. چون هیچ مطلب دیگری قرار نیست به این صفحه اضافه کنیم، به تعریف بلوک content احتیاجی نیست.

اکنون صفحه‌ی اوّل مانند شکل ۲۰-۱ دیده می‌شود و این پیشرفت محسوسی نسبت پروژه‌ی بدون شکل ما به حساب می‌آید.