Breadcrumbs con Bootstrap

Clase 35 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Comentarios

Alexander Valencia

student•

Bootstrap
Foundation

Luis Felipe Silgado Cortázar

student•

Estaba probando la navegación desde mi Android y el icono de hamburguesa no aparece, en mi pc si se ve bien ¿sabe alguien a qué se puede deber esto?

Centro Cultural Colombo Americano

student•

Por que en el app.css

#breadcrumbs-container .breadcrumb .breadcrumb-item.active{
  color: #95a5a6;
}

.breadcrumb-item.active

van juntos y no separado por un espacio ?
ya que si lo separas no funciona

Diego Forero

Team Platzi•

Cuando hay un espacio entre las clases se refiere a hijos del contenedor, cuando no tiene espacio es la clase se que le pone a ese item, en este caso la estructura del html es algo como

<div id="breadcrumbs-container">
	<div class="breadcrumb">
		<div class="breadcrumb-item active">...</div>
		<div class="breadcrumb-item">...</div>
	</div>
</div>

Es último elemento es el breadcrumb-item y si esta seleccionado se le agrega la clase active y con el css que tienes se cambia el color cuando esta activo el elemento.

Usuario anónimo

user•

La página de ejemplo que se descarga en archivos tampoco tiene el modal funcionando.

Luis Felipe Carrasco Galindo

student•

Hola, los videos que están disponibles se encuentran un poco desactualizado, te recomiendo revisar los comentarios del video anterior o revisar la documentación.

Saludos

Santiago Gómez

student•

Hola, en el anterior vídeo deje una solución para el tema de la ventana Modal, espero que te sirva.

Saludos

Cesar David Ramírez Dimaté

student•

Para la versión 4.1.1 quedaría de la siguiente manera los Breadcrumbs:

catalogo.html

<!-- Breadcrumbs -->
<section id="breadcrumbs-container">
  <div class="container">
    <div class="row">
      <div class="col">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb pl-0">
            <li class="breadcrumb-item"><a href="catalogo.html">Catálogo</a></li>
            <li class="breadcrumb-item active" aria-current="page">Todos los productos</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>
<!-- /Breadcrumbs -->

app.css

#breadcrumbs-container .breadcrumb {
  background-color: white;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item a {
  color: #1c3643;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item.active {
  color: #95a5a6;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: '>';
}

<!-- Breadcrumbs -->
<section id="breadcrumbs-container">
  <div class="container">
    <div class="row">
      <div class="col">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb pl-0">
            <li class="breadcrumb-item"><a href="catalogo.html">Catálogo</a></li>
            <li class="breadcrumb-item active" aria-current="page">Todos los productos</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>
<!-- /Breadcrumbs -->

#breadcrumbs-container .breadcrumb {
  background-color: white;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item a {
  color: #1c3643;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item.active {
  color: #95a5a6;
}

#breadcrumbs-container .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: '>';
}

Breadcrumbs con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap