in English

Хуудсууд

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

Энэ хуудсан дээр

Тойм

Бид хуудас бичихдээ холбосон холбоосуудын том хэсгийг ашигладаг бөгөөд холбоосыг алдахад хэцүү, хялбархан өргөжүүлэх боломжтой болгодог бөгөөд энэ нь их хэмжээний хит хэсгүүдийг өгдөг. Хуудсууд нь жагсаалтын 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.

<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>
      </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>
      </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" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

<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" aria-current="page">
      <span class="page-link">2</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 active" aria-current="page">
      <span class="page-link">1</span>
    </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 active" aria-current="page">
      <span class="page-link">1</span>
    </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" aria-disabled="true">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" aria-disabled="true">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>

Сасс

Хувьсагч

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;

$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            $link-hover-color;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Холимог

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  .page-link {
    padding: $padding-y $padding-x;
    @include font-size($font-size);
  }

  .page-item {
    @if $pagination-margin-start == (-$pagination-border-width) {
      &:first-child {
        .page-link {
          @include border-start-radius($border-radius);
        }
      }

      &:last-child {
        .page-link {
          @include border-end-radius($border-radius);
        }
      }
    } @else {
      //Add border-radius to all pageLinks in case they have left margin
      .page-link {
        @include border-radius($border-radius);
      }
    }
  }
}