[MÚSICA]
En este ejercicio, vamos a ver el soporte de Bootstrap para botones y formularios.
Así que vamos a incluir algunos botones y grupos de botones en nuestra página web.
Y también nos fijamos en el diseño de formularios y el estilo de los formularios usando clases de Bootstrap.
Para empezar, vaya a la página de instrucciones y
descargue el archivo contactus.html.zip que hemos proporcionado allí.
Así que haga clic derecho en eso, y
luego guarde este enlace en su carpeta ConFusion.
Como,
contactus.html.zip archivo.
Y luego, una vez que se haya descargado el archivo zip, descomprima el archivo para obtener la página contactus.html.
A continuación, puede eliminar el archivo zip.
Una vez que haya descomprimido el archivo y obtener la página contactus.html, se
dará cuenta de que cuando cargue esta página en su
navegador usando localhost: 3000/ contactus.html,
entonces verá que esta página ya está preformada con algo de contenido.
Así que puede notar que ya tiene la barra de navegación allí.
Tenemos el jumbotron ya formateado para nosotros.
Y notarías que tengo las migas de pan y
el contacto con nosotros que se dirige aquí formateado.
A continuación, verá alguna información adicional, la dirección aquí.
Y también, notará que el pie de página ya está formateado.
Pero notará dos cosas aquí,
notará que hay una línea aquí que dice que los grupos de botones van aquí y
luego una línea más aquí que dice que la forma va aquí.
Así que vamos a reemplazar estos dos con un grupo de botones y un formulario.
Y a lo largo del camino, aprenda el soporte de Bootstrap para botones y formularios.
Antes de continuar, ahora que tenemos tres páginas en nuestro sitio web,
es una buena idea que las enlazemos,
tanto en la barra de navegación como en los enlaces del pie de página.
Modifiquemos esas dos para que podamos navegar entre estas tres páginas fácilmente.
Así que yendo a la página contactus.html, notará que en la barra de navegación,
ya tengo los enlaces a index.html configurados correctamente.
Y notarías que en la parte inferior
aquí tienes el enlace de contacto aquí.
Pero el enlace correspondiente a about no se ha configurado correctamente.
Así que vaya a este enlace aquí y luego actualice eso a
aboutus.html.
El enlace de contacto con nosotros se puede dejar solo como tal.
Y luego guarde los cambios.
Ahora de manera similar, vaya al pie de página de esta página.
Y notará que en el pie de página tenemos estos tres enlaces aquí.
Y este puede ser un buen punto para reemplazar los enlaces
con los enlaces a las páginas correspondientes.
Así que diré, index.html, aboutus.html
y, contactus.html.
Y guarda los cambios.
Del mismo modo, vaya a index.html, y luego en index.html también,
el enlace de contacto no se ha configurado.
Así que actualicemos eso a contactus.html.
Y, de manera similar, actualice los enlaces en el pie de página.
También vaya a aboutus.html y luego arregle los enlaces incluso allí.
Entonces, en el aboutus.html también, en el encabezado voy a arreglar el enlace.
Y también en el pie de página de aboutus.html.
Así que ahora, cuando vaya a su sitio web,
podrá navegar de nuevo a su página de inicio, a su página acerca.
Y desde la página acerca, incluso puede volver a la página de contactos.
Así que todos los enlaces entre las tres páginas en los encabezados correspondientes, y
también los pies de página, aquí deben ser configurados.
De modo que si hace clic en cualquiera de estos le llevará a la página correspondiente.
Ahora es el momento de comenzar a trabajar en los botones que vamos a
incluir en nuestra página contactus.html.
Entonces, lo que haré es reemplazar esta línea con el código para
el botón y el grupo de botones y
luego volveremos a explicar cómo funciona todo esto.
Al abrir contactus.html en nuestro editor,
vamos a localizar el lugar donde esta declaración, grupo de botones va aquí, existe.
Y luego voy a reemplazar eso con el código correspondiente a
ese grupo de botones primero.
Y luego volveré para explicar cómo funciona este código.
Así que vamos a guardar los cambios, y luego echar un vistazo a cómo
se ve este grupo de botones en nuestro navegador.
Ir a su navegador, ahora puede ver que en nuestra
página web se ha creado el grupo de botones.
Así que puedes ver que hay tres botones aquí: Llamar,
Skype y Correo electrónico.
Ahora, todos estos tres se unen en una sola barra o barra de
botones o lo que está en términos de Bootstrap llamado grupo de botones.
Así que veamos cómo construimos algo como esto en el
código de Bootstrap.
Así que aquí tengo la ventana del navegador y mi código abierto uno al lado del otro.
Así que echemos un vistazo a cómo creamos este código de botón.
Echando un vistazo al código, observa que
los botones están incluidos dentro de un div aquí.
Para el div, aplicamos la clase, btn-group.
Por lo tanto, si tiene un grupo de botones que desea unir y
presentar como un grupo de botones, como una barra de botones,
entonces usaría un div con la clase de grupo de botones y
el rol como grupo aquí para ese div.
Ahora dentro de eso, notarás que estoy usando la
etiqueta, a, para definir los tres botones.
Así que veamos cómo definimos los tres botones.
Veamos cómo definimos el botón Llamar.
Así que esta línea en particular define el botón Llamar.
Así que digo, un, papel es igual a botón.
Así que esto, una etiqueta, aquí,
lo estoy usando como un botón aquí.
Entonces, es por eso que especifico el rol como un botón.
Así que esto es importante.
Y luego mira las clases que estoy aplicando a esto.
Así que el primero es btn class.
La clase btn es la clase de botón de Bootstrap.
Por lo tanto, lo mostrará como un botón clásico de Bootstrap.
La segunda parte dice es btn-primaria.
Entonces, esto es lo que define el color del botón aquí.
Entonces, en este caso, este color de botón es azul.
Y entonces, este es el color principal en Bootstrap.
Así que btn-primario.
Y luego, después de eso, mira el uso de la href aquí.
Entonces, dado que esta es una etiqueta A, puedo usar un atributo href en esa etiqueta A.
Por lo tanto, el atributo href apunta al número de teléfono.
Y luego de eso te das cuenta de que estoy usando un icono de fuente aquí para el teléfono.
Es por eso que tengo i clase fa fa-teléfono y luego después de la llamada palabra.
Por lo tanto, esto es lo que permite construir este
botón azul, que se incluye en esta barra de botones aquí.
Del mismo modo, el siguiente, observa que esto también dice botón de rol.
Y luego, a medida que pasa, ves que btn-info.
BTN-info le da un color de un color azul claro en color.
Por lo tanto, por defecto btn-info se refiere a un botón de color azul claro aquí.
Y luego, puedes ver que tengo el Skype definido aquí.
Y luego el tercero que, es un botón verde allí con correo electrónico.
Tenga en cuenta que especifico letras un rol = clase de botón = btn btn-success.
Entonces, cuando digas btn-success, eso será un botón verde aquí.
Por lo tanto, tiene algunos colores que ya están definidos en Bootstrap.
Primaria se refiere a azul en para el primero,
el éxito azul claro se refiere al color verde, entonces usted tiene una advertencia que sería un color amarillo pálido, y
luego el peligro, que es un color rojo.
Por lo tanto, estos son colores predeterminados que se configuraron en Bootstrap.
Y luego la configuración href, con el mailto aquí, y
luego, después de eso, tiene el.
Fuente como icono aquí y luego el correo electrónico allí.
Así que estas tres etiquetas e, que actualmente están actuando como botones,
están encerradas en el lado de esos div, que actúa como el grupo btn-.
Entonces, así es como mostramos un grupo de botones en Bootstrap.
Si solo desea un solo botón,
todo lo que necesita hacer es incluir solo una de estas líneas allí.
Por lo tanto, también podría usar la etiqueta del botón.
Si usa la etiqueta del botón, entonces no necesita especificar el rol,
en su lugar solo dice botón de tipo.
Porque un botón también podría actuar como un botón de envío allí.
Así que más adelante, en los formularios veremos el uso de la etiqueta del botón,
para crear un botón para ser incluido en nuestro formulario.
Continuando con el ejercicio, nuestro siguiente paso sería comenzar,
desarrollando el formulario que vamos a incluir en la página contactus.html.
Lo haremos paso a paso, para que en cada paso aprendamos un poco de
cómo incluyes algunos elementos en su forma.
Entonces, como principio, cuando vaya a la página contactus.html,
allí mismo, verá esta declaración llamada, el formulario va aquí.
Ahora, lo que voy a hacer es cambiar esto de col-sm
a col-md, para que para
tamaños de pantalla extra pequeños a pequeños, mi formulario se distribuya
ocupando toda la anchura de la pantalla, porque usa col-xs-12.
Pero desde la pantalla de tamaño mediano en las salas,
ocupará sólo 9 de las 12 columnas.
Entonces, comencemos a construir el formulario.
Entonces, lo que voy a hacer es, voy a reemplazar esto, con mi primer fragmento de código.
Vamos a incluir dos campos en nuestro formulario, para
el nombre y apellido del usuario.
Déjame agregar el código, luego veremos el resultado.
Y luego, volveremos y examinaremos el código.
Entonces, agregando el código en ese punto,
como siempre este fragmento de código está en las instrucciones.
Por lo tanto, déjame guardar los cambios.
Y luego volveremos y veremos cómo se ve este formulario en el navegador.
Echando un vistazo al formulario, verá que ahora tienen dos temas en el formulario aquí.
El primero, tiene una etiqueta en el lado izquierdo que dice Nombre y
luego tiene el cuadro de entrada aquí.
Y luego el apellido, y luego un cuadro de entrada aquí.
Ahora nota también que esta forma está dispuesta, de modo
que esta parte ocupa la parte semi de la pantalla, y
la parte restante está ocupada por la parte restante de la pantalla.
Estás empezando a preguntarte, ¿cómo vamos a hacer esto?
¿ Bootstrap grid nos ayuda a decidir sobre estos tamaños?
Esa sería una muy buena pregunta para ti mismo.
Veamos el código y comprendamos cómo se ve.
Antes de hacer eso, echemos un vistazo al mismo diseño de formularios,
en el tamaño de pantalla extra pequeño.
Por lo tanto, cambiar al tamaño de pantalla extra pequeño.
Así que iremos al Galaxy S5.
Usted nota, cómo el formulario se presenta en el tamaño de pantalla extra pequeño.
Por lo tanto, verá que la etiqueta está en la parte superior, y
luego el cuadro en sí, el cuadro de entrada en sí es la parte inferior, de manera similar para el apellido.
Así que, te das cuenta de que Bootstrap.
Por cierto, proporciona esas clases de formulario.
Automáticamente, hace que su formulario responda, de modo que cuando
se presenta en diferentes tamaños de pantalla, el formulario se distribuya adecuadamente, de
modo que no se aplastará en tamaños de pantalla pequeños.
Pero para tamaños de pantalla más grandes, debido a que tiene bienes raíces más grandes,
usted es capaz de estirar la forma, para hacer uso del espacio adicional que tiene.
Echando un vistazo a ese código fuente, y el formulario uno al lado
del otro, obviamente lo primero que nota, es que su formulario comienza con la etiqueta del formulario aquí.
Entonces, formulario y luego el formulario de cierre, etiqueta aquí.
Por lo tanto, ahí dentro, usted está describiendo las diversas partes de su formulario.
Entonces, echemos un vistazo a cómo se construye el primer nombre,
el apellido obviamente como parece debería estar usando un enfoque similar.
Entonces, de forma predeterminada, lo que nota es que, hay un div aquí.
Elemento div aquí, con el div de cierre aquí.
Entonces, este elemento div tiene una clase llamada form-group.
Y luego seguido de una clase de fila.
Entonces, la clase form-group esencialmente,
dice que lo que esté dentro de este div será tratado como un grupo de elementos.
Y luego se presentarán en consecuencia.
Y la segunda parte, se ve el uso de fila aquí.
Entonces, verías que la fila del grupo Bootstrap entra en juego aquí.
Y así este grupo de formularios en particular, se puede diseñar
usando la fila y las clases de columna que tiene de la cuadrícula de Bootstrap.
Así que ahora, si aplica la fila a este div,
lo que sea que haya dentro, puede usar las clases
de columna, para decidir exactamente cuánto espacio ocupará cada uno de ellos en la pantalla.
Ahora, por lo que eso lo hace más claro, por lo que los anexos de grupo de formularios.
Esta unidad.
Vamos a ver esta repetición una y
otra vez cuando diseñemos los diversos elementos del formulario.
Luego, debajo de eso, verá esta etiqueta de etiqueta aquí.
Para la etiqueta de etiqueta, hay ciertos atributos que se le han asignado.
Así que verá que la etiqueta de etiqueta usa un nombre para nombre.
Entonces, esta etiqueta es para algo con el nombre de identificación.
Entonces, ¿cuál es el cuadro de entrada que sigue justo debajo de eso?
Vamos a ver eso en poco tiempo.
Y luego mire las clases que se aplican a la clase label, col-md-2.
Así que para pantallas medianas a extra grandes,
este elemento en particular va a ocupar 2 columnas del espacio.
Y luego anote el otro.
Dice, etiqueta col-form-label.
Así que la etiqueta col-form-label esencialmente especifica
que esta etiqueta debe colocarse para alinearse con
el otro elemento que forma parte de este grupo de formularios.
Entonces, en este caso, el cuadro de entrada.
Y esto también significa que
la etiqueta esté alineada en el medio,
horizontalmente con el cuadro de entrada.
Entonces, esa es la razón por la que usamos la clase col-form-label.
Si no aplica esto, su etiqueta se
alineará con la parte superior de su cuadro de entrada.
Que su formulario no se verá tan bien en tamaños de pantalla medianos a extra grandes.
Ahora, en el lado izquierdo, por supuesto, porque esta ventana del navegador está aplastada,
por lo que está mostrando la vista en un tamaño de pantalla pequeño o extra pequeño aquí.
Así que es por eso que ve la etiqueta apilándose en la parte superior del cuadro de entrada aquí.
Entonces esta es la etiqueta que especifica.
Entonces, si tiene una etiqueta que desea asignar a un elemento,
así es como va a asignar la etiqueta.
Aquí abajo, ves una clase div col-md-10.
Así que esto ocupa las 10 restantes de las 12 columnas.
Así que dos columnas que están ocupadas por la etiqueta.
Y las diez columnas restantes ocupadas por esto, pero están encerradas dentro del div.
Y dentro de este div,
ves que hay un elemento de etiqueta de entrada allí con el texto de tipo.
Entonces, lo que significa que este cuadro de entrada acepta la entrada de texto.
Y la clase, mira la clase aquí.
Dice control de formularios.
Esto es importante para aplicar al cuadro de entrada aquí.
Así que el control de la forma, y el nombre de identificación.
Y el nombre que es el nombre de pila.
A continuación, nombre del marcador de posición.
Entonces, el marcador de posición es lo que aparece dentro del cuadro como un marcador de posición para
el cuadro de entrada.
Así que se asignan todos estos atributos.
Así que lo más importante,
tenga en cuenta el uso de la clase de control de formulario que se aplica al tipo de entrada.
Así es como estructuran estos dos elementos en su forma.
Para tamaños de pantalla pequeños y por debajo, se apilan las dos cosas.
Pero para medianos a extra grandes,
viste que los está posicionando horizontalmente lado a lado.
Lo mismo se aplica al código de apellido también.
Será muy similar a cómo se estructura el nombre de pila.
Así que me gustaría que pasaras un poco de tiempo echando un vistazo a este código también.
Para que veas, basado en tu comprensión de esto,
cómo esto también está formateado.
El siguiente tipo de evento formal que vamos a agregar es un elemento de grupo de entrada.
Déjame agregar el código.
Veremos lo que resulta ser el formulario.
Y luego volveremos y examinaremos el código.
Así que aquí, después del segundo div, después del campo de apellido,
voy a incluir el código para el siguiente elemento aquí.
Y luego guardemos los cambios.
Y luego, inmediatamente,
verías un par de cosas más añadidas a tu formulario.
Verá un campo de número de teléfono agregado aquí.
Esto, por su aspecto, ves que esto es muy similar a eso.
Así que no voy a explicar el código para esto.
Esto debería ser muy sencillo para usted entender.
Y entonces este campo de correo electrónico también debería ser muy sencillo
para que usted lo entienda.
Porque esto se ve muy similar al apellido.
Excepto que para esto, el campo de entrada, el tipo se establecerá en correo electrónico.
Para que las capacidades integradas de comprobación de formularios de
su navegador se activen automáticamente.
Así que cuando escribes algo que no parece un correo electrónico,
entonces se quejará apropiadamente.
Así que vamos a examinar esta parte particular del formulario aquí.
Tenga en cuenta que en este caso, estamos agregando entre paréntesis izquierdo y
el paréntesis derecho a este cuadro de entrada particular.
Entonces, ¿cómo agregas cosas a tu caja así?
Echando un vistazo al código aquí en su editor,
verá que todavía tiene la fila de grupo de formularios que ya entiende.
Y abajo aquí, tiene el tipo de entrada de elemento de formulario id telnum,
y así sucesivamente, que también debería ser muy claro para usted.
Así que no creo que necesite explicarte esa parte.
Observe cómo estoy usando las clases de columna de cuadrícula de Bootstrap para cada uno de estos.
Entonces la etiqueta se le da col-md-2.
Y luego el número de teléfono uno se le da
col-xs-7 col-sm-6 y col-md-7 aquí.
De esa manera, el número de teléfono, este elemento está correctamente posicionado.
Pero, en particular, prestemos atención a esta parte.
Así que este de aquí está dentro de este div.
Entonces, dentro de este div, observe la clase que se le ha dado.
La clase dice «Input-group».
Lo que significa esencialmente que lo que esté dentro de este div será tratado como
un grupo de elementos aquí.
Entonces, es por eso que la clase dada es input-group.
Ahora, para agregar algo como esto, usará
una clase llamada como input-group-addon.
Y luego note que estoy usando un div para mantener ese elemento.
Puedo usar cualquier cosa aquí, pero un div es útil aquí.
Así que digo la clase div input-group-addon.
Y luego el tipo div de cierre dentro, donde,
observe que tengo el paréntesis izquierdo.
Entonces esto es lo que le permite agregar un
apéndice adicional a su cuadro de entrada aquí.
Del mismo modo, el siguiente aquí también es un paréntesis derecho de entrada-grupo-addon.
Entonces eso es lo que agrega el otro paréntesis derecho aquí.
Ahora, entre estos dos, por supuesto, tienes el tipo de entrada.
La entrada con el tipo tel y el control de formulario de clase, id, nombre,
marcador de posición, todo en su lugar aquí.
Así que esto no es más que la parte del código de área.
Entonces, si usa este grupo de entrada junto con los complementos de grupo de entrada
como este en cada lado.
Esas cosas se agregarán a su elemento de entrada de esta manera.
Eso le proporciona una buena manera de diseñar Su formulario con algunos añadidos en.
Así, por ejemplo, si tiene un campo que acepta
dinero como entrada, simplemente puede agregar un signo de dólar a la izquierda para
indicar al usuario que ese es un campo que toma valor de moneda en este momento.
Ahora mismo, en este caso, este campo toma un código de área.
Y si ves cómo se escriben los códigos de área en los Estados Unidos y
Canadá, sabes que están encerrados entre paréntesis izquierdo y derecho.
Entonces, eso es lo que me permite especificar algo así en mi forma allí.
Mi siguiente conjunto de elementos que voy a agregar a mi
formulario son una casilla de verificación y una selección.
Entonces, ¿cómo agregamos eso?
Por lo tanto, si está familiarizado con los formularios HTML, entiende cómo funciona la selección y
entiende cómo funcionan las casillas de verificación en los formularios HTML.
Ahora, Bootstrap le da algunas
clases adicionales que le permiten formatear estos elementos adecuadamente.
Por lo tanto, permítanme añadir en la cita.
Vamos a guardar los cambios.
Eche un vistazo a lo que esto resulta en el formulario aquí.
Y luego echa un vistazo al código.
Así que aquí, ves que tengo una casilla de verificación y un mensaje aquí.
Y luego este es un selector que me permite seleccionar entre un conjunto de opciones aquí.
Ahora la forma tal y como existe aquí es lo que verá en
tamaños de pantalla pequeños y extra pequeños.
Echemos un vistazo en un tamaño de pantalla más grande.
La misma forma cuando se presenta en
tamaños de pantalla medianos a extra grandes se verá así.
Así que usted puede ver cómo se posiciona el número de teléfono de contacto aquí,
y el correo electrónico se coloca aquí.
Así que tenga en cuenta que estas etiquetas están
alineadas en una línea en el medio con las cajas aquí.
Eso es lo que logra primero la clase de etiqueta de formulario col.
Ahora, concentrémonos en esto que acabamos de agregar.
Aquí, vemos que tenemos una casilla de verificación añadida en.
Y luego, un campo de texto aquí.
Entonces, ¿podemos contactarle?
Entonces, por ejemplo, esperaría que el usuario lo activara y desactivara.
Entonces, ¿cuál es la razón de una casilla de verificación?
Del mismo modo, podría tener botones de opción.
Bootstrap admite botones de opción que están disponibles en formularios HTML.
Y proporcione algunas clases para peinarlos correctamente.
Y luego este es, por supuesto, el selector que le permite seleccionar entre opciones.
Así que regresando y mirando el código.
Veamos cómo se implementa esto.
Volviendo a echar un vistazo al código, ves que este es de nuevo una
fila div de grupo de formularios aquí que incluye dos cosas aquí.
Uno es un formulario de verificación
col-md-6 offset-md-2.
Entonces esto es lo que encierra una casilla de verificación dentro de este elemento div.
Y luego abajo aquí tengo una clase div, Col-MD-3 offset-md-1.
Así que observe que aquí, esto dice form-check col-md-6 offset-md-2.
La razón por la que estoy haciendo un offset-md-2 es que no tengo una etiqueta.
Así que normalmente estaba usando dos columnas para las etiquetas.
Entonces, dado que esta casilla de verificación debe alinearse con el lado derecho en el formulario.
Entonces, es por eso que utilicé offset-md-2 aquí.
Y luego dentro de aquí dice label class="form-check-label».
Y luego proporciona la etiqueta de entrada
aquí con la casilla de verificación de tipo.
Así es como se crea una casilla de verificación.
Y luego la clase, la clase Bootstrap que va a aplicar a
su casilla de verificación es form-check-input.
Y luego el nombre y el valor inicial están vacíos.
Y luego, esta es la etiqueta real que ves que se
aplica a esa casilla de verificación en particular allí.
Así que observe cómo estos dos están encerrados dentro de una etiqueta aquí.
Así es como se crea una casilla de verificación junto con su etiqueta y
luego se coloca en su formulario aquí.
Entonces esto aquí usa la etiqueta de verificación de formulario.
Y luego aquí, debe tener una casilla de verificación, type de entrada = «casilla de verificación», y
luego etiquetarse.
Así que aquí ves fuerte, ¿podemos contactarte?
Así que es por eso que se muestra en negrita justo al lado de la casilla de verificación aquí.
Ahora a continuación en el código, tiene una clase div col-md-3 offset-md-1.
Así que esto ocupa tres columnas dentro de un desplazamiento de columna.
Así que el total de cuatro columnas aquí.
Así que este es col-md-6 más 2, por lo que son ocho columnas.
Así que 8 más 4, 12.
Así que eso se encarga de sus 12 columnas para su cuadrícula allí.
Ahora dentro de esto, verá una selección aplicada aquí.
Ahora bien, esta es la opción de selección que los formularios de archivos HTML admiten.
Y mira la clase aplicada a esto.
Dice class="form-control» a la selección.
Y luego da las opciones en la selección aquí.
Así que Tel., Correo electrónico y así sucesivamente.
Así es como especifica aquí las opciones para su campo de selección en su formulario.
Entonces, este es el uso de las casillas de selección y verificación en su formulario.
Del mismo modo, si comprueba la documentación de Bootstrap verá el uso de
botones de opción y otros elementos del formulario.
Echando un vistazo a nuestra forma,
ahora vemos que ya tenemos muchas de las cosas que necesitamos en nuestra forma.
Tienes nombre y apellido.
Así que este formulario es algo que construimos para permitir a los usuarios
enviar comentarios al restaurante.
Así que aquí tenemos nombre,
apellidos y número de teléfono de contacto y luego un correo electrónico.
Y luego, por supuesto,
una opción para permitir al usuario ver si puede ser contactado o no.
Entonces eso se implementa usando una casilla de verificación y un selector aquí.
Ahora, lo único que queda es un botón de enviar para nosotros.
Así que vamos a añadir un botón de enviar a este formulario y
luego echar un vistazo final al formulario.
Antes de añadir un botón de envío, tal vez queramos proporcionar un cuadro para
que los usuarios escriban sus comentarios.
Entonces, en este caso, voy a hacer uso de un área de texto para proporcionar eso.
Así que déjame pegar en el código.
Y luego revisaremos el código aquí.
Entonces este código, como ves dice,
div class="form-group row» que ya sabes lo que significa.
Y entonces esta es la etiqueta que ya sabes cómo se construye.
Y abajo, verá una etiqueta de área de texto que se está usando para el formulario.
Entonces dice, clase textarea, con class="form-control»,
que ya has visto antes.
Y luego id, nombre y luego el número de filas para
el área de texto que se especifica aquí.
Por lo tanto, guardemos los cambios y echemos un vistazo al formulario.
Así que echando un vistazo al formulario, verá que junto con esto, justo debajo,
tiene un gran cuadro de texto en el que los comentarios pueden ser escritos por el usuario.
Por lo tanto, su formulario tiene nombre, apellidos, número de teléfono
, correo electrónico y una aprobación para ponerse en contacto con el usuario, luego un cuadro de comentarios.
Lo último sería el botón Enviar.
Por último, vamos a añadir un botón Enviar al formulario.
Entonces, después de un div, en el área de texto,
voy a pegar el código para el botón Enviar aquí.
Entonces, pegando el código para el botón Enviar de nuevo, mirando el código, ves
que esta es una clase div ="form-group row">, que ya conoces de antes.
Y luego esto dice, div class="offset-md-2 col-md-10">.
Entiendes lo que es y
luego, dentro de este div, ves un botón encerrado aquí.
Ahora ya que hemos visto la construcción de un botón usando la etiqueta a,
vamos a prestar atención a cómo construir un botón usando la etiqueta HTML botón.
Entonces, si está utilizando la etiqueta HTML del botón, entonces dice botón y
luego el tipo es enviar.
Esto va a actuar como un botón Enviar para mi formulario, así
que es por eso que dije que el tipo es enviar.
Usted establece el tipo de botón, actuará como un botón normal aquí.
Y luego a esto digo, botón de clase, botón primario.
Así que este es un botón de color azul y luego el botón
contiene este texto dentro del botón para enviar el texto de comentarios dentro del botón.
Así que vamos a guardar los cambios.
Así que esta sería la última modificación de mi formulario aquí.
Así que vamos a guardar los cambios y luego vamos a echar un vistazo al botón.
Volviendo al navegador, ahora verá que en su formulario justo debajo,
tiene el botón Enviar comentarios.
Por lo tanto, cuando el usuario rellene el formulario,
hará clic en el botón Enviar comentarios para enviar los comentarios a la empresa.
Así que esto completa el diseño de un formulario.
Así que esta es una de esas formas que puedes incluir.
Hay muchas más clases disponibles en Bootstrap para
admitir formularios.
Le instaría encarecidamente a consultar la documentación del formulario para ver
los otros tipos de clases que están disponibles para construir por defecto.
Así que si tiene conceptualmente en su mente una forma que desea construir,
entonces simplemente busca todos los diferentes elementos posibles que desea incluir
en el formulario, y luego diseña el formulario en consecuencia.
Lo más importante que ha notado al construir el formulario usando Bootstrap, son
todas las clases de Bootstrap que están disponibles.
El control de formulario, el grupo de formularios, cómo se utilizan las clases de fila y columna.
Y todas estas clases diferentes que son compatibles con
Bootstrap para diseñar formularios, la película Bootstrap.
Último conjunto, haz el commit git, por lo tanto, apareceremos la página git.
Voy a comentar los cambios que he hecho en el about,
contactus e index.
Y luego diga botones y
formularios de Bootstrap, y luego eso se habría
comprometido a mi repositorio git.
Con esto, completamos este ejercicio.
Aquí hemos aprendido cómo incluimos botones y
elementos de formulario en nuestro diseño Bootstrap.
[ MÚSICA]