Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Así hola a todos los que están viendo aquí,
o ver en línea, o de forma remota.
Mi nombre es Neel, esto es CS50.
Y el seminario de hoy es Responsive Diseño web con Bootstrap.
Es un tema que es muy cerca de mi corazón.
Con suerte, será cerca de su corazón
así para el final del seminario de hoy.
Así Bootstrap.
¿Cuántos de ustedes han hecho ninguna tipo de desarrollo web antes?
Una buena cantidad?
Un poco.
>> Así Bootstrap es el mundo de la mayoría , marco frontal popular.
Se utiliza por-- He elegido un par de websites-- azar
Lyft, Newsweek y Vogue.
Se utiliza por un número de sitios web.
Es un marco de diseño web que le permitirá hacer sus sitios web
a la vez hermoso y sensible.
Y voy a ir más éstos dos conceptos aquí.
Hermosa.
Así que tienes página web normal en el izquierda, que está hecho con sólo HTML.
Has aprendido HTML en clase y en la sección largamente.
Manos a la Obra es una manera de hacer sus sitios web hermoso.
Usted puede tomar lo que está en el lado izquierdo de la pantalla
y convertirlo en lo que es en la lado derecho de su pantalla con muy,
, muy poco código muy.
>> Usted consigue el botón azul agradable, se obtiene la fantasía, bordes redondeados en la pantalla,
se obtiene la vista de lista, se obtiene la tarjetas, y así sucesivamente con muy poco código.
En realidad hay ningún CSS que usted tiene que escribir por sí mismo.
Así Bootstrap le permite tener estos CSS pre-construido
componentes que usted puede poner dentro de su página web
para que se vea bonito sin mucho trabajo por su cuenta.
Es realmente un arranque, un punto de partida,
para sus aventuras de desarrollo web.
Y así, cuando estás a burlándose de un sitio web,
es un muy buen lugar para empezar.
Usted puede conseguir un buen sitio web de aspecto con muy poco trabajo muy,.
Y, de hecho, vamos para hacer esto a nosotros mismos
en el curso de cinco años como minutos-- en 10 minutos.
Así que es bastante fácil de hacer algunos grandes sitios web.
Así que esa es la primera parte.
>> El segundo parcialmente: sensible.
La gente, hoy en día, no solo acceder a la web en sus computadoras portátiles.
En realidad, a partir de 2014, a más gente acceder a la web a través de dispositivos móviles,
como los teléfonos o tabletas, o servicios, o así sucesivamente que los sitios web.
Y sitios web han sido tradicionalmente diseñado con ordenadores portátiles o de sobremesa
en mente.
Y por lo que los sitios web no son a menudo muy bien adaptado a su teléfono.
Si alguna vez visitado harvard.edu en su teléfono,
es una especie de un molesto experiencia, ¿verdad?
Esto se debe a que no es sensible.
Estamos tratando de hacer sitios web que respondan,
que responden a tamaños de pantalla de la gente.
>> Así que si es un teléfono, es va a ir en el teléfono.
Si se trata de una tableta, es va a ir en la tableta.
Se ajusta para que coincida con el pantalla que se está utilizando.
Y así Bootstrap también proporciona algunos utilidades muy, muy útiles para que.
Y vamos a hablar de eso también.
Así que de nuevo, hay dos partes Bootstrap-- hermosa y responsable.
Vamos a hablar de ellos.
En primer lugar, hermoso.
Y luego de respuesta.
>> Así que todo el código que estamos vamos a hablar de hoy--
vamos a tener un montón de ejemplos, una gran cantidad de desafíos, y así se en--
todas las vidas en este sitio web aquí.
Esta diapositiva es lo que enviamos.
Así que si estás aquí, se puede sentir la libertad de no tener que escribir eso.
Y si estás viendo a distancia, sentir libre para sacar esto en el equipo
así como.
Es probable que lo necesite durante el curso de este seminario.
>> Así que vamos a utilizar un sitio web llamado CodePen,
que es una codificación de colaboración medio ambiente, durante este seminario.
Y CodePen-- y voy a mostrar aquí verdadera fast--
que le permite escribir HTML en colaboración.
Puedo escribir, puedo enviarlo a ustedes, que ustedes pueden editarlo.
Incluso si usted es remoto, aún puede acceder a él de esa manera.
Puede escribir código HTML en la superior y va automáticamente
ser convertido en el página web en la parte inferior.
Así que es una manera para que usted para tratar rápidamente código
sin tener que hacer ningún tipo de cosas en su IDE, o en su propio sitio web,
o lo que sea.
>> Así que adelante y tire hacia arriba de esta página web, si usted es remota
o si usted está aquí, especialmente si usted es remoto.
is.gd/cs50boostrap.
No hay tapas, ni guiones, ni nada de nada.
Así que aquellos de ustedes que son aquí, sólo me dan un aprobado
cuando se han retirado hasta esa página web.
¿Bien?
>> AUDIENCIA: Sí.
>> NEEL MEHTA: Así que vamos a llegar para que en tan sólo un segundo.
Así que primero, vamos a llegar, cómo Cómo se hace sus sitios web hermoso?
Vamos a aprender cómo tomar aburrido, edad HTML, como he mostrado antes,
y convertir eso en componentes realmente agradables,
como buenos widgets, agradable, de color botones, y etiquetas y tablas,
y todo, usando Bootstrap.
Así que si todos pudiéramos ir a la CodePen que sólo se detuvo.
Debe tener un aspecto un poco como esto.
¿Se ve como esto para todo el mundo?
>> AUDIENCIA: Sí.
>> NEEL MEHTA: Si usted es remota, debería tener este aspecto también.
Si no, yo te mostraré cómo pronto usted puede conseguir que se vea como este
en una parte futuro del video.
Así que aquí hemos escrito un HTML muy básico,
como el tipo que tienes estado utilizando en clase.
Es bastante básico.
Sin lujos.
Y tenemos algunas cosas.
Hemos diseñado un muy, muy básico en marcha
llamar Yalp! con la que se puede encontrar restaurantes en la zona,
y encontrar opiniones y instrucciones de todos aquellos.
Es un muy buen concepto.
Nunca se ha hecho antes.
Es un nombre muy singular, también.
>> Así que lo que vamos a tratar que hacer es ayudar al dueño
de Yalp! hacer que su página web mirar realmente, realmente genial.
Así que, para empezar, el dueño de Yalp! ha hecho un poco de búsqueda
caja, y un pequeño botón, y luego tal vez un poco
área resaltada para un restaurante resaltado, y luego
una lista de otros restaurantes que se encuentran en la zona.
Así que sólo podemos ir a través de el código HTML muy rápido.
¿Qué tan cómodo son ustedes con HTML?
Hemos hecho un poco sección y también en la clase.
¿Bueno?
>> Así que al igual que un resumen, HTML se trata de tener
etiquetas o elementos que cuentan la equipo cómo diseñar la página web.
Así que este h1 aquí-- iniciar h1, Bienvenido a Yalp !, final h1-- dice a la computadora,
dibujar una gran cabecera que dice, Bienvenido a Yalp!
en el interior hay.
También tenemos formas.
Podemos entradas como esta, entradas de texto, que rinda como cuadros de texto
se escribe en.
Usted también tiene botones.
Usted recibe un botón agradable, puede hacer clic.
No hace nada bien ahora, pero te dan un botón.
Usted puede tener divs, o divisores, a romper su página en varios grupos.
>> Usted puede tener párrafos, Tiene botones.
Si usted tiene párrafos, entonces usted tiene listas desordenadas, ul,
y las listas dentro de eso, li.
Así que estos son lo más básico bloques de construcción de una página web.
Y, de hecho, más o menos todos los sitios web que se ve
va a ser construido el uso de estas mismas herramientas.
Por supuesto, no todos mirar este mal porque somos
va a condimentar para arriba un poco.
Así que vamos a este aburrido HTML de edad y de inicio transformándolo en el sitio hermoso
que acabamos de ver hace un par de minutos.
>> Así que vamos a empezar muy simple.
Así que tenemos este botón aquí.
En Manos a la Obra, como hemos visto, podemos tener un botón bonito, hermoso, azul.
Y eso no se hace haciendo CSS personalizado.
No hay CSS costumbre aquí.
Eso se hace mediante la adición de clases a sus elementos HTML.
Si has probado clases o hrefs, o anclas, o type = "text" para inputs--
Elementos HTML pueden tener estos atributos.
Pueden tener información extra que usted puede darles.
>> Y así, en este caso, clases son el atributo.
Por lo que iba a escribir, clase botón = algo dentro de cadenas.
Y ese atributo le dirá al computadora, esto no es ningún botón, de edad.
Es un botón que se encuentra en esta clase de botones.
Y así, Manos a la Obra, si le dan un cierto estilo en su elemento,
se dibujará una cierta manera.
Así que escribo "btn-btn primaria.
btn ser una abreviatura de botón.
Se dará cuenta de ahora que mi botón fea volvió
en un botón bonito, hermoso, azul.
Se ve muy bien cuando hacemos clic en él.
>> Y así, lo que pasa es que tenemos la btn clase y la clase btn-primaria
en nuestro elemento.
Y Bootstrap entrará y decir: OK, yo saben que existen estas dos clases.
Cualquier elemento que tiene estos dos clases deben elaborarse como este.
Así que esa es la esencia de la forma de conectar estilos a elementos de Manos a la Obra.
Usted acaba de adjuntar clases a ellos y se ponderará a cabo como lo considere oportuno.
Así que aquí está otro ejemplo.
En la entrada, podemos añadir a class = "-control de formulario".
Y yo voy a mostrar en breve en el que puede averiguar qué clases
están disponibles de cada tipo de elemento.
Pero la clase que acabamos de añadida tiene bonitas, esquinas redondeadas,
tiene buen acolchado, tiene un agradable, resplandor azul a él.
>> También podemos entrar en este formulario.
Y class = "forma-inline", lo que hará formulario, como se puede imaginar, en línea.
Por lo tanto, está buscando un poco más al igual que lo que teníamos antes ya.
Así que antes de continuar con el estilo del resto de la página, cualquier duda sobre lo que
¿hizo?
Nosotros clases simplemente adjuntos a nuestros diversos elementos.
Y yo te muestro después cómo puede averiguar lo que están disponibles clases.
Nos apegamos clases que tener ciertos estilos.
Y eso le dice al navegador cómo a la disposición de la página utilizando
Estilos proporcionados de Bootstrap.
Cualquier preguntas de la audiencia?
>> ¿Bien hasta ahora?
Guay.
Muchos de los desafíos con Bootstrap es sólo
saber cuáles son los componentes disponibles y cómo usarlos.
Y eso es todo lo aprendido con la experiencia y también
a través de la lectura de la documentación, que hablaremos pronto.
Así que tenemos este div.
Es sólo una cosa aburrida, viejo.
Queremos hacer hincapié en que de alguna manera.
Así que en Bootstrap, hay una gran cantidad de componentes disponibles.
Y esto es getbootstrap.com.
Es una referencia muy útil.
Contiene cosas como-- así es como lo hace un botón.
Y usted puede hacer barras de navegación, puede etiquetas, que pueden progresar bares,
usted puede hacer grupos de listas.
Básicamente, es todo tipo de que podría ver una página web.
>> Aquí está uno que vamos a tratar en este momento.
Se llama panel.
Si alguna vez utiliza Google Ahora, tienen tarjetas.
O cualquier dispositivo Android tiene tarjetas.
Tienen pequeñas cajas blancas que tienen cosas en el interior de la misma.
Así que vamos a tratar de hacer que nosotros mismos aquí usando una cosa
llamado un panel.
Así que si le damos class = "Panel Panel-default "en nuestro div exterior,
a continuación, le damos una clase div = - vamos simplemente marque esta documentación.
div class = "Panel-encabezamiento" y entonces div class = "paneles de cuerpo".
Una vez más, no te preocupes por memorizar el código.
Estará disponible en línea.
>> Así lo hicimos y ahora nuestro aburrido, viejo div convirtió en este agradable, pequeña tarjeta.
Tiene buen acolchado, se tiene fronteras, que se destaca
del resto de la página, lo cual es muy bueno.
Así que vamos a entrar y cambiar esta Obtén Indicaciones de aspecto agradable.
¿Quién en la audiencia quiere contar yo lo que puedo hacer al botón
para que se vea bonito usando Bootstrap?
¿Sí?
>> AUDIENCIA: Podríamos agregar una clase.
Y podríamos hacer class = "btn btn-primaria".
NEEL MEHTA: Sí.
Hay un montón de otras colores disponibles para buttons--
o para cualquier cosa, para el caso.
Podemos hacer btn-peligro y que sea de color rojo.
Allá vamos.
Podemos hacer btn-éxito para que sea verde.
Podemos hacer-btn info-- hay un montón de las cosas que están disponibles para usted.
Así que no tengo mucho reto para usted ahora.
Así que hay una cosa más que he dejado un-labrado.
Este Restaurantes Top.
>> Y queremos usar una cosa llamado un grupo de lista para diseñarlo.
Así que mi reto para usted es pasar a getbootstrap.com--
Voy a tirar para arriba aquí.
getboostrap.com.
Ir a getbootstrap.com, encontrar la sección donde se van por los grupos de la lista.
Y verás aquí una el ejemplo y las clases correctas
que se puede utilizar para hacer su listas en estos simpáticos grupos de listas.
Estos se resuelven ejemplos de ejemplos de código, lo que
código que utiliza, qué código HTML utiliza, y lo que las salidas.
>> Así que mi reto para usted-- ir en getbootstrap.com,
si usted está aquí o en casa, y para tratar de añadir estilos a este ul
para que se vea bonito.
Y el uso de un estilo de grupo de la lista.
Usted desea tomar un par de minutos, y buscar la documentación,
Prueba esto a vosotros mismos?
Porque como usted está haciendo desarrollo web, te darás cuenta de una gran cantidad de su trabajo
que se va a leer esta documentación.
Así que creo que es bueno para familiarizarse con la forma de leer la documentación,
cómo averiguar lo que es en el que, qué código ejemplos que puede utilizar,
lo que usted puede aprovechar.
>> Así que de nuevo, getbootstrap.com, vaya a la ficha Componentes,
y luego desplácese hacia abajo a la lista de grupo.
Y verás ejemplos de código que que puede utilizar para hacer su HTML encaja eso.
Así que toma un par de minutos y probar y explorar usted mismo,
si usted está aquí o en casa.
Si estás en casa, hacer una pausa en el video, tal vez, y lo pruebe.
Si estás aquí, si usted va a nuestra website-- si actualiza la página,
verás esto en allí.
Este mismo código es simplemente añadiendo nuevos estilos ahí.
Así que toma un par de minutos.
Avísame cuando usted se siente bien respecto o cuando estás totalmente perdido.
¿Suena bien?
Guay.
Rápida reservado para aquellos de ustedes en el hogar, mientras esperamos,
si vas al sitio GitHub que puse arriba hace un par de toboganes,
hacia el principio del vídeo, Tengo un repo GitHub, repositorio,
de esta charla.
Todos estos ejemplos de código que vamos a ser hablando se almacenan aquí.
Así que si vas a desafiar-1.html, este es todo el código que tenemos en este momento
en nuestro CodePen.
Así que usted puede ir por delante, y copiar esto, y pegarlo en tu propio CodePen.
Y de esa manera, usted puede mantenerse al día con lo que estamos haciendo aquí.
También lo han hecho esta página abierta, así como que navegar por el resto del seminario.
Una vez más, usted quiere que se vea como lo que ver abajo en la parte inferior de la pantalla
allí.
¿Sentirse bien?
Sólido.
Habrá que esperar a que los demás terminar con lo que están haciendo.
>> ¿Sí?
>> AUDIENCIA: Supongamos que yo quería utilizar Bootstrap en casa-
NEEL MEHTA: Sí.
AUDIENCIA: Veo, en el sitio web, la página Introducción.
Ellos me dan las opciones Manos a la Obra, Código Fuente, o Sass.
¿Cuál de estos que quiero?
>> NEEL MEHTA: Sí.
Entonces la pregunta es, ¿cómo se consigue comenzado a usar Bootstrap por nosotros mismos?
Simplemente sucede que mágicamente trabajar aquí.
Así que si tenemos tiempo en Al final del seminario,
Te voy a mostrar cómo se puede conseguir en su propia página web.
Al igual que aquí, he hecho poner en algunos ajustes que
tendrá automáticamente cargado, pero voy a
mostrar que lo hagas desde rayar en sus propias páginas web.
>> AUDIENCIA: Gracias.
>> NEEL MEHTA: Sí.
Buena pregunta.
¿Sentirse bien?
¿Sentirse bien?
Guay.
Entonces, ¿quién me quiere cómo hicieron decirle esto se vea bonito y Boostrappy?
¿Cuál es la primera clase le añadimos a la ul?
AUDIENCIA: class = "Lista de grupos".
NEEL MEHTA: Sí. lista de grupos.
Y entonces ¿qué es lo que atribuimos a la lis?
¿Alguien más?
AUDIENCIA: Y entonces, después de que, class = "list-grupo-punto".
>> NEEL MEHTA: Sí.
>> AUDIENCIA: Y es la mismo para la siguiente.
>> NEEL MEHTA: li class = "Lista de grupos-punto".
Hay que ir.
Tenemos nuestro grupo agradable lista, al igual que lo que esperábamos.
Y esto es todo.
En 10 minutos, hemos hecho esta aburrido, viejo Yalp! página
aspecto agradable y profesional.
Y eso es sólo el comienzo.
Así que ahora que se siente bien por eso, vamos a
sólo seguir adelante y hablar un par de componentes que
puede ser útil como usted ir a lo largo de su aventura.
>> Por supuesto, hay muchas de las de aquí.
Y ahora que has aprendido cómo hacer grupos de la lista,
se puede casi enseñar a ti mismo cómo hacer cualquiera de estos.
Pero, por supuesto, vamos a tratar y hacer un par más a nosotros mismos,
sólo por lo que tener una idea de cómo puede utilizarlos.
Yo sólo voy a ir a este ejemplo aquí.
Una vez más, el código que acabo de pegar aquí está disponible aquí.
Así que no dude en tirar de ella hacia arriba.
>> Así que ya hemos pasado por un par de estos ejemplos.
Así que tenemos botones, que nos ya han visto cómo hacerlo.
Podemos hacer botones más grandes.
Por botón class-- va, btn btn-lg y btn-default hace que sea blanco.
Así que esto hace que nuestro botón grande de lo que podría ser.
Podría ser útil, si usted tiene botón o algo grande enviar.
Vimos el ejemplo de grupo de lista, vimos el ejemplo de formulario.
>> Uno muy importante es iconos.
Y iconos son una forma para que usted agregue cosas interesantes, como la comprobación de verificación
marcas o signos positivos, o amigo iconos, o iconos de reinicio,
o lo que sea de su aplicación web.
Así que de nuevo, si tenemos en aquí, los componentes, glyphicons,
son los iconos disponibles para Manos a la Obra.
Hay una exhaustiva lista de todos los de aquí.
Tan sólo como un ejemplo, vamos a tratar de agregar una.
>> Así como Facebook, estamos tratando de tener un botón Añadir Amigo.
Primero vamos a añadir un poco de estilo.
clase botón = "btn btn-éxito".
Y ahí vamos.
Vamos a añadir un icono aquí.
Lo icono, piensa usted, podría tener sentido para poner aquí?
Usted probablemente ha visto en algunas páginas web o lo que sea,
pero lo que es un ejemplo de un icono que podría ir bien en el interior de este botón?
Siéntase libre de navegar por este punto de vista, si usted necesita alguna inspiración.
Hay una gran cantidad de útiles que están disponibles aquí.
¿Sí?
>> AUDIENCIA: Tal vez el usuario glyphicon?
NEEL MEHTA: OK.
Éste.
Eso es bastante bueno.
Sí.
En Facebook, creo que se vería un poco así.
Así que aquí está cómo vamos a añadir iconos a nuestras páginas.
Sólo tenemos un span-- un lapso de un contenedor neutral para algo.
Un div es un contenedor para algo, un lapso es otro recipiente.
divs tienen saltos de línea alrededor de ellos, vanos no.
Así que hay diferentes formas de teniendo contenedores genéricos.
Al igual que no tiene sentido para ponerlo dentro de un párrafo o nada.
Tenemos que decirlo dentro de algo, sin embargo,
así que sólo hay que poner en el interior de un palmo.
Así span class = glyphicon glyphicon-usuario "cerca palmo.
Y ahora tenemos la icono dentro del botón.
>> Así que no se ve del todo a diferencia de lo que se podría ver en facebook.com.
Y lo que es bueno que estos pueden de hecho colocar en cualquier lugar que desee.
En sus bares de cabecera, en los grupos de la lista.
Lo que sea.
No tiene que ser en el interior de un botón.
Así como un ejemplo, puedo poner la misma clase aquí.
"glyphicon glyphicon-usuario".
Y parece lo mismo.
Así que estos icons-- puede utilizar el lapso class = "glyphicon glyphicon-lo que sea".
Y eso va a permitir añadir iconos donde quieras.
Y iconos son una muy importante parte de hacer una mirada sitio web
profesional y bien hecho.
Así que no se exagere, pero es a menudo una buena cosa a saber.
>> Los paneles, de nuevo.
Voy a hacer esto otra vez como una recapitulación porque están tipo de involucrados.
Se dará cuenta de que, en convertir su HTML normales
sitio en un afied-Bootstrap sitio, usted tendrá
añadir estructura adicional para el sitio web.
Por ejemplo, tenemos adicional divs aquí sólo porque los
son necesarios para hacer un panel.
Así que tenlo en cuenta que usted tendrá que tener una estructura adicional.
Así que "panel predeterminada del panel".
Tal vez sea panel encabezado.
Creo que es el panel-encabezamiento.
Sí.
Allá vamos.
Así que, de nuevo, no es nuestro panel.
>> Una cosa más que no cubría aún, tablas.
Tablas, por defecto mirada un poco feo.
Me gusta esto.
Pero tablas son, por supuesto, una parte muy importante
de lo que va a hacer en el desarrollo web.
En Pset7, por ejemplo, CS50 Finanzas, que saldrá pronto,
vamos a usar un montón de mesas.
Y un montón de dev web utilizan una gran cantidad de las tablas para mostrar información,
como las acciones o resultados, o lo que sea.
>> Así labrar tablas es realmente muy fácil.
Se agrega la clase tabla a su mesa.
Y, me atrevo a decir, se ve bastante bien.
Usted puede hacer cosas de más, como "mesa de rayas tabla".
Y verás los resultados aquí.
Usted puede hacer la tabla de borde.
Hay un montón de opciones que usted puede.
Pero básicamente, la adición de un mesa, la clase tabla,
hará que sus cuadros se ven bastante bien.
Así que eso es un breve resumen de algunos de los estilos más importantes
y los componentes que usted necesitará usar para Manos a la Obra.
Así que creo que los abrigos nuestra hermosa parte.
Cualquier pregunta ahora acerca de cómo para hacer que sus sitios web hermoso?
¿Cómo puedes usar estos componentes a su favor?
¿Sentirse bien?
¿Sí?
AUDIENCIA: Tal vez esto es una pregunta tonta,
pero se puede utilizar Bootstrap en la Wikipedia?
Si está editando una página de Wikipedia?
NEEL MEHTA: Sí.
Así que la pregunta era, estoy la edición de una página de Wikipedia,
puedo incluir estilos Bootstrap ahí?
>> AUDIENCIA: Sí.
>> NEEL MEHTA: Y así es Bootstrap básicamente una hoja de estilos CSS grande.
Una hoja de estilo CSS sólo dice, siempre Tengo esta clase, atribuyo estos estilos.
Así que la hoja de estilos CSS para Bootstrap va a ser algo así como .btn,
la clase botón, obtendrá como un frontera de la esquina redondeada o lo que sea.
Así que, básicamente, Bootstrap sólo una montón de clases y un montón de estilos
especificado para esas clases.
Así que, mientras usted tiene que CSS, esta lista de reglas en su página,
obtendrá el estilo Bootstrap.
Esto es, por supuesto, depende de tener los estilos Bootstrap en su página
para comenzar.
>> Y así, en Wikipedia, es probable que no podía
hacer eso porque Wikipedia no tiene Bootstrap en ella.
Pero si tenía Bootstrap, que probablemente podría hacer eso.
Y si quisieras, podrías incluirlo, pero que podría
romper el formato actual de la página.
Pero muy buena pregunta.
Puede utilizar Bootstrap dondequiera que se incluye,
pero no está construido en forma predeterminada.
>> AUDIENCIA: Gracias.
>> NEEL MEHTA: Sí.
¿Alguna otra pregunta?
Sí.
Así que si usted está aquí o en casa, sólo recuerda getboostrap.com-- de nuevo,
getboostrap.com-- es su amigo.
Cada vez que usted está utilizando Manos a la Obra, esto le dará
instrucciones sobre cómo llegar comenzado, cómo utilizar componentes.
Hay un poco de fresco JavaScript plug-ins que no vamos a ir por aquí,
pero son vale la pena visitar también.
Así que esta es tu amigo.
Es sólo importante obtener utilizado para el uso de este.
>> Así que vamos a charlar un poco sobre hacer sitios web sensibles.
Así como he dicho antes, la gente solía sus computadoras portátiles, utilizan sus teléfonos.
Y como se puede imaginar, esto es un tamaño de pantalla muy diferente que eso.
Y así el mismo sitio web que se ve bien en mi teléfono
no se va a quedar bien, necesariamente, en un ordenador.
Así que lo que tienes que hacer es hacer que su página web se adaptan.
Tiene que adaptarse a los distintos el tamaño de pantalla que el que está.
>> Se tiene que decir, sé que estoy en un ordenador, un portátil grande, yo debería expandirse.
Sé que estoy en un teléfono, que debería reducirse.
Y así Bootstrap proporciona alguna herramientas muy, muy útiles para hacer esto.
Así Bootstrap te permite descanso un sitio web en 12 columnas.
Usted puede hacer filas y tienen 12 columnas.
Y usted puede particionar aquellos que le apetezca.
Usted puede tener uno, gran cosa, que es de 12 columnas de ancho.
Usted puede tener dos cosas que son seis cada uno.
Usted puede hacer una cosa que es cuatro, uno que es dos, o uno que es de seis.
Usted puede hacer tres, tres, tres, tres.
Usted puede hacer lo desglose que desea.
>> Así que tal vez tu página web debe tener un columna izquierda que es un tercio de la anchura.
Así que habría cuatro columnas de ancho y el resto de la página
sería ocho columnas de ancho.
Así que este es un ejemplo.
Vamos a tirar otro ejemplo.
>> AUDIENCIA: ¿Siempre tiene que ser un incluso divididos?
¿Podría ser un niño de siete, cinco de división?
>> NEEL MEHTA: Sí.
Podría ser siete, cinco.
Sí.
Siempre que se suma a 12, está bien.
Así que vamos a volver aquí.
Una vez más, el código que es aquí también está disponible aquí,
en el ejemplo de respuesta.
Así que me puse un poco ejemplo de código de respuesta aquí.
Así que usted hace esto mediante el uso de una cosa llamada fila.
Fila es sólo otra clase.
Es otro estilo de agregar en su divs para que sean sus propios componentes.
>> Así que usted dice, div class = "fila" para hacer una fila,
para que tenga 12 columnas de espacio.
Y luego pones columnas dentro de eso.
Así que aquí estamos COL-xs-6.
No se preocupe por las x.
Hablaremos en un segundo.
Pero, básicamente, tenemos una cosa que es de seis de ancho.
Lo llamamos la izquierda.
Y así, ese es el cuadro de la izquierda aquí.
Tenemos una cosa que es seis de las 12 columnas de ancho.
Y que uno está a la derecha.
>> así simplemente da las marcas su div llenarlo gris.
Así que eso es sólo lo que puede ver que son distintos.
Y por lo que este el primer ejemplo.
Es un ejemplo muy simple de cómo se utilizaría sus filas y columnas aquí.
Se define una fila usando class = "fila".
Y entonces lo haces class = "col-XS-6" hacen medio, "col-xs-6" para hacer la otra mitad.
He aquí un ejemplo más complicado.
Echemos un vistazo a la minúscula, Enorme, El resto una.
>> Podemos hacer Diminuto dos columnas de ancho, podemos hacer enormes seis columnas de ancho,
y el resto cuatro columnas de ancho.
Eso se suma a 12.
Y por lo que estos terminan abarcando la anchura de la página.
Una vez más, tenemos una fila afuera.
Entonces tenemos div class = "col-xs-2" y luego 6 y, a continuación 4.
Y eso va a dar la estructura para nosotros.
Y así podemos poner lo diablos queremos aquí dentro.
En lugar de Tiny, podemos poner un botón.
clase botón = "btn btn-primaria".
Y así cuenta de que nuestro botón no ocupa todo el ancho,
pero al menos está restringido a que mucho espacio.
>> Así que eso es todo bien y bueno.
Así que ahora podemos romper nuestra web página en trozos, lo ancho.
Podemos decir que queremos tener a la izquierda columna, y una columna derecha, y así sucesivamente.
Pero no hemos ido más cómo usted lo hace sensible.
Y así Bootstrap vamos a hacer eso también.
Tiene esas cosas llamadas puntos de interrupción.
Por lo tanto, tiene una manera de saber si estás en un ordenador portátil, usted está en una tableta,
estás en un horizontal teléfono, o estás en un teléfono vertical.
Se sabe que el tamaño de la pantalla.
Y rompe esta en cuatro categorías-- grande o lg, que es portátiles, por lo general.
md o medio, que es comprimidos.
sm, pequeña.
O xs, extra pequeño.
Y así, cuando se especifica una columna, usted dice,
debe ser de seis columnas de ancho en un dispositivo pequeño extra.
Es por eso que hicimos col-xs-6.
Estamos diciendo que debería ser seis de los 12 columnas de ancho
en un dispositivo pequeño extra.
Y si se trata de algo más grande, sólo tendremos que por defecto utilizando el tamaño pequeño extra.
Si es algo más grande que extra small, será de seis de ancho.
Y así podemos aprovechar éstos para hacer de nuestras columnas
tomar diferentes cantidades de columnas basadas en el tamaño de la pantalla.
Vamos a ir a este cambio de tamaño de respuesta.
Así que tenemos nuestras columnas.
Y dice, "col-lg-6 col-xs-12".
Así que teniendo en cuenta lo que sabes hasta el momento, lo que haces
creo que va a sucedería en una pantalla grande?
Bueno, es una especie de dado paso, pero ¿qué hacer
usted piensa que se verá gustaría en una pantalla grande?
¿Y por qué es eso?
>> AUDIENCIA: ¿Es que en una pantalla grande, es
va a tomar sólo parte del espacio completo?
Al igual que la mitad de ella, supongo?
>> NEEL MEHTA: Sí.
>> AUDIENCIA: Y en menor pantalla, que va
para ocupar toda la pantalla, el 12.
NEEL MEHTA: Sí.
Correcto.
Así como un ejemplo, vamos a basta con ver aquí abajo.
Sí.
Así que en todo lo que es lg o bigger-- así que mi equipo pasa
para ser lg porque es bastante wide-- hará
que al lado del otro, porque es-col lg-6.
Así que porque está en grande, se hace seis columnas de ancho y seis columnas de ancho.
Vamos a ver qué pasa si convertir esto en una más pequeña.
Yo sólo voy a un-pantalla completa esto.
Y yo voy a reducir el tamaño de pantalla.
Voy a reducir el tamaño de la pantalla, por lo que parece que estoy en un dispositivo más pequeño.
Así que voy a encogerse así.
>> Y voilá.
Ahora se apila porque ahora hemos ido
de gran a-- esto es probablemente un tamaño de pantalla pequeña extra.
Y por lo que ahora se dice, está bien, no estamos en general, estamos en tierra pequeña extra.
Así que vamos a utilizar el tamaño extra small.
Y vamos a xs-12, x-12.
Así que va a ser apilados.
Y de la misma cuenta de que hay una cosa llama un punto de ruptura.
Un punto de interrupción es donde usted hizo la transición
desde pequeño adicional a los pequeños, pequeño a grande, y así sucesivamente.
>> Así que sólo cuenta de que como me deslizo este a cabo, con el tiempo, podrás llegar al punto
donde van a saltar a estar al lado del otro.
Hay que ir.
Así que el punto de interrupción justo ahí.
Así que podemos hacerlo aún más complicado.
Ahora podemos decir que estos las cosas deben ser cuatro de ancho.
Es decir, que deberían tomar hasta alrededor de un tercio
del discurso en dispositivos muy grandes.
En un dispositivo de medio, se debe tomar la mitad de la pantalla porque está md-6.
En un dispositivo muy pequeño, debe tomar hasta 12.
Y por lo que este se ve muy natural.
Vamos a probar esto por nosotros mismos.
>> Así que en una pantalla grande, son cuatro de ancho.
Reducir un poco.
Y ahora de seis son anchas.
Así que esto es seis, seis, seis.
Reducir aún más y después serán totalmente apilados.
Así que esto, por ejemplo, tiene sentido si tienes tarjetas, como las tarjetas de noticias,
por ejemplo, donde si está en una gran pantalla,
que está bien si tienes varios de lado a lado porque todos tendrían suficiente espacio.
Pero tienen que tener suficiente espacio.
Así que en una pantalla más pequeña, te gustaría darles
más espacio, proporcionalmente, de la página.
>> Así como un ejemplo del mundo real, vamos a decir que tenemos Twitter.
Y tenemos cuadro de texto, por lo que puedes twittear en el lateral.
Y tenemos una lista de trending los temas del lado derecho.
Así que en una pantalla grande, debemos haga que estar al lado del otro,
para que pueda verlos en un vaso.
Pero en una pantalla más pequeña, debemos hacer 12 y 12,
de manera que los trending topics están por debajo de la zona tweet.
Debido a que el área tweet es el Lo principal y en una pantalla pequeña,
los trending topics no lo hacen importa bastante más.
Y así, los ponemos justo debajo, por lo que que ambos pueden tener suficiente espacio.
Tiene sentido hasta ahora?
>> AUDIENCIA: Sí.
>> NEEL MEHTA: Sólido.
Así que eso es todos los ejemplos que tengo aquí.
Vamos a tratar de hacer un desafío.
Así que de nuevo, se trata de desafío-2.html para aquellos de ustedes siguiendo a lo largo en casa.
Así que mi amigo, Mark Zuckerberg, vino a mí el otro día.
Y él es como, Neel, tengo conseguido bastante bueno en diseño web.
Yo puedo hacer el HTML.
He hecho este pequeño, nueva edición en Facebook.
Tengo una nueva idea de cómo debemos estilo de Facebook.
Y aquí está.
Aquí.
Aquí hay un código de ejemplo.
Así se llama Fancybook.
>> Tenemos algunas actualizaciones de estado.
Tenemos Nemo, Mike Kosowski, Tres actualizaciones de estado ***--.
Y luego tenemos una lista de amigos en línea a la derecha por debajo de ella.
Así que lo que ha hecho su tarea.
Él sabe un poco acerca de Manos a la Obra, que ha hecho la vista de lista,
que ha hecho un poco de HTML.
Así que tiene la página web.
Pero él es como, Neel, no lo hago entender el diseño de respuesta en absoluto.
¿Tienes alguna expertos que me podría ayudar con eso?
Y, afortunadamente, se encuentra ahora expertos en diseño de respuesta.
>> Así que lo que me dijo fue que él quiere Fancybook se vea como esta.
En un dispositivo muy pequeño, como un teléfono, todo
deben ser apilados, como aquí.
Por lo que tiene la línea de tiempo por adelantado, en lo alto, y luego
usted debe tener la barra de chat en la parte inferior.
Pero en una tableta o un medio de dispositivo, debe ser un medio y medio,
como en la línea de tiempo debe ser media y la lista de amigos de chat
debe estar en la otra mitad.
>> Entonces en un ordenador portátil, la línea de tiempo debe tomar hasta tres cuartas partes
y luego la cobertura de chat debe ocupar otro cuarto.
Y así es como, Neel, tengo este código aquí, pero no es sensible.
Tiene que comportarse así.
Así que mi reto para usted se da este código aquí--
si actualiza su CodePens, verás esto.
O si usted acaba de pegar en el código el desafío-2, verá esto.
>> Aquí está el código ejemplo.
Usted verá algunos xxxs.
Quiero cambiar las xxxs, de tal manera que la línea de tiempo y la lista de amigos
sigue estas especificaciones aquí.
No te preocupes por lo que es dentro de la línea de tiempo, por ahora.
Conseguiremos que en el próximo paso.
Pero por ahora, vamos a ver si conseguimos estas cosas para dividir para arriba como esto.
¿Eso tiene sentido?
Así que si estás en casa, pausar el video y tratar
para hacer tu página web buscar sensible como este.
Si estás aquí, tomar como dos, tres minutos.
Siéntase libre para charlar con un vecino, y tratar, y fijar el Sr. Zuckerberg de
problema de diseño de respuesta.
Si tienes alguna pregunta, no dude en hacérmelo saber.
¿Sentirse bien?
¿Hecho?
Agradable.
>> AUDIENCIA: [inaudible].
NEEL MEHTA: ¿Qué?
>> AUDIENCIA: Estoy bien.
>> NEEL MEHTA: Oh, bueno.
Agradable.
AUDIENCIA: Lo que pasa el 12, es el que Manos a la Obra
trata de un espacio en la pantalla dado como 12 unidades de ancho y luego se divide eso?
¿Cómo funciona exactamente la dosificar el trabajo para esto?
>> NEEL MEHTA: Sí.
Así que la pregunta es, ¿cómo hace la dosificación
trabajar para Manos a la Obra, ¿verdad?
>> AUDIENCIA: Sí.
NEEL MEHTA: Así que cada vez usted tiene un div class = "fila",
no importa cuán grande es la pantalla, Bootstrap le dará 12 unidades
del mismo tamaño de asumir que gran tamaño.
Así que en la col 1, siempre es de 8.33% del tamaño de la pantalla,
si eso es esta amplia o eso es esta amplia.
Y así, por supuesto, de una más pequeña pantalla, cada columna es más pequeño.
Usted todavía tiene 12 columnas de ancho, es una más pequeña.
Por lo que toca a usted para asegurarse de que las cosas toman más la columna,
proporcionalmente, para compensar para que la falta de espacio.
Tiene sentido?
>> AUDIENCIA: Sí.
Gracias.
NEEL MEHTA: Buena pregunta.
AUDIENCIA: A gran pantalla, se puede tener
la línea de tiempo ocupan tres cuartas partes?
>> NEEL MEHTA: Sí.
NEEL MEHTA: ¿Cómo se sienten ustedes?
¿Bien?
Guay.
Así que vamos a volver.
Y vamos a tratar de arreglar esta parte del sitio web de Zuckerberg.
Así que las líneas de tiempo es aquí, en la parte superior, y la lista de amigos
es en la parte inferior.
Y así, sólo tenemos que asignar columnas, con dimensionamiento proporcional,
en cada uno de estos.
Así que esta primera *** es para la línea de tiempo.
¿Qué clases hacen que ponemos en esta lista?
¿Qué es lo que ustedes ponen en esta lista?
Así que recuerda, en una pantalla grande, que necesita para ocupar tres cuartas partes de la anchura.
Y así, qué estilo le daría eso?
En una pantalla grande, de tres cuartas partes de la anchura.
¿Qué clase usamos allí?
AUDIENCIA: Entonces estamos sólo va a ser edición de esa primera instancia de la clase.
NEEL MEHTA: Por ahora.
Sí.
>> AUDIENCIA: No estamos editando cada uno, característica individual de la línea de tiempo?
NEEL MEHTA: Ahora no, por lo menos.
Así que todo esto es un bloque.
Estamos cambiando la el diseño de la manzana.
Así que aquí nosotros COL-lg-9 porque es nueve de los 12 de ancho en una pantalla grande.
Y luego en una pantalla de media, cuántas columnas debería obtener?
AUDIENCIA: Se supone ser mitad y mitad.
NEEL MEHTA: Correcto.
Entonces, ¿cuántos es eso?
>> AUDIENCIA: Entonces, seis.
NEEL MEHTA: Seis.
Y entonces extra small debe ser-- si ocupa toda la anchura de la fila,
cuántos deberían ser?
AUDIENCIA: 12.
NEEL MEHTA: 12.
Sí.
Y ahora tenemos que cambiar esta demás,
por lo que ocupa el resto del espacio.
Así col-lg--
AUDIENCIA: Se va a tomad toda la pantalla?
NEEL MEHTA: Ocupa una cuarta parte de la pantalla en un dispositivo grande,
como mostramos aquí.
>> AUDIENCIA: Tres.
>> NEEL MEHTA: Tres.
Y luego col-md-6 para tomar el resto del espacio.
col-xs-12.
Así que ahora tenemos la línea de tiempo ocupando tres cuartas partes
La página a la gran pantalla y luego un cuarto en el lado.
Y luego, si el tamaño de la pantalla hacia abajo, debe cambiar el tamaño en consecuencia.
Así que ha apilado ahora, en una pantalla muy pequeña.
Y si nos tamaño de arriba un poco, deben ser exactamente la mitad y mitad.
Así lo hemos hecho hasta ahora.
Muy genial.
Y así no vamos a hacer lo otra parte del desafío.
Puede hacerlo usted mismo.
Pero, básicamente, tiene que tratar de hacer que estos respondan
tan bien-- crea la línea de tiempo artículos, ellos mismos, sensibles.
Así que ahora que hemos pasado Todo lo que necesitas saber
sobre el lado sensible de Bootstrap.
¿Una pregunta sobre receptivo diseño con Bootstrap
y cómo se puede ir haciendo eso?
¿Sí?
>> AUDIENCIA: ¿Es similar si teníamos un vídeo incrustado
y queríamos controlar el escala en la que el era-- vídeo
el tamaño del vídeo pasando de ordenador portátil para el teléfono.
NEEL MEHTA: Sí.
Más o menos.
Habría que decir que el vídeo tomar todo el espacio que se ha dado,
que es un poco molesto a veces.
Pero la idea central es la misma.
Un video, como cualquier otro objeto en la página, como un botón o lo que sea,
siempre y cuando se utiliza el columnas y las filas,
usted puede darle una cierta cantidad de espacio.
Y así, cada vez que en honor a que se una diferente pregunta porque como YouTube
incrusta tiene un cierto tamaño, se prefiere.
Pero teóricamente menos, que iba a funcionar.
¿Guay?
>> AUDIENCIA: Supongo entonces, de una imagen, hacer realidad
necesita tener diferentes versiones de la misma imagen en diferentes tamaños
para el ordenador portátil frente a iPhone?
Sí La pregunta es, ¿tenemos que tener imágenes que son sensibles también.
Y, de hecho, se puede hacer eso.
Creo que es en el CSS.
Pero Bootstrap permite usted pueda hacer eso también.
Usted puede tener imágenes sensibles.
Usted puede tener sus imágenes cambian de tamaño de acuerdo con el tamaño de la página.
Y hay una cosa muy nueva HTML5, la nueva versión de HTML,
y CSS3, el más nuevo versión de CSS, lo cual
le permitirá solicitar diferentes imágenes basado en el tamaño de pantalla que usted está en.
Por lo general, es lo suficientemente bueno para simplemente tiene su imagen simplemente reducir o crecer a
por grande que tiene que ser.
Pero usted puede, si lo que quieres a, tener uno 32 por 32
muy pequeñas pantallas y 64 por 64 para una pantalla grande,
y luego servir a aquellos selectivamente.
Puedes hacerlo.
Está hecho por algunas personas.
Sigue siendo vanguardia bonita.
Pero la respuesta corta, images-- sensible Bootstrap puede salvar el día allí.
¿Guay?
>> AUDIENCIA: Gracias.
>> NEEL MEHTA: Así que vamos a hablar muy rápido sobre cómo
para conseguir esto en su propia página web.
Digamos que usted desea hacer su propia página web usando Bootstrap.
Y así vamos a simplemente justo caminar a través de ella juntos.
Digamos que usted hace apenas una página normal HTML.
Siéntase libre de seguir a lo largo de cualquiera que sea su editor favorito.
Así que sólo nos queda alguna página HTML.
Podemos hacerlo! DOCTYPE html.
Este es también html, nuestra página.
Nada nuevo.
Hemos hecho esto antes.
Así que aquí tenemos nuestro HTML y podemos poner cosas aquí dentro.
Podemos tener nuestro botón.
Y como dije antes, este no necesariamente va a funcionar.
¿Por qué podría no trabajar?
¿Por qué no podemos conseguir nuestro botón agradable, colorido?
>> AUDIENCIA: Debido a que no vinculamos al proyecto Manos a la Obra o el archivo?
NEEL MEHTA: Sí.
Correcto.
Debido a que es Bootstrap-- sólo un archivo CSS fantasía.
Es una serie de estilos que se unen a sus elementos.
Aquí hemos dijeron que que querer utilizar estos estilos.
Voy a tamaño que hasta un poco.
Le hemos dicho que queremos utilizar estos estilos, pero nunca
dijo que lo que los estilos son.
Y eso es lo que su pregunta de antes era.
Esa es la respuesta a eso.
Tenemos que encontrar una manera de conseguir los estilos e incluirlos en nuestra página de alguna manera.
Y la voluntad de modo Manos a la Obra nos muestran cómo hacerlo.
>> Así que si vas a la parte superior aquí, Introducción.
Hay diferentes maneras para descargarlo.
Esto podría no tener sentido necesariamente.
Bootstrap-- esto le permitirá agarrar el archivo CSS en sí.
Y usted incluyó en su propia página.
Código Fuente es que si quieres hackear en él por sí mismo.
Usted no necesita realmente.
Sass es un lenguaje que compila en CSS.
Piense en ello como un preprocesador.
Al igual que PHP es un preprocesador de HTML, Sass es un preprocesador de CSS.
Así que si quieres hacerlo de esa manera, usted puede hacer eso.
>> La forma más fácil es usar un CDN, o de la red de distribución de contenidos.
Es un sitio web que acaba de sirve una copia de Manos a la Obra
muy rápido para que usted incluir en su propia página.
Así que aquí está un ejemplo.
Te dará este elemento de enlace.
Un elemento de enlace le dice a su navegador, tomar cualquier archivos se almacenan aquí
e incluirlo en nuestra página web.
Y en este caso, es el archivo CSS Bootstrap.
Así que sólo copiaremos esa URL, o ese texto, y vamos a lanzar en el interior
de nuestra cabeza.
>> Y no voy a iniciar la página para esto, pero se puede confiar en que esto funciona.
El enlace le dará el CSS.
Incluya en su página y luego podrás
capaz de utilizar todo el Bootstrap clases que conocemos y amamos.
Si usted desea mantenerlo a nivel local y tenerlo en su propio sistema de archivos
en lugar de tener que ir a Internet para agarrarlo,
como si quieres utilizar el sitio fuera de línea,
puede utilizar la opción Descargar.
Pero en su mayor parte, utilizando el CDN es bastante rápido, porque de esa manera,
se mantendrá actualizada para usted también.
Usted tiene que actualizar manualmente tampoco.
¿Tener sentido?
>> Así que una gran cantidad de herramientas se habrá incorporado esta en forma predeterminada. En su Pset7 y Pset8,
Creo Bootstrap es incluido automáticamente.
Y en CodePen, por ejemplo, ya es
incluido porque me agregado añadir que ajuste.
Así que si alguna vez quieres jugar con ella, sólo puede ir en CodePen,
o ir en su identificación, o lo que sea.
Y usted puede ser capaz de Acceso Bootstrap allí,
pero no siempre ha construido en, por defecto, a la web.
¿Tener sentido?
>> Sí.
al igual que un recap-- tenemos como cinco minutos para el final.
Pero como un resumen, en las nuevas páginas web, usted puede incluir Bootstrap así.
Y una vez que lo tienes incluido, usted puede hacer todas las cosas divertidas aquí.
Usted puede seguir adelante, y sólo puede leer la CSS, puede agregar algunos estilos frescos,
usted puede tener componentes al igual que los botones,
y las mesas, y la lista elementos que hemos mencionado.
Hay algunos plugins fresco de JavaScript, que es posible que desee explorar.
Añaden algunos fresco interactividad a la página web.
Al igual que éste hace un diálogo modal.
>> Así que hay algunas cosas divertidas que puede hacer con Bootstrap.
Así que mi consejo es que siga adelante y utilizarlo en sus propios proyectos,
siga las instrucciones que acaba de hacer sobre la forma de conseguirlo,
y acaba de leer el Bootstrap porque usted aprenderá más acerca de qué hacer.
Y así hemos ido más, hoy en día, cómo utilizar
la documentación, lo que el edificio bloques son, y cómo es conceptualmente.
Así que ahora mi reto para usted es hacer un sitio web usando Bootstrap.
Entra en la documentación.
Y el uso de las herramientas que hemos aprendido hasta ahora para tratar de analizar los
y entenderlos.
Y el uso de esos estilos y herramientas ves allí en su sitio web.
Y es sólo un grande, proceso experimental.
>> Pruebe un cierto estilo.
¿Funciona?
¿El no lo es?
Trate de poner cosas juntos.
Mira qué pasa.
Es en gran medida un auto guiada, proceso de descubrimiento.
Pero hoy en día, hemos aprendido la conceptos básicos de lo que es Manos a la Obra?
¿Por qué funciona?
¿Como funciona?
¿Cómo empezar a utilizar que, en el primer lugar?
Y así, ahora que eres superar ese bache, que
debería ser capaz de hacerlo bastante bien por sí mismo.
>> Así que una vez más, todo el código que hicimos está aquí.
Así que si alguna vez quieres para conseguir un cepillo para arriba en,
como, lo que es un tramposo rápida la hoja para todos los estilos?
Usted puede entrar en esta muestra aquí.
Tenemos algunos estilos de ejemplo aquí.
Si quieres probar la desafíos de nuevo por sí mismo,
puedes probar aquí y echa un vistazo a las soluciones.
Así que este enlace será incluidas en las diapositivas, que
será enviado a usted por supuesto.
Pero también aquí.
Puede pausar el video, si lo desea.
Toda la información que usted necesita es va a estar aquí, en este sitio.
Así que si alguien tiene alguna pregunta, podemos llevarlos para los próximos par de minutos.
De lo contrario, gracias a todos mucho para ver.