تعریف کردن نوار پیمایش

کدی که نوار پیمایش را در بالای صفحه تعریف می‌کند کمی طولانی است زیرا این نوار باید در صفحه‌های کم‌عرض گوشی و نمایشگرهای رومیزی عریض به درستی کار کند. کار بر روی نوار پیمایش را در چند بخش ادامه می‌دهیم.

این اوّلین بخش نوار پیمایش است:

--snip--
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
  <a class="navbar-brand" href="{% url 'learning_logs:index'%}">
    Learning Log</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarCollapse" aria-controls="navbarCollapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span></button>

اوّلین عنصر، تگ گشایش <body> است (۱). بدنه‌ی یک فایل HTML دربردارنده‌ی محتویّا¹⁷⁵ تی است که کاربران بر روی صفحه خواهند دید. در ۲ یک عنصر <nav> وجود دارد که نشانگر بخش پیوندهای پیمایش صفحه است. سیاق هر چه که داخل این عنصر باشد مطابق قواعد شکل‌دهی بوت‌استرپ تعیین می‌شود که با انتخاب‌گرهای navbar، navbar-expand-md و دیگر موارد مشخّص شده‌اند. یک انتخاب‌گر تعیین می‌کند که مجموعه‌ای از قوانین شکل‌دهی به کدام عنصرها در صفحه اعمال شوند. انتخاب‌گرهای navbar-light و bg-light پس‌زمینه‌ی نوار پیمایش را به رنگ روشن درمی‌آورند. mb در mb-4 سرواژه‌ی margin-bottom (حاشیه‌ی پایین) است؛ این انتخاب‌گر وجود یک فاصله‌ی کوچک بین نوار پیمایش و دیگر اجزای صفحه را تضمین می‌کند. انتخاب‌گر border یک لبه‌ی نازک به پس‌زمینه‌ی روشن اضافه می‌کند تا آن را کمی از باقی قسمت‌های صفحه متمایز کند.

در ۳ کاری می‌کنیم که نام پروژه در منتها الیه سمت چپ نوار پیمایش پدیدار شود و آن را به صورت پیوندی به صفحه‌ی خانه درمی‌آوریم؛ این نام در تمام صفحه‌های پروژه دیده خواهد شد. انتخاب‌گر navbar-brand این پیوند را به شکلی درمی‌آورد که با بقیه‌ی پیوندها متفاوت باشد و به نوعی نشان سایت به شمار آید.

در ۴ قالب دکمه‌ای تعریف می‌کند که اگر عرض صفحه‌ی مرورگر خیلی کم شد پدیدار شود و کل نوار پیمایش را به صورت افقی نمایش دهد. زمانی که کاربر روی این دکمه کلیک می‌کند عنصرهای پیمایش در یک فهرست پایین‌افتادنی نمایش داده خواهند شد. ارجاع به collapse باعث می‌شود که هرگاه کاربر صفحه‌ی مرورگر را خیلی کوچک کرد یا صفحه را روی یک گوشی همراه با صفحه‌ی کوچک باز کرد، نوار پیمایش جمع شود.

این بخش بعدی کدی است که نوار پیمایش را تعریف می‌کند:

--snip--
       <span class="navbar-toggler-icon"></span></button>
     <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
<a class="nav-link" href="{% url 'learning_logs:topics'%}">
      Topics</a></li>
       </ul>

در ۱ بخش جدیدی از نوار پیمایش را باز می‌کنیم. عبارت div مخفّف division به معنای قسمت است؛ شما صفحه‌های وب را با تقسیم کردن آن به بخش‌های مختلف و تعیین شیوه‌ها و قواعد رفتاری به آن بخش طرّاحی می‌کنید. هر شکل و شیوه یا قاعده‌ی رفتاری که در یک تگ گشایش div نوشته شود، روی تمام عنصرهایی که قبل از تگ بستن به صورت </div> قرار می‌گیرند تأثیر می‌گذارند. این آغاز بخشی از نوار پیمایش است که هنگام نمایش بر روی صفحه‌ها و پنجره‌های باریک جمع می‌شود.

در ۲ مجموعه‌ی جدیدی از پیوندها را تعریف می‌کنیم. ب¹⁷⁶ وت‌استرپ عنصرهای پیمایش را در قالب یک فهرست نامرتّب تعریف می‌کند ولی قواعد شکل‌دهی آن به شکلی است که به صورت یک فهرست دیده نمی‌شود. هر پیوند یا عنصری که بخواهید روی نوار نمایش دهید می‌تواند به صورت عضوی از این لیست‌ها باشد. اینجا تنها مورد در فهرست ما پیوندی به صفحه‌ی Topics است (۳).

این بخش بعدی نوار پیمایش است:

--snip--
</ul>
<ul class="navbar-nav ml-auto">
  {% if user.is_authenticated %}
     <li class="nav-item">
<span class="navbar-text"}">Hello, {{ user.username }}.</span>
     </li>
     <li class="nav-item">
    	<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
     </li>
{% else %}
     <li class="nav-item">
<a class="nav-link" href="{% url 'users:register' %}">Register</a>
     </li>
      <li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">Log in</a></li>
{% endif %}
     </ul>
  </div>
</nav>

در ۱ مجموعه‌ای دیگر از پیوندها را با یک تگ گشایش <ul> آغاز می‌کنیم. شما می‌توانید هر تعداد مجموعه پیوند که نیاز داشته باشید به صفحه اضافه کنید. این مجموعه پیوندهایی خواهند بود که به ورود و ثبت نام مرتبطند و در سمت راست نوار پیمایش نمایش داده می‌شوند. انتخاب‌گر ml-auto مخفّف margin-left-automatic است: این انتخاب‌گر دیگر عناصر نوار پیمایش را می‌سنجد و حاشیه‌ای در سمت چپ ایجاد می‌کند که این گروه از پیوندها را به سمت راست صفحه براند.

بخش if در ۲ همان شرط‌هایی است که پیش‌تر، بسته به وارد شدن یا نشدن¹⁷⁷ کاربران، برای نمایش پیام‌های مناسب به آن‌ها استفاده می‌کردیم. این بخش کمی طولانی‌تر است زیرا چند قاعده‌ی شکل‌دهی هم در داخل تگ‌های شرطی وجود دارد. در ۳ یک عنصر <span> داریم. عنصر محدوده بخشی از متن یا عنصرهای صفحه را شکل‌دهی می‌کند که خود جزئی از یک خط طولانی‌تر هستند. درحالی‌که عنصرهای div بخش‌های مختلفی در صفحه ایجاد می‌کنند، عنصرهای محدوده در داخل یک بخش بزرگ‌تر قرار می‌گیرند. اینجا از این عنصر محدوده برای شکل‌دهی به متن‌های اطّلاع‌دهنده مانند نام کاربری واردشده، استفاده می‌کنیم. هدف ما این است که این اطّلاعات از یک پیوند متمایز باشند تا کاربران تلاش نکنند روی آن کلیک کنند.

در ۴ بخشی را می‌بندیم که قسمت‌های پنهان‌شونده‌ی نوار پیمایش در صفحه‌های باریک را در برمی‌گیرد و در نهایت کل قسمت مربوط به نوار پیمایش را می‌بندیم. اگر بخواهید پیوندهای بیشتری به نوار پیمایش اضافه کنید می‌توانید یک <li> دیگر به هر یک از گروه‌های <ul> که تعریف کردیم اضافه کنید و از همان روش‌های شیوه‌دهی که اینجا دیده‌اید استفاده کنید.