Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Unidad10 Modulo3 Prog Web Tipo

    Cargado por

    Mateo Aznarez
    5 vistas10 páginas

    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

    Copyright:

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

    Unidad10 Modulo3 Prog Web Tipo

    Cargado por

    Mateo Aznarez

    Copyright:

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

    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Programador Web – Nivel 1


    Unidad 10: Desarrollo con Bootstrap

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    1
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Unidad 10: Desarrollo con Bootstrap

    Tipos de grillas
    Tipografías
    Elementos CSS

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    2
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Que el alumno logre:


    • Puedan personalizar sus contenidos utilizando Bootstrap

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    3
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Tipografía
    Los estilos relacionados con la tipografía y el texto de los contenidos son esenciales en cualquier
    framework CSS. Por esa razón, Bootstrap incluye decenas de estilos para los principales elementos
    utilizados en los sitios y aplicaciones web.

    Títulos
    Bootstrap establece estilos básicos de visualización, tipografía y enlaces globales.

    Desde .h1 hasta .h6 contamos con clases intermedias también disponibles, para cuando queramos
    hacer coincidir el estilo de fuente de un encabezado pero no podamos usar el elemento HTML
    asociado.

    <p class="h1">h1. Bootstrap heading</p>


    <p class="h2">h2. Bootstrap heading</p>
    <p class="h3">h3. Bootstrap heading</p>
    <p class="h4">h4. Bootstrap heading</p>
    <p class="h5">h5. Bootstrap heading</p>
    <p class="h6">h6. Bootstrap heading</p>

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    4
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Texto
    El tamaño de letra (font-size) por defecto de Bootstrap es 14px y el interlineado (line-height) es1.428.
    Estos valores se aplican tanto al <body> como a todos los párrafos. Estos últimos también incluyen un
    margen inferior cuyo valor es la mitad que su interlineado (10px por defecto).

    Clases CSS
    Clases CSS para alinear texto
    Bootstrap define varias clases CSS para alinear de diferentes formas el contenido de texto de los
    elementos.

    Ejemplo:

    <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>

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    5
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Clases CSS para indicar el tipo de contenido


    Bootstrap también define varias clases CSS para mostrar el tipo de contenido a través del color del
    texto.

    Ejemplo:

    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauri


    s nibh.</p>

    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id el


    it.</p>

    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat port
    titor ligula.</p>

    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet n
    on magna.</p>

    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.<


    /p>

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    6
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Listas
    Listas no ordenadas
    Bootstrap también incluye los estilos adecuados para las las listas anidadas.

    Listas ordenadas

    Listas sin estilo


    Como resulta muy habitual mostrar las listas sin viñetas y sin margen izquierdo, Bootstrap incluye una
    clase CSS llamada .list-unstyled para aplicar esos estilos.

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    7
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Listas en línea
    También resulta habitual mostrar los elementos de una lista horizontalmente, como por ejemplo en el
    menú principal de navegación. Para ello, Bootstrap define una clase CSS llamada .inline-block.

    Listas de definición
    No se utilizan mucho, pero Bootstrap también incluye estilos por defecto para las listas de definición,
    formadas por pares término + definición.

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    8
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    Listas de definición horizontales


    Si lo preferimos, también es posible mostrar la lista de definición horizontalmente añadiendo la clase
    .dl-horizontal.

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    9
    ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 10

    En esta Unidad…
    En la presente unidad trabajamos con desarrollo de contenido en Bootstrap.

    En la próxima Unidad…
    En la próxima unidad vamos a trabajar con Grid System

    Contacto: info@elearning-total.com
    Web: www.elearning-total.com

    10

    También podría gustarte