Scribd
Cargar
115 vistas14 páginas

Bootstrap

Bootstrap es el marco de trabajo más popular para desarrollar sitios web adaptables. Proporciona componentes como tipografía, tablas, imágenes, alertas, botones, barras de progreso y spinners. Se puede instalar Bootstrap desde el CDN oficial o descargando el archivo desde su sitio web.

Cargado por

Ramiro Estigarribia Canese
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
115 vistas14 páginas

Bootstrap

Bootstrap es el marco de trabajo más popular para desarrollar sitios web adaptables. Proporciona componentes como tipografía, tablas, imágenes, alertas, botones, barras de progreso y spinners. Se puede instalar Bootstrap desde el CDN oficial o descargando el archivo desde su sitio web.

Cargado por

Ramiro Estigarribia Canese
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

Bootstrap:

Conceptos, Instalación y Componentes

Link a la presentación Prof. Ramiro Estigarribia


¿Qué es Bootstrap?
Es el marco de trabajo HTML, CSS y JavaScript más popular
para desarrollar sitios web adaptables.

Inicialmente creado como una solución interna para Twitter y


posteriormente liberado al público en agosto del 2011 como
un proyecto Open Source en GitHub.
¿Por qué usar Bootstrap?
Ventajas de Bootstrap:
➔ Adaptable: se ajusta a teléfonos, tabletas y computadoras
de escritorio.
➔ Enfoque móvil primero: los estilos para dispositivos
móviles tienen prioridad.
➔ Es compatible con todos los navegadores modernos
(Chrome, Firefox, Edge, Safari y Opera).
¿Dónde conseguir Bootstrap?
Hay dos formas de comenzar a usar Bootstrap:
1. Incluir Bootstrap desde el CDN oficial.
2. Descargar Bootstrap desde https://getbootstrap.com
Incluir Bootstrap desde el CDN oficial.
Puede incluirlo desde un CDN (Content Delivery Network).
Se puede encontrar el CDN actualizado en getbootstrap.com
<!-- Parte CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Parte JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
Bootstrap Texto / Tipografía
Bootstrap establece estilos básicos de visualización,
tipografía y enlaces globales.

Además estiliza los textos en general y hace que sean


responsivos (adaptables a dispositivos móviles).

Más información:

Bootstrap 5 Text/Typography

Typography · Bootstrap v5.0


Display Headings
Se utilizan para destacar más que los encabezados normales
(tamaño de fuente más grande y peso de fuente más ligero),
y hay cuatro clases para elegir: .display-1, .display-2,
.display-3, .display-4

Typography · Bootstrap v5.0


Colores
Bootstrap tiene algunas clases que se pueden usar para
proporcionar colores a un sitio:

Algunas clases para colores de texto son: .text-muted,


.text-primary, .text-success, .text-info, .text-warning.

Más información: Colors · Bootstrap v5.0


Tablas
Las tablas no traen un estilo por defecto y es necesario
agregar una clase, para mejorar el aspeto.

Más información: Tables · Bootstrap v5.0


Imágenes
Las imágenes son responsivas con la clase .img-fluid.

Esto aplica max-width: 100% y height: auto para que escale a


pantalla completa del dispositivo de forma automatica.

Más información: Images · Bootstrap v5.0


Alertas
Permite mostrar mensajes de alerta:
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
Más información: Alerts · Bootstrap v5.0
Botones
Permite mostrar distintos botones personalizados de para
acciones en formularios, cuadros de diálogo y más.

Más informatición: Buttons · Bootstrap v5.0


Barra de Progreso
Se puede usar para mostrar a un usuario qué tan avanzado
está en un proceso.

Más información: Progress · Bootstrap v5.0


Spinners
Es ideal para mostrar que algo está cargando.

Indique el estado de carga de un componente o página.

Más información: Spinners · Bootstrap v5.0

También podría gustarte