Bienvenido de nuevo en esta unidad. Te voy a mostrar algunos otros componentes, incluidos los formularios jumbotron y
bootstrap, y las entradas.
Pero antes de hacerlo quiero tomarme un momento para abordar algo que es realmente muy importante
cuando estamos aprendiendo nuevas herramientas como esto, como bootstrap.
Y en mi experiencia de enseñar a las personas a convertirse en desarrolladores web, noté que un bootstrap
es uno de los primeros lugares donde algunos de los estudiantes comienzan a sentirse incómodos y sienten que no saben
si lo están haciendo y luego porque de repente estamos incluyendo un montón de código que alguien
más escribió en nuestra aplicación.
Pero si echas un vistazo a los documentos aquí, son realmente largos, son completos, lo cual es
genial, pero hay mucho aquí y quiero que enmarques esto no como un manual que tienes que leer
para comprender todo.
Esto no es como una guía de cómo terminar antes de que usemos bootstrap.
Es una referencia en la que si decide que necesita un formulario, mire la sección del formulario si necesita una tabla.
Tocará la sección de la mesa si necesita una barra de navegación.
estuvieras usando sin parar regresando aquí haciendo referencia a bits de código individuales copiando sus
segmentos de código verificando algunas demostraciones ejemplos de lectura que he estado usando bootstrapped para años en este punto.
Miras la sección NFR, pero es importante que trates los documentos como si los
Y me siento bastante bien con la mayor parte.
Pero dejo los documentos abiertos cuando estoy trabajando en algo con bootstrap.
Constantemente hago referencia a los ejemplos en uno de los primeros videos de este curso. Hablé
sobre cómo convertirme en un desarrollador web.
No te estás convirtiendo en un experto en memorización y en conocer toda la información.
Sí, necesitas saber cosas.
Sí, tienes que entender y memorizar algunas cosas, pero no te estás convirtiendo en un experto o en la memorización.
Te estás convirtiendo en un experto en acceder a la información.
Y parte de esa información la habrá memorizado y mucho de ella estará en línea en la documentación
o ejemplos de libros de videos y todo tipo de recursos.
Muy bien, para resumir toda la charla de ánimo.
Básicamente solo quiero que recuerdes que sí hay mucho para arrancar y vas a ver 20
30 por ciento y hay mucho más por ahí.
Pero no te dejes intimidar por eso.
accediendo a los documentos si necesita hacer algo que no le enseño a hacer.
Debería sentirse cómodo
Abre los documentos y búscalo.
Y siempre hay buenos ejemplos y explicaciones sobre el puntocom bootsotspot.
De acuerdo, sin más preámbulos pasemos a hablar sobre algunos de
estos componentes importantes y comenzaré mostrándote Jumbotron.
Por lo tanto, un Jumbotron de acuerdo con los documentos oficiales es un componente ligero y flexible que puede ampliar
opcionalmente toda la ventana gráfica para mostrar el contenido clave de su sitio.
Puedes ver un ejemplo de uno aquí y si queremos usar un Jumbotron es realmente muy fácil.
Todo lo que tenemos que hacer es escribir jumbotron de la clase div y todo lo que pongamos dentro de eso
será parte del Jumbotron.
Entonces probemos eso.
Solo hazlo abajo, los botones tendrán un div con la clase Jumbotron jumbo tron ​​y luego adentro, si hay que hacer,
un H1 o H-1 dirán que es un jumbotron y luego agregarán un botón allí como lo han
hecho aquí y lo haremos agregar un párrafo también en nuestro párrafo será jimbre.
Lo suficientemente bueno por ahora.
hola allí.
Y un botón y nuestro botón simplemente dirá
DE ACUERDO.
Y luego un botón tenemos algunas opciones.
Haremos un botón de éxito y lo agrandaré y guardaré.
Echemos un vistazo a lo que obtenemos.
Y hay un Jumbotron que puede ver que ocupa todo el ancho de la ventana de nuestro navegador y eso no
suele ser lo que queremos.
está sucediendo es que el JumboTron está configurado para ocupar el 100 por ciento de cualquier contenedor en el que se encuentre.
Y lo que
En este caso, no está fuera de nada.
Pero en breve te mostraré el sistema de cuadrícula y el programa de arranque donde podemos controlar
exactamente cuánto quieres que ocupe la pantalla si quieres que esté centrado y ocupar un tercio de la pantalla.
Dos tercios de la pantalla un cuarto de la pantalla tenemos todas estas opciones diferentes que podemos
hacer mediante el sistema de grilla bootstraps.
Por ahora voy a mostrarte otro elemento que no podemos, en el que se encuentra un div con clase igual a
contenedor y qué contenedor hará.
Si simplemente ponemos cosas dentro del contenedor de la clase div, le da un poco de espacio alrededor y
centra las cosas.
Entonces, el contenedor
descubre que ocupa todo este espacio que se puede ver, pero tiene bastante margen.
Entonces, si solo queremos una mejora rápida sin tener que usar el sistema de cuadrícula
del que no hemos hablado, podemos agregar un contenedor de clase div y ahora obtenemos este bonito Jumbotron.
Y si movemos este código que ya tenemos bien dentro de los contenedores, no lo
pondremos dentro del Jumbotron.
Verás que aún se ve afectado por ese contenedor.
Así que fuera del Jumbotron pero dentro del contenedor guardar y actualizar puede ver que también está dentro de
ese contenedor y refleja eso visualmente.
OK volvamos a los componentes y lo siguiente que te mostraré.
Vamos a la cima.
Tenemos que ir a ver para evaluar y le mostraré los formularios y cómo funcionan.
Entonces haz clic en formularios y hay bastantes tipos diferentes y diferentes ejemplos.
Y me desplazaré por ellos primero antes de escribir algo.
Así que aquí hay un ejemplo básico de una forma de arranque.
Puedes ver el mercado que lo crea.
Luego tenemos lo que se conoce como una forma en línea y tenemos otro tipo de formulario en
línea y otro más con diferentes tipos de entradas y otro tipo de formulario.
Y ahora esto se refiere a todos los diferentes tipos de formularios que controlan los diferentes
tipos de entradas que son compatibles.
Entonces, todos estos son de color.
verificación deshabilitadas botones de radio casillas de verificación botones de radio en línea menú desplegable selecciones seguir bajando.
Número de correo electrónico horario de la semana y así sucesivamente áreas de texto diferentes casillas de verificación deshabilitadas casillas de
Tenemos otros estados de foro.
Tenemos un estado de enfoque.
Puedes ver este resaltado alrededor de ese azul.
Ese es el estilo de enfoque bootstrap predeterminado.
También podemos inhabilitar las entradas al agregar "deshabilitadas" y también tenemos algunas otras cosas que podemos hacer, pero voy a volver a hacer una
copia de seguridad y concentrarme en el inicio básico de ejemplo. Comenzaré por copiar todo
este formulario. más y luego vamos a diseccionarlo poco a poco.
Así que volvamos aquí y simplemente agregaremos este formulario después de todo lo demás.
Pero lo haré dentro del contenedor.
Déjame hacer esta pantalla completa por un momento.
Tenemos nuestra forma y dentro de esa forma tenemos bastante contenido.
Volvamos al navegador y observemos su aspecto.
Y lo primero que probablemente notará es que nuestro formulario abarca todo este contenedor.
Toma el 100 por ciento de eso y eso es algo que podremos controlar.
hablemos del sistema de grilla bootstrap, podremos decir fácilmente que esto debería ir un 50% más allá.
Una vez que
Así que eso es algo que podremos cambiar fácilmente una vez que hablemos sobre el sistema de grilla bootstrap
o aún no estamos allí.
Así que solo vamos a ir con eso.
Toma un 100 por ciento por ahora.
Es un gigantesco foro de aspecto extraño, pero está bien.
Nos encanta cómo es.
Así que volveremos a lo sublime y diseccionaremos esta pieza a la vez.
Entonces, tenemos una etiqueta de foro dentro de esa etiqueta de foro.
Hay un grupo de formulario de clase div y si desea saber más sobre lo que hace si vuelve a
los documentos de arranque y realiza una búsqueda de grupo de formularios y puede ver las etiquetas de rap y los controles en el
grupo de formularios para un espaciado óptimo.
Entonces, si nos deshacemos de esa clase grupal de forma alrededor de esta primera y lo haremos alrededor de la
primera y segunda vez, verás con qué terminamos.
Voy a guardar y actualizar verá cómo el espaciado cambia aquí entre esas entradas.
es como lo usamos cuando tenemos una entrada y se forma la etiqueta y queremos que se agrupen.
Entonces, podemos volver atrás y agregar ese grupo de formularios, y así
Así que preste atención aquí solo se agrega un poco de espacio allí.
Simplemente agrega un poco de espacio justo aquí, que efectivamente agrupa estos dos visualmente
y luego Grip los combina visualmente y estos aquí.
Entonces ese es el grupo de formas.
Y luego las etiquetas son simplemente normales.
No tenemos que agregar nada elegante para etiquetar ninguna clase de Boucek, pero la entrada es un control de formulario de clase.
Entonces veamos qué sucede cuando me deshago de él.
Así que solo lo haré en la primera y pondré la entrada de correo electrónico, retrocederé y actualizaré.
Tenga en cuenta que esto cambia completamente a una entrada de navegador predeterminada normal.
Entonces no tienes las esquinas redondeadas.
No obtenemos el mismo espaciado y espacio de las cosas.
Y tampoco obtenemos el mismo efecto de enfoque cuando hago clic en obtener un contorno azul, pero es
diferente a este.
entre los dos, pero en realidad hay algunas diferencias más importantes que verán una vez que trabajemos
con el sistema de grillas y la forma en que se comportan e interactúan con otros elementos.
El esquema de arranque es un poco más sutil y esos son solo los cambios visuales obvios
Volveré y agregaré el control de formulario nuevamente.
Entonces, realmente si quisiéramos destilar esto, todo aquí se reduce para formar un grupo y controlar las formas.
Esas dos clases son realmente responsables de que las cosas se vean bien.
Ahora existe este bloque de ayuda de clase de párrafo y podemos ver lo que obtenemos de eso.
pequeña pista de un puntero sobre parte de tu formulario y esas cosas con el bloque de ayuda de
clase y luego tenemos nuestro botón aquí que es solo un botón Pucelle regular o tenemos entre a
y b tienden a caiga y podríamos agrandarlo o agrandarlo. Cambie el color como cualquier otro botón.
Es este texto aquí el que da una
Entonces ya puedes ver cómo se parece un poco a Legos donde tenemos un botón Lego que podemos
agregar a un jumbotron.
También podemos agregarlo solo o podemos agregarlo en lugar de un formulario.
Es solo un pequeño componente plug and play que podemos agregar a diferentes partes de nuestra aplicación.
Así que volvamos y echemos un vistazo a otro tipo de formulario que es la forma en línea.
Así que esto se ve un poco diferente.
un comentario aquí en línea y vamos a sangrar las cosas correctamente.
Si simplemente copiamos este código y echamos un vistazo con las diferencias, dejo ese primer formulario y agreguemos
Se ve bien.
Tenga en cuenta que todo es idéntico.
Todavía tenemos un control de formulario en las entradas que tenemos el grupo de formulario, pero hay una gran diferencia.
Todo está dentro de un formulario con forma de clase en línea para que una línea.
Vamos a mostrarte cómo se ve comenzar.
Vuelvo nos da esta bonita forma en línea aquí.
Y tan pronto como me deshago de eso y lo guardo ahora vuelve a una forma regular como la que tenemos aquí.
Entonces, solo una clase contiene todos los estilos que controlarán eso.
Entonces lo mantendremos como Formulario en línea.
Y de nuevo, el espaciado no es ideal en este momento.
Eso se solucionará cuando hablemos del sistema de grillas.
Hay mucho más de lo que podríamos hablar sobre formas de arranque.
Probablemente podríamos hacer 30 charlas de 45 minutos sobre la construcción de formas complejas de arranque, aprendiendo los pormenores
de todas estas diferentes piezas y diferentes cosas que podemos hacer, validaciones personalizadas de todo tipo de estilos
con los que podemos trabajar.
Pero no voy a hacer eso.
Cubrimos los conceptos básicos importantes.
Hay dos tipos de formularios que son como el pan y la mantequilla de las formas de
Boucek donde tenemos la forma regular básica y luego una forma en línea y habrá algunas otras características en los
diferentes aspectos del bootstrap que usamos en los formularios.
Pero en lugar de perder el tiempo en este momento y empantanarte en todos los pormenores y los
pequeños detalles de las formas de PRICHEP, voy a tirar esos pequeños pedazos cuando los necesitemos cuando en realidad
estamos usando bootstrap.
Por lo tanto, las dos enseñanzas acerca de los formularios serían dos clases que son realmente importantes para el control y las
formas de grupo. El control de las formas hace que las entradas bootstrap refined group solo agreguen un buen espacio.
Entonces, sea lo que sea que pongas, un grupo de formularios obtiene un buen espacio y luego una sola clase se alinea.
Si envuelve un formulario, el formulario completo se alinea.
Y luego también hablamos sobre Jumbotron.
La clase muy simple es igual a Jumbotron.
Entonces puedes ver un compañero.
Y luego ponemos todo dentro de un contenedor.
Y si nos deshacemos de ese contenedor para mostrarte lo que sucede.
Actualiza todo ese espacio que ese buen margen desaparece.
Por lo tanto, los contenedores de forma agradable solo para obtener un espacio corto en su aplicación hacen que las cosas se vean relativamente bien.
De acuerdo, entonces, antes de terminar este video, pasaré 10 segundos mostrándote un sitio en el que vamos
a construir una aplicación que tenga una base de datos completa conectada utilizando node y express y Mongo and mongoose
y un montón de tecnologías que usamos Arranque el prototipo de la interfaz para que se vea
relativamente bien con bastante rapidez y se puede ver que tenemos un Jumbotron aquí.
Estamos usando algunos de los botones que estamos usando, el sistema de cuadrícula que explicaré más adelante.
Y luego, si voy a iniciar sesión, puedo ver que tenemos un formulario.
Así que estos son controles de formulario que he diseñado usando el sistema de cuadrícula para que no abarque todo
el ancho de la pantalla.
Más bien solo toma esta pequeña sección del medio.
Veremos eso una vez que hablemos del sistema de grillas.
Pero solo quiero mostrarte que esta es una aplicación real y es algo que usaremos como bootstrap para ayudarnos
a prototipar y hacer que las cosas se vean decentes bastante rápido