Software">
Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 13 vistas

    ITSO TEW 007 Bootstrap

    Cargado por

    Rony Castillo
    Bootstrap es un framework de diseño web que proporciona plantillas prediseñadas para crear interfaces de usuario atractivas de manera rápida. Incluye componentes como grids, cards, forms y galerías de imágenes. Para utilizar Bootstrap, se deben descargar los archivos CSS y JavaScript y vincularlos en un documento HTML. Luego, se pueden agregar los diferentes componentes de Bootstrap al proyecto para dar formato y estilo a la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    ITSO TEW 007 Bootstrap

    Cargado por

    Rony Castillo
    13 vistas4 páginas
    Bootstrap es un framework de diseño web que proporciona plantillas prediseñadas para crear interfaces de usuario atractivas de manera rápida. Incluye componentes como grids, cards, forms y galerías de imágenes. Para utilizar Bootstrap, se deben descargar los archivos CSS y JavaScript y vincularlos en un documento HTML. Luego, se pueden agregar los diferentes componentes de Bootstrap al proyecto para dar formato y estilo a la página.

    Descripción original:

    Creación de página web con Bootstrap

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Bootstrap es un framework de diseño web que proporciona plantillas prediseñadas para crear interfaces de usuario atractivas de manera rápida. Incluye componentes como grids, cards, forms y galerías de imágenes. Para utilizar Bootstrap, se deben descargar los archivos CSS y JavaScript y vincularlos en un documento HTML. Luego, se pueden agregar los diferentes componentes de Bootstrap al proyecto para dar formato y estilo a la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    13 vistas4 páginas

    ITSO TEW 007 Bootstrap

    Cargado por

    Rony Castillo
    Bootstrap es un framework de diseño web que proporciona plantillas prediseñadas para crear interfaces de usuario atractivas de manera rápida. Incluye componentes como grids, cards, forms y galerías de imágenes. Para utilizar Bootstrap, se deben descargar los archivos CSS y JavaScript y vincularlos en un documento HTML. Luego, se pueden agregar los diferentes componentes de Bootstrap al proyecto para dar formato y estilo a la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 4

    TECNOLOGIA WEB 1 – TEW-200

    BOOTSTRAP
    1. CONCEPTO
    Es un framework de plantillas web prediseñadas en la versión 4, es una librería desarrollada
    por Twitter que simplifica el proceso de maquetación de páginas web según estándares del
    diseño web. Provee un conjunto de librerías CSS y Javascript con plantillas listas a utilizar
    para crear interfaces de usuario rápidas agradables y atractivas.

    Entre los componentes o plantillas que provee podemos mencionar: grid, cards,
    fonts, navbar, form, modal, image gallery, etc. Básicamente son bloques de
    código HTML5, css y Javascript que solo se añaden a una página web en edición según
    las necesidades.

    2. DESCARGAR BOOTSTRAP

    Descarga los archivos compilados para trabajar en local offline o


    sin Internet.
    https://getbootstrap.com/docs/4.5/getting-started/download/

    NOTA.- Algunos componentes como Modal y Navbar requieren


    de javascript para funcionar.

    Por lo tanto debemos descargar por aparte los dos


    archivos jquery-3.3.1.slim.min.js y popper.min.js

    Hacemos clic en el primer enlace, aparecerá un grupos


    de texto guardamos con el botón derecho.

    Ing. Yana Chejo Pascual


    TECNOLOGIA WEB 1 – TEW-200

    Copiamos el CDN, abrimos en nueva pestaña, aparecerá


    un grupo de texto y lo guardamos con el botón derecho.

    3. INTEGRAR LIBRERIAS DE BOOTSTRAP 4 EN UN PROYECTO


    Como ya tenemos a la mano las carpetas css y js, el siguiente paso es llevarlas hasta el
    proyecto (carpeta),

    4. VINCULAR ARCHIVOS CSS Y JS EN UN DOCUMENTO HTML


    Crear un nuevo documento index.html y vincular la libreria bootstrap.css en el head con
    la etiqueta link e ingresar la ruta del archivo en el href, seguidamente ingresar las demás
    librerias js en etiquetas script con la ruta de archivo en el src segun corresponde al final
    del body

    Ing. Yana Chejo Pascual


    TECNOLOGIA WEB 1 – TEW-200
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1,shrink-to-fit=no">
    <title>Utilizando bootstrap 4</title>

    <!-----Vinculación de archivo css bootstrap 4 ------>


    <link rel="stylesheet" href="css/bootstrap.css">

    </head>
    <body>

    <!----Vinculación de archivos javascript bootstrap 4 ---->


    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

    </body>
    </html>

    5. EJEMPLO 1.
    A continuación realizamos un ejemplo de funcionamiento del Framework con un
    componente navbar.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    shrink-to-fit=no">
    <title>Ejemplo 1</title>

    <!-------Vinculacion de archivo css Bootstrap 4 --------->


    <link rel="stylesheet" href="css/bootstrap.css">
    </head>

    <body>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>

    <!-------Vinculacion de archivos Javascript Bootstrap 4 ------->


    <script src="js/jquery-3.3.1.slim.min.js"></script>

    Ing. Yana Chejo Pascual


    TECNOLOGIA WEB 1 – TEW-200
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>

    Ing. Yana Chejo Pascual

    También podría gustarte