#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;
}
Это устанавливает цвет любого элемента с классом ссылки на страницу внутри элемента с классом разбивки на страницы