Scribd Logo
Importer

Bienvenue sur Scribd !

  • 26 Bootstrap

    Transféré par

    Leo Vasquez Blas
    140 vues14 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    140 vues14 pages

    26 Bootstrap

    Transféré par

    Leo Vasquez Blas

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 14

    Bootstrap 3.

    0
    Aplicaciones Web/Sistemas Web

    Juan Pavn Mestras Dep. Ingeniera del Software e Inteligencia Artificial Facultad de Informtica Universidad Complutense Madrid

    Curso de Aplicaciones Web/Sistemas Web by Juan Pavn Mestras is licensed under a Creative Commons Reconocimiento-CompartirIgual 3.0 Unported License.

    Bootstrap

    Framework de twitter para desarrollo de aplicaciones web

    Sencillo y ligero Puede bastar con un fichero CSS y uno JavaScript Basado en los ltimos estndares de desarrollo de Web HTML5, CSS3 y JavaScript/JQuery Plugins de jQuery para validar entrada de datos, visualizacin tablas, grafos, etc. Curva de aprendizaje baja Compatible con todos los navegadores habituales Arquitectura basada en LESS Reset CSS basado en Normalize.css

    Abierto

    Publicado en 2011 con licencia Apache

    Juan Pavn - UCM 2013-14

    Bootstrap

    Responsive web design

    Responsive web design

    Diseo de pginas web para que el usuario las visualice perfectamente en un amplio rango de dispositivos Navegador en el PC, tableta, smartphone Se ha rediseado para adaptarse desde el principio a tamaos de pantalla tpicos de los mviles Sistema grid fluido que escala a 12 columnas al aumentar el tamao del viewport

    Bootstrap 3: Mobile first

    Ver cambios de bootstrap 2.x a 3.0 en: http://getbootstrap.com/getting-started/#migration-classes

    Juan Pavn - UCM 2013-14

    Bootstrap

    Distribucin bsica: http://getbootstrap.com/


    bootstrap/ css/ clases de base de bootstrap bootstrap.css igual pero sin comentarios bootstrap.min.css aade efectos 3D a botones y otros elementos bootstrap-theme.css igual pero sin comentarios bootstrap-theme.min.css js/ funciones JavaScript de los componentes de bootstrap bootstrap.js igual pero sin comentarios bootstrap.min.js fonts/ Iconos grficos glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff

    En produccin se usan las versiones .min que ahorran espacio


    Bootstrap

    Juan Pavn - UCM 2013-14

    Se puede configurar

    http://getbootstrap.com/getting-started/#customizing http://getbootstrap.com/customize/

    Juan Pavn - UCM 2013-14

    Bootstrap

    Plantilla bsica
    <!DOCTYPEhtml> <html lang="es"> El viewport es un atributo que permite definir la anchura de la ventana del navegador para <head> adaptar la pgina automticamente <metacharset="utf8"> <metaname="viewport"content="width=devicewidth,initialscale=1.0"> <title>PlantillabsicadeBootstrap enespaol</title> <! CSSdeBootstrap > <linkhref="css/bootstrap.min.css"rel="stylesheet"> </head> Inclusin de la librera CSS de bootstrap <body> <h1>Holamundo!</h1> Necesita jquery <! LibrerajQuery requeridaporlosplugins deJavaScript> <scriptsrc="http://code.jquery.com/jquery.js"></script> <! Todoslosplugins JavaScriptdeBootstrap > <scriptsrc="js/bootstrap.min.js"></script> </body> Inclusin de la librera JS de bootstrap </html>
    Juan Pavn - UCM 2013-14 Bootstrap

    Bootstrap funciona con documentos HTML 5

    Ejercicios

    Descargar bootstrap

    http://getbootstrap.com/ Download bootstrap Fichero zip que contiene la distribucin bsica

    Probar el ejemplo bsico


    Crear un proyecto de sitio web Copiar los directorios de bootstrap (css, fonts y js) en la raz del sitio Crear un index.html con la plantilla bsica de http://getbootstrap.com/getting-started/ Comprobar que estn bien los enlaces a los ficheros de bootstrap
    Habr que adaptarlos a tu organizacin de los ficheros

    Comprobar que se incluye jquery.js (al final del fichero)

    Probar con otras plantillas

    Juan Pavn - UCM 2013-14

    Bootstrap

    Viewport

    rea visual en la que se muestran los documentos HTML Atributos


    width: height: initial-scale: user-scale: minimum-scale: maximum-scale:

    device-width o nmero de pixels device-height o valor en pixels 0..1 (1 indica que es sin escala) yes/no (indica si el usuario puede cambiar la escala) 0..1 (escala mnima del viewport) 0..1 (escala mxima del viewport)

    Para aplicar responsive design:

    <metaname="viewport"content="width=devicewidth,initialscale=1.0">

    En mviles conviene deshabilitar el zooming:

    <metaname="viewport"content="width=devicewidth,initialscale=1.0, maximumscale=1.0,userscalable=no">

    Juan Pavn - UCM 2013-14

    Bootstrap

    Grid de 12 columnas
    Men 1 2 Cabecera 3 4 5 6 7 8 9 10 11 12

    Columna 1

    Contenido principal

    Columna 2

    Juan Pavn - UCM 2013-14

    Bootstrap

    Grid de 12 columnas

    Grid de 960px (basado en http://960.gs)


    Por defecto columnas de 60px y offset de 20px Se adapta dependiendo del viewport Por debajo de 768px (tabletas, smartphones) las columnas pasan a fluid y se apilan verticalmente

    La pgina se estructura en bloques del grid

    Clases definidas en el CSS de bootstrap container (fluido)


    Se encarga de alinear y ajustar los mrgenes adecuadamente

    row
    Grupos horizontales de columnas Se deben declarar dentro de un container

    col-md-1, col-md-2, col-md-3, col-md-12 col-md-offset-1, col-md-offset-2, col-md-offset-3,


    En la versin 2 de bootstrap era span1, span2, etc. y offset1, offset2,

    Se puede usar versiones col-xs-* y col-sm-* para hacer varias columnas en dispositivos mviles y no siempre apilar
    Juan Pavn - UCM 2013-14 Bootstrap

    10

    Grid de 12 columnas

    Adaptacin en funcin del ancho del viewport

    Tabla de la documentacin en lnea en http://getbootstrap.com/css/


    Juan Pavn - UCM 2013-14 Bootstrap

    11

    Grid de 12 columnas
    <divclass="container"> <divclass="row"> <divclass="colmd4"> <h2>Cajade4columnas</h2> </div> <divclass="colmd6colmdoffset2"> <h2>Offsetde2columnasycajade6columnas</h2> <divclass="row"> <divclass="colmd8"><p>Anidadode4</p></div> <divclass="colmd4"><p>Anidadode2</p></div> </div> </div> </div> La suma de </div> columnas anidadas
    tiene que ser 12

    Juan Pavn - UCM 2013-14

    Bootstrap

    12

    Ejercicio

    Crear un una pgina con la siguiente distribucin: Men


    1 2 3 4 5 6 7 8 9 10 11 12

    Cabecera

    Columna 1

    Contenido principal Subcajas (deben sumar 12) De 2 De 4

    Columna 2

    Sigue el contenido

    Juan Pavn - UCM 2013-14

    Bootstrap

    13

    Tipografa

    http://getbootstrap.com/css/#type Bootstrap define la tipografa 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 aadir texto ms pequeo <h1>h1.Cabecera deBootstrap<small>Texto secundario</small></h1> <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">...</p> para resaltar el texto Tambin <small> <strong> y <em> Alineacin 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


    Bootstrap

    Juan Pavn - UCM 2013-14

    14

    Tipografa
    http://getbootstrap.com/css/#type

    Listas

    Unordered <ul> Ordered <ol> Descripciones <dl>

    Cdigo

    En lnea: <code>&lt;code&gt;</code> En bloque: <pre> cdigo en varias lneas </pre>

    Tablas Formularios Botones

    Juan Pavn - UCM 2013-14

    Bootstrap

    15

    Imgenes redimensionables
    img { maxwidth: 100%; height: auto; } <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">

    Juan Pavn - UCM 2013-14

    Bootstrap

    16

    Utilidades para responsive design

    Se pueden ocultar elementos de una pgina dependiendo del dispositivo con las siguientes clases (aplicables solo para bloques)

    Tabla de http://getbootstrap.com/css/#responsive-utilities

    Juan Pavn - UCM 2013-14

    Bootstrap

    17

    Utilidades para responsive design

    Igualmente para impresin de pgina (aplicables solo para bloques)

    Tabla de http://getbootstrap.com/css/#responsive-utilities

    Juan Pavn - UCM 2013-14

    Bootstrap

    18

    Ejercicio

    Comprobar en http://getbootstrap.com/css las distintas posibilidades de tipografa que ofrece bootstrap para tablas, formularios y botones

    Juan Pavn - UCM 2013-14

    Bootstrap

    19

    Componentes

    Dropdowns Grupos de botones Button dropdowns Navegacin


    Tabs, pills, justified, disabled links, Navbars

    Breadcrumbs, pagination

    Indican el lugar de navegacin en la jerarqua del sitio

    Labels Badges Jumbotron

    Bloque para llamar la atencin sobre un contenido

    Cabecera y pi de pgina
    Bootstrap

    Juan Pavn - UCM 2013-14

    20

    Componentes

    Thumbnails

    Para agrupar fotos o imgenes fcilmente

    Alertas Barra de progreso Media objects

    Comentarios de blogs, tweets, etc. que requieren una pequea imagen alineada a la izquierda o derecha del texto

    Juan Pavn - UCM 2013-14

    Bootstrap

    21

    Componentes

    Iconos del proyecto Glyphicons


    fonts/ glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff

    Juan Pavn - UCM 2013-14

    Bootstrap

    22

    Ejercicios

    Jugar con los componentes que se pueden encontrar en http://getbootstrap.com/components

    Juan Pavn - UCM 2013-14

    Bootstrap

    23

    plugins jQuery

    Transitions

    Efectos de transiciones Ventanas de dilogo que requieren una respuesta sencilla del usuario Mens Actualiza automticamente los objetos de navegacin al pasar el ratn o dedo por un componente (resaltando o sacando el men) Efectos para activar o desactivar tabs Saca informacin sobre un elemento al pasar por el Informacin que se saca sobre un elemento

    Modals

    Dropdowns

    ScrollSpy

    Tabs

    Tooltips

    Popovers

    Juan Pavn - UCM 2013-14

    Bootstrap

    24

    plugins jQuery

    Alert messages

    Mensajes con un tick para desactivarlos Control de los botones Permite hacer presentaciones/diaporamas Subnavegacin con un men lateral

    Buttons

    Carousel

    Affix

    Juan Pavn - UCM 2013-14

    Bootstrap

    25

    Ejercicio

    Crear una pgina con un diaporama de fotos

    Juan Pavn - UCM 2013-14

    Bootstrap

    26

    Personalizacin

    Generar los ficheros con propiedades personalizadas en http://getbootstrap.com/customize Crear un fichero ejercicios.css donde incluir declaraciones para personalizar el sitio

    Incluirlo en el HTML de trabajo <link href="css/ejercicio.css" rel="stylesheet">

    Juan Pavn - UCM 2013-14

    Bootstrap

    27

    Bibliografa

    Bootstrap

    http://getbootstrap.com/

    J. Spurlock. Bootstrap. O'Reilly (2013) D. Cochran. Twitter Bootstrap Web Development How-To. Packt Publishing (2012) LibrosWeb: Bootstrap 3, el manual oficial

    http://librosweb.es/bootstrap_3/

    Juan Pavn - UCM 2013-14

    Bootstrap

    28

    Vous aimerez peut-être aussi