Scribd
Cargar
65 vistas14 páginas

Bootstrap 1

Bootstrap es un framework CSS que proporciona diseños preconstruidos como botones, tarjetas y barras de navegación. Incluye una cuadrícula responsive que permite crear diseños adaptables a diferentes pantallas. Proporciona contenedores, filas y columnas para organizar el contenido y hacerlo responsive de forma sencilla.

Cargado por

Link Credit
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
65 vistas14 páginas

Bootstrap 1

Bootstrap es un framework CSS que proporciona diseños preconstruidos como botones, tarjetas y barras de navegación. Incluye una cuadrícula responsive que permite crear diseños adaptables a diferentes pantallas. Proporciona contenedores, filas y columnas para organizar el contenido y hacerlo responsive de forma sencilla.

Cargado por

Link Credit
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

Introducción. ¿Qué es bootstrap?

Fuente: codingpotions.com / bootstrap.com

Un ​framework​ aporta una estructura completa en la que nosotros "encajamos" nuestro


código, implementando la lógica concreta de la aplicación. Es mucho más que una librería.
Impone unas condiciones a nuestra aplicación e incluso puede definir su arquitectura. Es un
marco​ (​framework​) en el que nosotros vamos a definir piezas. El ​marco​ define las reglas del
juego a las que nos tenemos que atener. ​(Fuente: notajs.blogspot.com)

Bootstrap​ es un ​framework CSS​, es decir, es un archivo CSS que se añade en los


proyectos para tener una serie de estilos ya preparados para utilizar.
Este tipo de librerías CSS suelen incluir estilos para los elementos más comunes de una
página web, como por ejemplo, botones, tarjetas, navbars, etc. Además tiene una serie de
estilos para crear columnas fácilmente.

¿Por qué usar Bootstrap? Ventajas


● Facilidad de uso. Lo único que tienes que hacer es poner clases a elementos HTML.
● Responsive. Perfecto para crear páginas web adaptables a cualquier dispositivo.
● Personalizable. Puedes personalizar su descarga para usar los elementos que
necesites.
● Gran comunidad. Este framework está muy extendido y si tenemos un problema
podremos encontrar mucha información en Internet.

Descarga y instalación de Bootstrap


Para usar Bootstrap en un proyecto tenemos dos formas de hacerlo:

1) Instalación de forma manual


Para instalar Bootstrap de forma manual lo que tienes que hacer es descargar los archivos
de Bootstrap desde su página web haciendo clic en Download dentro de Compiled CSS and
JS:
https://getbootstrap.com/docs/4.6/getting-started/introduction/
Además, para que funcione correctamente hay que descargar también​ jQuery​ y Popper.js​,
un par de librerías que utiliza Bootstrap para que funcione correctamente.

​ ttps://jquery.com/
jQuery​: h
Popper.js​: h​ ttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js​ > Botón
derecho > “Guardar cómo” y descargar.

Una vez descargados todos los archivos, se tienen que ubicar dentro de una carpeta en el
proyecto. Evitar esta forma de importar si se usa algún framework como React, Vue o
Angular.

Dentro de la carpeta que se ha descargado de Bootstrap hay una carpeta css y otra carpeta
js. En la carpeta css es donde están los estilos y en la carpeta js el JavaScript necesario
para que algunos elementos funcionen.

Dentro de la carpeta css tiene que estar el archivo que se llama ​bootstrap.min.css​ que es
el que contiene todos los estilos y además está minificado sin espacios para que ocupe
menos.

​ ootstrap.min.js​.
Dentro de la carpeta js tiene que estar el archivo b

Estos dos archivos junto con el archivo js de ​jQuery​ y el archivo js de ​Popper.js​ tienes que
tenerlos también dentro de tu proyecto.

Hecho esto ya puedes importar estos archivos dentro de la sección head de los archivos
HTML:

<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
2) Mediante CDN, más sencillo

Este método es más sencillo porque solo tenemos que llamar desde dentro de la etiqueta
head del HTML a cada una de los archivos en la nube y por tanto no tienes que descargar
nada (Corroborar que sea la última versión disponible en la web de Bootstrap).

<head>
​<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/
Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>
...
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU
+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-


+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
</body>

Elementos que posee Bootstrap

Containers
Lo primero que vamos a ver son los contenedores. Los contenedores como su nombre
indica, sirven para crear una “caja” o “contenedor” dentro de la que va el contenido de una
página web.

Cuando le aplicas a un elemento HTML la clase ​container​ lo que ocurre es que a ese
elemento se le aplica un ​ancho​ y un ​padding​ determinado y además se coloca en el
centro ​de la página web.

