Ponte las botas,
y comencemos con Bootstrap.
Estoy seguro de que tus dedos están picando por poner tus manos alrededor de Bootstrap.
Por lo tanto, primer paso, vaya a
las instrucciones de ejercicio que siguen a este video
en la página del curso Bootstrap en Coursera.
Y luego en las instrucciones,
verá un enlace a este archivo Bootstrap4-starter.zip.
Descargue el archivo zip en su computadora.
Además, las instrucciones paso a paso que se ilustran en este video
también se darán en las instrucciones de ejercicio que siguen a este video.
Allí, tendrá acceso a cualquiera de los fragmentos de código que necesite para este ejercicio.
Este sería el caso de todos los ejercicios en el futuro, también.
Por lo tanto, si necesita hacerse con los fragmentos de código,
ahí es donde los encontrará.
Una vez que descargue el archivo zip,
mueva ese archivo zip a una ubicación conveniente en su computadora.
Entonces, aquí, lo he movido a una carpeta llamada Coursera en mi computadora,
y luego tengo el archivo zip con este nombre largo allí.
Simplemente descomprima el archivo.
Una vez descomprimido el archivo,
encontrará una carpeta llamada Bootstrap4 creada en su computadora.
Dentro de la carpeta Bootstrap4,
verá otra carpeta llamada ConFusion, allí.
Vaya a la carpeta Confusion y verá dos archivos allí,
index.html y el archivo package.json.
Ahora, abra una ventana de comandos o
una terminal y, a continuación, vaya a esta carpeta en su ventana de comandos o terminal.
En el símbolo del sistema, escriba npm install.
Tenga en cuenta que ya tengo el archivo package.json allí.
Entonces, el archivo package.json está configurado para que
la dependencia de desarrollo del servidor lite-se instale si escribo npm install.
Por lo tanto, una vez que escriba npm install,
verá que el servidor lite-se instalará en su carpeta node_modules cada uno.
Una vez que se haya completado,
abra esta carpeta en su editor favorito.
Una vez que tenga la carpeta abierta en su editor,
cree un archivo.gitignore y
luego ponga node_modules en el archivo gitignore y guarde.
Así que esto es para asegurarse de que cuando haces un gitcommit,
la carpeta node_modules no se confirmará.
Después de eso, es hora de ir a buscar Bootstrap para usarlo en nuestro proyecto.
Antes de buscar Bootstrap,
vamos a hacer una confirmación del estado actual del archivo.
Entonces, haga git init e inicialice su repositorio git.
Luego puede verificar el estado de git,
y vería que estos archivos necesitan ser confirmados,
agregar todos los archivos,
gitcommit -m «Configuración inicial».
Así que este es el punto de partida de su carpeta en este momento.
Entonces, con esto, su punto de partida de su proyecto web ahora se ha comprometido a git.
Ahora puede configurar este git para que se sincronice con un repositorio en línea,
tal como hablamos en los ejercicios de git.
Por lo tanto, puede configurar un repositorio en Bitbucket o en Github y luego
sincronizar este proyecto con ese repositorio git.
Nuestro siguiente paso es ir a buscar Bootstrap.
Para ello, agregue el símbolo npm install bootstrap @4 .0.0 y también —save,
y deje que se instale el Bootstrap.
Una vez instalado Bootstrap,
nos damos cuenta de que también necesitamos instalar su peer,
que es jQuery así como Popper.js.
Así que sigamos adelante e instalemos tanto jQuery como Popper.js en esta carpeta del proyecto.
Entonces, para hacer eso, agregue el mensaje de tipo npm install
jquery @3 .3.1
y Popper.js @1 .12.9 —save.
Ahora, cada vez que instalo cualquiera de los paquetes npm,
estoy especificando explícitamente la versión del paquete que debe instalar.
La razón de esto es que quiero asegurarme de que a medida que pase por este ejercicio,
todos los pasos funcionen correctamente.
Así que estoy especificando la versión exacta de los módulos npm que se instalarán.
Entonces, aquí, estamos instalando la versión 3.3.1 de jQuery y Popper.js versión 1.12.9.
Posteriormente, también, especificaré las versiones exactas de los módulos que se instalarán.
Así que vamos a seguir adelante e instalar estos.
Y una vez instalados,
podemos ir al siguiente paso.
Volviendo a nuestra carpeta de proyecto,
verá que si entra en node_modules,
verá una carpeta allí llamada Bootstrap.
Y dentro de la carpeta llamada Bootstrap,
encontrará una carpeta llamada dist.
Entonces, dentro de la carpeta dist,
encontrará dos subcarpetas llamadas CSS y js.
Si vas a la carpeta CSS,
encontrarás un montón de archivos CSS precompilados aquí.
El que nos interesa al principio es Bootstrap min.css.
Ese es el archivo que vamos a incluir en nuestro
archivo index.html para hacer uso de Bootstrap en nuestro proyecto.
Del mismo modo, yendo a la carpeta js,
vería que hay un archivo min.js de Bootstrap.
Vamos a incluir eso también en nuestro index.htm.
Así que ese será el siguiente paso que me verás haciendo.
Antes de pasar al siguiente paso,
iniciemos nuestro servidor lite-para que podamos ver los cambios que hacemos en el
index.html inmediatamente reflejados en nuestra página web en tiempo real.
Así que vamos a poner en marcha los servidores lite-.
Por lo tanto, escriba el indicador de inicio npm,
y luego eso debería iniciar su servidor lite-.
Ahora puede ver, en la pantalla,
mi editor a la izquierda y la versión actual de la página index.html a la derecha.
Entonces, como puede ver,
ya he configurado la página index.html con algo de contenido.
Esta página web se parece a la típica página web de un profesor de ciencias de la computación.
Ahora vamos a abrir la página index.html en nuestro editor.
Y luego en la parte principal de la página index.html,
justo antes del título,
voy a pegar un poco de código.
Este fragmento de código se le da en las instrucciones.
Así que simplemente puede copiar y pegar este fragmento de código,
y le guiaré a través de lo que este fragmento de código está tratando de hacer.
Te darás cuenta de que tengo tres metaetiquetas aquí.
El primero dice charset="utf-8".
Entonces, este es el unicode que se va a usar.
La segunda línea que dice meta name="viewport»,
voy a volver y explicar esta línea en particular a
usted en la siguiente lección cuando vamos a ver el diseño web sensible.
Ahora, permítanme llamar su atención sobre esta línea en particular que
dice link rel="stylesheet», y luego href.
Tenga en cuenta que estoy especificando href como «node_modules/bootstrap/dist/css/bootstrap.min.css».
Entonces, lo que estoy especificando es que el archivo bootstrap.min.css,
que contiene las clases CSS correspondientes a Bootstrap que hemos
descargado usando NPM a nuestra carpeta node_modules,
voy a incluir eso en el encabezado de mi página index.html.
Por lo tanto, debe incluir las clases CSS proporcionadas por Bootstrap.
También necesita incluir las clases de JavaScript proporcionadas por Bootstrap,
que vamos a hacer en la parte inferior de esta página.
Ir a la parte inferior de esta página, tenga en cuenta,
justo antes de la etiqueta del cuerpo de cierre,
voy a pegar en el código para incluir todos los scripts allí.
Entonces, para hacer eso,
solo pego en las tres líneas para que el script incluya jQuery
, Popper.js y también el Bootstrap min.js.
Y tenga en cuenta el orden en el que he incluido esto.
Así que el Bootstrap está en la parte inferior.
Luego, dado que Bootstrap depende tanto de jQuery como Popper en ese orden,
entonces primero ingresaré jQuery.
Y luego, después de eso, ingresamos Popper, y luego, finalmente,
Bootstrap min.js en la parte inferior del archivo index.html.
Ahora, esto se incluye en la parte inferior de la página.
Porque cuando está cargando la página desde un servidor web,
desea que las clases CSS se carguen inmediatamente para que a medida que la página comience a renderizarse,
cuando se obtiene JavaScript,
el JavaScript necesita ejecutarse para realizar cambios en
su página con el código JavaScript,
y que tomará un poco de tiempo.
Por lo tanto, no desea que el usuario esté esperando a que
se cargue toda la página antes de que vea algo en la ventana de su navegador.
Así que es por eso que normalmente cargamos las clases de JavaScript
hacia el final de nuestra página html justo antes de la tecnología del cuerpo.
Después de realizar estos cambios,
vamos a guardar el archivo.
Ahora, la razón por la que estoy mostrando el
archivo index.html en mi editor y también el navegador justo al lado es, en
el momento en que guarde los cambios que ha hecho en el archivo index.html,
tenga en cuenta cómo la representación del navegador de ese archivo se
actualiza inmediatamente y vea Bootstrap ya en acción en la página.
En este momento, verás que tu página está usando Times New Roman para representar todo el contenido.
En el momento en que guardo la página web,
usted nota que las fuentes que se utilizan en su página web han cambiado.
Ahora, su página web está configurada para hacer uso de las clases de Bootstrap,
y está usando la tipografía predeterminada de Bootstraps para representar todo el contenido.
Bootstrap utiliza por defecto Helvetica Neue para la fuente.
Puede cambiar la fuente predeterminada para bootstrap y así sucesivamente,
pero eso estará más allá del alcance de nuestra discusión en este momento.
Por lo tanto, una vez que configure su página index.html y la guarde,
inmediatamente verá Bootstrap entrando en acción en nuestra página web.
Así que así es como voy a seguir ilustrando, a
medida que agregamos varios bootstraps, clases CSS
y componentes a nuestra página web,
cómo la representación de la misma en nuestro navegador seguirá cambiando.
Ahora, obviamente, la representación de la página en nuestro navegador sigue siendo terrible.
Es mejor que la típica página web de profesores de ciencias de la computación,
pero definitivamente no legible.
Ahora tenemos que poner en acción las diversas clases CSS y
los componentes de JavaScript que
nuestro marco de interfaz de usuario web de Bootstrap proporciona para diseñar nuestra página web.
Por lo tanto, lo haremos paso a paso a medida que avancemos en este ejercicio.
Este puede ser un momento conveniente para que realice una confirmación de git de
los cambios que ha realizado para que al final de este ejercicio, el
estado de su carpeta de proyecto se guarde en su repositorio git.
Ir a mi carpeta Confusion en otra pestaña de mi ventana de terminal,
si escribo estado de git,
ahora veo que mi archivo index.html y el paquete del archivo JSON se han modificado.
Así que voy a hacer un compromiso.
Entonces, ahora, mi estado de
la carpeta al final de este ejercicio se ha comprometido en mi repositorio git.
Puede sincronizarlo con su repositorio en línea para que
el estado de su proyecto se guarde en este punto.
Con esto, completamos nuestro primer ejercicio de Bootstrap.
Ya ha visto cómo podemos configurar Bootstrap para ser utilizado en nuestro proyecto web. A
medida que procedamos a los próximos ejercicios,
vamos a emplear las clases de Bootstrap para diseñar nuestras páginas web.