Page Bootstrap 4

1

Good people,

I have a relatively simple question, but I do not find anything on the internet to answer me.

I'm implementing a page with bootstrap 4: link

But my content is static in HTML, does not come from json bank and so on. I need to implement a paging in static content, however I do not know how the bootstrap paging works. In the bootstrap site I did not find any complete example with paging working.

I wanted to know how to get the html structure to hide the items and make them appear as the user clicks on page 1, 2, 3, and so on.

Does anyone have any ideas?

Hugs!

    
asked by anonymous 09.10.2017 / 20:25

1 answer

1

I do not know if I understood the question well but come on,

Bootstrap obeys the orientation of the classes: "Page navigation", "pagination", "page-item" and "page-link". An example can be found at the following Bootstrap site link:

Bootstrap Site

<nav aria-label="Page navigation">
<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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</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>

Now just replace the # in href="#" with the static link you want.

I believe this is what you want to do. for example:

<li class="page-item"><a class="page-link" href="AQUI FICA O CAMINHO PARA PÁGINA ESTÁTICA">1</a></li>

I hope to have helped, hugs!

    
09.10.2017 / 21:36