ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯄꯦꯖꯤꯅꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯇꯥꯛꯅꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯎꯠꯅꯕꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄꯦꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯄꯦꯖꯤꯅꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯀꯅꯦꯛꯇ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯑꯆꯧꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯁꯤꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯐꯖꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯉꯃꯍꯜꯂꯤ-ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤꯅꯥ ꯑꯆꯧꯕꯥ ꯍꯤꯠ ꯑꯦꯔꯤꯌꯥꯁꯤꯡ ꯄꯤꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯑꯁꯤ ꯂꯤꯁ꯭ꯠ 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ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯥ<a> ꯁꯤꯖꯤꯟꯅꯔꯤꯉꯩꯗꯥ , ꯑꯗꯨꯒꯨꯝꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯀꯤꯕꯣꯔꯗ ꯅꯦꯚꯤꯒꯦꯁꯅꯒꯤ ꯑꯦꯀꯥꯎꯟꯇ ꯇꯧꯗꯦ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ 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>

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯀꯄꯥ . ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ .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ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .pagination. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

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