Lo bueno de los containers es que van a ajustar su ancho automáticamente sin que tengas
que hacer nada al ancho de los distintos elementos para que se vean correctamente.

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios
cuando se usa nuestro sistema de cuadrícula predeterminado. Los contenedores se utilizan
para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los
contenedores se pueden anidar, la mayoría de los diseños no requieren un contenedor
anidado.

Bootstrap viene con tres contenedores diferentes:

● .container, que establece un ​max-width ​en todos los breakpoints responsive


● .container-fluid, que establece un ​width: 100%​ en todos los breakpoints
● .container- {breakpoint}, que tiene un ​width: 100% ​hasta el breakpoint especificado

La siguiente tabla ilustra cómo se compara el ancho máximo de cada contenedor con el
.container y .container-fluid original en cada punto de interrupción.

Ejemplo: ​Grid example​.

Extra small Small Medium Large Extra large


<576px ≥576px ≥768px ≥992px ≥1200px

.container 100% 540px 720px 960px 1140px

.container-sm 100% 540px 720px 960px 1140px

.container-md 100% 100% 720px 960px 1140px

.container-lg 100% 100% 100% 960px 1140px

.container-xl 100% 100% 100% 100% 1140px

.container-fluid 100% 100% 100% 100% 100%

All-in-one
La clase default ​.container​ es responsive y posee ancho fijo, lo cual quiere decir que su
max-width​ cambia en cada breakpoint.

<div​ ​class=​"container"​>
​<!-- Content here -->
</div>
Fluid
La clase ​.container-fluid​ crea un contenedor con el 100% de ancho, ocupando todo el ancho
del viewport.

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

Responsive
Los contenedores responsive fueron incorporados en la versión 4.4 de Bootstrap. Permiten
especificar una clase que los muestra con ancho al 100% hasta que se alcance el
breakpoint especificado.​ Por ejemplo: ​.container-sm​ tiene ​width: 100%​ hasta que el
breakpoint ​sm​ es alcanzado, a partir de allí, se escalará con ​md​, ​lg​, y ​xl​.
Copy
<div​ ​class=​"container-sm"​>​100% ancho hasta el small breakpoint​</div>
<div​ ​class=​"container-md"​>​100% ancho hasta el medium breakpoint​</div>
<div​ ​class=​"container-lg"​>​100% ancho hasta el large breakpoint​</div>
<div​ ​class=​"container-xl"​>​100% ancho hasta el extra large breakpoint​</div>

Sistema Grid

Utiliza una serie de contenedores, filas y columnas para maquetar y alinear contenido. Está
construido con ​flexbox ​y es completamente responsive.

<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col-sm"​>
One of three columns
​</div>
​<div​ ​class=​"col-sm"​>
One of three columns
​</div>
​<div​ ​class=​"col-sm"​>
One of three columns
​</div>
​</div>
</div>

Este ejemplo crea tres columnas iguales utilizando las clases del sistema grid predefinidas.
Dichas columnas serán centradas en la página con el componente padre ​.container​.
Los contenedores proveen una forma de centrar y desplazar horizontalmente los contenidos
de la página. Se usa .container para un ancho responsive en píxeles o .container-fluid para
un ancho de 100% en cualquier viewport y tamaño de dispositivo.

Los divs con las clases ​row​ son contenedores para las columnas. Cada columna tiene un
padding horizontal, también llamado ​gutter​, para controlar el espacio entre ellas. Este
padding es contrarrestado en cada row con márgenes negativos.

Opciones

Extra small Small Medium Large Extra large


<576px ≥576px ≥768px ≥992px ≥1200px

Ancho máximo del None (auto) 540px 720px 960px 1140px


contenedor

Prefijo de clase .col- .col-sm- .col-md- .col-lg- .col-xl-

# de columnas 12

Tamaño del gutter 30px (15px a cada lado de la columna)

Anidable Si

Ordenamiento de Si
columnas

Ancho equitativo
<div​ ​class=​"container"​>

<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
1 of 2
​</div>
​<div​ ​class=​"col"​>
2 of 2
​</div>
​</div>

​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
1 of 3
​</div>
​<div​ ​class=​"col"​>
2 of 3
​</div>
​<div​ ​class=​"col"​>
3 of 3
​</div>
​</div>

</div>

La clase ​.w-100​ hace que el contenido que le sigue al elemento que la posee se desplace
hacia abajo.

<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"w-100"​></div>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"col"​>​col​</div>
​</div>
</div>
Al tener un sistema de auto-layout, es posible setear el ancho de una columna y que las
columnas “hermanas” se redimensionen automáticamente en base a dicho valor.

<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
1 of 3
​</div>
​<div​ ​class=​"col-6"​>
2 of 3 (wider)
​</div>
​<div​ ​class=​"col"​>
3 of 3
​</div>
​</div>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
1 of 3
​</div>
​<div​ ​class=​"col-5"​>
2 of 3 (wider)
​</div>
​<div​ ​class=​"col"​>
3 of 3
​</div>
​</div>
</div>

