Introducción e instalación de BootStrap

Para comenzar el desarrollo web, primero puede leer este artículo  .

  1. Sistema de red
  2. Botones, Glyphicons, Tablas
  3. Formularios verticales, formularios horizontales, formularios en línea
  4. Pestañas desplegables y receptivas
  5. Barra de progreso y Jumbotron

Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Resuelve muchos problemas que tuvimos una vez, uno de los cuales es el problema de compatibilidad entre navegadores. Hoy en día, los sitios web son perfectos para todos los navegadores (IE, Firefox y Chrome) y para todos los tamaños de pantalla (Escritorio, Tabletas, Phablets y Teléfonos). Todo gracias a los desarrolladores de Bootstrap, Mark Otto y Jacob Thornton de Twitter, aunque más tarde se declaró que era un proyecto de código abierto. 

Razón para elegir Bootstrap:

  • Desarrollo web más rápido y fácil.
  • Crea páginas web independientes de la plataforma.
  • Crea páginas web receptivas.
  • También está diseñado para responder a los dispositivos móviles.
  • ¡Es gratis! Disponible en www.getbootstrap.com

Los sitios web que se crearon con mucho CSS y JavaScript ahora se pueden crear con unas pocas líneas de código usando Bootstrap. Bootstrap se compone principalmente de tres componentes:

  • CSS
  • fuentes
  • JavaScript

Instalación de Bootstrap: Hay dos formas en las que podemos instalar Bootstrap. Hablaré sobre ambas formas de instalar Bootstrap. Pero antes de instalar Bootstrap, debemos codificar un documento html básico en el que instalaríamos Bootstrap. Aquí está,

Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Learning Bootstrap @ GeeksforGeeks.org</title>
    <meta name="description" content="Hello World">
</head>
<body>
      <div> Hello World!</div>
      <div> You're learning Bootstrap on Geeksforgeeks.org</div>
</body>
</html>

Método 1 (BootstrapCDN): este método de instalación de Bootstrap es bastante fácil pero requiere conexión a Internet. Se recomienda encarecidamente que siga este método.

Paso 1: Vaya a getbootstrap y haga clic en Primeros pasos. Desplácese hacia abajo.

BootStrap Introduction and Installation

  • Paso 2: Copie el <enlace> y péguelo en la sección principal del código HTML. 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Learning Bootstrap @ GeeksforGeeks.org</title>
    <meta name="description" content="Hello World">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
</head>
<body>
    <div>Hello World!</div>
    <div>You're learning Bootstrap on Geeksforgeeks.org</div>
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous">
    </script>
</body>
</html>

Paso 3: copie la etiqueta <script> y pegue esas cosas en la sección del cuerpo en la posición inferior como el código anterior.

Paso 4: ¡Bingo! Ha instalado Bootstrap en su documento html. Para ver los cambios en su documento, intente abrir la página en una pestaña separada de su navegador y podrá notar fácilmente la diferencia entre los dos códigos. Sin embargo, no se puede sentir mucha diferencia hasta ahora, pero sería evidente en las últimas partes del artículo. Aquí, el de la izquierda no tiene bootstrap y el de la derecha tiene instalado bootstrap.

 

Método 2 (CSS y JS compilados): este método de instalación de arranque también es fácil, pero puede funcionar sin conexión (no requiere una conexión a Internet), pero es posible que no funcione para algunos navegadores.

  • Paso 1: Vaya a getbootstrap y haga clic en Primeros pasos. Haga clic en el botón Descargar Bootstrap y descargue el CSS y JS compilados.BootStrap Introduction and Installation

Paso 2: Se descargaría un archivo.zip. Extráigalo y vaya a la carpeta de distribución. Vería 2 carpetas llamadas CSS y JS. Puede hacer su archivo HTML allí y luego debe pegar estos enlaces en sus respectivas secciones.

<enlace rel=”hoja de estilo” type=”text/css” href=”css/bootstrap.min.css”> <script src=”js/bootstrap.min.js”></script> <script src= “https ://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Learning Bootstrap @ GeeksforGeeks.org</title>
    <meta name="description" content="Hello World">
    <link rel="stylesheet" type="text/css"
        href="css/bootstrap.min.css">
</head>
<body>
    <div> Hello World!</div>
    <div> You're learning Bootstrap on Geeksforgeeks.org</div>
    <script src="js/bootstrap.min.js"></script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
</body>
</html>

HTML 3: Abra el documento HTML con el navegador y vea la diferencia que hace bootstrap. Esto probablemente no sea compatible con versiones superiores de Internet Explorer (8+) y para ellas necesitamos descargar archivos adicionales, lo cual es engorroso. Por lo tanto, se recomienda encarecidamente seguir el Método A, que es realmente muy simple.

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *