Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Bootstrap Tema

    Cargado por

    Luis Fajardo
    9 vistas10 páginas
    Aprende Bootstrap con este PDF

    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?

    Denunciar este documento
    Aprende Bootstrap con este PDF

    Copyright:

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

    Bootstrap Tema

    Cargado por

    Luis Fajardo
    Aprende Bootstrap con este PDF

    Copyright:

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

    Fundamentos de Diseño Web

    Semana 07

    Docentes:

    Ing. Milagros Quispe aquisper@usmp.pe


    Ing. Victor Ramos vramosg@usmp.pe
    Bootstrap – Ejemplo – Uso de Formulario
    Bootstrap – Ejemplo – Uso de Formulario
    Font Awesome

     Ejemplo: https://www.w3schools.com/icons/fontawesome_icons_medical.asp

    To utilizar Font Awesome icons, agregar la siguiente línea de código dentro de la


    etiqueta <head> :

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


    awesome/4.7.0/css/font-awesome.min.css">
    Nav
     Ejemplo:
    <ul class="nav">
    <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    CSS Nav

     https://www.w3schools.com/bootstrap/bootstrap_ref_comp_navs.asp
    Ejemplo básico de Navbar
    <nav class="navbar navbar-dark bg-dark">
    <ul class="nav">
    <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    </nav>
    Textos

     <p class="text-primary">.text-primary</p>
     <p class="text-secondary">.text-secondary</p>
     <p class="text-success">.text-success</p>
     <p class="text-danger">.text-danger</p>
     <p class="text-warning">.text-warning</p>
     <p class="text-info">.text-info</p>
     <p class="text-light">.text-light</p>
     <p class="text-dark">.text-dark</p>
    Responsive images

     Las imágenes en Bootstrap son responsive con .img-fluid. max-


    width: 100%; and height: auto; se aplican a la imagen de modo
    que se escala con el elemento primario.

     Para la version 3 <img src="..." class="img-responsive"


    alt="Responsive image">
     Para la version 4 <img src="..." class="img-fluid" alt="Responsive
    image">
    JS Modal (modal.js)

     The Modal plugin es una ventana pop up que aparece en una página.

    También podría gustarte