Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Bootstrap

    Cargado por

    juan pablo
    17 vistas11 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    17 vistas11 páginas

    Bootstrap

    Cargado por

    juan pablo

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 11

    BOOTSTRAP

    JUAN PABLO VILLANUEVA PÁMANES


    ¿QUÉ ES BOOTSTRAP?

    • Bootstrap es un front-end framework gratuito


    para un desarrollo web más rápido y fácil
    • Bootstrap incluye plantillas de diseño basadas en
    HTML y CSS para tipografía, formularios, botones,
    tablas, navegación, modales, carruseles de
    imágenes y muchos otros, así como
    complementos de JavaScript opcionales.
    • Bootstrap también le brinda la capacidad de crear
    fácilmente diseños receptivos
    COMO EMPEZAR…
    Introduce el código de la hoja de estilo <link> en el <head> antes que todas las
    demás hojas de estilo para cargar nuestro CSS.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    Muchos de los componentes requieren el uso de JavaScript para funcionar.


    Coloque uno de los siguientes <script> cerca del final de sus páginas, justo antes
    de la etiqueta de cierre </body>, para habilitarlos.

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>


    SISTEMA DE CUADRICULA (GRID SYSTEM)
    <div class="container">
    <div class="row">
    El sistema de cuadrícula utiliza tres clases CSS principales para <div class="col">
    crear el diseño necesario: .container, .row y .col. <!--Contenido-->
    </div>
    .container : ocupa el centro del ancho de la pantalla con <div class="col">
    espacios iguales a cada lado <!--Contenido-->
    .container-fluid : ocupa el 100% del ancho de la pantalla </div>
    </div>
    del dispositivo
    </div>
    .row : una fila debe añadirse a un elemento en bloque,
    generalmente un div, para formar una fila. Las filas debe
    estar dentro de un elemento en bloque con la
    clase .container
    .col : una columna debe añadirse a un elemento en
    bloque, generalmente un div, para formar una columna.
    Las columnas deben ubicarse siempre dentro de una fila.
    SISTEMA DE CUADRICULA (GRID SYSTEM)
    COLUMNAS FLEXIBLES
    Hay 12 columnas de plantilla disponibles por fila, lo que le permite crear diferentes combinaciones de elementos
    que abarcan cualquier número de columnas. Las clases de columna indican el número de columnas de plantilla que
    abarcan (por ejemplo, col-4 abarca cuatro).

    <div class="col-4"><!--Contenido--></div>
    <div class="col-8"><!--Contenido--></div>
    SISTEMA DE CUADRICULA (GRID SYSTEM)
    PUNTOS DE CORTE
    Para que el contenido de un sitio web sea adaptable, es decir, capaz de "reorganizarse" para mostrarse de la mejor
    manera en cada dispositivo, Bootstrap establece ciertos "puntos de corte" mediante el uso de clases CSS que
    establecen los límites entre un tipo de pantalla y otra, lo que significa que afectan ese punto de interrupción y
    todos los que están por encima (por ejemplo, .col-sm-4 se aplica a sm, md, lg, xl y xxl).
    EJEMPLO DE PUNTOS DE CORTE
    Supongamos que desea mostrar dos columnas, una mas pequeña que otra, en pantallas pequeñas y del mismo tamaño
    en pantallas más grandes. Deberá especificar el punto de interrupción donde las columnas.

    <div class="col-xs-4 col-lg-6">


    col-xs-4 col-xs-8 col-lg-6 col-lg-6
    <!--Contenido-->
    </div>
    Pantallas chicas Pantallas grandes <div class="col-xs-8 col-lg-6">
    <!--Contenido-->
    </div>

    sm
    xs md lg xl & xxl
    OTROS COMPONENTES
    Modals
    Button Group Dropdown
    Navigations Popover
    Pagination Alert
    Thumbnails Collapse
    Alerts Carousal
    Progress Bars Tool tip
    Panels

    Tables
    Forms
    Buttons
    Images
    QA
    GRACIAS!!

    También podría gustarte