ገጽ ምሃብ

ተኸታታሊ ተዛመድቲ ትሕዝቶ ንምምልካት ገጻት ንምርኣይ ዝሕግዙ ሰነዳትን ኣብነታትን ኣብ መላእ ብዙሓት ገጻት ኣለዉ።

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

ንገጽና ዝኸውን ዓቢ ብሎክ ዝተኣሳሰሩ መላግቦታት ንጥቀም፣ እዚ ድማ ንመላግቦታት ንምስኣን ኣጸጋሚን ብቐሊሉ ዝዓቢን ይገብሮ-እዚ ኩሉ ዓበይቲ ዝተሃርመ ቦታታት እናሃበና። ገጽ ምሃብ ብናይ ዝርዝር ኤችቲኤምኤል ባእታታት ዝተሃንጸ እዩ ስለዚ ኣንበብቲ ስክሪን ብዝሒ ናይቶም ዘለዉ መላግቦታት ከበስሩ ይኽእሉ። <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"

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>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ ገጽ ምግባር ሕጂ .paginationንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀም። ክብርታት ናይ 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};

ሳስ ተለዋዋጢ ረቛሒታት

$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};
}