hernandezblasantonio/pw/documentacion/html/css/bootstrap

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. - http://getbootstrap.com

Twitter Bootstrap es un framework de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales. - Wikipedia

Uso

Bootstrap requiere del uso de jQuery y Popper.

  1. Accede a https://github.com/twbs/bootstrap/releases/latest

  2. Dirígete a la sección de Download (si existe) y da click al enlace del archivo con nombre bootstrap-*-dist.zip.

    En este caso se ha descargado el archivo bootstrap-4.1.1-dist.zip en el directorio $HOME/Downloads.

    La versión de Twitter Bootstrap descargada ha sido 4.1.1.

  3. Crea el directorio $HOME/www/bootstrap01 y accede a él:

    alumno@servidor:~ $ mkdir -p $HOME/www/bootstrap01
alumno@servidor:~ $ cd $HOME/www/bootstrap01

  4. Descomprime a Twitter Bootstrap:

    alumno@servidor:~/www/bootstrap01 $ unzip $HOME/Downloads/bootstrap-4.1.1-dist.zip

  5. Crea los archivos vácios css/main.css y js/main.js:

    alumno@servidor:~/www/bootstrap01 $ touch css/main.css js/main.js

  6. Integra a jQuery al proyecto accediendo a https://code.jquery.com y en la sección jQuery 3.x bajo la sección jQuery Core obten el enlace hacía el archivo con nombre jquery-*.min.js (minified) y descarga dicho archivo:

    alumno@servidor:~/www/bootstrap01 $ wget https://code.jquery.com/jquery-3.3.1.min.js -O js/jquery.min.js

    En este caso se ha descargado el archivo jquery-3.3.1.min.js de jQuery en su versión 3.3.1.

  7. Integra a Popper al proyecto accediendo a https://unpkg.com/popper.js/dist/ y obten el enlace hacía el archivo con nombre popper.min.js (minified) y descarga dicho archivo:

    alumno@servidor:~/www/bootstrap01 $ wget https://unpkg.com/popper.js@1.14.3/dist/popper.min.js -P js/

    En este caso se ha descargado el archivo popper.min.js de Popper en su versión 1.14.3.

  8. Crea el archivo index.html con el siguiente contenido:

    <!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap01</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <!-- CONTENIDO -->
    <!-- /CONTENIDO -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

    Al terminar en el directorio $HOME/www/bootstrap01 encontrarás la siguiente estructura:

    alumno@servidor:~/www/bootstrap01 $ pwd && tree
/home/alumno/www/bootstrap01
.
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   └── main.css
├── index.html
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    ├── bootstrap.min.js.map
    ├── jquery.min.js
    ├── main.js
    └── popper.min.js

2 directories, 25 files

  9. Inicia a thttpd y accede a él con el navegador web.

Notas

  • El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.

  • Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo llevas a cabo en el archivo css/main.css.

    Recuerda que tendrás que hacer uso de selectores de CSS.

  • Los archivos en los directorios css y js con extensión .map opcionalmente pueden ser borrados:

    find css/ js/ -type f -iname "*.map" -exec rm -f {} \;

    Los archivos con extensión .map son conocidos como source map (mapas de origen). Para mayor información sobre el uso de estos archivos puedes leer Configurar preprocesadores de CSS y JS y Source Maps.

  • Los archivos en los directorios css y jsque en su nombre no contengan .min. o main. opcionalmente pueden ser borrados:

    find css/ js/ -type f ! -iname "*.min.*" -! -iname "main.*" -exec rm {} \;

    Estos archivos no serán usados pero incluyen el código fuente de Twitter Bootstrap mientras que los archivos con extensión .min incluyen el código fuente minimizado de Twitter Bootstrap para ser entregados al navegador web. Para mayor información sobre la minimización puedes leer Minimizar JavaScript y CSS.

  • Podrás encontrar la documentación oficial de Twitter Bootstrap en https://getbootstrap.com/docs/4.0/getting-started/introduction/

  • Podrás encontrar ejemplos-plantillas sobre el uso de Twitter Bootstrap en https://getbootstrap.com/docs/4.0/examples/

Lecturas

Opiniones