Grillas en Bootstrap

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

Clase anteriorSiguiente clase

Resumen

Recuerda:

.row, se crea una fila dentro de un container,

Para definir el tamaño de la columna, usas .col-[medida]-[cantidad columnas]

Ejemplos:

col-xs-12
col-md-6
col-xl-1

Carlos Andrés Millan Satizabal

student•

A Enero 6 del 2017 que veo este video y bajé Boostrap, para referirnos a pantallas Extra Small o xs y reservar 6 unidades, lo hacemos así:

col-6

Si colocamos: col-xs-6, no va a funcionar.

Daniel Hernandez

student•

Entonces como hago para referirme a cierto tamaño

Elvis Moreira

student•

para xs ya no es necesario poner esa denominación en el medio sólo col-6
puedes revisar la documentación

https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works

Oscar Daniel Piñeros Hernández

student•

Estos son los prefijos que deben utilizarse para la grilla:

Extra small: .col-
Small: .col-sm-
Medium: .col-md-
Large: .col-lg-
Extra large: .col-xl-

Salvador Hernández Villanueva

student•

Actualmente (Enero 1 2018) No se usa push-[ancho_dispositivo]-[posiciones] ni pull-[ancho_dispositivo]-[posiciones] sino order-[ancho_dispositivo]-[numero] (order-sm-3, order-2, order-xl-5, etc.) Esto se implementó en la beta 2 de la version 4 de Bootstrap (Octubre 19 2017). A la fecha ya salió la beta 3 (Diciembre 28 2017) y aseguran que es la última(beta) antes de lanzar la version estable de Bootstrap 4.

Cesar David Ramírez Dimaté

student•

Gracias por el dato. Me funcionó de la siguiente forma

<div class="col-sm-5 order-md-1 order-lg-0 columna">Hola</div>
<div class="col-sm-5 order-md-0 order-lg-1 columna">Mundo</div>

Jose L. Figueroa

student•

Hola en agosto 2018, estoy en la versión 4.1 de Bootstrap y a mí me funcionó de esta manera:

La **documentación **nos dice lo siguiente:

Platzi Team

student•

En la version estable v4.0.0 el ordenamiento de las columnas se lleva a cabo con la clase .order.
Apuntando a lo que hacemos en esta clase su uso sería:

.order-BP-#

Donde BP es el punto de corte y # es el número de la posición que requerimos tome la columna.
Tambien podemos utilizar first y last como opciones para # en dos columnas diferentes para mostrarlas respectivamente mientras el resto de las columnas intermedias quedarán desorganizadas.

Víctor de Jesús Pacheco Padilla

student•

El sistema de grillas es muy similar al de Foundation, hay row dentro de los contenedores y columns que van dentro de esos row. Se coloca la clase col, seguida de un guión, en seguida el tamaño del dispositivo (xs, sm, md, lg, xl), otro guión, y el número de columnas que ocupará. Ejemplo:
<div> class= "col-xs-12"</div>

En caso de que la suma total de un conjunto de columnas, supere el número 12, Bootstrap colocará una columna por debajo de otra, tal y como lo hace Foundation.

Para agregar columnas vacías se utiliza offset-xs-4.

Al igual que en foundation, si quiere que ciertas columnas aparezcan en sentido inverso, se añade a una columna la clase push-xs-5 para “empujar” 5 columnas y a la otra columna que está en seguida se le añade la clase pull-xs-5. Si se quiere que para dispositivos de otro tamaño esto no surta efecto, entonces hay qué “reiniciar” ese atributo colocando push-md-0 y pull-md-0.

<div class="row">
          <div class="col-xs-5 push-xs-5 push-md-0">
		<h1>Hola</h1></div>
          <div class="col-xs-5 pull-xs-5 pull-md-0">
		Mundo
	</div>
 </div>

Roberto Del Valle

student•

Llevo tiempo tratando de dominar estos conceptos y al ver este video puede aclarar muchas dudas que tenia!! Lo recomiendo.!

Edgardo T

student•

Usar Flex-box con “order” también es bastante útil para jugar con el orden de las columnas.

Alexander Valencia

student•

2019

Jose Andres Gonzalez Guevara

student•

No me quedó muy claro el tema de los push y pull, se que es para el ordenamiento pero no entendí al 100%

Cristian Vega

student•

El push sirve para mover una columna hacia delante y el pull sirve para mover la columna hacia atras.

Por eso Al aplicar el push la columna con el texto Hola se mueve 6 posiciones hacia adelante y la columna que contiene el texto Mundo se mueve hacia atras 6 posiciones, el numero puede variar dependiendo de cuantas columnas quiereas mover.

