Proyecto practico en bootstrap. Conferencia de dragon ball realizada en HMTL, CSS, JS y Bootstrap
abajo puedes ver todos los diseños usados con bootstrap 👇
- ¿Qué es un FrameworkFront-End?
- Containers
- The Grid
- Navbar
- Carousel
- Card
- Etiquetas
- Formularios
- Scrollspy
- Modal
- navegadores y dispositivos
- También conocidos como Frameworks CSS
- Son una base para empezar un proyecto web permitiendo flexibilidad en el diseño
- Organización y estructura de nuestro HTML, CSS y JavaScript
- grilla
- estilos para fuentes
- Componentes visuales pre-armados
- Ahorrar tiempo
- Componentes visuales
- Responsive design
- El codigo anda
- Boostrap
- Foundation
- Bulma
- Flexbox Grid
Los containers son el elmento más básico del layout de Boostrap y son necesarios para organizar nuestro contenido dentro de una grilla
- container fijo
<div class="container">
<!-- Content here -->
</div>
- container fluido
<div class="container-fluid">
<!-- Content here -->
</div>
El sistema de grillas de Boostrap usa contenedores, fijas y columnas para organizar y alinear el contenido de nuestro sitio
tenmos un sistema de grillas de 12 columnas.
Por detras utiliza Felxbox y es 100% responsive
- Columnas
<div class="container">
<div class="row">
<div class="col-sm">Columna 1 de 3</div>
<div class="col-sm">Columna 2 de 3</div>
<div class="col-sm">Columna 3 de 3</div>
</div
</div>
- El contenedor provee una forma de centrar el contenidode la pagina
- las filas continen columnas
- Las columnas tienen un padding hotizontal (gutter) para controlar el espaciado entre ellas
- Este padding se ve contrarrestado con un margin negavito en las filas
- En las grillas, el contenido debe estar dentro de las columnas
- Las filas solo deben tener columnas como hijos
- Tenemos 12 columnas
- Columnas que no especifiquen el tamaño ocuparán igual tamaño
- El temaño de las columnas determina cuántas columnas tendremos
- Si queremos tres columnas: .col-4 .col-4 .col-4
Barra de navegación
- .navbar-brand: para el nombre de tú compañia.
- .navbar-nav: para un menú de navegación (que puede tener submenúes).
- .navbar-toggler: para usar con el plugin para colapsar contenido.
- .form-inline: para incluir formularios.
- .navbar-text: para incuilr texto centrado vertical mente.
- .collapse .navbar-collapse: para agrupar contenido que se va a colapsar.
<div class="navbar navbar-dark bg-dark">
<!--Navbar Content-->
</div>
<div class="navbar navbar-dark bg-primary">
<!--Navbar Content-->
</div>
<div class="navbar navbar-light" style="background-color: #e3f2fd">
<!--Navbar Content-->
</div>
Un carrusel de imagenes
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
- Hay que agregar la clase .active a algunos slides
- Asegurarse que los controles e indicadores tengan un atributo elemnts data-target que coincidad con el id del elemento .coarousel
Un contenedor felxible con múltiples variantes y opciones
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Para contadores y pequeñas etiquetas
<h1>Example heading <sapn class="badge badge-sacondary">New</sapn></h1>
<h2>Example heading <sapn class="badge badge-sacondary">New</sapn></h2>
<h3>Example heading <sapn class="badge badge-sacondary">New</sapn></h3>
<h4>Example heading <sapn class="badge badge-sacondary">New</sapn></h4>
<h5>Example heading <sapn class="badge badge-sacondary">New</sapn></h5>
<button tyoe="button" class="btn tbn-primary">
Notification <span class="badge badge.light">4</span>
</button>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Estilos para controles, opciones de layout y componentes personalizados
<section id="conviertete-en-orador" class="pt-4 pb-4">
<div class="container">
<div class="row">
<div class="col text-uppercase text-center">
<small>Conviertete en un</small>
<h2>ORADOR</h2>
</div>
</div>
<div class="row">
<div class="col text-center">
Anótate para dar una charla ignite. ¡Cuéntanos de que quieres hablar!
</div>
</div>
<div class="row">
<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2 pt-2">
<div class="row">
<div class="form-label col-12 col-md-6">
<input type="text" class="form-control" placeholder="First name" aria-label="Nombre">
</div>
<div class="form-label col-12 col-md-6">
<input type="text" class="form-control" placeholder="Last name" aria-label="Apellido">
</div>
</div>
<div class="row">
<div class="form-label col">
<textarea name="text" class="form-control form-control-lg" placeholder="¿Sobre quá quieres hablar?"></textarea>
<small class="form-text text-muted">
Recuerda incluir un título para tú charla
</small>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-platzi col-12">Enviar</button>
</div>
</div>
</div>
</div>
</div>
</section>
Automáticamente actualiza la navegación de Bootstrap con base en la posición del sroll para iniciar qué link esta activo en el viewport
- Se tiene que usar en un .nav o un .item-list
- Scrollspy requiere que el elemento donde se controlará el sroll tenga Position: relative; (generalmente el body)
- Si se usa sobre otro elemneto que no sea el <body, asegúrate de que tenga un height fijo y overflow-y: scroll
- Se requieren anclas () y deben navegar hacia un elemento con ese id
Modal
Usa este componente para mostrar ventanas emergnentes dentro de tu sitio con notificaciones para usuarios, fotos o el contenido que quieras
- Continen HTML, CSS y JavaScript
- Están posicionados sobre tod o lo demás que esta en la pagina
- Bloquean el scroll en el body (excepto en móviles)
- Si haces click en el fondo, se cierra
- Sólo un modal a la vez
- No ubicarlo dentro de otros elementos