Especificando el sufijo ​-auto ​las columnas se adaptarán en ancho a lo que ocupe su


contenido.
<div​ ​class=​"container"​>
​<div​ ​class=​"row justify-content-md-center"​>
​<div​ ​class=​"col col-lg-2"​>
1 of 3
​</div>
​<div​ ​class=​"col-md-auto"​>
Variable width content
​</div>
​<div​ ​class=​"col col-lg-2"​>
3 of 3
​</div>
​</div>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
1 of 3
​</div>
​<div​ ​class=​"col-md-auto"​>
Variable width content
​</div>
​<div​ ​class=​"col col-lg-2"​>
3 of 3
​</div>
​</div>
</div>

Columnas con espacio establecido numéricamente


El sistema de grillas reparte el espacio en 12 porciones. Se puede establecer cuántas de
esas 12 porciones debe ocupar una columna introduciendo un número.

<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"col"​>​col​</div>
​<div​ ​class=​"col"​>​col​</div>
​</div>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col-8"​>​col-8​</div>
​<div​ ​class=​"col-4"​>​col-4​</div>
​</div>
</div>
Alineamiento vertical

<div​ ​class=​"container"​>
​<div​ ​class=​"row align-items-start"​>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​</div>
​<div​ ​class=​"row align-items-center"​>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​</div>
​<div​ ​class=​"row align-items-end"​>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​<div​ ​class=​"col"​>
One of three columns
​</div>
​</div>
</div>
<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col align-self-start"​>
One of three columns
​</div>
​<div​ ​class=​"col align-self-center"​>
One of three columns
​</div>
​<div​ ​class=​"col align-self-end"​>
One of three columns
​</div>
​</div>
</div>

Alineamiento horizontal

<div​ ​class=​"container"​>
​<div​ ​class=​"row justify-content-start"​>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​</div>
​<div​ ​class=​"row justify-content-center"​>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​</div>
​<div​ ​class=​"row justify-content-end"​>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​</div>
​<div​ ​class=​"row justify-content-around"​>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​</div>
​<div​ ​class=​"row justify-content-between"​>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​<div​ ​class=​"col-4"​>
One of two columns
​</div>
​</div>
</div>

Sacar espacios
Los espacios (gutters) entre las columnas pueden ser eliminados incluyendo en el
componente la clase​ .no-gutters​.

<div​ ​class=​"row no-gutters"​>


​<div​ ​class=​"col-sm-6 col-md-8"​>​.col-sm-6 .col-md-8​</div>
​<div​ ​class=​"col-6 col-md-4"​>​.col-6 .col-md-4​</div>
</div>

Clases de ordenamiento
Se utiliza la clase ​.order​ para controlar el ordenamiento del contenido. Dicha clase es
responsive.
Use ​.order-​ classes for controlling the visual order of your content. These classes are
responsive, so you can set the ​order​ by breakpoint (e.g., ​.order-1.order-md-2​). Includes
support for ​1​ through ​12​ across all five grid tiers.
<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col"​>
First in DOM, no order applied
​</div>
​<div​ ​class=​"col order-12"​>
Second in DOM, with a larger order
​</div>
​<div​ ​class=​"col order-1"​>
Third in DOM, with an order of 1
​</div>
​</div>
</div>

También se puede usar ​.order-first ​u ​.order-last​ para cambiar el orden aplicando un orden
de -1 y 13 respectivamente.

<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col order-last"​>
First in DOM, ordered last
​</div>
​<div​ ​class=​"col"​>
Second in DOM, unordered
​</div>
​<div​ ​class=​"col order-first"​>
Third in DOM, ordered first
​</div>
​</div>
</div>

Aplicar offset a las columnas


Se puede desplazar a las columnas una cantidad de espacios con la clase responsive
.offset​. Por ejemplo: La clase ​.offset-md-4 ​desplazará 4 columnas a la derecha al elemento
que se le esté aplicando.
<div​ ​class=​"container"​>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col-md-4"​>​.col-md-4​</div>
​<div​ ​class=​"col-md-4 offset-md-4"​>.​ col-md-4 .offset-md-4​</div>
​</div>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col-md-3 offset-md-3"​>.​ col-md-3 .offset-md-3​</div>
​<div​ ​class=​"col-md-3 offset-md-3"​>.​ col-md-3 .offset-md-3​</div>
​</div>
​<div​ ​class=​"row"​>
​<div​ ​class=​"col-md-6 offset-md-3"​>.​ col-md-6 .offset-md-3​</div>
​</div>
</div>

También podría gustarte