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

Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armadob7fwtwtfxf
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar24roberto21
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y maslida630411
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointValerioIvanDePazLoja
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 

Kürzlich hochgeladen (20)

Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armado
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
El camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVPEl camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVP
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y mas
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power Point
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 

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