Navs&tabs

[mecrophagus]

Eso son los Nav & Tabs, es algo en lo que mucha gente se atasco y es algo complicado de entender. Te mando un código con unos comentarios para que, con suerte, no te pierdas, por que al ser muy denso el código es posible que te pierdas entre tanta línea Explicación larga: Cada button de arriba tiene una propiedad data-bs-target y se le asigna un #id al que tiene que ocultar o mostrar, en este caso los #id son: #pills-grid3 y #pills-grid1. Los div que oculta con esos botones son precisamente los div que estan mas abajo con esos #id Explicación corta: Contenido de los div en donde va el comentario, botón oculta y muestra El ul es una lista el li es cada elemento de la lista como vemos, esa lista contiene botones y tienen una propiedad data-bs-target que sirve para "apagar" o "encender" los divs con la #id que metamos ahí. Ahora la segunda parte son los div que vamos a apagar o encender, si nos fijamos el primer botón, el primer li vamos, tiene un data-bs-target="#pills-home" (Vas a tener que meterte en la pagina para verlo por que en la captura justo se corta) Y el div con esa #id esta mas abajo, si te fijas hay un div con id=pills-home. Entonces cuando le des al botón, lo que hace es ocultar todos los divs que estén dentro de pills-tabContent y solo dejar "encendido" el que tiene la #id que le hiciste click

<!-- Estos son los 2 botones del grid -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-grid-3" data-bs-toggle="pill" data-bs-target="#pills-grid3" type="button" role="tab">
        <!-- Aqui va el icono del boton del grid de 3x3 (Las nueve fotos) -->
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-grid-1" data-bs-toggle="pill" data-bs-target="#pills-grid1" type="button" role="tab">
        <!-- Aqui va el icono del boton de los post uno a uno por asi decirlo -->
    </button>
  </li>
</ul>

<!-- Estos son los contenidos de cada parte, es decir de cada boton --> 
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-grid3" role="tabpanel"tabindex="0">
    <!-- Aqui va el contenido del grid de 3x3 de las fotos, es decir, lo que me has enviado de los gatos -->
  </div>
  <div class="tab-pane fade" id="pills-grid1" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <!-- Aqui va el contenido de los post, que otra pista extra es una card, con card-header, img, card-title y card-body -->
  </div>
</div>

[xXcarlos117Xx2]

Esto era mas bien para que lo hicieses ^^; no para que lo escribieses como Issue, pero oye, al menos aqui queda jajaja. Intenta implementarlo en tu web y realiza otro commit y otro push con el resultado, con que hagas eso te lo apruebo

[mecrophagus]

Si de hecho por eso lo puse acá, para recordarlo para siempre jajajaja. Lo qué no pensé es qué quedara a la vista de todos. :grin: :grin: