Как изменить цвет разбивки на страницы в bootstrap

#html #css #bootstrap-4 #frontend

#HTML #css #bootstrap-4 #интерфейс

Вопрос:

Итак, я разрабатываю сайт и решил использовать разбивку на страницы в bootstrap для навигации между страницами, поскольку я действительно ограничен во времени. есть идеи, как я мог бы использовать что-то вроде «bg-dark», «bg-primary» … и т.д., Чтобы изменить цвет моей разбивки на страницы? или даже использовать обычный css для его изменения (я бы не возражал, на самом деле)

Комментарии:

1. Вы имеете в виду изменить цвет кнопок разбивки на страницы?

Ответ №1:

добавьте класс ко всем из них:https://getbootstrap.com/docs/4.0/utilities/colors / и использовать стиль css с примером активного элемента:

 .page-item.active .page-link {
  color: #fff !important;
  background: #f00 !important;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="pagination">
    <li class="page-item disabled">
      <a class="bg-warning text-danger page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="bg-warning text-danger page-link" href="#">1</a></li>
    <li class="page-item bg-success  active">
      <a class="bg-warning text-danger page-link" href="#">2 <span class=" bg-success sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="bg-warning text-danger page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="bg-warning text-danger page-link" href="#">Next</a>
    </li>
  </ul>  

Ответ №2:

если вы используете что-то вроде официального примера:

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

Затем вы могли бы добавить CSS, подобный этому:

 .pagination .page-link {
    background: red;
    color: white;
}
  

Это устанавливает цвет любого элемента с классом ссылки на страницу внутри элемента с классом разбивки на страницы