Source

Хуудсууд

Олон хуудсан дээр хэд хэдэн холбогдох контент байгааг харуулахын тулд хуудасны тэмдэглэгээг харуулах баримт бичиг, жишээнүүд.

Тойм

Бид хуудас бичихдээ холбосон холбоосуудын том хэсгийг ашигладаг бөгөөд холбоосыг алдахад хэцүү, хялбархан өргөжүүлэх боломжтой болгодог бөгөөд энэ нь их хэмжээний хит хэсгүүдийг өгдөг. Хуудсууд нь жагсаалтын HTML элементүүдээр бүтээгдсэн тул дэлгэц уншигчид боломжтой холбоосын тоог зарлах боломжтой. <nav>Уншигч болон бусад туслах технологиудыг дэлгэцийн навигацийн хэсэг болгон тодорхойлохын тулд боох элементийг ашиглана уу.

Нэмж дурдахад, хуудсууд нь нэгээс олон навигацийн хэсэгтэй байх магадлалтай тул зорилгоо тусгах үүднээс тайлбарлахыг зөвлөж aria-labelбайна <nav>. Жишээлбэл, хайлтын илэрцүүдийн хооронд шилжихэд хуудасны бүрэлдэхүүн хэсгийг ашигладаг бол тохирох шошго байж болно aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Дүрсүүдтэй ажиллах

Зарим хуудасны холбоосын текстийн оронд дүрс эсвэл тэмдэг ашиглахыг хүсч байна уу? ariaДэлгэц уншигчийн зохих дэмжлэгийг шинж чанарууд болон .sr-onlyхэрэглүүрээр хангахаа мартуузай .

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Тахир дутуу болон идэвхтэй төлөвүүд

Хуудасны холбоосыг өөр өөр нөхцөл байдалд тохируулж болно. .disabledТовших боломжгүй холбоосууд болон .activeодоогийн хуудсыг зааж өгөхөд ашиглана уу .

.disabledАнги нь s- ийн холбоосын функцийг идэвхгүй болгохыг pointer-events: noneоролддог боловч CSS <a>шинж чанар нь хараахан стандартчилагдаагүй байгаа бөгөөд гарын навигацыг тооцдоггүй. Иймд та үргэлж tabindex="-1"идэвхгүй холбоосууд дээр нэмж, тэдгээрийн функцийг бүрэн идэвхгүй болгохын тулд тусгай JavaScript ашиглах хэрэгтэй.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<span>Та сонгосон хэв маягийг хадгалахын зэрэгцээ товшилтын функцийг устгаж, гарны фокусаас сэргийлэхийн тулд идэвхтэй эсвэл идэвхгүй зангууг -аар сольж эсвэл өмнөх/дараагийн сумтай бол зангууг орхиж болно.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Хэмжээ тогтоох

Илүү том эсвэл жижиг хуудас бичихийг хүсч байна уу? Нэмэх .pagination-lgэсвэл .pagination-smнэмэлт хэмжээ авах боломжтой.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Зохицуулах

Flexbox хэрэгслүүдийн тусламжтайгаар хуудасны бүрэлдэхүүн хэсгүүдийн зэрэгцүүлэлтийг өөрчил .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>