Jose Andres Gonzalez Guevara

student•

Excelente, gracias Cristian

Jorge Luis Paiva Huamán

student•

No me funciona el pull ni el push. Fácil será por la version :-(

Anthony Guzman Lopez

student•

Hola, Coloca una imagen del error que te sale. Adicional recuerda que cuando haces pull, antes debiste hacer git clone url (si aun no tienes la llave ssh)

Este es un resumen al que me remito bastante cuando no recuerdo un paso

. Clonar el repositorio -> git clone url 2. Abrir vsc con el proyecto clonado -> cod nombredelproyectoenGitHub 3. Cambiar a la rama asignada, para ver todas las ramas es -> git branch -a 3.1 primero debemos ubicarnos en la rama que queremos hacer subrama -> git shithc dev (dev es la rama la cual queremos hacer una sub-rama) 3.2 Crear rama basada en la rama donde nos ubicamos en el paso anterior -> git checkout -b nombreNuevaRama 3.3 como el entorno virtual no se sube a GitHub se crea el entorno -> vvirtualenv -p python3.8 venv 3.4 se activa el entorno virtual -> source venv/bin/activate 3.5 instalar paquetes del archivo requirements.txt -> pip install -r requirements.txt 4. Traer codigo de la rama para refrescar -> git pull origin NombreDeLaRama 5. Agregar al repositorio local -> git add . 6. Agregar comentarios para el commit -> git commit -m "comentarios relevantes sobre los cambios realizados" 7. Enviar al repositorio en GitHub -> git push origin NombreRama 8. se hace el proceso de merge 8.1 lo ideal es borrar la rama,o actualizar basado en la rama origen, hay que agregar esos pasos a esta lista.

Jair Alexander Escobar Ramirez

student•

Resumen de la clase usando la última versión (v4.0.0-beta.2).
Cambié el uso del push y pull dado en el curso, por order, que es la forma que usa ahora Bootstrap para gestionar las posiciones de las columnas.

    <header id="container__header">
      <div class="container">
        <div class="row">
          <div class="col-5 order-2 order-md-1 columna">
            <h1>PlatziShop</h1>
          </div>
          <div class="col-5 order-1 order-md-2 offset-2 columna">
            <a href="#">Login</a>
          </div>
        </div>
      </div>
    </header>

Luis Daniel Becerra Avellaneda

student•

Noviembre 20 2017: No logro hacer de ninguna manera que me funcione la parte de Pull y Push, Alguna solucion?

David Toca

student•

Puedes poner tu código aquí por favor? También indícame por favor la versión de bootstrap que estas usando

Luis Daniel Becerra Avellaneda

student•

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="css/app.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <header id="header-container">
      <div class="container">
        <div class="row">
          <div class="col-5 push-xs-5 push-md-0 columna">
            hola
          </div>
          <div class="col-5 pull-xs-5 pull-md-0 columna">
            mundo
          </div>
        </div>
      </div>
    </header>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Tampoco funciona quitandole el xs
Estoy usando la ultima version, v4.0.0-beta.2

Sergio Zapata Donado

student•

Para quienes están haciendo el curso con la versión 4.x

<!-- Header -->

    <header id="header-container">
        <div class="container">
            <div class="row">
                <div class="col-8 col-sm-6">
                    <h1>Watch Store</h1>
                </div>
                <div class="col-4 col-sm-6">
                    <a href="#">Login</a>
                </div>
            </div>
        </div>
    </header>

    <!-- / Header -->

Alejandro Alcantara Franco

student•

gracias Sergio tu ejemplo me ayudó a aclarar el .order

Alejandro Sulbaran

student•

En la version 4.0.0-beta, la opcion offset fue dropeada, para darle paso al uso los margenes .mr .mr

Cesar David Ramírez Dimaté

student•

De igual forma para la versión 4.1.1 el offset funciona perfectamente.

Jesus Montero

student•

Por qué se utiliza id para los estilos propios y no una clase?

Cesar David Ramírez Dimaté

student•

Ya es criterio propio de Sacha. Lo que veo es que lo hace es para no estar mezclando las clases propias del framework con los estilos propios que definamos. Yo lo haría con una clase, ya que trabajo eso para css y los id para javascript.

gian carlos leon apaclla

student•

Buenas tardea un favor profe, abra alguna manera de hacer un botón de sucribete al igual que en foundation pero necesito agregarle a un proyecto que tengo en boostrap ya que no son iguales podría brindarme algún dato para hacer ese boton de suscribete

Cesar David Ramírez Dimaté

student•

Podrías revisar la documentación respecto a los botones. https://getbootstrap.com/docs/4.1/components/buttons/

Grillas en 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

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman