Bienvenido de nuevo a esta lección. Te mostraré cómo instalar bootstrap en tus propias aplicaciones.
Y una vez que hayas hecho eso, te mostraré algunos de los conceptos básicos importantes del uso del tono.
Así que estoy en el punto com de arranque en la página de inicio y aquí hay un enlace de descarga de arranque.
Y no es realmente un enlace de descarga directa porque tenemos dos opciones principales sobre cómo usar el arranque.
Podemos descargar los archivos y lo haré para comenzar.
Luego podemos tomar esos archivos y agregarlos a nuestra aplicación antes de ir más allá.
Tengo un simple equipo de búsqueda que presentaré que llamo cosas básicas h DML m l.
Y solo agregaré un título y agregaremos solo algunos elementos diferentes de bootstrap.
Una vez que lo tengamos instalado, no haremos nada exhaustivo, solo lo usaremos como zona de
juegos para algunos de los componentes básicos de arranque.
De acuerdo, comencemos agregando solo un básico de arranque H-1 y
guarde.
Y luego, vamos a abrir esto en el navegador.
Solo mantenlo ahí por ahora.
Ahora para instalar bootstrap.
Lo descargué
Entonces, si abro ese archivo, podría ver dentro de aquí que hay algunos componentes diferentes.
Hay un directorio C S S y dentro del directorio CCS hay bastantes archivos, pero
en realidad solo hay un archivo importante que se arranca CSSA.
Y este es en realidad el mismo archivo aquí minutos arrancados.
SS, excepto que se ha reducido la lucha por minutos para ocupar menos espacio.
Entonces estos dos son los archivos importantes para usar realmente bootstrap.
Y este es un tema de arranque, los tres se usan para ayudar a agregar un tema personalizado al arranque,
así que eso no importa tanto.
Todo lo que necesitamos es arranque de Dotsie evaluar.
Y comenzamos simplemente abriéndolo para que pueda ver con qué estamos trabajando.
Este es el archivo principal de reevaluación de bootstraps.
Son solo muchas clases.
Si miras cada línea de CSSA, casi es un punto de declaración de clase simplemente.
Y luego, lo que podemos hacer es usar esas clases en lugar de nuestras aplicaciones.
Entonces, si queremos tener un botón con texto blanco y fondo rojo, vamos a aplicar el peligro del botón
de punto.
Y eso es lo que está haciendo aquí.
Pero el peligro tiene un texto blanco, un fondo rojo y un borde rojizo.
Entonces continuemos e incluyamos esto en nuestra aplicación como cualquier otro archivo CSSA.
Así que lo que haré es arrastrarlo hasta aquí en el mismo directorio donde tengo mi equipo de estudio básico
y también podría hacer reevaluar minutos de bootstrap en lugar de este.
Realmente no importa.
Técnicamente, este se carga un poco más rápido porque si lo abro puedes ver que es como una sola línea gigante, todos los
espacios en blanco han sido eliminados.
Por lo tanto, es más fácil de cargar, pero voy a utilizar esta versión más larga solo para que pueda
ver exactamente con qué estamos trabajando.
Ahora vamos a entrar en nuestro archivo actual. Cerraré esto y vamos a incluir el
CSX arrancado.
Así que al igual que cualquier otra hoja de estilo, necesitamos una etiqueta vinculada y el Tref es bootstrap dot C Ss
y si guardamos y estamos renovando nuestra página aquí, notará una pequeña diferencia.
Mira la fuente en este H-1.
Cambia.
Ahora tenemos bootstrap instalado o al menos los C S que van junto con bootstrap y eso es todo lo que
necesitamos por ahora.
No vamos a trabajar con el Javascript por el momento, no hay otra opción
para instalar el bootstrap que realmente te brinden en el sitio web Get bootstrap aquí mismo.
Bootstrap CDN podemos tomar este enlace aquí y agregar eso a nuestro código.
Y es un enlace a una versión alojada de esos mismos archivos.
Entonces, si abrimos eso en el navegador y lo pegamos, puede ver que tiene el
contenido del archivo minimizado y está alojado en este sitio, así que podemos tener un enlace al que pueda reemplazar.
Otro enlace
Marque y pegue que usted es Ellen y lo comentaré.
Por ahora, vuelve atrás y actualiza.
Y nada cambia.
La única diferencia es que, en el primer caso, el archivo se descargó en nuestra computadora a
la que se estaba vinculando y en el segundo caso estamos vinculados a un archivo externo alojado en línea.
Ahora vayamos a los documentos de arranque y comience a jugar a algunos de estos componentes.
y hagamos clic en C Ss y solo voy a señalar algunas de las piezas más importantes que vamos a utilizar.
Así que vuelve para obtener bootstrap
Empecemos de manera simple con botones.
Si queremos usar un botón, todo lo que tenemos que hacer es usar una clase batida seguida de un tipo de botón que
está entre los valores predeterminados, lo que nos dará un botón blanco pero también es información de acceso BATNA primaria de
VTAM.
Peligro de advertencia y enlace y todos tienen un estilo ligeramente diferente.
Y, por supuesto, podemos cambiar estos colores por nuestra cuenta, pero solo vamos a utilizar
el incorporado una vez para comenzar, y él también puede ver aquí.
No solo debemos usar un elemento de botón, podemos usar una etiqueta de anclaje, un botón o una entrada.
Entonces probemos eso.
Hola este H-1.
Solo agreguemos una etiqueta de botón y las etiquetas de este botón solo digan "haga clic en mí" y simplemente actualicen la página
ahora mismo y echen un vistazo a eso.
Es un botón bastante feo.
Pero si vamos y agregamos esa clase de PTEN y luego vamos a tener éxito y ahorrar, ahora obtenemos este
increíble botón verde.
Así que es bastante fácil conseguir algunos estilos básicos.
Y regresemos y le mostraré algunas otras cosas sobre botones de diferentes tamaños que también
podemos usar y es realmente fácil.
Solo tenemos que agregar un botón grande y pequeño o un botón extra pequeño para que se pruebe después del éxito del botón y
no tenga que ir tras él.
No importa el orden de las clases, pero lo haré después de aquí DTN y vamos a hacer algo más pequeño y
refrescar tu página.
Aquí vamos.
Voy a mover esto ahora y agreguemos algunos botones más, pero este será una etiqueta de anclaje
y estará en una etiqueta o tenemos H. F. es igual a la barra diagonal de
DP que cada día lee bootstrap dot com y luego el texto solo dice bootstrap docs.
Así que haz esto un poco más grande y luego se agregará en la clase en la clase para
que sea igual a PTEN y hagamos entre la información de Desch y lo haremos grande PTEN dash Elgie y refresh.
Ahora tenemos dos botones.
Uno es un elemento de botón real.
Otro tiene una etiqueta de anclaje y si hago clic en esto, puede verlo como una etiqueta de anclaje.
Entonces, ya en el primer minuto de usar el programa de arranque, hemos podido obtener botones de aspecto decente.
Habría tomado de 10 a 15 líneas de CSSA por nuestra cuenta para replicar.
Regresemos ahora.
Vuelva a hacer esta pantalla completa y le mostraré algunas otras cosas sobre los botones.
Entonces tenemos tamaños.
También tenemos diferentes estados en los que podemos hacer que un botón aparezca como si estuviera activo
y para hacerlo simplemente agregamos la clase activa.
aparece lo suficientemente bien en el molde de la pantalla que este aparece activo.
Entonces, si lo intentamos ahora, agreguemos un botón "A few", así que voy a duplicar nuestro pequeño botón "Click" en miniatura tres veces y en el
último en el medio de la clase activo y refrescar y se puede ver con suerte que
Volvamos y también podemos deshabilitar un botón agregando este atributo.
Deshabilitado es igual a deshabilitado.
Regresemos y deshabilitemos la última actualización.
Y ahora este botón está deshabilitado.
Recibimos ese simpático pequeño icono.
No tiene un efecto de desplazamiento donde cambia de color.
Es claramente un botón desactivado.
Lo último que te mostraré para que podamos cambiar los colores otra vez, así que el botón peligro nocturno nos
da esa naranja rojiza y puedes ver todos los colores aquí.
Y, por supuesto, podría cambiarlos sobrescribiendo los estilos para que pueda hacer algo como esto en lugar de
crear otra hoja de estilos.
Lo haré aquí por ahora.
Así que solo haremos una línea y también nos gusta la belleza y el peligro.
es como se puede entrar y anular los estilos para que no tenga que usa lo que bootstrap te da de la caja.
Podemos cambiar el color para que sea naranja y ahora podría poner en peligro la naranja de Texas y
si quería cambiar realmente el fondo, podría hacer que el fondo sea naranja y así
Y la mayoría de los lugares no.
OK, así que son los botones y eso es todo lo que voy a hacer en este video.
Solo quería darte una idea muy rápida de cómo funciona el bootstrap.
Este patrón de agregar clases a elementos existentes y esas clases se define en ese archivo de arranque CSSA
en el siguiente video. Voy a resaltar algunas de las otras piezas importantes que
vienen con bootstrap incluyendo formularios e insumos.