SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
BOOTSTRAP
TECNOLOGÍAS WEB PARA EL
DESARROLLO DE SISTEMAS
BRAVO MARCO
GARCÍA JORGE
MERINO JOHNNY
TORRES DILAN
Fue desarrollado por Mark Otto y Jacob
Thornton de Twitter, y fue originalmente
llamado Blueprint de Twitter. La idea nació
como un framework para fomentar la
consistencia entre las herramientas internas.
HISTORIA
Bootstrap fue liberado bajo licencia MIT
en el 2011 y continúa en un repositorio de
GitHub. Actualmente, es el segundo
proyecto más destacado en GitHub.
¿Qué es Bootstrap?
El framework
Bootstrap vio la luz
en el año 2011.
Se trata de un framework que ofrece la posibilidad de crear un sitio web
totalmente responsive mediante el uso de librerías CSS. En estas
librerías, nos podemos encontrar un gran número elementos ya
desarrollados y listos para ser utilizados como pueden ser botones,
menús, cuadros e incluso un amplio listado de tipografías.
Características de Bootstrap
a) Fácil e intuitivo
b) Compatibles con todos los navegadores
d) Amplia comunidad de
desarrolladores tras el proyecto
c) Optimizado para dispositivos móviles
DEFINICIÓN
BOOTSTRAP 4
Bootstrap en su versión 4 es aún más potente con herramienta para crear
interfaces de usuario pulcras y adaptables a todo tipo de dispositivos y
pantallas, sea cual sea su tamaño.
Características principales:
➔ Cambio de LESS a SASS.
➔ Archivo reboot.css, para hacer nuestros “reset CSS”.
➔ No más soporte para IE8.
➔ Se mejoraron los Tooltips y Popovers gracias a la librería JS: Tether.
➔ Soporte para Flexbox.
➔ Se reemplazaron los: well, thumbnails y panels por los Card.
➔ Mejoras en el sistema de grid.
➔ Se agregó soporte para Jquery 2.
➔ Como unidades de medida se usarán ahora “rem” y “em”.
Bootstrap define la tipografía para distintos tipos de texto
● h1, h2, h3, h4, h5, h6; Semibold 36px, 30px, 24px, 18px, 14px, 12px
○ Con <small> dentro del header se puede añadir texto más pequeño
● <body> y <p>
○ font-size por defecto 14px, con line-height 1.428
○ <p> tienen un margen inferior por defecto de 10px
○ <p class=”lead”> para resaltar el texto
○ También <small> <strong> y <em>
○ Alineación de texto
■ <p class=”text-left”> Texto alineado a la izquierda</p>
■ <p class=”text-center”> Texto centrado </p>
■ <p class=”text-right”> Texto alineado a la derecha </p>
○ <abbr title=”abreviatura”> abr </abbr>
○ <address> para direcciones
○ <blockquote> para citar un texto
● Listas
● Código
○ En línea: <code>&lt;code&gt;<</code>
○ En bloque: <pre> ... código en varias líneas … </pre>
TIPOGRAFÍA
PLANTILLA BÁSICA
Bootstrap funciona con documentos HTML 5
El viewport es un atributo que permite definir la anchura de la ventana
del navegador para adaptar la página automáticamente
Inclusión de la librería CSS de bootstrap
Necesita Jquery
Inclusión de la librería JS de Bootstrap
http://getbootstrap.com/css/#type
https://www.fdi.ucm.es/profesor/jpavon/web/26-Bootstrap.pdf
BIBLIOGRAFÍA

Weitere ähnliche Inhalte

Ähnlich wie Boostrap.pptx

Ähnlich wie Boostrap.pptx (20)

Carlos loaiza
Carlos loaizaCarlos loaiza
Carlos loaiza
 
Guia bootstrap
Guia bootstrapGuia bootstrap
Guia bootstrap
 
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzadosHTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
 
Creacion y publicacion de paginas Web
Creacion y publicacion de paginas WebCreacion y publicacion de paginas Web
Creacion y publicacion de paginas Web
 
Flexsdashboard
Flexsdashboard Flexsdashboard
Flexsdashboard
 
Hipertexto
HipertextoHipertexto
Hipertexto
 
Manual rapido para utilizar HTML
Manual rapido para utilizar HTMLManual rapido para utilizar HTML
Manual rapido para utilizar HTML
 
