Bootstrap: configuración del entorno

Es muy fácil de configurar y comenzar a usar Bootstrap. Este capítulo explicará cómo descargar y configurar Bootstrap. También discutiremos la estructura de archivos Bootstrap y demostraremos su uso con un ejemplo.

Descarga Bootstrap

Puede descargar la última versión de Bootstrap desde https://getbootstrap.com/. Cuando haga clic en este enlace, verá una pantalla como la siguiente:

Aquí puede ver dos botones:

Download Bootstrap- Al hacer clic aquí, puede descargar las versiones precompiladas y minimizadas de Bootstrap CSS, JavaScript y fuentes. No se incluye documentación ni archivos de código fuente original.
Download Source - Al hacer clic aquí, puede obtener el último código fuente de Bootstrap LESS y JavaScript directamente desde GitHub.

Si trabaja con el código fuente sin compilar de Bootstrap, debe compilar los archivos LESS para producir archivos CSS utilizables. Para la compilación de archivos MENOS en CSS, Bootstrap admite oficialmente sólo Receso , que es hinter CSS de Twitter basado en less.js .

Para una mejor comprensión y facilidad de uso, usaremos la versión precompilada de Bootstrap a lo largo del tutorial. A medida que los archivos se compilan y minimizan, no tiene que preocuparse cada vez de incluir archivos separados para funciones individuales. En el momento de escribir este tutorial, se descargó la última versión (Bootstrap 3).

Estructura de archivo

Bootstrap precompilado

Una vez que se descargue la versión compilada de Bootstrap, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (bootstrap. *), Así como CSS y JS compilados y minificados (bootstrap.min. *). Se incluyen fuentes de Glyphicons, ya que es el tema opcional de Bootstrap.

Código fuente de Bootstrap

Si ha descargado el código fuente de Bootstrap, la estructura del archivo sería la siguiente:

Los archivos en less / , js / y fonts / son el código fuente de Bootstrap CSS, JS y fuentes de iconos (respectivamente).
La carpeta dist / incluye todo lo que se enumera en la sección de descarga precompilada anterior.
docs-assets / , examples / y todos los archivos * .html son documentación de Bootstrap.

Plantilla HTML

Una plantilla HTML básica que usa Bootstrap se vería así:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Aquí puedes ver el jquery.js, bootstrap.min.js y bootstrap.min.cssarchivos que se incluyen para crear un archivo HTM normal en la plantilla Bootstrapped. Solo asegúrese de incluir la biblioteca jQuery antes de incluir la biblioteca Bootstrap.

Más detalles sobre cada uno de los elementos en este código anterior se discutirán en el capítulo Descripción general de Bootstrap CSS .

Ejemplo

Ahora probemos un ejemplo usando la plantilla anterior. Pruebe el siguiente ejemplo usando la opción de demostración en vivo disponible en la esquina superior derecha del cuadro de código de muestra a continuación en nuestro sitio web:

<h1>Hello, world!</h1>

En todos los capítulos siguientes hemos utilizado texto ficticio del sitio https://www.lipsum.com/.

↰ Previous page Next page ↱