EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Cómo descargar e instalar Bootstrap 4

            Bootstrap descargar instalar

            Bootstrap descargar instalar

            Bootstrap es uno de los frameworks de HTML, CSS y JavaScript más populares actualmente. Gracias a este framework, desarrollado por Mark Otto y Jacob Thornton de Twitter, podemos crear interfaces ahorrando tiempo al utilizar recursos desarrollados previamente: clases CSS, componentes JavaScript sobre JQuery, repositorios de tipografías y botones, entre otros. Además, Bootstrap es responsive y compatible con los navegadores más utilizados.

            Contenidos del artículo

            • Diferencias entre Bootstrap 4 y Bootstrap 5
            • Cómo descargar e instalar Bootstrap 4
              • 1. Forma más sencilla: utilizando CDN
              • 2. Descarga del código para desarrollo
                • ¿Cuándo se creó Bootstrap?
                • ¿Qué beneficios aportó Bootstrap al desarrollo de proyectos web?

            Este framework ha ido evolucionando desde 2011, año en el que tuvo lugar su lanzamiento como proyecto Open Source en Github.

            Diferencias entre Bootstrap 4 y Bootstrap 5

            En este tutorial vamos a centrarnos en Bootstrap 4 por ser la versión más utilizada actualmente. Sin embargo, merece la pena destacar la nueva versión «Bootstrap 5» que ha sido lanzada oficialmente el 5 de mayo de 2021. Algunos de los cambios más destacados son los siguientes:

            DiferenciasBootstrap 4Bootstrap 5
            ColumnasTiene 5 niveles (xs, sm, md, lg, xl)Tiene 6 niveles (xs, sm, md, lg, xl, xxl)
            ColoresTiene colores limitadosSe agregaron colores adicionales con una paleta de colores mejorada
            JqueryTiene jquery y todos los complementos relacionadosJquery se elimina y se cambia a Vanilla JS
            Internet ExplorerBootstrap 4 es compatible con IE 10 y 11Bootstrap 5 no es compatible con IE 10 y 11
            FormulariosLos botones de opción y las casillas de verificación tienen un aspecto distinto en diferentes sistemas operativos y navegadoresYa sea que se trate de cualquier sistema operativo o navegador, el aspecto de los elementos del formulario no cambiará
            Iconos de Bootstrap
            Bootstrap 4 no tiene sus propios iconos SVG, tenemos que importar una fuente como FontAwesomeBootstrap 5 tiene sus propios iconos SVG
            JumbotronSoportaNo es compatible con jumbotron
            Card deckCard deck se utiliza para crear tarjetas con el mismo ancho y altoCard deck ha sido eliminado en bootstrap 5
            NavbarTenemos la propiedad inline-block y obtendremos el menú desplegable blanco como predeterminado para la clase dropdown-menu-darkSe elimina la propiedad inline-block y obtendremos el menú desplegable negro como predeterminado para la clase dropdown-menu-dark
            Generador de sitio estáticoBootstrap 4 utiliza el software JekyllBootstrap 5 utiliza el software Hugo
            Tabla 1. Diferencias entre BootStrap 4 y BootStrap 5

            Cómo descargar e instalar Bootstrap 4

            Bootstrap se puede instalar de formas diferentes. En esta sección veremos los dos métodos más utilizados: utilizando su CDN y descargando el código en local. En la página web oficial de Bootstrap (getbootstrap.com) se pueden ver todas las formas de distribución.

            1. Forma más sencilla: utilizando CDN

            La forma más sencilla de utilizar Bootstrap es utilizando su red de distribución de contenidos o CDN (del inglés Content Delivery Network). El inconveniente es que se necesita Internet para que funcione correctamente. Este método se suele utilizar para realizar pruebas rápidas.

            Bootstrap

            Para utilizar la CDN de Bootstrap lo único que debemos hacer es copiar en el archivo HTML de nuestro proyecto el código que se indica en el siguiente enlace getbootstrap.com/docs/4.4/getting-started/introduction/. Aquí tienes un ejemplo detallado:

            <!DOCTYPE html>
            <html lang="es">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Bootstrap 4. Necesita Internet</title>
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
            </head>
            <body>
                <h1>Lorem ipsum</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                <button class="btn btn-primary">dolor atmet</button>
                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
            </body>
            </html>

            default

            2. Descarga del código para desarrollo

            Este segundo método es uno de los más utilizados y consiste en la descarga completa del código. De esta forma podemos implementar nuestras páginas de forma local sin necesidad de utilizar Internet.

            Pasos a seguir para la inserción del código en nuestra página web:

            1. Para descargar Bootstrap debemos acceder a su web oficial: getbootstrap.com/docs/4.4/getting-started/download/

            En nuestro caso, vamos a descargar la opción de «CSS y JS compilado»

            Instalar Bootstrap

            2. Además de descargar todo el código anterior, tenemos que descargar Jquery y Popper.

            Primero descargamos Jquery desde la página oficial: jquery.com/download/ (seleccionar versión comprimida / click derecho/ guardar como). Jquery es una librería que simplifica la tarea de programar en JavaScript y permite agregar interactividad a un sitio web.

            Instalar Jquery

            A continuación descargamos Popper desde su página oficial: popper.js.org (Seleccionar “Install” y después la opción unpkg minified). Popper es una librería de Javascript para añadir tooltips y popovers en elementos HTML.

            PopperJS instalar

            El último paso será incluir todos los archivos en nuestro código html tal y como se muestra en el siguiente ejemplo:

            • Añadimos el archivo CSS en el head:
            • Agregarnos la librería Jquery.
            • Incluimos la librería Popper.
            • Insertamos el archivo js de Bootstrap.
            <!DOCTYPE html>
            <html lang="es">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Bootstrap descarga de código</title>
                <link rel="stylesheet" href="css/bootstrap.min.css">
            </head>
            <body>
                <button class="btn btn-primary">Mi botón</button>
                <script src="js/jquery-3.6.0.min.js"></script>
                <script src="js/popper.min.js"></script>
                <script src="js/bootstrap.min.js"></script>
            </body>
            </html>

            default

            Una vez ya tenemos la instalación de Bootstrap de forma local, vamos a ver cómo funciona su famoso sistema de columnas.

            ¿Cuándo se creó Bootstrap?

            ¡Bien! ¡Has fallado!

            En 2011 por Mark Otto y Jacob Thornton

            ¿Qué beneficios aportó Bootstrap al desarrollo de proyectos web?

            Selecciona 2 respuestas

            ¡Bien! ¡Has fallado!

            Navegación de entradas

            ← Frameworks de diseño web responsive CSS
            Sistema de columnas y contenedores o rejillas de Bootstrap 4 →

            Tutorial BootStrap 4

            • 1. Frameworks de diseño web
            • 2. Cómo descargar e instalar Bootstrap
            • 3. Sistema de columnas y contenedores Bootstrap
            • 4. Texto, tipografía y colores en Bootstrap
            • 5. Tablas en Bootstrap
            • 6. Imágenes en Bootstrap
            • 7. Botones en Bootstrap
            • 8. Componentes de Bootstrap
            • 9. Plantillas y temas gratis para Bootstrap
            • 10. Referencias y recursos

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados