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 сипаты әлі стандартталмаған және пернетақта шарлауын есепке алмайды. Осылайша, сіз әрқашан өшірілген сілтемелерді қосуыңыз керек және олардың функционалдығын толығымен өшіру үшін теңшелетін JavaScript пайдалануыңыз керек.<a>tabindex="-1"

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