Bootstrap Documentation

¿Qué es Bootstrap?

Bootstrap es una biblioteca multiplataforma conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Es uno de los frameworks Mobile First y Responsive mas populares del mundo. Es el segundo proyecto más destacado en GitHub y es usado por la NASA y la MSNBC, entre otras organizaciones
Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales.

¿Cómo Funciona Bootstrap?

Bootstrap funciona con muchas clases y variables de CSS predefinidas. Éstas clases y variables preestablecidas abarcan el posicionamiento de elementos, tipografía, sistema de grilla/flexbox y propiedades como background-color entre otros.

Vamos a ver algunas de las variables predefinidas:

Color
Tipografia
Bordes
Clases

Color

Como podemos ver, Bootstrap tiene predefinidas variables de CSS/SASS para lograr una consistencia visual de mayor calidad, incluyendo una paleta de colores, colores para CTA, colores de advertencia, etc.


                    :root {                   
                    --bs-blue: #0d6efd;       
                    --bs-indigo: #6610f2;     
                    --bs-purple: #6f42c1;     
                    --bs-pink: #d63384;       
                    --bs-red: #dc3545;        
                    --bs-orange: #fd7e14;     
                    --bs-yellow: #ffc107;     
                    --bs-green: #198754;      
                    --bs-teal: #20c997;       
                    --bs-cyan: #0dcaf0;       
                    --bs-black: #000;         
                    --bs-white: #fff;         
                    --bs-gray: #6c757d;       
                    --bs-gray-dark: #343a40;  
                    --bs-gray-100: #f8f9fa;   
                    --bs-gray-200: #e9ecef;   
                    --bs-gray-300: #dee2e6;   
                    --bs-gray-400: #ced4da;   
                    --bs-gray-500: #adb5bd;   
                    --bs-gray-600: #6c757d;   
                    --bs-gray-700: #495057;   
                    --bs-gray-800: #343a40;   
                    --bs-gray-900: #212529;   
                    --bs-primary: #0d6efd;    
                    --bs-secondary: #6c757d;  
                    --bs-success: #198754;    
                    --bs-info: #0dcaf0;       
                    --bs-warning: #ffc107;    
                    --bs-danger: #dc3545;     
                    --bs-light: #f8f9fa;      
                    --bs-dark: #212529;       
                    }

Tipografia

Estas son algunas de las variables predefinidas para la tipografía/texto en Bootstrap.


                    $font-size-base: 1rem;
                    $font-size-sm: $font-size-base * .875;
                    $font-size-lg: $font-size-base * 1.25;
                    

                    $font-weight-lighter: lighter;
                    $font-weight-light: 300;
                    $font-weight-normal: 400;
                    $font-weight-bold: 700;
                    $font-weight-bolder: bolder;
                    

                    $h1-font-size: $font-size-base * 2.5
                    $h2-font-size: $font-size-base * 2
                    $h3-font-size: $font-size-base * 1.75
                    $h4-font-size: $font-size-base * 1.5
                    $h5-font-size: $font-size-base * 1.25;
                    $h6-font-size: $font-size-base;

Bordes

Estas son algunas de las variables para bordes en Bootstrap. Como podemos ver en la variable $Border-color, Bootstrap genera un sinfin de posiblidades en las que se pueden combinar variables en cualquier contexto.


                    $border-width: 1px;
                    $border-widths: (
                    1: 1px,
                    2: 2px
                    3: 3px
                    4: 4px
                    5: 5px
                    );

                    $border-color: $gray-300;
                    $border-radius: .25rem;
                    $border-radius-sm: .2rem;
                    $border-radius-lg: .3rem;
                    $border-radius-pill: 50rem;

Clases

Otro punto fuerte en bootstrap son las clases que pueden ser aplicadas desde el mismo documento HTML. Podemos pensar estas clases como código predefinido en un documento SASS/CSS que puede ser aplicado a una etiqueta HTML para centrar textos, aplicar un margen, aplicar un tipo de display, etc. Estos son algunos ejemplos de clases de Bootstrap y lo que modifican en nuestro código:

Componentes en Bootstrap

Estos son algunos de los componentes que Bootstrap nos ofrece desde un principio.

Acordión

Botones

Carrusel

Dropdown

Mobile First

La premisa principal dentro del framework Bootstrap es el de facilitar la creación de aplicaciones con un enfoque Mobile First. Esto significa que las aplicaciones creadas en Bootstrap son pensadas, en primera instancia, como aplicaciones que serán utilizadas en dispositivos móbiles.

Menos CSS

Como conclusión, Bootstrap es un framework que nos permite desarrollar sitios web con mayor precisión, a la vez de ofrecer un código limpio y organizado. La implementación de CSS/SASS y el uso de las clases predefinidas en Bootstrap, dan como consecuencia un código HTML algo vistoso, y casi nada de código CSS. Esto es algo que trae muchísimos beneficios en cuanto al tiempo que nos toma desarrollar un sitio web, ya que Bootstrap permite una gran UI con un esfuerzo relativamente pequeño. Así como Bootstrap, hay otros frameworks basados en CSS que vale la pena estudiar, tales como Tailwind CSS o Bulma.

Referencias

Toda la informacion en este documento fue extraída de la página oficial de Bootstrap y Wikipedia