Twitter bootstrap Inside
Twitter bootstrap InsideTwitter bootstrap Inside
Twitter bootstrap Inside
 
Presentación
PresentaciónPresentación
Presentación
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Diseño de página web
Diseño de página webDiseño de página web
Diseño de página web
 
NVU T4 ex2 Emilia de León
NVU T4 ex2 Emilia de LeónNVU T4 ex2 Emilia de León
NVU T4 ex2 Emilia de León
 
229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial
 
Html
HtmlHtml
Html
 
Qué es Bootstrap.pptx
Qué es Bootstrap.pptxQué es Bootstrap.pptx
Qué es Bootstrap.pptx
 
TICS
TICSTICS
TICS
 
TP 3
TP 3TP 3
TP 3
 
Drupal in a day - SeeD
Drupal in a day - SeeDDrupal in a day - SeeD
Drupal in a day - SeeD
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 

Kürzlich hochgeladen

FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxMariaBurgos55
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 
Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..RobertoGumucio2
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 

Kürzlich hochgeladen (20)

FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptx
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 
Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 

Boostrap.pptx

  • 1. BOOTSTRAP TECNOLOGÍAS WEB PARA EL DESARROLLO DE SISTEMAS BRAVO MARCO GARCÍA JORGE MERINO JOHNNY TORRES DILAN
  • 2. Fue desarrollado por Mark Otto y Jacob Thornton de Twitter, y fue originalmente llamado Blueprint de Twitter. La idea nació como un framework para fomentar la consistencia entre las herramientas internas. HISTORIA Bootstrap fue liberado bajo licencia MIT en el 2011 y continúa en un repositorio de GitHub. Actualmente, es el segundo proyecto más destacado en GitHub.
  • 3. ¿Qué es Bootstrap? El framework Bootstrap vio la luz en el año 2011. Se trata de un framework que ofrece la posibilidad de crear un sitio web totalmente responsive mediante el uso de librerías CSS. En estas librerías, nos podemos encontrar un gran número elementos ya desarrollados y listos para ser utilizados como pueden ser botones, menús, cuadros e incluso un amplio listado de tipografías. Características de Bootstrap a) Fácil e intuitivo b) Compatibles con todos los navegadores d) Amplia comunidad de desarrolladores tras el proyecto c) Optimizado para dispositivos móviles DEFINICIÓN
  • 4. BOOTSTRAP 4 Bootstrap en su versión 4 es aún más potente con herramienta para crear interfaces de usuario pulcras y adaptables a todo tipo de dispositivos y pantallas, sea cual sea su tamaño. Características principales: ➔ Cambio de LESS a SASS. ➔ Archivo reboot.css, para hacer nuestros “reset CSS”. ➔ No más soporte para IE8. ➔ Se mejoraron los Tooltips y Popovers gracias a la librería JS: Tether. ➔ Soporte para Flexbox. ➔ Se reemplazaron los: well, thumbnails y panels por los Card. ➔ Mejoras en el sistema de grid. ➔ Se agregó soporte para Jquery 2. ➔ Como unidades de medida se usarán ahora “rem” y “em”.
  • 5. Bootstrap define la tipografía para distintos tipos de texto ● h1, h2, h3, h4, h5, h6; Semibold 36px, 30px, 24px, 18px, 14px, 12px ○ Con <small> dentro del header se puede añadir texto más pequeño ● <body> y <p> ○ font-size por defecto 14px, con line-height 1.428 ○ <p> tienen un margen inferior por defecto de 10px ○ <p class=”lead”> para resaltar el texto ○ También <small> <strong> y <em> ○ Alineación de texto ■ <p class=”text-left”> Texto alineado a la izquierda</p> ■ <p class=”text-center”> Texto centrado </p> ■ <p class=”text-right”> Texto alineado a la derecha </p> ○ <abbr title=”abreviatura”> abr </abbr> ○ <address> para direcciones ○ <blockquote> para citar un texto ● Listas ● Código ○ En línea: <code>&lt;code&gt;<</code> ○ En bloque: <pre> ... código en varias líneas … </pre> TIPOGRAFÍA
  • 6. PLANTILLA BÁSICA Bootstrap funciona con documentos HTML 5 El viewport es un atributo que permite definir la anchura de la ventana del navegador para adaptar la página automáticamente Inclusión de la librería CSS de bootstrap Necesita Jquery Inclusión de la librería JS de Bootstrap