Bienvenido de nuevo a esta unidad. Voy a presentar una nueva herramienta llamada Bootstrap y estoy en la
página de inicio de bootstrap. Consigo bootscom puntocom.
Y solo quiero tomar unos minutos en este video introductorio para explicar qué es el bootstrap y por qué
lo estamos usando.
Y luego también para mostrarle algunos ejemplos de sitios que usan bootstrap.
Comencemos leyendo la publicidad oficial de arranque.
Bootstrap es el TMLC SS más popular en javascript framework para desarrollar primeros proyectos móviles con capacidad
de respuesta en la Web.
Vamos a romper eso un poco.
Bootstrap es extremadamente popular.
De hecho, es el repositorio más estrellado y bifurcado de get hub, lo que básicamente significa que tiene la mayor
cantidad de gente que lo usa. La mayoría de la gente está de acuerdo en agregarlo para obtener ayuda y todo ese
bootstrap es en realidad un único archivo de éxito y un solo archivo de javascript. .
Ahora hay una gran cantidad de C S S y muchos javascript en esos archivos, pero son solo
dos archivos y podemos incluirlos en nuestra propia aplicación.
responden y nos ayuda a hacerlo rápido sin tener que escribir una tonelada de nuestro propio código.
Básicamente tomamos el código de otra persona y desde Bootstrap lo agregamos a nuestra propia aplicación y nos
ayuda a crear sitios atractivos que
Hay dos razones principales por las que te lo estoy mostrando en este curso.
El primero es que es muy popular.
Muchos lugares lo usan.
Muchas empresas lo usan muchos desarrolladores y solo vale la pena saberlo.
Pero el segundo es que nos ayudará a hacer sitios web atractivos con bastante rapidez en este curso.
y podemos hacer que las cosas funcionen en 10 15 minutos y nos veremos bastante bien.
Así que cuando estamos aprendiendo y cosas cuando estamos enfocándonos en Node y Express y Mongo y mangosta y
rodilla profunda y toda esta compleja espalda y lógica todavía podemos hacer algo que se vea bien sin tener que
dedicar una hora o dos horas video para diseñar algo, podemos enchufarlo
Lo siguiente que haré es darte un recorrido rápido por los muelles, pero el programa de arranque tiene
muchos buenos ejemplos de buena documentación y realmente usan el arranque en este sitio web que tiene sentido.
Así que empecemos haciendo clic en C Ss y eso es lo que se mencionó. Bootstrap es solo un archivo
CSSA, un solo archivo javascript dentro de ese archivo CSSA.
Hay muchas cosas que obtenemos gratis.
Echemos un vistazo a los botones.
Entonces, si queremos hacer un botón y tenemos un bootstrap incluido en nuestra aplicación, podemos agregar
esta clase a la clase que es en realidad Beati y PTEN por defecto y obtenemos estos botones.
Podemos hacer diferentes colores.
Echemos un vistazo a los formularios.
Recibimos buenas entradas aquí.
Y también es muy importante tener en cuenta que todo es receptivo en el sitio para que pueda ver que
obtenemos elementos que responden al ancho de la pantalla.
También tenemos diferentes tipos de formas.
Puedes combinar las diferentes piezas.
Entonces aquí están usando un botón con un formulario.
Así que es como el arranque de piezas de Lego y de muchas maneras solo ha sido de piezas
de Lego que puedes juntar y agregar a tu sitio como mejor te parezca.
Repasaremos la mayoría de estos componentes.
La mayoría de estas piezas grandes una vez que comenzamos a trabajar con ella y escribimos el código de arranque nosotros mismos.
que contienen algunas de las partes más grandes de bootstrap que podemos usar y que incluyen cosas como barras de navegación.
Así que por ahora vamos a seguir adelante y cuándo mostrarle la siguiente pestaña que contiene componentes componentes
Y este es probablemente uno de los aspectos más populares de bootstrap que muchos sitios usan como se
puede ver con un poco de código.
Parece mucho, pero te aseguro que es mucho menos de lo que sería si estuviéramos escribiendo una
barra NAV desde cero.
Y esto viene con forma de menú desplegable y hay varios tipos de barras de diferentes colores, algunos que se fijan
en la parte superior de la página, algunos que se desplazarán.
el Jumbotron, que es una forma de exhibir cierto contenido en las barras de progreso de su sitio web.
Hay otros componentes como
Y todos vienen con bootstrap.
Por lo tanto, es posible que se pregunte ahora mismo si bootstrap incluye todas estas piezas y ya tienen el estilo preestablecido
de que todos los sitios que usan bootstrap tienen el mismo aspecto.
Y la respuesta es sí y no.
Depende de cómo el sitio usa bootstrap.
compañía o un proyecto que usa bootstrap bien hace difícil decir que en realidad están usando bootstrap
porque usan esos componentes principales y luego pueden entrar y escribir sus propios estilos en la parte superior.
Yo diría que una
Cambie los colores cambien las fuentes cambian algunos de los efectos de desplazamiento.
No tiene que usar exactamente los mismos colores y todo lo que viene con bootstrap, pero eso no
significa que haya algo intrínsecamente malo en el uso de los estilos Bootstrap integrados.
Y definitivamente haremos las dos cosas.
Entonces, cuando estamos creando un sitio y el enfoque no está realmente en el frente, solo queremos
hacer algo que se vea presentable rápidamente.
La parte frontal del prototipo básico usará bootstrap y no modificaremos muchas piezas.
Pero luego, si estamos trabajando en algo un poco más grande que no
queremos que parezca, usamos el bootstrap sin cambiar nada, entonces vamos a incorporar algunos de nuestros estilos, básicamente, agregamos
una capa de pintura en aerosol. encima de bootstrap.
Lo siguiente que quiero hacer es mostrarle algunos de los sitios que se crean con bootstrap y Buddh
trip en realidad tiene un sitio web oficial donde muestran algunos de esos sitios.
Si haces clic en Expo lo tengo abierto ya.
Se puede ver que muestran bellos e inspiradores usos de un bootstrap para que podamos abrir algunos de
ellos para abrirlos y nuevas pestañas.
Y estos son solo los más recientes.
Hay cientos en este sitio.
Puedes ver toneladas y toneladas de ellos y puedes seguir desplazándote y desplazándote, y luego podemos ir a algunos
más antiguos y hay tantos sitios diferentes que lo están usando.
Y realmente no todos se ven iguales.
Sí, tal vez muchos de ellos tienen una barra de navegación.
Tal vez muchos de ellos tienen este diseño de pantalla grande a pantalla completa, pero eso es más una
tendencia de diseño que algo que lo ha hecho puramente responsable.
Así que echemos un vistazo a algunos de estos.
Este es el creativo Tim, que es una compañía que crea plantillas de sitios web en realidad.
Y puedes ver que tenemos esta bonita grilla de imágenes.
Es muy receptivo
Si reduzco esto, tenemos nuestro pequeño bar de navegación aquí.
Así que este es un componente de arranque de la forma en que todo se presenta en esta cuadrícula.
Bootstrap es parcialmente responsable de eso, pero también puede ver que no están usando los
botones Bootstrap predeterminados integrados.
Ellos los han cambiado.
Las cosas se ven diferentes
Así que creo que este es un buen uso de bootstrap que es un sitio muy atractivo.
Funciona bien y usa bootstrap pero no depende de bootstrap al 100 por ciento.
Echemos un vistazo a uno o dos más.
Entonces este se llama Indicus o índices algo así.
Al parecer, diseñan y crean productos digitales que las personas disfrutan usar.
Así que vamos a desplazarnos hacia abajo aquí.
Eche un vistazo a lo que tenemos.
Así que hay algo de contenido que probablemente esté construido con el sistema de cuadrícula bootstrap
que ayuda a organizar y diseñar las cosas como ya he mencionado antes, es notoriamente difícil en Pearcey SS.
Está mejorando, pero el bootstrap es realmente útil para ayudarnos a establecer las cosas en nuestra aplicación.
pequeña barra de pie de página. Hay una barra de navegación aquí, así que es muy divertido ir al bootstrap Expo.
Tómate un tiempo para explorar algunos de los proyectos que solían arrancar y ver cómo lo usan
y las diferentes formas en que las empresas están modificando está agregando sus propias fuentes con sus propios colores
y realmente descifra cuáles son los componentes centrales que usan muchos sitios y por qué decide usar bootstrap.
Y tenemos una
Y en mi opinión, todo se reduce al sistema de grillas al que dedicaremos un video
en esta unidad y las barras de navegación y la receptividad de todo.
DE ACUERDO.
Entonces, para concluir, les mostraré un sitio simple que haremos.
Esta es nuestra startup llamada Heavy Petting.
Te ayuda a encontrar a tu alma gemela felina perfecta y usa bootstrap.
Puedes ver que tenemos una barra de navegación aquí, así como tenemos los botones de Morgan.
Obtenemos estos iconos pequeños, luego tenemos nuestro texto aquí y la pequeña línea de etiqueta y luego nuestro botón.
Y luego, al cambiar el tamaño de las cosas, todo es receptivo, puedes ver que las cosas se mueven y cambian de lugar.
Y lo más importante es que obtenemos esa pequeña hamburguesa y tenemos una barra de navegación amigable para dispositivos móviles.
Entonces, al final de esta unidad, trabajaremos en la creación de esta página de inicio de inicio
falso que combina personas y mascotas en relaciones románticas