Skip to content

Latest commit

 

History

History
508 lines (394 loc) · 13.2 KB

README.md

File metadata and controls

508 lines (394 loc) · 13.2 KB
Raw

Curso de Bootstrap

Tabla de Contenido

Frameworks Frontend

También conocidos como Framework Css. Son una base para inicializar un proyecto web permitiendo flexibilidad en el diseño. Brindan organización y estructura para los archivos html, css y javascript.

Componentes Principales:

  • Grilla
  • Estilos para las fuentes
  • Componentes visuales pre-armados

Razones para usar un Framework Front-End

  • Ahorrar tiempo de desarrollo.
  • Componentes visuales pre-armados.
  • Responsive Design establecido en todo el layout.
  • El código tiene máxima compatibilidad.

Frameworks Front-End:

  • Bootstrap
  • Foundation
  • Bulma
  • Flexbox Grid

Iniciar con Bootstrap

Para iniciar un proyecto con bootstrap se agregarán las siguientes referencias:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Contenedores

Contenedor con ancho fijo

El contenedor ocupara un ancho fijo determinado.

<div class="container">
  <!-- Content here -->
</div>

Contenedor de ancho fluido

El contenedor ocupara todo el ancho de la pantalla.

<div class="container-fluid">
  <!-- Content here -->
</div>

Grillas

Filas

Cada fila tiene como máximo 12 columnas.

<div class="row">
  <!-- Content here -->
</div>

Columnas

<div class="col">
  <!-- Content here -->
</div>

La clase col crea una columna sin un tamaño especifico. Al no asignar un tamaño especifico para las columnas, las columnas se repartirán todo el ancho disponible equitativamente.

Para declarar el ancho de las columnas, solo se le debe de asignar un número a la clase col. Como máximo, la suma de los anchos de columnas debe de ser 12.

<div class="col-4">
</div>
<div class="col-8">
</div>

Si el ancho de cada columna o la suma de todos los anchos de todas las columnas superan las 12 columnas por defecto, se creara una fila adicional para que las columnas se acomoden.

También se puede asignar el tamaño de las columnas dependiendo del tamaño de la pantalla.

<!-- extra small (<576px) -->
<div class="col-2">
</div>

<!-- small (≥576px) -->
<div class="col-sm-2">
</div>

<!-- medium (≥768px) -->
<div class="col-md-2">
</div>

<!-- large (≥992px) -->
<div class="col-lg-2">
</div>

<!-- extra large (≥1200px) -->
<div class="col-xl-2">
</div>

Uso de filas y columnas en conjunto

<divc lass="container">
  <div class="row">
    <div class="col">
      Uno
    </div>
    <div class="col">
      Dos
    </div>
    <div class="col">
      Tres
    </div>
  </div>
</div>

Navbar

El navbar sirve para crear encabezados en la website.

Ejemplo de Navbar

<nav id="header" class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="assets/images/platzi-logo.png" alt="Platzi" />
      Conf Hawaii
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">La Conferencia</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Oradores</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Carrusel

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-pause="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="assets/images/hawaii.jpg" alt="Hawaii 1">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/images/hawaii2.jpg" alt="Hawaii 2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/images/hawaii3.jpeg" alt="hawaii 3">
    </div>
  </div>
</div>

Botones

Ejemplo de botones

Los botones se declaran con la clase btn seguido por el diseño del color del botón.

<a href="#" class="btn btn-outline-light">Quiero ser orador</a>

<button type="button" class="btn btn-success">Comprar Tickets</button>

Cards

Ejemplo de Cards

<div class="card">
  <img class="card-img-top" src="assets/speakers/sacha.jpg" alt="Foto de Sacha">
  <div class="card-body">
    <h5 class="card-title">Sacha Lifszyc</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis rerum illum officiis amet culpa vitae quo eligendi nulla quasi praesentium.</p>
  </div>
</div>

Badges

Ejemplo de Badges

<div class="badges mb-2">
  <span class="badge badge-warning">Javascript</span>
  <span class="badge badge-info">React</span>
</div>

Formularios

Bootstrap ofrece diseños para los formularios.

  • form-row: Indica una fila dentro del formulario.
  • form-group: divide cada elemento del formulario.

Ejemplo de Formulario

<form>
  <div class="form-row">
    <div class="form-group col-12 col-md-6">
      <input type="text" class="form-control" placeholder="Nombre">
    </div>
    <div class="form-group col-12 col-md-6">
      <input type="text" class="form-control" placeholder="Apellido">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group 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 tu charla.
      </small>
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <button type="button" class="btn btn-platzi btn-block">Enviar</button>
    </div>
  </div>
</form>

Tooltip

Ejemplo de Tooltip

<abbr data-toggle="tooltip" title="Charlas de 5 minutos">charla ignite</abbr>

Luego hay que agregar un js que active los tooltips.

$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

Scrollspy

El scrollspy le permite al usuario conocer la posición dentro del sitio.

<body data-spy="scroll" data-target="#navbar" data-offset="57"></body>
  • data-spy: esta etiqueta se agrega al elemento que se quiere espiar.
  • data-target: el elemento que va a ser modificado.
  • data-offset: El desplazamiento del elemento. Generalmente es el alto del header.

Modals

Son ventanas que se abren al realizar una acción.

Una recomendación es que los modals se encuentren fuera de los demás elementos. Es decir, al nivel del body.

Ejemplo de Modal

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Para abrir el modal, se hace de la siguiente forma:

<a href="#" data-toggle="modal" data-target="#modalCompra">Comprar Tickets</a>
  • data-toggle: Indica que ese control va a abrir un modal.
  • data-target: Indica el modal que se va a abrir.

Utilidades

Alineación de texto

text-[tamaño]-[alineación]

  • Tamaño: Selecciona el tamaño mínimo en el cual se va a afectuar la alineación
  • Alineación: Indica la dirección hacia donde el texto va a ser alineado. Valores: Right, Center, Left.

Espaciado

[propiedad][lado]-[tamaño]

Propiedad:

  • m - margin
  • p - padding

Lado:

  • t - margin-top o padding-top
  • b - margin-bottom o padding-bottom
  • l - margin-left o padding-left
  • r - margin-right o padding-right
  • x - *-left y *-right
  • y - *-top y *-bottom
  • vacío - afecta a los 4 elementos

Tamaño:

  • 0 - margin o padding 0
  • 1 - margin o padding a $spacer * .25
  • 2 - margin o padding a $spacer * .5
  • 3 - margin o padding a $spacer
  • 4 - margin o padding a $spacer * 1.5
  • 5 - margin o padding a $spacer * 3
  • auto -margin auto

Display

d-[ancho]-[valor]

  • Tamaño: Selecciona el tamaño mínimo en el cual se va a afectuar la alineación
  • Valor: none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

Recursos Complementarios

Enlaces de Interés