Curso completo de Bootstrap 4 por Ignacio Gutiérrez (Parte I)

BOOTSTRAP 4! 💪Curso Completo [DESDE CERO] 💪

Curso completo de BOOTSTRAP 4 💪[Desde cero, para principiantes]

Apuntes:

¿Cómo INSTALAR Bootstrap 4? 💪Curso completo [Desde cero, para principiantes]

Apuntes:

  • INICIO DE PROYECTO: P01Inicial.
  • Crear proyecto vacío (P01Inicial).
  • Descargar Bootstrap.
  • Colocar las carpetas css y js en el proyecto con los archivos bootstrap descargados en el paso anterior.
  • Crear archivo index.html en la raíz del proyecto y copiar el modelo de la plantilla de inicio que ofrece la introducción de la documentación de la página oficial de Bootstrap.
  • Reemplazaremos las llamadas de bootstrap a la página por los archivos bootstrap del proyecto.
  • index.html:
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Container y Grid System en Bootstrap 4! 💪Tutorial Español 💪.

Apuntes:

  • index.html:
<!doctype html>
<html lang="es">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>Pruebas Bootstrap!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos en css -->
    <style>
        .fondo{background: blue;}
        .borde{border: 1px #000 solid;}
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container fondo">
        <p>Texto de ejemplo</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-2 borde">1</div>
            <div class="col-6 borde">2</div>
            <div class="col-4 borde">3</div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Columnas Bootstrap 4 Responsive - 💪Curso desde cero

Apuntes:

  • index.html:
<!doctype html>
<html lang="es">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>Pruebas Bootstrap!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos en css -->
    <style>
        .fondo{background: blue;}
        .borde{border: 1px #000 solid;}
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container fondo">
        <p>Texto de ejemplo</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-2 borde">1</div>
            <div class="col-6 borde">2</div>
            <div class="col-4 borde">3</div>
        </div>
    </div>

    <hr>

    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-2 col-xl-12 borde">1</div>
            <div class="col-sm-6 col-md-4 col-lg-1 col-xl-12 borde">2</div>
            <div class="col-sm-12 col-md-4 col-lg-9 col-xl-12 borde">3</div>
        </div>
    </div>

    <hr>

    <div class="container">
        <div class="row">
            <div class="col borde">1</div>
            <div class="col borde">2</div>
            <div class="w-100"></div>
            <div class="col borde">3</div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • FIN DE PROYECTO: P01Inicial.

Bootstrap 4 Responsive 💪Práctica con ejemplos en Página web 💪

Apuntes:

  • INICIO DE PROYECTO: P02Responsive.
  • index.html:
<!doctype html>
<html lang="es">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>Pruebas Bootstrap Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos en css -->
    <style>
        .borde{border: 1px #000 solid; text-align: center; height: 50px;}
        .color1{background: #eeeeee;}
        .color2{background: #ffcccc14;}
        .color3{background: #94ac3c;}
        .color4{background: #295ba7;}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="borde color4 col-sm-12">HEADER</div>
        </div>
        <div class="row">
            <div class="borde color1 col-sm-6 col-md-3 d-none d-sm-block">IZQUIERDA</div>
            <div class="borde color2 col-sm-6 col-md-6">CONTENIDO</div>
            <div class="borde color3 col-sm-12 col-md-3">DERECHA</div>
        </div>
        <div class="row">
            <div class="borde color4 col-sm-12">FOOTER</div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • FIN DE PROYECTO: P02Responsive.

#6 Tipos de alineamiento con Flexbox - Curso completo de Bootstrap 4! 2017 desde cero

Apuntes:

<!doctype html>
<html lang="es">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>Pruebas Bootstrap Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos en css -->
    <style>
        .borde{border: 1px #000 solid; text-align: center; height: 50px;}
        .color1{background: #eeeeee;}
        .color2{background: #ffcccc14;}
        .color3{background: #94ac3c;}
        .color4{background: #295ba7; height: 500px}
    </style>
</head>
<body>
    <div class="container"><h1>Alineamientos</h1></div>
    <div class="container">
        <!-- <div class="row color4 align-items-center justify-content-center justify-content-between"> -->
        <div class="row color4 align-items-center justify-content-center justify-content-around">
            <!-- <div class="col-1 borde color3 align-self-start">1 -->
            <div class="col borde color3">1
                <div class="row">
                    <div class="col color2">sub1</div>
                    <div class="col color2">sub2</div>
                    <div class="col color2">sub3</div>
                </div>
            </div>
            <div class="col-1 borde color3">2</div>
            <div class="col-1 borde color3 offset-md-3">3</div>
            <div class="col-1 borde color3">4</div>
            <div class="col-1 borde color3">5</div>
            <div class="col-1 borde color3 align-self-end">6</div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • FIN DE PROYECTO: P03Flexbox.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Ruta hacia el desarrollador web full stack en Soluciones++

Imagen
Curso de Marca Personal de Platzi Lo primero, pero lo primero es realizar el curso de Marca Personal de Platzi, que si bien no te enseñará a programar, te dará intrucciones claras de la orientación que deben tomar tus proyectos y tus estudios, para ir construllendo desde el inicio un cv impecable. El curso es completamente gratuito y entrega certificado. Ir a curso de Marca Personal Abrir una cuenta en GitHub Es necesario abrir primero que nada una cuenta en GitHub para poder ir creando repositorio de los proyectos que realices a lo largo de este grato y largo camino hacia nuestra conversión en desarrollador web full stack. Ir a GitHub Curso de GitHub Para poder crear respositorios, .... Ir a Curso de GitHub
Leer más

Soluciones++ para VBA

Imagen
En cuanto a Visual Basic para Aplicaciones te tengo las siguientes Soluciones++: Microsoft Excel: Clase para hacer consultas SQL a BD en VBA . Excel, Access y VBA . Automatización de Excel Ron de Bruin . Ribbon Images Labels (The Anchorage) . Microsoft PowerPoint: Macro para mover y cambiar tamaño de un objeto seleccionado . Macro para pegar una imagen del portapapeles y ajustar en lámina . Microsoft Office en general: Prefijos comunes para nombrar controles en Visual Basic y VBA . Enviar correo electrónico desde la cuenta Gmail con VBA . ImageMso: Office Excel ImageMso Galería de iconos con información . Bert-toolkit .
Leer más