Как лучше реализовать каталог на сайте

133

19 мая 2019, 01:50

Здравствуйте. Есть каталог на сайте, написан на фреймворке бутстрап 4

Всего 1 ряда, 4 колонки - 8 позиций товаров.

Внизу под этим всем нужно добавить 4 кнопки навигации, [[1]]-активная [2] [3] [4]

Все это нужно реализовать так чтобы при нажатии на [2] [3] [4], страница не перезагружалась.

Что лучше использовать в решении этого вопроса ? На прошлом проекте были tabs (какой-то плагин, не помню точно) вот пример кода -

<ul id="tabs-menu"> 
  <li><a href="#tabs-1">Портмоне</a></li> 
  <li><a href="#tabs-2">Зажим для денег</a></li> 
  <li><a href="#tabs-3">Ремни</a></li> 
  <li><a href="#tabs-4">Ремешки для часов</a></li> 
  <li><a href="#tabs-5">Кардхолдеры</a></li> 
  <li><a href="#tabs-6">Браслеты</a></li> 
  <li><a href="#tabs-7">Обложки для<br> документов</a></li> 
  <li><a href="#tabs-8">Подарочные <br>комплекты</a></li> 
</ul> 
<div class="container-img-fluid"> 
  <div id="tabs-1"> 
    <div class="card-block-top"> 
      <div class="card-txt-block"> 
        <a href="portmone.html"><img src="full/1.jpg"> 
          <p class="card-description__1">Full</p> 
        </a> 
      </div> 
      <div class="card-txt-block"> 
        <a href="space-saving.html"><img src="2.jpg"> 
          <p class="card-description__1">Space-saving</p> 
        </a> 
      </div> 
   </div> 
   <div id="tabs-2"></div> 
   <div id="tabs-3"></div> 
   <div id="tabs-4"></div> 
   <div id="tabs-5"></div>

Не понимаю как сюда вставить row, col и т.д. + как это будет влиять на адаптив. В документации BS4 нашел tabs, но как я понял, результата они не дадут, тот который мне нужен ... или я ошибаюсь. Что посоветуете ?