Хуудсууд

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

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

Тойм

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

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

html

<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.

html

<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 ашиглах хэрэгтэй.

html

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">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>Та сонгосон хэв маягийг хадгалахын зэрэгцээ товшилтын функцийг устгаж, гарны фокусаас сэргийлэхийн тулд идэвхтэй эсвэл идэвхгүй зангууг -аар сольж эсвэл өмнөх/дараагийн суманд зангууг орхиж болно.

html

<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нэмэлт хэмжээ авах боломжтой.

html

<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>

html

<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 хэрэгслүүдийн тусламжтайгаар хуудасны бүрэлдэхүүн хэсгүүдийн зэрэгцүүлэлтийг өөрчил . Жишээ нь, хамт .justify-content-center:

html

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">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>

Эсвэл .justify-content-end:

html

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">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>

CSS

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон хуудаслах нь одоо .paginationбодит цагийн сайжруулсан тохиргоонд зориулж орон нутгийн CSS хувьсагчдыг ашигладаг. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass хувьсагч

$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-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}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) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}