Tip:
Highlight text to annotate it
X
>> Neel Mehta ,: Entón Ola para todo o mundo que está a asistir aquí,
ou asistir en liña, ou de xeito remoto.
O meu nome é Neel, este é CS50.
E seminario de hoxe é Responsive Web Design con Bootstrap.
É un tema que é moi preto do meu corazón.
Esperamos que será preto do seu corazón
así como ao final do seminario de hoxe.
Entón Bootstrap.
Cantos de vostedes fixeron calquera tipo de desenvolvemento web antes?
Unha boa cantidade?
Un pouco.
>> Entón Bootstrap é o mundo máis populares cadro, front-end.
É usado por-- Eu escollín un par de websites-- aleatoria
Lyft, Newsweek, e Vogue.
El é usado por unha serie de sitios.
É un cadro de deseño web que vai deixar que facer os seus sitios
á vez fermosa e sensible.
E eu vou pasar por riba destes dous conceptos aquí.
Fermoso.
Entón tes web normal no esquerda, a cal faise por só HTML.
Aprendeu HTML na clase e na sección de lonxitude.
Bootstrap é unha forma de facer seus sitios fermosa.
Pode aproveitar o que está no parte esquerda da pantalla
e transformalo en o que está no parte dereita da súa pantalla con moito,
moi moi pouco código ,.
>> Comeza o botón azul agradable, comeza a fantasía, bordos redondeados na pantalla,
comeza a exhibición de lista, comeza a tarxetas, etc. con moi pouco código.
Non hai realmente ningunha que CSS ten que escribir por si mesmo.
Entón Bootstrap permite que ter estes CSS pre-construídos
compoñentes que pode pór dentro da súa páxina web
para facela fermosa, sen moito traballo por conta propia.
É realmente unha inicialización, un punto de partida,
para as súas aventuras de desenvolvemento web.
E así, cando é só mofando de un sitio web,
é un lugar moi bo para comezar.
Pode ter unha boa busca web con moi pouco traballo ,.
E, de feito, imos para facelo nós mesmos
no curso de como cinco minutes-- dentro de 10 minutos.
Polo que é moi fácil facer algúns grandes sitios.
Entón esta é a primeira parte.
>> A segunda part-- responsabilidade.
A xente, hoxe en día, non pode acceder a web nos seus portátiles.
De feito, desde 2014, máis persoas acceder á web a través de dispositivos móbiles,
como teléfonos ou tablets, ou servizos, ou así por diante do que sitios.
E sitios foron tradicionalmente deseñado con portátiles ou escritorios
presente.
E así os sitios moitas veces non son moi ben adaptado para o seu teléfono.
Se xa visitou harvard.edu no seu teléfono,
é unha especie de irritante experiencia, non?
Isto é porque non é sensible.
Estamos tentando facer sitios que son sensibles,
que responder aos tamaños de pantalla da xente.
>> Entón, se é un teléfono, é indo a ir no teléfono.
Se é un tablet, é indo a ir en tablet.
El axusta para coincidir coa pantalla que está a ser usado.
E así Bootstrap tamén ofrece algúns moi, utilidades moi útiles para iso.
E nós imos discutir iso tamén.
Entón, de novo, hai dúas partes para Bootstrap-- bonito e responsable.
Nós imos falar sobre iso.
En primeiro lugar, bonito.
E entón responsabilidade.
>> Entón, todo o código que somos vai falar today--
imos ter un monte de exemplos, unha serie de retos, e así el on--
todos vive neste sitio.
Este slide é o que nós enviamos.
Entón, se está aquí, pode sentir libre para non ter que escribir isto.
E se está a asistir de xeito remoto, sentir libre para tirar esta no seu ordenador
ben.
Probablemente vai ter del durante o curso deste seminario.
>> Entón, nós estamos indo a usar unha sitio chamado CodePen,
que é unha codificación colaborativa ambiente, durante este seminario.
E CodePen-- e eu vou amosar-lle aquí certo fast--
el permite que escribir HTML de forma colaborativa.
Podo escribir isto, podo envialo vostedes, podedes editalo.
Mesmo se vostede é remoto, Aínda pode acceder a ela desa forma.
Podes escribir o código HTML na top e vai automaticamente
pode converter no páxina web na parte inferior.
Polo tanto, é unha forma de ti para probar rapidamente código
sen ter que facer ningún tipo de material no seu IDE, ou o seu propio sitio web,
ou o que quere.
>> Entón vai adiante e puxe-se esta web, se é remota
ou se está aquí, especialmente se é remota.
is.gd/cs50boostrap.
Sen tapas, non hai subliñados, sen nada.
Polo tanto, aqueles de vostedes que son aquí, só me dar un Thumbs
cando ter levado Se a páxina web.
Bo?
>> Audiencia: Si.
>> Neel Mehta ,: Entón nós imos chegar para que en só un segundo.
Entón, primeiro, imos chegar a, como fai seus sitios fermosa?
Estamos indo a aprender a aproveitar o chat, HTML vello, como eu mostre antes,
e transformar isto en compoñentes realmente agradables,
como os widgets agradables, agradable, colorido botóns, e as etiquetas e táboas,
e todo, usando Bootstrap.
Entón, se nós poderíamos todo ir ao CodePen que acaba tirado para arriba.
Que mirar un pouco como iso.
Mira como este para todos?
>> Audiencia: Si.
>> Neel Mehta ,: Se é remota, Debe ollar como este tamén.
Se non, vou amosar-lle como pronto podes obtelo coma este
no futuro, unha parte do vídeo.
Entón, aquí escribimos un HTML moi básico,
como o tipo que ten benvida a empregar en clase.
É moi básico.
Sen frescura.
E temos algunhas cousas.
Creamos moi, inicia-se moi básico
chamar Yalp! co cal pode atopar restaurantes na área,
e atopar avaliacións e instrucións sobre todo isto.
É un concepto moi bo.
Iso nunca se fixo antes.
É un nome moi orixinal, tamén.
>> Entón, o que nós estamos indo a tentar facer é axudar o propietario
de Yalp! facer o seu sitio web ollar moi, moi legal.
Entón, para comezar, o propietario Yalp! fixo un pouco de busca
caixa, e un pequeno botón, e, a continuación, se cadra un pouco
área destacada para unha restaurante resaltado, e, a continuación,
unha lista de outros restaurantes que están na área.
Así, podemos só pasar por o código HTML rápido real.
Como se sente caras con HTML?
Fixemos un pouco sección e tamén na aula.
Decente?
>> Entón, así como un resumo, HTML é todo sobre ter
tags ou elementos que contan a ordenador como poñer a páxina web.
Polo tanto, este h1 aqui-- comezar h1, Benvido para Yalp!, final h1-- di ao computador,
deseñar un gran cabeceamento lo di: Benvido ao Yalp!
alí dentro.
Temos tamén formas.
Podemos entradas como esta, entradas de texto, o que fará como caixas de texto
escribir.
Tamén ten botóns.
Gañou un botón agradable, clickable.
Non fai nada dereito agora, pero ten un botón.
Pode que divs, ou tabiques, a romper a súa páxina en varios grupos.
>> Pode que parágrafos, tes botóns.
Se ten parágrafos, a continuación, tes listas non ordenadas, ul,
e listas de dentro que lin.
Entón, estas son o básico bloques de construción dunha páxina web.
E, de feito, moi bonito cada sitio que vexa
será construído usando as mesmas ferramentas.
Por suposto, non todos eles mirar este mal porque somos
vai combina-lo un pouco.
Entón, imos este HTML vello chat e inicio transformándose a no fermoso sitio
que acabamos de ver un par de minutos.
>> Entón, imos comezar moi sinxelo.
Entón temos este botón aquí.
En Bootstrap, como vimos, podemos ten un botón agradable, bonito, azul.
E iso non é feito, facendo CSS personalizado.
Non hai costume CSS aquí.
Isto faise a través da adición de clases aos seus elementos HTML.
Se xa intentou de clases, ou hrefs, ou áncoras, ou type = "text" para insumos
Elementos HTML pode ter estes atributos.
Poden ter máis información que pode darlles.
>> E así, neste caso, clases son o atributo.
Entón, escribiría, clase botón = algo dentro de cadeas.
E ese atributo vai contar a ordenador, isto non é ningunha tecla, idade.
É un botón que está esta clase de botóns.
E así Bootstrap, se lle der un estilo no seu elemento,
vai chamar-lo de determinada maneira.
Entón eu escribo "btn btn-primario.
btn ser unha abreviatura de botón.
Vai notar que agora meu botón feo virou
nun botón agradable, bonito, azul.
Parece moi bo cando prema nel.
>> E entón o que pasa é que temos o btn clase ea clase btn-primario
no noso elemento.
E Bootstrap vai entrar e dicir: OK, I saber que existen estas dúas clases.
Calquera elemento que ten estes dous clases deben ser elaborados como este.
Entón, iso é o núcleo de como engadir estilos para elementos en Bootstrap.
Só engadir clases para eles e vai pesar-lo como lle aprouver.
Entón, aquí está outro exemplo.
Na entrada, podemos engadir a class = "-Control de formulario".
E eu vou amosar pronto, onde pode descubrir o que as clases
están dispoñibles de cada tipo de elemento.
Pero a clase que acabamos Engadido agradables, ten cantos arredondados,
ten bo recheo, ten un agradable, brillo azul a el.
>> Tamén pode ir a esta forma.
E class = "form-in-line", o que fará noso formulario, como pode imaxinar, liña.
Entón, está mirando un pouco máis como o que tivemos antes xa.
Entón, antes de ir ao estilo do resto do a páxina, dúbidas sobre o que nós
fixo?
Nós, clases só anexos aos nosos varios elementos.
E eu vou te amosar máis tarde como pode descubrir o que están dispoñibles clases.
Eu prendi clases que teñen certos estilos.
E iso di ao navegador como deseño da páxina usando
Proporcionadas estilos de bootstrap.
Calquera preguntas do público?
>> Bo ata agora?
Legal.
Unha morea de desafíos con Bootstrap é só
saber o que os compoñentes están dispoñibles e como usalos.
E iso é todo aprendido con experiencia e tamén
a través da lectura da documentación, que nós imos falar sobre pronto.
Entón temos esta div.
É só un, cousa vella chat.
Queremos salientar que de algunha maneira.
Así, en Bootstrap, existen chea de compoñentes dispoñibles.
E este é getbootstrap.com.
É unha referencia moi útil.
Contén cousas como-- aquí está como facer un botón.
E pode facer barras de navegación, pode etiquetas, pode progresar bares,
pode facer grupos de listas.
Basicamente, é todo tipo de que se pode ver unha páxina web.
>> Aquí está o que imos tratar agora.
É chamado de panel.
Se xa usa Google Agora, eles teñen tarxetas.
Ou calquera dispositivo Android ten tarxetas.
Teñen pequenas caixas brancas que ten cousas dentro del.
E así imos tentar e facer que nós mesmos aquí, usando unha cousa
chamado un panel.
Entón, se eu préndoo class = "panel panel-default "para a nosa div externa,
a continuación, damos unha clase div = - imos pode comprobar esa documentación.
div class = "panel-título" e entón div class = "paneis de corpo".
Unha vez máis, non se preocupe con Recordar este código.
Estará dispoñible en liña.
>> Entón nós fixemos iso e agora a nosa chat, vello div converteu este agradable, pequeno cartón.
Ten nice recheo, el ten fronteiras, destaca-
dende o resto da páxina, que é moi legal.
Entón, imos entrar e modificar esta Obter instrucións de botón para unha boa aparencia.
Quen na platéia quere dicir me o que podo facer para o botón
para facela agradable usando Bootstrap?
Si?
>> Audiencia: Poderiamos engadir unha clase.
E poderíamos facer class = "btn btn-fondo".
Neel Mehta ,: Si.
Hai unha morea de outras cores dispoñibles para buttons--
ou para calquera cousa, a esta materia.
Podemos facer btn-perigo e facelo vermello.
Alí imos nós.
Podemos facer btn-éxito para facelo verde.
Podemos facer btn-info-- hai un grupo de cousas que están dispoñibles para ti.
Entón, eu teño pouco reto para vostede agora.
Polo tanto, non hai unha cousa que non deixaron un-denominado.
Este restaurantes de arriba.
>> E queremos usar unha cousa chamou un grupo de lista para denominalo lo.
Entón o meu reto para vostede é ir getbootstrap.com--
Vou puxa-lo ata aquí.
getboostrap.com.
Ir getbootstrap.com, atopar o sección onde van sobre grupos lista.
E vai ver aquí un exemplo e as clases correctas
que pode usar para facer o seu listas para estes grupos lista agradables.
Estes son traballados exemplos de exemplos de código, o que
código que utiliza, o que o código HTML que utiliza, e que iso xera.
>> Entón, meu reto para você-- ir getbootstrap.com,
se está aquí ou na casa, e para tentar engadir estilos para este ul
para facela agradable.
E usar un estilo de grupo lista.
Quere ter un par de minutos, e buscar a documentación,
tentar que vós mesmos?
Porque, como está facendo desenvolvemento web, notarás unha morea do seu traballo
vai estar lendo esta documentación.
Entón, eu creo que é bo para familiarizado coa forma de ler a documentación,
como descubrir o que hai de onde, o código exemplos que pode usar,
o que pode aproveitar.
>> Entón, de novo, getbootstrap.com, vaia á guía Compoñentes,
e, a continuación, desprácese ata lista de grupos.
E vai ver exemplos de código que pode usar para facer o seu HTML que se encaixan.
Entón, tome un par de minutos e tentar explora-lo vostede mesmo,
se está aquí ou na casa.
Se está na casa, deter o vídeo, quizais, e probalo só.
Se está aquí, se vai para o noso website-- se actualizar a páxina,
vai ver isto alí.
Este mesmo código é só engadindo novos estilos ben alí.
Polo tanto, tome uns minutos.
Deixe-me saber cando está se sentido ben sobre el ou cando está totalmente perdido.
Parece bo?
Legal.
Breve reservada para aqueles de vostedes na casa, mentres estamos esperando,
se ir no sitio web do GitHub que eu poñer un par de láminas atrás,
para o inicio do vídeo, Eu teño un repo GitHub, repositorio,
para esa conversa.
Todos estes exemplos de código que estaremos falando almacénanse aquí.
Entón, se ir a desafiar-1.html, este é todo o código que temos agora
no noso CodePen.
Así, pode ir adiante e copiar este, e pegalo no seu propio CodePen.
E desa forma, pode manter-se co que estamos facendo aquí.
Entón esta páxina aberta, así como nós navegar polo resto do seminario.
Unha vez máis, quere ollar como o que ver abaixo na parte inferior da pantalla
alí.
Sentirse ben?
Sólido.
Imos esperar a todos acabar co que eles están facendo.
>> Si?
>> Audiencia: Supoña que eu quería bootstrap para usar en casa--
Neel Mehta ,: Si.
Audiencia: Eu vexo, na páxina web, a páxina Introdución.
Eles me dan as opcións Bootstrap, código fonte, ou Sass.
Cal destes que quero?
>> Neel Mehta ,: Si.
Entón a pregunta é, como comeza comezou a usar Bootstrap por nós mesmos?
El só acontece de Magic traballar aquí.
Entón, se temos tempo no a fin do seminario,
Eu vou te amosar como pode obtelo na súa propia páxina web.
Como aquí, realmente poñer en algunhas opcións que
vai telo automaticamente cargado, pero eu vou
amosar-lle para facelo desde rabuñar nas súas propias páxinas web.
>> Audiencia: Grazas.
>> Neel Mehta ,: Si.
Boa pregunta.
Sentirse ben?
Sentirse ben?
Legal.
Entón, quen queira me dicir como eles fixeron esa cousa boa aparencia e Boostrappy?
Cal é a primeira clase sumamos ao ul?
Audiencia: class = "lista-grupo".
Neel Mehta ,: Si. list-grupo.
E entón o que é que imos achegar ao lis?
Alguén máis?
Audiencia: E entón, despois que, class = "lista-group-punto".
>> Neel Mehta ,: Si.
>> Audiencia: E é a mesmo á seguinte.
>> Neel Mehta ,: li class = "lista-group-punto".
Alí vai.
Temos o noso grupo agradable lista, exactamente como esperabamos.
Entón aí vai.
En 10 minutos, fixemos este chat, vello Yalp! páxina
ollar agradable e profesional.
E iso é só o comezo.
Polo tanto, agora que sente ben sobre iso, imos
só tes que ir adiante e falar máis un par de compoñentes que
pode vir a cadra como vaia en toda a súa aventura.
>> Por suposto, hai moitas cousas que aquí.
E agora que xa aprendeu como facer grupos lista,
pode moi ben ensinar yourself como facer calquera destes.
Pero, por suposto, imos só tentar e facer un par de nós mesmos,
só así ter unha idea de como pode usalos.
Eu só estou indo a ir para este exemplo aquí.
De novo, o código que acaba de pegar aquí está dispoñible aquí.
Polo tanto, Sinto-se a liberdade de puxa-lo para arriba.
>> Entón, nós xa pasou un par destes exemplos.
Entón temos botóns, que Vimos como facer.
Podemos facer botóns maior.
Por botón class-- vai, btn btn-lg e btn-default fai branco.
Entón, iso fai que o noso botón maior do que podería ser.
Pode vir a cadra, se ten gran botón ou algo presentar.
Vimos o exemplo do grupo lista, vimos o exemplo de formulario.
>> Un aspecto moi importante é iconas.
E as iconas son un xeito para engadir cousas interesantes, como cheque
marcas ou signos de adición ou amigo iconas, ou iconas de reinicio,
ou o que quere para a súa aplicación web.
Entón, de novo, se nós para aquí, os compoñentes, glyphicons,
son as iconas dispoñibles para Bootstrap.
Hai unha exhaustiva lista de todos os aquí.
Polo tanto, só como exemplo, imos tentar engadir un.
>> Así como Facebook, estamos intentando ter un botón Engadir amigo.
Imos primeiro engadir un estilo.
clase de botón = "btn btn-éxito".
E alí imos nós.
Imos engadir unha icona aquí.
A icona, pensas que, pode ter sentido para poñer aquí?
Probablemente xa viu en algunhas páxinas web ou calquera outra cousa,
pero o que é un exemplo dun icono que pode ir ben dentro deste botón?
Sinto-se libre para navegar neste punto de vista, se precisa de inspiración.
Hai unha morea de utilidade aqueles dispoñibles aquí.
Si?
>> Audiencia: Quizais o usuario glyphicon?
Neel Mehta ,: Aceptar.
Este.
Iso é moi bo.
Si.
En Facebook, eu creo que quedaría un pouco así.
Entón aquí está como nós imos sobre engadir iconas para as nosas páxinas.
Nós só temos un span-- un período é unha recipiente neutra para algo.
A div é un recipiente para algo, unha extensión de outro recipiente.
divs teñen saltos de liña en torno a eles, ocos non.
Polo tanto, hai distintas formas de Tendo en recipientes xenéricos.
Como non ten sentido para poñelas dentro dun parágrafo ou algo.
Temos que colocar-lo dentro de algo, pero,
por iso, só tes que poñer dentro dun palmo.
Entón span class = glyphicon glyphicon polo usuario "close span.
E agora temos a icona no botón.
>> Por iso, non parece totalmente ao contrario o que se pode ver en facebook.com.
E por iso é bo que estes poden realmente ser instalado en calquera lugar que quere.
Nas súas barras de cabeceira, nos seus grupos lista.
Sexa cal sexa.
Non ten que ser dentro dun botón.
Entón, como un exemplo, podo poñer a mesma clase aquí.
"glyphicon glyphicon-user".
E parece exactamente o mesmo.
Entón, estas icons-- pode usar o espazo class = "glyphicon glyphicon-o que quere".
E iso vai deixar que engadir iconas onde quere.
E as iconas son unha moi importante parte de facer un ollar web
profesional e ben feito.
Polo tanto, non esaxere, pero é moitas veces unha boa cousa para saber.
>> Paneis, de novo.
Eu só vou facelo de novo como unha recapitulación porque están tipo de parte.
Vai notar que, en transformando o seu HTML normal,
web nun Bootstrap-afied lugar, terá
para engadir estrutura extra para o web.
Por exemplo, temos adicional divs aquí só porque os
son necesarios para facer un panel.
Entón, só tes que manter isto presente que vai ter que ter unha estrutura adicional.
Así, "panel-default panel".
Quizais sexa panel-header.
Creo que é o panel-rúbrica.
Si.
Alí imos nós.
Entón, de novo, non é o noso panel.
>> Só unha cousa que nós non cubría aínda, táboas.
Mesas, por tipo aparencia estándar de feo.
Lle gusta a.
Pero a cantidade é, por suposto, unha parte moi importante
que vai facer no desenvolvemento web.
En Pset7, por exemplo, CS50 Finanzas, que vai saír en breve,
vai usar unha morea de mesas.
E unha morea de dev web usar unha morea de táboas para ver información,
como accións, ou puntuación, ou o que quere.
>> Entón, denominándose táboas é realmente moi fácil.
Engade a clase mesa á súa mesa.
E, eu me atrevo a dicir, parece moi bo.
Podes facer cousas extraordinarias, como "table table-listrado".
E vai ver os resultados aquí.
Podes facer fronteira de táboa.
Hai unha morea de opcións que pode.
Pero, basicamente, a adición dun táboa, a táboa de clase,
vai facer as súas táboas ollar moi agradable.
Entón, iso é un breve resumo de Algúns dos estilos máis importantes
e compoñentes que vai Debe usar para Bootstrap.
Entón eu creo que Wraps a nosa fermosa parte.
Todas as preguntas agora sobre como para facer os seus sitios fermosa?
Como pode usalos compoñentes para a súa vantaxe?
Sentirse ben?
Si?
Audiencia: Quizais iso é unha pregunta boba,
pero pode usar Bootstrap na Wikipedia?
Se está a editar unha páxina da Wikipedia?
Neel Mehta ,: Si.
Polo tanto, a cuestión era, eu son editando unha páxina de Wikipedia,
Podo incluír estilos Bootstrap alí?
>> Audiencia: Si.
>> Neel Mehta ,: E así é Bootstrap basicamente unha folla grande CSS.
A folla de estilo CSS só di, sempre que Eu teño esa clase, achegar eses estilos.
Así, a folla de estilo CSS para Bootstrap será algo así como .btn,
a clase botón, terá como un fronteira canto redondeado ou o que quere.
Entón, basicamente, o Bootstrap só un chea de clases e unha morea de estilos
especificada para estas clases.
Entón, mentres ten que CSS, esta lista de regras na súa páxina,
vai ter o estilo Bootstrap.
Isto é, por suposto, depende tendo os estilos Bootstrap na súa páxina
para comezar.
>> E así, na Wikipedia, probablemente non podería
facelo porque Wikipedia Non ten Bootstrap nel.
Pero se tiña Bootstrap, probablemente podería facelo.
E se queres, podes inclui-lo, pero que poden
romper o esquema existente da páxina.
Pero pregunta moi boa.
Podes usar Bootstrap onde queira que se inscribe,
pero non está construído en por defecto.
>> Audiencia: Grazas.
>> Neel Mehta ,: Si.
Máis preguntas?
Si.
Entón, se está aquí ou na casa, basta lembrar getboostrap.com-- novo,
getboostrap.com-- é o seu amigo.
Sempre que está a usar Bootstrap, iso lle vai dar
instrucións sobre como chegar comezou, como usar compoñentes.
Hai algún JavaScript legal Os plugins que non imos pasar por riba aquí,
pero son paga a pena revisar tamén.
Polo tanto, este é o seu amigo.
É só importante para obter usado para o uso iso.
>> Entón, imos falar un pouco sobre facendo sitios responsivos.
Entón, como dixen antes, a xente acostumaban seus portátiles, que empregan os seus teléfonos.
E como podes imaxinar, este é un tamaño de pantalla moi diferente do que iso.
E así mesmo sitio que parece ser bo no meu teléfono
non vai ter unha boa aparencia, necesariamente, nun ordenador.
Entón, o que ten que facer é facer o seu sitio web adaptarse.
Ten que adaptarse ás varias tamaños de pantalla que está conectado.
>> Ten que dicir, sei que estou nun ordenador, portátil grande, debería ampliar.
Sei que estou nun teléfono, eu debería encoller.
E así Bootstrap ofrece algúns moi, moi útiles ferramentas para facelo.
Entón Bootstrap permite que rompe un sitio en 12 columnas.
Podes facer liñas e ten 12 columnas.
E pode particionar quen queira.
Pode que un, gran cousa, que é de 12 columnas de ancho.
Pode ter dúas cousas que son cada unha das seis.
Podes facer unha cousa que é catro, un que é dous, ou un que é seis.
Podes facer tres, tres, tres, tres.
Podes facer o que quere rompe que quere.
>> Entón, talvez túa páxina web que ter un columna da esquerda que é un terzo do ancho.
Así que sería catro columnas de ancho e ao resto da páxina
sería oito columnas de ancho.
Polo tanto, este é un exemplo.
Imos puxar arriba outro exemplo.
>> Audiencia: Será que sempre ten que ser un empate?
Podería ser un sete, cinco división?
>> Neel Mehta ,: Si.
Pode ser sete, cinco.
Si.
Mentres engade a 12, está todo ben.
Entón, imos voltar aquí.
Unha vez máis, o código que é aquí tamén está dispoñible aquí,
baixo exemplo responsabilidade.
Entón, eu só deixou algúns exemplo de código responsabilidade aquí.
Entón facelo empregando unha cousa chamada liña.
Row é só outra clase.
É outro estilo que engadir no seu divs para tornalos seus propios compoñentes.
>> Entón vostede di, div class = "liña" para facer unha liña,
dar-se 12 columnas de espazo.
E entón pon columnas dentro diso.
Entón aquí COL-xs-6.
Non te preocupes coas xs.
Falaremos nun segundo.
Pero, basicamente, temos un cousa que é seis de ancho.
Nós o chamamos esquerda.
E entón esa é a caixa da esquerda aquí.
Temos unha cousa que é seis dos 12 columnas de ancho.
E que un é da dereita.
>> ben só dá marcas seu div enche-lo gris.
Entón, iso é só para que poidamos ver que son distintos.
E así este primeiro exemplo.
É un exemplo moi sinxelo de como usaría súas liñas e columnas aquí.
Define unha liña usando class = "row".
E entón fai class = "col-XS-6" facer metade, "col xs-6" para facer a outra metade.
Aquí está un exemplo máis complicado.
Imos ollar para o pequeno, Enorme, A un descanso.
>> Podemos facer pequenos dúas columnas de ancho, podemos facer enormes seis columnas de ancho,
E o resto catro columnas de ancho.
Isto engade ata 12.
E así estes acaban abranguendo o ancho da páxina.
Unha vez máis, temos unha cola do lado de fóra.
Entón temos div class = "col xs-2" e, a continuación, 6, e, a continuación, 4.
E que vai ofrecer a estrutura para nós.
E así podemos poñer calquera diaños queremos aquí dentro.
No canto de minúscula, podemos poñer un botón.
clase de botón = "btn btn-fondo".
E así notar que o noso botón non ocupan toda a anchura,
pero polo menos é restrinxida que a cantidade de espazo.
>> Entón, iso é todo moi ben.
Así, podemos agora romper a nosa web páxina en anacos, ancho sabio.
Podemos dicir que queremos ter unha esquerda columna, e unha columna da dereita, e así por diante.
Pero nós non ir máis como facelo sensíbel.
E así Bootstrap imos facelo tamén.
Ten isto chamadas puntos de interrupción.
Por iso, ten unha forma de saber se está nun portátil, está nun tablet,
está nun teléfono horizontal, ou se está en un teléfono vertical.
El sabe o tamaño da pantalla.
E esta rompe en catro Categorias-- grande ou lg, que é ordenadores portátiles, xeralmente.
md ou medio, que é tabletas.
sm, pequeno.
Ou xs, extra pequeno.
E así, cando se especifica unha columna, di,
debe ser de seis columnas de ancho nun dispositivo pequeno extra.
É por iso que nós fixemos col xs-6.
Estamos dicindo que debería ser seis das 12 columnas de ancho
nun dispositivo pequeno extra.
E se é algo máis grande, imos só estándar para usar o tamaño extra pequeno.
Se é algo maior que pequeno extra, será seis de ancho.
E para que poidamos aproveitar estes para facer das nosas columnas
ocupan unha cantidade diferente de columnas segundo o tamaño da pantalla.
Imos para ese Adaptación responsabilidade.
Entón, nós temos as nosas columnas.
E el di: "col-lg-6 col-xs-12".
Así, dado o que sabe ata agora, o que fai
pensas que vai pasar nunha pantalla grande?
Ben, é unha especie de deu lugar, pero o que facer
Pensas que vai mirar como nunha pantalla grande?
E por que isto?
>> Audiencia: É que nunha pantalla grande, é
vai levar só porción do espazo cheo?
Como a metade dela, eu creo?
>> Neel Mehta ,: Si.
>> Audiencia: E en menor pantalla, que vai
para ocupar toda a pantalla, a 12.
Neel Mehta ,: Si.
Dereita.
Así, como exemplo, imos basta ollar para abaixo aquí.
Si.
Entón, en todo o que é ou lg bigger-- así que o meu ordenador acontece
para ser lg porque é moi wide-- vai facer
mosaico porque é col-lg-6.
Entón, por que é en gran, torna- seis columnas de ancho e seis columnas de ancho.
Imos ver o que acontece se facelo nun menor.
Eu só vou á pantalla full-un iso.
E eu vou diminuír a pantalla.
Eu estou indo a diminuír a pantalla, polo que Parece que estou nun dispositivo menor.
Entón, eu estou indo a reduci-lo así.
>> E listo.
El agora é empilhado porque agora temos ido
de gran a-- esta é probablemente un pequeno tamaño da pantalla extra.
E agora di, OK, non somos en gran, estamos en terra pequeno extra.
Entón, nós estamos indo a usar o pequeno tamaño extra.
E nós estamos indo a xs-12, xs-12.
Por iso, será amoreadas.
E só entender que hai unha cousa chamada un punto de interrupción.
Un punto de interrupción é onde fixo a transición
de pequeno extra para pequenos, pequena gran, e así por diante.
>> Entón, só tes que ter en conta que, como eu pase este a fóra, finalmente, vai chegar ao punto
onde van ir para estar de xeito conxunto.
Alí vai.
Polo tanto, hai o punto de interrupción logo alí.
Así, podemos facelo aínda máis complicado.
Agora podemos dicir que estes as cousas deben ser catro de ancho.
É dicir, eles deben ocupan aproximadamente un terzo
do discurso en moi grandes dispositivos.
Nun dispositivo medio, debe tomar ata a metade da pantalla, porque iso é MD-6.
Nun dispositivo moi pequeno, debe levar ata 12.
E así, este parece moi natural.
Nós só tentar facelo por nós mesmos.
>> Entón, nunha gran pantalla, son catro de ancho.
Reduci-lo un pouco.
E son agora seis de ancho.
Polo tanto, este é seis, seis, seis.
Reduci-lo aínda máis e, a continuación, van ser totalmente empilhados.
Polo tanto, esta, por exemplo, ten sentido se está a ter tarxetas, como tarxetas de noticias,
Por exemplo, cando se é nunha pantalla moi grande,
todo ben se ten varios mosaico porque todos irían obter espazo suficiente.
Pero precisan ter espazo suficiente.
Entón, nunha pantalla pequena, que desexa darlles
máis espazo, proporcionalmente, da páxina.
>> Entón, como un exemplo do mundo real, digamos que temos Twitter.
E nós temos o cadro de texto, entón pode tweet sobre o lado.
E nós temos unha lista de trending temas sobre o lado dereito.
Entón, nunha pantalla grande, deberiamos terlles estar de xeito conxunto,
para que poida ve-los en un vaso.
Pero nunha pantalla pequena, temos que facer 12 e 12,
de xeito que os trending topics están por debaixo da zona do tweet.
Porque a área de tweet é o O principal e nunha pantalla pequena,
os trending topics non facer importa tanto.
E, así, poñelos debaixo, polo tanto, que ambos poidan obter espazo suficiente.
Ter sentido ata agora?
>> Audiencia: Si.
>> Neel Mehta ,: Sólido.
Entón, iso é todo exemplos que teño aquí.
Imos tentar e facer un desafío.
Entón, de novo, este é o reto-2.html para aqueles de vostedes acompañando na casa.
Entón, meu amigo, Mark Zuckerberg, veume o outro día.
E é como, Neel, eu teño quedou moi bo en deseño web.
Podo facer o HTML.
Eu fixen este pequeno, nova edición para Facebook.
Eu teño unha nova idea de como debemos estilo Facebook.
E aquí está.
Xusto aquí.
Aquí está o código de exemplo.
Entón, é chamado Fancybook.
>> Temos algunhas actualizacións de estado.
Temos Nemo, Mike Kosowski, ***-- tres actualizacións de estado.
E entón temos unha lista de amigos en liña debaixo dela.
Entón, fixo a súa lección de casa.
Sabe algo sobre Bootstrap, fixo a vista de lista,
fixo un pouco de HTML.
Entón, ten a páxina web.
Pero é como, Neel, non entender proxecto áxil en todo.
Ten expertos que podería me axudar con iso?
E, por sorte, é agora especialistas en deseño de responsabilidade.
>> Entón, o que me dixo foi que quere Fancybook para estar así.
Nun dispositivo moi pequeno, como un teléfono, todo
deben ser empilhados, como aquí.
Entón tes a liña do tempo anticipadamente, encima, e, a continuación,
ten que ter a bar chat na parte inferior.
Pero nun tablet ou un medio dispositivo, que debe ser a metade e metade,
como na liña do tempo debe ser metade ea lista de amigos de chat
debe estar na outra metade.
>> A continuación, nun portátil, a liña do tempo debe tomar-se tres cuartos
e, a continuación, o chat de hedge debe incorporarse outro cuarto.
E así como é, Neel, eu teño esa código aquí, pero non é sensible.
Necesita comportarse así.
Entón, meu reto para vostede é xa este código aqui--
se actualizar o seu CodePens, vai ver iso.
Ou se só pega no código en desafío-2, vai ver iso.
>> Aquí está este código exemplo.
Verá algúns xxxs.
Quero que cambie os xxxs, de tal forma que liña do tempo e da lista de amigos
segue estas especificacións aquí.
Non te preocupes co que é dentro do programa para o momento.
Nós imos conseguir isto a próxima etapa.
Pero, por agora, imos ver se obtemos esas cousas que división la así.
Entón, iso ten sentido?
Entón, se está na casa, deter o vídeo e tente
para facer a súa páxina web ollar sensible como esta.
Se está aquí, tomar como dous, tres minutos.
Sinto-se a liberdade de falar con un veciño, e probar, e resolver o Sr Zuckerberg de
problema responsabilidade deseño.
Se ten algunha dúbida, Sinto-se a liberdade de me informar.
Sentirse ben?
Feito?
Niza.
>> Audiencia: [inaudível].
Neel Mehta ,: O que?
>> Audiencia: eu son bo.
>> Neel Mehta ,: Ah, bo.
Niza.
Audiencia: A cousa sobre o 12, que é o que Bootstrap
trata dun determinado espazo na pantalla como 12 unidades en todo e, a continuación, divídese que?
Como funciona exactamente a proporcionando traballo para iso?
>> Neel Mehta ,: Si.
Entón a pregunta é, como fai o dosificar
traballar para Bootstrap, non?
>> Audiencia: Si.
Neel Mehta ,: Así, sempre que ten unha clase div = "liña",
non importa o grande a pantalla é, Bootstrap lle dará 12 unidades
do mesmo tamaño para asumir que gran tamaño.
Así, en col 1, sempre 8,33% do tamaño da pantalla,
se isto é esta ampla ou que é iso de ancho.
E así, por suposto, sobre unha menor pantalla, cada columna é menor.
Aínda ten 12 columnas de ancho, é un menor.
Entón, cómpre a vostede seguro de que as cousas ocupan máis de columna,
proporcionalmente, para compensar para que a falta de espazo.
Isto ten sentido?
>> Audiencia: Si.
Grazas.
Neel Mehta ,: Boa pregunta.
Audiencia: Nunha gran pantalla, pode que
o programa levar ata tres cuartos?
>> Neel Mehta ,: Si.
Neel Mehta ,: Como son caras sentindo?
Bo?
Legal.
Entón, imos volver.
E imos tentar resolver esta parte do sitio web do Sr Zuckerberg.
Así, os prazos está aquí enriba, no arriba, ea lista de amigos
está na parte inferior.
E así nós só necesitamos asignar columnas, con deseño proporcional,
en cada unha delas.
Polo tanto, este primeiro *** é a liña do tempo.
Que facer clases imos poñer aquí?
O que vostedes poñer aquí?
Entón lembre, nunha gran pantalla, el que para ocupar tres cuartos do ancho.
E entón o que estilo lle daría isto?
Nunha pantalla grande, tres cuartos da anchura.
Que clase é que imos usar alí?
Audiencia: Entón, nós estamos só será edición que primeira instancia de clase.
Neel Mehta ,: De momento.
Si.
>> Audiencia: Non estamos editando cada, característica individual de liña do tempo?
Neel Mehta ,: Non agora, polo menos.
Entón, esa cousa toda é un bloque.
Estamos só cambiando o deseño do bloque.
Entón aquí COL-lg-9 porque é nove dos 12 gran nunha pantalla grande.
E, a continuación, sobre unha pantalla de soporte, cantas columnas podo comezar?
Audiencia: É suposto ser medio a medio.
Neel Mehta ,: Correcto.
Entón, cantos é que?
>> Audiencia: Entón seis.
Neel Mehta ,: Six.
E entón pequeno extra debe ser-- se lévase a todo o ancho da liña,
cantos que debería ser?
Audiencia: 12.
Neel Mehta ,: 12.
Si.
E agora temos que cambiar este demais,
para ocupar o resto do espazo.
Entón col-lg--
Audiencia: Vai ocupar toda a pantalla?
Neel Mehta ,: Leva-se cuarto da pantalla nun dispositivo grande,
como mostramos aquí.
>> Audiencia: Tres.
>> Neel Mehta ,: Tres.
E, a continuación, col-md-6 para sacar Se o resto do espazo.
col-xs-12.
Polo tanto, agora temos a liña do tempo ocupando tres cuartos
da páxina na gran pantalla e, a continuación, un cuarto do lado.
E, a continuación, o tamaño da pantalla para abaixo, debe redimensionar conformidade.
Polo tanto, é empilhado agora, nunha pantalla moi pequena.
E se dimensionar-se un pouco, eles deben ser exactamente a metade e metade.
Entón nós fixemos iso ata agora.
Moi guay.
E por iso non imos facer o outra parte do desafío.
Podes facelo só.
Pero, basicamente, ten que tentar facer estes responsabilidade
bom-- como facer a liña do tempo elementos, eles mesmos, responsabilidade.
Entón, agora nós pasamos por todo o que precisa saber
sobre o lado sensible de Bootstrap.
Calquera dúbida sobre responsabilidade proxecto con Bootstrap
e como pode facer sobre iso?
Si?
>> Audiencia: É similar se tivemos un vídeo incorporado
e queriamos controlar a escala en que o foi-- vídeo
O tamaño do vídeo indo de portátil para o seu teléfono.
Neel Mehta ,: Si.
Máis ou menos.
Vostede tería que dicir que o vídeo ocupan tanto espazo como deu,
que é un pouco irritante ás veces.
Pero a idea do núcleo é o mesmo.
Un vídeo, como calquera outro obxecto en a páxina, como un botón ou o que quere,
sempre que use o columnas e as liñas,
pode darlle un certa cantidade de espazo.
E así comeza-lo para honrar esa é unha cuestión diferente porque, como YouTube
incorpora teñen unha certa, o tamaño preferido.
Pero, en teoría, en menos, ía traballar.
Legal?
>> Audiencia: Supoño entón, para unha imaxe, non é, en realidade,
precisan de ter diferentes versións de a mesma imaxe en diferentes tamaños
para portátil contra iPhone?
A pregunta é si, necesitamos teñen imaxes que responden ben.
E, de feito, pode facelo.
Creo que é o CSS.
Pero Bootstrap permite que faga iso tamén.
Pode ter imaxes responsivos.
Pode que as súas imaxes redimensionar segundo o tamaño da páxina.
E hai unha cousa moi nova HTML5, a nova versión do HTML,
e CSS3, o máis novo versión do CSS, que
vai deixar que solicitar imaxes diferentes a base do tamaño da pantalla está.
Normalmente, é bo o suficiente para só ten a súa imaxe só diminuír ou aumentar a
con todo grande que ten que ser.
Pero pode, se quere para, ten un 32 por 32
para pantallas moi pequenas, e 64 por 64 para a gran pantalla,
e despois servir os selectivamente.
Podes facelo.
Faise por algunhas persoas.
É aínda de punta bonito.
Pero a resposta curta, images-- responsabilidade Bootstrap pode gardar o día alí.
Legal?
>> Audiencia: Grazas.
>> Neel Mehta ,: Entón, imos falar ben rápido sobre como
para conseguir isto na súa propia páxina web.
Digamos que quere facer o seu propio sitio usando Bootstrap.
E entón imos só atravesa-la xuntos.
Digamos que faga só unha páxina HTML normal.
Sinto-se libre para seguir xunto en calquera que sexa o seu editor favorito é.
Entón, só temos algunha páxina HTML.
Podemos facer! DOCTYPE html.
Esta é tamén a nosa páxina html ,.
Nada novo.
Nós fixemos iso antes.
Polo tanto, temos aquí o noso HTML e podemos poñer cousas aquí dentro.
Podemos ter o noso botón.
E como dixen antes, este non está necesariamente indo para o traballo.
Por que non este traballo?
Por que non temos o noso agradable botón, colorido?
>> Audiencia: Porque non vincula-lo para o proxecto Bootstrap ou o ficheiro?
Neel Mehta ,: Si.
Correcto.
Por Bootstrap-- só un arquivo CSS fantasía.
É unha serie de estilos que están ligados a seus elementos.
Aquí nós dixemos que quere usar estes estilos.
Vou tamaño que ata un pouco.
Dixemos que queremos usar estes estilos, pero nunca
dixo que o que os estilos son.
E iso é o que o seu pregunta de antes foi.
Esa é a resposta a iso.
Debemos atopar unha forma de obter os estilos e inclui-los na nosa páxina de algunha maneira.
E vontade para Bootstrap nos amosar como facelo.
>> Entón, se ir para arriba aquí, Introdución.
Hai diferentes formas de baixar-lo.
Isto pode non ter sentido necesariamente.
Bootstrap-- iso vai deixá- incorporarse o propio arquivo CSS.
E incluíu na súa propia páxina.
Source Code é se quere hackear sobre iso por si mesmo.
Non precisa realmente este.
Sass é unha lingua que recompila en CSS.
Pense nisso como un pre-procesador.
Moi parecido PHP é un pre-procesador de HTML, Sass é un pre-procesador para CSS.
Entón, se quere facelo Desta forma, pode facer iso.
>> O xeito máis doado é utilizar un CDN, ou rede de distribución de contidos.
É un sitio que sérvese unha copia do Bootstrap
moi rápido para ti incluír na súa propia páxina.
Entón, aquí está un exemplo.
Vai darlle ese elemento ligazón.
Un elemento enlace ó navegador, tomar os ficheiros son almacenados aquí
e inclui-lo na nosa páxina web.
E neste caso, é o ficheiro CSS Bootstrap.
Entón imos copiar a URL, ou este texto, e nós imos xoga-lo dentro
da nosa cabeza.
>> E eu non vou comezar a páxina para iso, pero pode confiar que iso funciona.
A ligazón vai che dar o CSS.
Inclui-lo no seu páxina e, a continuación, será
capaz de utilizar todo o Bootstrap clases que coñece e ama.
Se quere mantelo localmente e te-lo no seu propio sistema de ficheiros
en vez de ter que ir a internet para agarralo,
como se quere usar o local fóra de liña,
pode utilizar a opción de descarga.
Pero, en maior medida, utilizando o CDN é moi rápido, porque desa forma,
é mantido actualizado para ti tamén.
Ten que actualiza-lo manualmente quere.
Ten sentido?
>> Entón, unha morea de ferramentas terá este construído por defecto. Na súa Pset7 e Pset8,
Eu creo que é Bootstrap incluídos automaticamente.
E en CodePen, para exemplo, xa é
incluído porque engadiu engadir esa definición.
Entón, se quere xogar Con el, pode simplemente ir en CodePen,
ou ir na súa identificación, ou o que quere.
E pode ser capaz de acceso Bootstrap alí,
pero non sempre é construído en, por defecto, para a web.
Ten sentido?
>> Si.
só como un recap-- temos como cinco minutos do final.
Pero, como unha repescagem, en novas páxinas web, pode incluír Bootstrap como este.
E unha vez que telo incluído, pode facer todas as cousas divertidas aquí.
Pode ir en, e pode só ler CSS, pode engadir algúns estilos frescos,
pode que compoñentes como os botóns,
e as mesas, ea lista elementos que mencionados.
Hai algúns plugins JavaScript legal, que pode querer explotar.
Eles engaden algúns cool interactividade á páxina web.
Como este fai un diálogo modal.
>> Polo tanto, hai algunhas cousas divertido pode facer Bootstrap.
Polo tanto, o meu consello para vostede é ir adiante e usalo nos seus propios proxectos,
siga as instrucións que só fixen acerca de como obtelo,
e só ler o Bootstrap porque vai aprender máis sobre o que facer.
E así temos ido máis, hoxe, como usar
a documentación, o que o edificio bloques son, e como é conceptualmente.
Entón agora o meu reto para vostede é facer un sitio usando Bootstrap.
Ver os docs.
E utilizar as ferramentas que temos aprendido ata o momento para tratar de analiza-los
e comprendelos.
E usar estes estilos e ferramentas ve que hai no seu sitio.
E é só un gran, proceso experimental.
>> Proba un certo estilo.
Funciona?
Será que non é?
Tente poñer cousas xuntos.
Mira o que acontece.
É moito máis unha auto- guiada, proceso de descubrimento.
Pero hoxe, aprendemos a básico do básico do que é Bootstrap?
Por que isto funciona?
Como funciona isto?
Como é que imos comezar a usar que, en primeiro lugar?
E agora que é ao longo do brote, vostede
debe ser capaz de facelo moi ben por si mesmo.
>> Entón unha vez máis, todo o código que fixemos está aquí.
Entón, se quere para obter un cepillo enriba,
como, o que é unha fraude rápida folla para todos os estilos?
Pode ir a ese exemplo aquí.
Temos algúns exemplos de estilos aquí.
Se quere probar o retos de novo por si mesmo,
podes probalo los aquí e confía as solucións.
Polo tanto, esta conexión será incluído nos diapositivas, que
será enviado a vostede, por suposto.
Pero tamén aquí enriba.
Pode deter o vídeo, se quere.
Todo o que precisa é será aquí, neste sitio web.
Entón, se alguén ten algunha dúbida, podemos levalos para os próximos dous minutos.
Se non, grazas a todos moito para ver.