تعریف قسمت اصلی صفحه
هنوز موارد اندکی مانده تا به base.html اضافه کنیم. باید دو بلوک اضافه کنیم تا صفحه‌های جداگانه بتوانند از آن‌ها برای قرار دادن محتوای مخصوص به خود استفاده کنند.
باقی base.html قسمت اصلی صفحه را در برمی‌گیرد:
--snip--
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
</body>
</html>
در ۱ یک تگ <main> باز می‌کنیم. عنصر بخش اصلی برای نمایش برجسته‌ترین بخش بدنه‌ی صفحه‌های شما استفاده می‌شود. اینجا از انتخاب‌گر container بوت‌استرپ بهره می‌گیریم که راهی ساده برای گروه‌بندی عنصرها در یک صفحه است. دو عنصر div در آن قرار می‌دهیم.
اوّلین عنصر div در ۲ بلوک page_header را در برمی‌گیرد. از این قسمت برای تعیین عنوان بیشتر صفحه180
179
178
ها استفاده می‌کنیم. برای این که این بخش را از دیگر قسمت‌های صفحه متمایز کنیم، در داخل بخش زیرین عنوان کمی فاصله ایجاد می‌کنیم. این درون‌فاصله به فضایی اشاره دارد که بین محتویات یک عنصر و کناره‌ی آن وجود دارد. انتخاب‌گر pb-2 بوت‌استرپ درون‌فاصله‌ای متوسط در پایین عنصر ایجاد می‌کند. حاشیه فاصله‌ای است که بین کناره‌ی یک عنصر و دیگر عنصرهای صفحه وجود دارد. از آن‌جایی که تنها در پایین صفحه به کناره نیاز داریم از انتخاب‌گر border-bottom کمک می‌گیریم که کناره‌ای نازک در پایین بخش page_header می‌اندازد.
در ۳ یک عنصر div دیگر تعریف می‌کنیم که شامل بلوک content است. هیچ شیوه‌ی خاصّی را در این بلوک اعمال نمی‌کنیم تا هر صفحه بتواند با شکل و شیوه‌ی مناسب خود در اینجا نشان داده شود. کار فایل base.html را با افزودن تگ‌های پایانی برای عنصرهای main، body و html خاتمه می‌دهیم.
اگر اکنون صفحه‌ی خانه‌ی Learning Log را در مرورگری باز کنید باید یک نوار پیمایش با ظاهر حرفه‌ای مطابق آن‌چه در شکل ۲۰-۱ نمایش داده شده ببینید. سعی کنید که پنجره را خیلی باریک کنید؛ باید به جای نوار پیمایش یک دکمه قرار بگیرد. اگر روی آن کلیک کنید باید تمام پیوندها را به صورت یک فهرست پایین‌افتادنی ببینید.