Tip:
Highlight text to annotate it
X
>> Neel Mehta,: Então Olá para todo mundo que está assistindo aqui,
ou assistir on-line, ou remotamente.
Meu nome é Neel, este é CS50.
E seminário de hoje é Responsive Web Design com Bootstrap.
É um assunto que é muito perto de meu coração.
Esperamos que ele será perto de seu coração
bem como no final do seminário de hoje.
Então Bootstrap.
Quantos de vocês têm feito qualquer tipo de desenvolvimento web antes?
Uma boa quantidade?
Um pouco.
>> Então Bootstrap é o mundo mais populares quadro, front-end.
É usado por-- Eu escolhi um par de websites-- aleatória
Lyft, Newsweek, e Vogue.
Ele é usado por uma série de sites.
É um quadro de web design que vai deixar você fazer seus sites
ao mesmo tempo bela e sensível.
E eu vou passar por cima destes dois conceitos aqui.
Bela.
Então você tem site normal no esquerda, a qual é feita por apenas HTML.
Você aprendeu HTML em classe e na seção de comprimento.
Bootstrap é uma maneira de fazer seus sites bonita.
Você pode tirar o que está no lado esquerdo da tela
e transformá-lo em o que está no lado direito da sua tela com muito,
muito muito pouco código,.
>> Você começa o botão azul agradável, você começa a fantasia, bordas arredondadas na tela,
você começa a exibição de lista, você começa a cartões, e assim por diante com muito pouco código.
Não há realmente nenhuma que CSS você tem que escrever por si mesmo.
Então Bootstrap permite que você ter estes CSS pré-construídos
componentes que você pode colocar dentro de sua página web
para torná-la bonita, sem muito trabalho por conta própria.
É realmente uma inicialização, um ponto de partida,
para as suas aventuras de desenvolvimento web.
E assim, quando você é apenas zombando de um site,
é um lugar muito bom para começar.
Você pode ter uma boa procura site com muito pouco trabalho,.
E, de fato, nós estamos indo para fazer isso nós mesmos
no curso de como cinco minutes-- dentro de 10 minutos.
Por isso é muito fácil fazer alguns grandes sites.
Então essa é a primeira parte.
>> A segunda part-- responsivo.
As pessoas, hoje em dia, não basta acessar a web em seus laptops.
Na verdade, a partir de 2014, mais pessoas acessar a web através de dispositivos móveis,
como telefones ou comprimidos, ou serviços, ou assim por diante do que sites.
E websites têm sido tradicionalmente projetado com laptops ou desktops
em mente.
E assim os sites muitas vezes não são muito bem adaptado para o seu telefone.
Se você já visitou harvard.edu em seu telefone,
é uma espécie de irritante experiência, certo?
Isso é porque não é sensível.
Nós estamos tentando fazer sites que são sensíveis,
que responder aos tamanhos de tela das pessoas.
>> Então, se é um telefone, é indo para ir no telefone.
Se é um tablet, é indo para ir em tablet.
Ele ajusta para coincidir com a tela que está sendo usado.
E assim Bootstrap também fornece alguns muito, utilitários muito úteis para isso.
E nós vamos discutir isso também.
Então, novamente, há duas partes para Bootstrap-- bonito e responsável.
Nós vamos falar sobre isso.
Primeiro, bonito.
E então responsivo.
>> Então, todo o código que nós somos vai falar sobre today--
vamos ter um monte de exemplos, uma série de desafios, e assim ele on--
todos vive neste site aqui.
Este slide é o que nós enviamos.
Então, se você está aqui, você pode sentir livre para não ter que escrever isso.
E se você está assistindo remotamente, sentir livre para puxar esta no seu computador
também.
Você provavelmente vai precisar dele durante o curso deste seminário.
>> Então, nós estamos indo para usar uma site chamado CodePen,
que é uma codificação colaborativa ambiente, durante este seminário.
E CodePen-- e eu vou mostrar-lhe aqui verdadeiro fast--
ele permite que você escrever HTML de forma colaborativa.
Eu posso escrever isto, eu posso enviá-lo para vocês, vocês podem editá-lo.
Mesmo se você for remoto, você ainda pode acessá-lo dessa forma.
Você pode digitar o código HTML no top e ele vai automaticamente
ser convertido no página web na parte inferior.
Portanto, é uma forma de você para experimentar rapidamente código
sem ter que fazer qualquer tipo de material em seu IDE, ou o seu próprio site,
como queiras.
>> Então vá em frente e puxe-se esta site, se você é remota
ou se você está aqui, especialmente se você é remota.
is.gd/cs50boostrap.
Sem tampas, não há sublinhados, sem nada.
Portanto, aqueles de vocês que são aqui, apenas me dar um thumbs
quando você ter puxado -se que a página web.
Boa?
>> AUDIÊNCIA: Sim.
>> Neel Mehta,: Então nós vamos chegar para que em apenas um segundo.
Então, primeiro, vamos chegar a, como você faz seus sites bonita?
Estamos indo para aprender a tirar o chato, HTML velho, como eu mostrei antes,
e transformar isso em componentes realmente agradáveis,
como os widgets agradáveis, agradável, colorido botões, e etiquetas e tabelas,
e tudo, usando Bootstrap.
Então, se nós poderíamos todos ir para o CodePen que você acabou puxado para cima.
Deve olhar um pouco como isso.
Olha como este para todos?
>> AUDIÊNCIA: Sim.
>> Neel Mehta,: Se você é remota, Deve olhar como este também.
Se não, vou mostrar-lhe como em breve você pode obtê-lo parecido com este
no futuro, uma parte do vídeo.
Então, aqui nós escrevemos um HTML muito básico,
como o tipo que você tem vindo a utilizar em sala de aula.
É bastante básico.
Sem frescura.
E temos algumas coisas.
Criamos muito, iniciar-se muito básico
chamar Yalp! com o qual você pode encontrar restaurantes na área,
e encontrar avaliações e instruções sobre tudo isso.
É um conceito muito bom.
Isso nunca foi feito antes.
É um nome muito original, também.
>> Então, o que nós estamos indo para tentar fazer é ajudar o proprietário
de Yalp! fazer o seu site olhar muito, muito legal.
Então, para começar, o proprietário de Yalp! fez um pouco de pesquisa
caixa, e um pequeno botão, e, em seguida, talvez um pouco
área destacada para uma restaurante realçado, e, em seguida,
uma lista de outros restaurantes que estão na área.
Assim, podemos apenas passar por o código HTML rápido real.
Como você se sente caras com HTML?
Nós fizemos um pouco seção e também na sala de aula.
Decente?
>> Então, assim como um resumo, HTML é toda sobre ter
tags ou elementos que contam a computador como colocar a página web.
Portanto, este h1 aqui-- começar h1, Bem-vindo para Yalp !, final h1-- diz ao computador,
desenhar um grande cabeceamento lo diz: Bem-vindo ao Yalp!
lá dentro.
Temos também formas.
Podemos entradas como esta, entradas de texto, o que tornará como caixas de texto
você escrever.
Você também tem botões.
Você ganha um botão agradável, clickable.
Ele não faz nada direito agora, mas você tem um botão.
Você pode ter divs, ou divisórias, a quebrar a sua página em vários grupos.
>> Você pode ter parágrafos, você tem botões.
Se você tiver parágrafos, em seguida, você tem listas não ordenadas, ul,
e listas de dentro que, li.
Então, essas são o básico blocos de construção de uma página web.
E, de fato, muito bonito cada site que você veja
vai ser construído usando as mesmas ferramentas.
Claro, nem todos eles olhar este mau porque nós somos
vai combiná-lo um pouco.
Então, vamos este HTML velho chato e início transformando-a no belo site
que acabamos de ver um par de minutos atrás.
>> Então, vamos começar muito simples.
Então nós temos este botão aqui.
Em Bootstrap, como vimos, podemos tem um botão agradável, bonito, azul.
E isso não é feito, fazendo CSS personalizado.
Não há nenhuma costume CSS aqui.
Isso é feito através da adição de aulas aos seus elementos HTML.
Se você já tentou de classes, ou hrefs, ou âncoras, ou type = "text" para Insumos
Elementos HTML pode ter estes atributos.
Eles podem ter informações adicionais que você pode lhes dar.
>> E assim, no presente caso, classes são o atributo.
Então, você escreveria, classe botão = algo dentro de strings.
E esse atributo vai contar a computador, isto não é nenhuma tecla, idade.
É um botão que está em esta classe de botões.
E assim Bootstrap, se você lhe der um certo estilo em seu elemento,
ele vai chamar-lo de determinada maneira.
Então eu escrevo "btn btn-primário.
btn ser uma abreviatura de botão.
Você vai notar que agora meu botão feio virou
em um botão agradável, bonito, azul.
Parece muito bom quando nós clique nele.
>> E então o que acontece é que temos o btn classe ea classe btn-primário
no nosso elemento.
E Bootstrap vai entrar e dizer: OK, I saber que existem essas duas classes.
Qualquer elemento que tem estes dois aulas devem ser elaborados como este.
Então, isso é o núcleo de como você anexar estilos para elementos em Bootstrap.
Você só anexar aulas para eles e ele vai pesar-lo como lhe aprouver.
Então, aqui está outro exemplo.
Na entrada, podemos adicionar a class = "-controle de formulário".
E eu vou mostrar em breve, onde pode descobrir o que as classes
estão disponíveis de cada tipo de elemento.
Mas a classe que acabamos Adicionado agradáveis, tem cantos arredondados,
ele tem bom preenchimento, ele tem um agradável, brilho azul a ele.
>> Nós também pode ir para esta forma.
E class = "form-in-line", o que tornará nosso formulário, como você pode imaginar, inline.
Então, ele está olhando um pouco mais como o que tivemos antes já.
Então, antes de ir para o estilo do resto do a página, dúvidas sobre o que nós
fez?
Nós, aulas apenas anexados aos nossos vários elementos.
E eu vou te mostrar mais tarde como você pode descobrir o que estão disponíveis classes.
Eu prendi classes que têm certos estilos.
E isso diz ao navegador como layout da página usando
Fornecidas estilos de bootstrap.
Quaisquer perguntas da platéia?
>> Bom até agora?
Frio.
Um monte de desafios com Bootstrap é apenas
saber o que os componentes estão disponíveis e como você usá-los.
E isso é tudo aprendido com experiência e também
através da leitura da documentação, que nós vamos falar sobre em breve.
Então nós temos esta div.
É apenas um, coisa velha chata.
Queremos enfatizar isso de alguma forma.
Assim, em Bootstrap, existem monte de componentes disponíveis.
E este é getbootstrap.com.
É uma referência muito útil.
Ele contém coisas como-- aqui está como você fazer um botão.
E você pode fazer barras de navegação, você pode etiquetas, você pode progredir bares,
você pode fazer grupos de listas.
Basicamente, é todos os tipos de que você pode ver uma página web.
>> Aqui está um que vamos tentar agora.
É chamado de painel.
Se você já usa o Google Agora, eles têm cartões.
Ou qualquer dispositivo Android tem cartões.
Eles têm pequenas caixas brancas que tem coisas dentro dele.
E assim nós vamos tentar e fazer que nós mesmos aqui, usando uma coisa
chamado um painel.
Então, se eu prendo class = "painel painel-default "para a nossa div externa,
em seguida, damos uma classe div = - vamos basta verificar essa documentação.
div class = "painel-título" e então div class = "painéis de corpo".
Mais uma vez, não se preocupe com memorizar este código.
Ele estará disponível online.
>> Então nós fizemos isso e agora nossa chato, velho div transformou em este agradável, pequeno cartão.
Ele tem nice preenchimento, ele tem fronteiras, destaca-
a partir do resto da página, que é muito legal.
Então, vamos entrar e alterar esta Obter instruções de botão para uma boa aparência.
Quem na platéia quer dizer me o que eu posso fazer para o botão
para torná-la agradável usando Bootstrap?
Sim?
>> AUDIÊNCIA: Poderíamos acrescentar uma classe.
E nós poderíamos fazer class = "btn btn-primário".
Neel Mehta,: Sim.
Há um monte de outras cores disponíveis para buttons--
ou para qualquer coisa, para essa matéria.
Podemos fazer btn-perigo e torná-lo vermelho.
Aí vamos nós.
Podemos fazer btn-sucesso para torná-lo verde.
Podemos fazer btn-info-- há um grupo de coisas que estão disponíveis para você.
Então, eu tenho pouco desafio para você agora.
Portanto, não há mais uma coisa que eu não deixaram un-denominado.
Este restaurantes de topo.
>> E nós queremos usar uma coisa chamou um grupo de lista para denominá-lo.
Então o meu desafio para você é ir para getbootstrap.com--
Eu vou puxá-lo até aqui.
getboostrap.com.
Ir para getbootstrap.com, encontrar o seção onde eles vão sobre grupos lista.
E você vai ver aqui um exemplo e as classes corretas
que você pode usar para fazer o seu listas para esses grupos lista agradáveis.
Estes são trabalhados exemplos de exemplos de código, o que
código que você usa, o que o código HTML que você usa, e que isso gera.
>> Então, meu desafio para você-- ir em getbootstrap.com,
se você está aqui ou em casa, e para tentar adicionar estilos para este ul
para torná-la agradável.
E usar um estilo de grupo lista.
Você quer ter um par de minutos, e procurar a documentação,
tentar isso vocês mesmos?
Porque, como você está fazendo desenvolvimento web, você vai perceber um monte de seu trabalho
vai estar lendo esta documentação.
Então, eu acho que é bom para se familiarizar com a forma de ler a documentação,
como descobrir o que há de onde, o código exemplos que você pode usar,
o que você pode aproveitar.
>> Então, novamente, getbootstrap.com, vá para a guia Componentes,
e, em seguida, desloque-se para lista de grupos.
E você vai ver exemplos de código que você pode usar para fazer o seu HTML que se encaixam.
Então, tome um par de minutos e tentar explorá-lo você mesmo,
se você está aqui ou em casa.
Se você está em casa, pausar o vídeo, talvez, e experimentá-lo sozinho.
Se você está aqui, se você vai para o nosso website-- se você atualizar a página,
você vai ver isso lá.
Este mesmo código é apenas adicionando novos estilos bem ali.
Portanto, tome alguns minutos.
Deixe-me saber quando você estiver se sentindo bem sobre ele ou quando você está totalmente perdido.
Parece bom?
Frio.
Breve reservada para aqueles de vocês em casa, enquanto estamos esperando,
se você ir no site do GitHub que eu colocar um par de lâminas atrás,
para o início do vídeo, Eu tenho um repo GitHub, repositório,
para essa conversa.
Todos esses exemplos de código que nós estaremos falando são armazenados aqui.
Então, se você ir para a desafiar-1.html, este é todo o código que temos agora
no nosso CodePen.
Assim, você pode ir em frente e copiar este, e colá-lo em seu próprio CodePen.
E dessa forma, você pode manter-se com o que estamos fazendo aqui.
Então esta página aberta, assim como nós navegar pelo resto do seminário.
Mais uma vez, você quer olhar como o que você ver para baixo na parte inferior da sua tela
há.
Sentindo-se bem?
Sólido.
Vamos esperar para todo mundo acabar com o que eles estão fazendo.
>> Sim?
>> AUDIÊNCIA: Suponha que eu queria bootstrap para usar em casa--
Neel Mehta,: Sim.
AUDIÊNCIA: Eu vejo, no site, a página Introdução.
Eles me dão as opções Bootstrap, código fonte, ou Sass.
Qual destes que eu quero?
>> Neel Mehta,: Sim.
Então a questão é, como você começa começou a usar Bootstrap por nós mesmos?
Ele só acontece de magicamente trabalhar aqui.
Então, se temos tempo no o fim do seminário,
Eu vou te mostrar como você pode obtê-lo em sua própria página web.
Como aqui, eu realmente colocar em algumas configurações que
vai tê-lo automaticamente carregado, mas eu vou
mostrar-lhe para fazê-lo a partir de arranhar em suas próprias páginas web.
>> AUDIÊNCIA: Obrigado.
>> Neel Mehta,: Sim.
Boa pergunta.
Sentindo-se bem?
Sentindo-se bem?
Frio.
Então, quem quer me dizer como eles fizeram essa coisa boa aparência e Boostrappy?
Qual é a primeira classe somarmos ao ul?
AUDIÊNCIA: class = "lista-grupo".
Neel Mehta,: Sim. list-grupo.
E então o que é que vamos anexar ao lis?
Alguém?
AUDIÊNCIA: E então, depois que, class = "lista-group-ponto".
>> Neel Mehta,: Sim.
>> AUDIÊNCIA: E é a mesmo para a próxima.
>> Neel Mehta,: li class = "lista-group-ponto".
Ai está.
Temos o nosso grupo agradável lista, exatamente como esperávamos.
Então lá vai.
Em 10 minutos, temos feito este chato, velho Yalp! página
olhar agradável e profissional.
E isso é apenas o começo.
Portanto, agora que você sente bem sobre isso, vamos
basta ir em frente e falar sobre mais um par de componentes que
pode vir a calhar como você vá em toda a sua aventura.
>> Claro, há muita coisa que aqui.
E agora que você já aprendeu como fazer grupos lista,
você pode muito bem ensinar yourself como fazer qualquer um destes.
Mas, é claro, vamos apenas tentar e fazer mais um par de nós mesmos,
só assim você ter uma idéia de como você pode usá-los.
Eu só estou indo para ir para este exemplo aqui.
Novamente, o código que acabou de colar aqui está disponível aqui.
Portanto, sinta-se livre para puxá-lo para cima.
>> Então, nós já passou um par destes exemplos.
Então nós temos botões, que Já vimos como fazer.
Nós podemos fazer botões maior.
Por botão class-- vai, btn btn-lg e btn-default torna branco.
Então, isso faz com que o nosso botão maior do que poderia ser.
Ele pode vir a calhar, se você tiver grande botão ou algo apresentar.
Vimos o exemplo do grupo lista, vimos o exemplo de formulário.
>> Um aspecto muito importante é ícones.
E os ícones são uma maneira para você adicionar coisas interessantes, como cheque
marcas ou sinais de adição ou amigo ícones, ou ícones de reinício,
ou o que quer para o seu aplicativo web.
Então, novamente, se nós para aqui, os componentes, glyphicons,
são os ícones disponíveis para Bootstrap.
Há uma exaustiva lista de todos os aqui.
Portanto, apenas como exemplo, vamos tentar adicionar um.
>> Assim como o Facebook, estamos a tentar ter um botão Adicionar amigo.
Vamos primeiro adicionar algum estilo.
classe de botão = "btn btn-sucesso".
E lá vamos nós.
Vamos adicionar um ícone aqui.
O ícone, você acha que, pode fazer sentido para colocar aqui?
Você provavelmente já viu em algumas páginas da web ou qualquer outra coisa,
mas o que é um exemplo de um ícone que pode ir bem dentro deste botão?
Sinta-se livre para navegar neste ponto de vista, se você precisar de alguma inspiração.
Há um monte de útil aqueles disponíveis aqui.
Sim?
>> AUDIÊNCIA: Talvez o usuário glyphicon?
Neel Mehta,: OK.
Este.
Isso é muito bom.
Sim.
No Facebook, eu acho que ficaria um pouco assim.
Então aqui está como nós vamos sobre adicionar ícones para nossas páginas.
Nós só temos um span-- um período é uma recipiente neutro para alguma coisa.
A div é um recipiente para alguma coisa, uma extensão de um outro recipiente.
divs têm quebras de linha em torno deles, vãos não.
Portanto, há diferentes formas de Tendo em recipientes genéricos.
Como ele não faz sentido para colocá-lo dentro de um parágrafo ou qualquer coisa.
Temos que colocá-lo dentro de algo, porém,
por isso, basta colocar dentro de um palmo.
Então span class = glyphicon glyphicon pelo usuário "close span.
E agora temos a ícone dentro do botão.
>> Por isso, não parece inteiramente ao contrário o que você pode ver em facebook.com.
E por isso é bom que estes podem realmente ser colocado em qualquer lugar que você quiser.
Em suas barras de cabeçalho, em seus grupos lista.
Tanto faz.
Ele não tem de ser dentro de um botão.
Então, como um exemplo, eu posso colocar a mesma classe aqui.
"glyphicon glyphicon-user".
E parece exatamente o mesmo.
Então, essas icons-- você pode usar o espaço class = "glyphicon glyphicon-o que quer".
E isso vai deixar você adicionar ícones onde quiser.
E os ícones são uma muito importante parte de fazer um olhar website
profissional e bem feito.
Portanto, não exagere, mas é muitas vezes uma boa coisa para saber.
>> Painéis, novamente.
Eu só vou fazer isso de novo como uma recapitulação porque eles estão tipo de envolvido.
Você vai notar que, em transformando seu HTML normal,
site em um Bootstrap-afied local, você terá
para adicionar estrutura extra para o site.
Por exemplo, nós temos adicional divs aqui apenas porque aqueles
são necessários para fazer um painel.
Então, basta manter isso em mente que você vai ter que ter uma estrutura extra.
Assim, "painel-default painel".
Talvez seja painel-header.
Eu acho que é o painel-rubrica.
Sim.
Aí vamos nós.
Então, novamente, não é o nosso painel.
>> Só mais uma coisa que nós não cobria ainda, tabelas.
Mesas, por tipo aparência padrão de feio.
Como isso.
Mas tabelas são, é claro, uma parte muito importante
do que você vai fazer no desenvolvimento web.
Em Pset7, por exemplo, CS50 Finanças, que vai sair em breve,
você vai usar um monte de mesas.
E um monte de dev web usar um monte de tabelas para exibir informações,
como ações, ou pontuação, ou o que quer.
>> Então, denominando tabelas é realmente muito fácil.
Você adiciona a classe mesa à sua mesa.
E, eu me atrevo a dizer, parece muito bom.
Você pode fazer coisas extras, como "table table-listrado".
E você vai ver os resultados aqui.
Você pode fazer fronteira de tabela.
Há um monte de opções que você pode.
Mas, basicamente, a adição de um tabela, a tabela de classe,
vai fazer as suas tabelas olhar muito agradável.
Então, isso é um breve resumo de Alguns dos estilos mais importantes
e componentes que você vai precisa usar para Bootstrap.
Então eu acho que wraps a nossa bela parte.
Todas as perguntas agora sobre como para fazer seus sites bonita?
Como você pode usá-los componentes para a sua vantagem?
Sentindo-se bem?
Sim?
AUDIÊNCIA: Talvez isso é uma pergunta boba,
mas você pode usar Bootstrap na Wikipedia?
Se você estiver editando uma página da Wikipédia?
Neel Mehta,: Sim.
Portanto, a questão era, eu sou editando uma página da Wikipedia,
Eu posso incluir estilos Bootstrap lá?
>> AUDIÊNCIA: Sim.
>> Neel Mehta,: E assim é Bootstrap basicamente uma folha grande estilo CSS.
A folha de estilo CSS apenas diz, sempre que Eu tenho essa classe, anexar esses estilos.
Assim, a folha de estilo CSS para Bootstrap vai ser algo como .btn,
a classe botão, terá como um fronteira canto arredondado ou o que quer.
Então, basicamente, o Bootstrap apenas um monte de classes e um monte de estilos
especificada para essas classes.
Então, enquanto você tem que CSS, esta lista de regras na sua página,
você vai ter o estilo Bootstrap.
Isto é, é claro, depende tendo os estilos Bootstrap em sua página
começar com.
>> E assim, na Wikipedia, você provavelmente não poderia
fazer isso porque Wikipedia não tem Bootstrap nele.
Mas se ele tinha Bootstrap, você provavelmente poderia fazer isso.
E se você quiser, você pode incluí-lo, mas que podem
quebrar o layout existente da página.
Mas pergunta muito boa.
Você pode usar Bootstrap onde quer que se inscreve,
mas não é construído em por padrão.
>> AUDIÊNCIA: Obrigado.
>> Neel Mehta,: Sim.
Mais alguma pergunta?
Sim.
Então, se você está aqui ou em casa, basta lembrar getboostrap.com-- novamente,
getboostrap.com-- é seu amigo.
Sempre que você está usando Bootstrap, isso vai lhe dar
instruções sobre como chegar começou, como usar componentes.
Há algum JavaScript legal Os plug-ins que não vamos passar por cima aqui,
mas eles são vale a pena conferir também.
Portanto, este é o seu amigo.
É apenas importante para obter usado para como usar isso.
>> Então, vamos conversar um pouco sobre fazendo sites responsivos.
Então, como eu disse antes, as pessoas costumavam seus laptops, eles usam seus telefones.
E como você pode imaginar, este é um tamanho de tela muito diferente do que isso.
E assim o mesmo site que parece ser bom no meu telefone
não vai ter uma boa aparência, necessariamente, em um computador.
Então, o que você tem a fazer é fazer o seu site se adaptar.
Ele tem de se adaptar às várias tamanhos de tela que ele está ligado.
>> Ele tem a dizer, eu sei que estou em um computador, um laptop grande, eu deveria expandir.
Eu sei que estou em um telefone, eu deveria encolher.
E assim Bootstrap oferece alguns muito, muito úteis ferramentas para fazer isso.
Então Bootstrap permite que você quebra um site em 12 colunas.
Você pode fazer linhas e tem 12 colunas.
E você pode particionar aqueles que quiser.
Você pode ter um, grande coisa, que é de 12 colunas de largura.
Você pode ter duas coisas que são cada uma de seis.
Você pode fazer uma coisa que é quatro, um que é dois, ou um que é seis.
Você pode fazer três, três, três, três.
Você pode fazer o que quer quebra que você deseja.
>> Então, talvez sua página web precisa ter um coluna da esquerda que é um terço da largura.
Assim que seria quatro colunas de largura e o resto da página
seria oito colunas de largura.
Portanto, este é um exemplo.
Vamos puxar para cima um outro exemplo.
>> AUDIÊNCIA: Será que ela sempre tem que ser um empate?
Poderia ser um sete, cinco divisão?
>> Neel Mehta,: Sim.
Pode ser sete, cinco.
Sim.
Enquanto ele adiciona a 12, está tudo bem.
Então, vamos voltar aqui.
Mais uma vez, o código que é aqui também está disponível aqui,
sob exemplo responsivo.
Então, eu só parou alguns exemplo de código responsivo aqui.
Então você fazer isso usando uma coisa chamada linha.
Row é apenas outra classe.
É outro estilo que você adicionar em seu divs para torná-los seus próprios componentes.
>> Então você diz, div class = "linha" para fazer uma linha,
dar-se 12 colunas de espaço.
E então você coloca colunas dentro disso.
Então aqui nós COL-xs-6.
Não se preocupe com as xs.
Falaremos em um segundo.
Mas, basicamente, temos um coisa que é seis de largura.
Nós o chamamos de esquerda.
E então essa é a caixa da esquerda aqui.
Nós temos uma coisa que é seis dos 12 colunas de largura.
E que um é à direita.
>> bem apenas dá marcas seu div preenchê-lo cinza.
Então, isso é apenas para que possamos ver que eles são distintos.
E assim este primeiro exemplo.
É um exemplo muito simples de como você usaria suas linhas e colunas aqui.
Você define uma linha usando class = "row".
E então você faz class = "col-XS-6" fazer metade, "col xs-6" para fazer a outra metade.
Aqui está um exemplo mais complicado.
Vamos olhar para o minúsculo, Enorme, A um descanso.
>> Nós podemos fazer minúsculos duas colunas de largura, nós podemos fazer enormes seis colunas de largura,
E o resto quatro colunas de largura.
Isso adiciona até 12.
E assim estes acabam abrangendo a largura da página.
Mais uma vez, temos uma fila do lado de fora.
Então nós temos div class = "col xs-2" e, em seguida, 6, e, em seguida, 4.
E que vai fornecer a estrutura para nós.
E assim podemos colocar qualquer diabos nós queremos aqui dentro.
Em vez de minúscula, podemos colocar um botão.
classe de botão = "btn btn-primário".
E assim notar que o nosso botão não ocupam toda a largura,
mas pelo menos ela é restrita que a quantidade de espaço.
>> Então, isso é tudo muito bem.
Assim, podemos agora quebrar a nossa web página em pedaços, largura sábio.
Nós podemos dizer que nós queremos ter uma esquerda coluna, e uma coluna da direita, e assim por diante.
Mas nós não ter ido mais como você torná-lo sensível.
E assim Bootstrap vamos fazer isso também.
Ele tem essas coisas chamadas pontos de interrupção.
Por isso, tem uma maneira de saber se você está em um laptop, você está em um tablet,
você está em um telefone horizontal, ou se você estiver em um telefone vertical.
Ele sabe o tamanho da tela.
E esta quebra em quatro Categorias-- grande ou lg, que é computadores portáteis, geralmente.
md ou médio, que é tablets.
sm, pequeno.
Ou xs, extra pequeno.
E assim, quando você especificar uma coluna, você diz,
ele deve ser de seis colunas de largura em um dispositivo pequeno extra.
É por isso que nós fizemos col xs-6.
Nós estamos dizendo que deveria ser seis das 12 colunas de largura
em um dispositivo pequeno extra.
E se é algo maior, vamos apenas padrão para usando o tamanho extra pequeno.
Se é qualquer coisa maior do que pequeno extra, vai ser seis de largura.
E para que possamos alavancar estes para fazer de nossas colunas
ocupam uma quantidade diferente de colunas com base no tamanho da tela.
Vamos para esse redimensionamento responsivo.
Então, nós temos nossas colunas.
E ele diz: "col-lg-6 col-xs-12".
Assim, dado o que você sabe até agora, o que você faz
acha que vai acontecer em uma tela grande?
Bem, é uma espécie de deu lugar, mas o que fazer
Você acha que ele vai olhar como em uma tela grande?
E por que isto?
>> AUDIÊNCIA: É que em uma tela grande, é
vai levar apenas porção do espaço cheio?
Como a metade dela, eu acho?
>> Neel Mehta,: Sim.
>> AUDIÊNCIA: E em menor tela, ele vai
para ocupar toda a tela, a 12.
Neel Mehta,: Sim.
Certo.
Assim, como exemplo, vamos basta olhar para baixo aqui.
Sim.
Então, em qualquer coisa que é ou lg bigger-- assim que meu computador acontece
para ser lg porque é muito wide-- ele vai fazer
lado a lado porque é col-lg-6.
Então, porque é em grande, torna- seis colunas de largura e seis colunas de largura.
Vamos ver o que acontece se eu fazer isso em um menor.
Eu só vou para a tela full-un isso.
E eu vou diminuir o ecrã.
Eu estou indo para diminuir o ecrã, por isso, Parece que eu estou em um dispositivo menor.
Então, eu estou indo para reduzi-lo assim.
>> E pronto.
Ele agora é empilhado porque agora temos ido
de grande a-- esta é provavelmente um pequeno tamanho da tela extra.
E agora ele diz, OK, nós não somos em grande, estamos em terra pequeno extra.
Então, nós estamos indo para usar o pequeno tamanho extra.
E nós estamos indo para xs-12, xs-12.
Por isso, vai ser empilhadas.
E só perceber que há uma coisa chamada um ponto de interrupção.
Um ponto de interrupção é onde você fez a transição
de pequeno extra para pequenos, pequena a grande, e assim por diante.
>> Então, basta notar que, como eu deslize este para fora, eventualmente, você vai chegar ao ponto
onde eles vão saltar para estar lado a lado.
Ai está.
Portanto, há o ponto de interrupção logo ali.
Assim, podemos torná-lo ainda mais complicado.
Agora podemos dizer que estes as coisas devem ser quatro de largura.
Isto é, eles devem ocupam cerca de um terço
do discurso em muito grandes dispositivos.
Em um dispositivo médio, deve tomar até metade da tela, porque isso é MD-6.
Em um dispositivo muito pequeno, ele deve levar até 12.
E assim, este parece muito natural.
Vamos apenas tentar fazer isso por nós mesmos.
>> Então, em uma tela grande, eles são quatro de largura.
Reduzi-lo um pouco.
E eles são agora seis de largura.
Portanto, este é seis, seis, seis.
Reduzi-lo ainda mais e, em seguida, eles vão ser totalmente empilhados.
Portanto, esta, por exemplo, faz sentido se você está tendo cartões, como cartões de notícias,
Por exemplo, quando se é em uma tela muito grande,
tudo bem se você tem vários lado a lado porque todos iriam obter espaço suficiente.
Mas eles precisam ter espaço suficiente.
Então, em uma tela menor, que você gostaria de dar-lhes
mais espaço, proporcionalmente, da página.
>> Então, como um exemplo do mundo real, digamos que temos Twitter.
E nós temos a caixa de texto, então você pode tweet sobre o lado.
E nós temos uma lista de trending tópicos sobre o lado direito.
Então, em uma tela grande, deveríamos ter-lhes estar lado a lado,
para que você possa vê-los em um copo.
Mas em uma tela menor, devemos fazer 12 e 12,
de modo que os trending topics estão abaixo da área do tweet.
Porque a área de tweet é o coisa principal e em uma tela pequena,
os trending topics não fazer importa tanto.
E, assim, colocá-los logo abaixo, portanto, que ambos possam obter espaço suficiente.
Fazer sentido até agora?
>> AUDIÊNCIA: Sim.
>> Neel Mehta,: Sólido.
Então, isso é todos os exemplos que eu tenho aqui.
Vamos tentar e fazer um desafio.
Então, novamente, este é o desafio-2.html para aqueles de vocês acompanhando em casa.
Então, meu amigo, Mark Zuckerberg, veio-me no outro dia.
E ele é como, Neel, eu tenho ficou muito bom em web design.
Eu posso fazer o HTML.
Eu fiz este pequeno, nova edição para o Facebook.
Eu tenho uma nova idéia de como devemos estilo Facebook.
E aqui está.
Aqui mesmo.
Aqui está um código de exemplo.
Então, ele é chamado Fancybook.
>> Temos algumas atualizações de status.
Temos Nemo, Mike Kosowski, ***-- três atualizações de status.
E então nós temos uma lista de amigos on-line logo abaixo dela.
Então, ele fez sua lição de casa.
Ele sabe um pouco sobre Bootstrap, ele fez a exibição de lista,
ele fez um pouco de HTML.
Então, ele tem a página da web.
Mas ele é como, Neel, eu não entender projeto ágil em tudo.
Você tem especialistas que poderia me ajudar com isso?
E, felizmente, você é agora especialistas em design de responsivo.
>> Então, o que ele me disse foi que ele quer Fancybook para ficar assim.
Em um dispositivo muito pequeno, como um telefone, tudo
devem ser empilhados, como aqui.
Então você tem a linha do tempo antecipadamente, em cima, e, em seguida,
você deve ter a bar bate-papo na parte inferior.
Mas em um tablet ou um meio dispositivo, que deve ser a metade e metade,
como na linha do tempo deve ser metade ea lista de amigos de bate-papo
deve estar na outra metade.
>> Em seguida, em um laptop, a linha do tempo deve tomar-se três quartos
e, em seguida, o bate-papo de hedge deve pegar outro quarto.
E assim como ele é, Neel, eu tenho essa código aqui, mas não é sensível.
Ele precisa se comportar assim.
Então, meu desafio para você é dado este código aqui--
se você atualizar seu CodePens, você vai ver isso.
Ou se você apenas cole no código em desafio-2, você vai ver isso.
>> Aqui está este código exemplo.
Você verá alguns xxxs.
Eu quero que você mude os xxxs, de tal forma que linha do tempo e da lista de amigos
segue estas especificações aqui.
Não se preocupe com o que é dentro do cronograma para agora.
Nós vamos conseguir isso na próxima etapa.
Mas, por agora, vamos ver se obtemos essas coisas que dividi-la assim.
Então, isso faz sentido?
Então, se você está em casa, pausar o vídeo e tente
para fazer a sua página web olhar sensível como este.
Se você está aqui, tomar como dois, três minutos.
Sinta-se livre para conversar com um vizinho, e tentar, e corrigir o Sr. Zuckerberg de
problema responsivo design.
Se você tiver alguma dúvida, sinta-se livre para me informar.
Sentindo-se bem?
Feito?
Agradável.
>> AUDIÊNCIA: [inaudível].
Neel Mehta,: O quê?
>> AUDIÊNCIA: eu sou bom.
>> Neel Mehta,: Ah, bom.
Agradável.
AUDIÊNCIA: A coisa sobre o 12, que é que Bootstrap
trata um determinado espaço na tela como 12 unidades em todo e, em seguida, divide-se que?
Como funciona exatamente a proporcionando trabalho para isso?
>> Neel Mehta,: Sim.
Então a questão é, como faz o doseamento
trabalhar para Bootstrap, certo?
>> AUDIÊNCIA: Sim.
Neel Mehta,: Assim, sempre que você tem uma classe div = "linha",
não importa quão grande a tela é, Bootstrap lhe dará 12 unidades
do mesmo tamanho para assumir que grande tamanho.
Assim, em col 1, é sempre 8,33% do tamanho do ecrã,
se isso é esta ampla ou que é isso de largura.
E assim, naturalmente, sobre uma menor tela, cada coluna é menor.
Você ainda tem 12 colunas de largura, é um menor.
Então, cabe a você a certeza de que as coisas ocupam mais de coluna,
proporcionalmente, para compensar para que a falta de espaço.
Isso faz sentido?
>> AUDIÊNCIA: Sim.
Obrigado.
Neel Mehta,: Boa pergunta.
AUDIÊNCIA: Em uma grande tela, você pode ter
o cronograma levar até três quartos?
>> Neel Mehta,: Sim.
Neel Mehta,: Como são caras sentindo?
Boa?
Frio.
Então, vamos voltar.
E vamos tentar corrigir esta parte do site do Sr. Zuckerberg.
Assim, os prazos está aqui em cima, no o topo, ea lista de amigos
está na parte inferior.
E assim nós apenas precisamos de atribuir colunas, com dimensionamento proporcional,
em cada uma delas.
Portanto, este primeiro *** é para a linha do tempo.
O que fazer aulas vamos colocar aqui?
O que vocês colocar aqui?
Então lembre-se, em uma tela grande, ele precisa para ocupar três quartos da largura.
E então o que estilo lhe daria isso?
Em uma tela grande, três quartos da largura.
Que classe é que vamos usar lá?
AUDIÊNCIA: Então, nós estamos apenas vai ser edição que primeira instância de classe.
Neel Mehta,: Por agora.
Sim.
>> AUDIÊNCIA: Nós não estamos editando cada, característica individual de linha do tempo?
Neel Mehta,: Não agora, pelo menos.
Então, essa coisa toda é um bloco.
Nós estamos apenas mudando o concepção do bloco.
Então aqui nós COL-lg-9 porque é nove dos 12 grande em uma tela grande.
E, em seguida, sobre uma tela de suporte, quantas colunas devo começar?
AUDIÊNCIA: É suposto ser meio a meio.
Neel Mehta,: Certo.
Então, quantos é que?
>> AUDIÊNCIA: Então seis.
Neel Mehta,: Six.
E então pequeno extra deve ser-- se leva-se a toda a largura da linha,
quantos que deveria ser?
AUDIÊNCIA: 12.
Neel Mehta,: 12.
Sim.
E agora nós temos que alterar este demais,
de modo a ocupar o resto do espaço.
Então col-lg--
AUDIÊNCIA: Vai ocupar a tela inteira?
Neel Mehta,: Leva-se quarto da tela em um dispositivo grande,
como mostramos aqui.
>> AUDIÊNCIA: Três.
>> Neel Mehta,: Três.
E, em seguida, col-md-6 para tirar -se o resto do espaço.
col-xs-12.
Portanto, agora temos a linha do tempo ocupando três quartos
da página na tela grande e, em seguida, um quarto do lado.
E, em seguida, se o tamanho da tela para baixo, ele deve redimensionar conformidade.
Portanto, é empilhado agora, em uma tela muito pequena.
E se dimensionar-se um pouco, eles devem ser exatamente a metade e metade.
Então nós fizemos isso até agora.
Muito legal.
E por isso não vamos fazer o outra parte do desafio.
Você pode fazer isso sozinho.
Mas, basicamente, você tem que tentar fazer estes responsivo
bom-- como fazer a linha do tempo itens, eles próprios, responsivo.
Então, agora nós passamos por tudo que você precisa saber
sobre o lado sensível de Bootstrap.
Quaisquer dúvidas sobre responsivo projeto com Bootstrap
e como você pode fazer sobre isso?
Sim?
>> AUDIÊNCIA: É semelhante se tivemos um vídeo incorporado
e queríamos controlar a escala em que o foi-- vídeo
O tamanho do vídeo indo de laptop para o telefone.
Neel Mehta,: Sim.
Mais ou menos.
Você teria que dizer que o vídeo ocupam tanto espaço como tem dado,
que é um pouco irritante às vezes.
Mas a ideia do núcleo é o mesmo.
Um vídeo, como qualquer outro objeto em a página, como um botão ou o que quer,
desde que você use o colunas e as linhas,
você pode dar-lhe um certa quantidade de espaço.
E assim começá-lo para honrar essa é uma questão diferente porque, como YouTube
incorpora têm uma certa, o tamanho preferido.
Mas, teoricamente, em menos, ele iria trabalhar.
Frio?
>> AUDIÊNCIA: Suponho então, para uma imagem, não é, na verdade,
precisam de ter diferentes versões de a mesma imagem em tamanhos diferentes
para laptop contra iPhone?
A pergunta é sim, nós precisamos têm imagens que respondem bem.
E, de fato, você pode fazer isso.
Eu acho que é no CSS.
Mas Bootstrap permite que você faça isso também.
Você pode ter imagens responsivos.
Você pode ter suas imagens redimensionar de acordo com o tamanho da página.
E há uma coisa muito nova HTML5, a nova versão do HTML,
e CSS3, o mais novo versão do CSS, que
vai deixar você solicitar imagens diferentes com base no tamanho da tela você está.
Normalmente, é bom o suficiente para apenas tem sua imagem apenas diminuir ou aumentar a
no entanto grande que precisa de ser.
Mas você pode, se você quiser para, tem um 32 por 32
para telas muito pequenas, e 64 por 64 para a tela grande,
e depois servir os seletivamente.
Você pode fazer isso.
É feito por algumas pessoas.
É ainda de ponta bonito.
Mas a resposta curta, images-- responsivo Bootstrap pode salvar o dia lá.
Frio?
>> AUDIÊNCIA: Obrigado.
>> Neel Mehta,: Então, vamos falar bem rápido sobre como
para conseguir isso em sua própria página web.
Vamos dizer que você quer fazer o seu próprio site usando Bootstrap.
E então vamos apenas atravessá-la juntos.
Vamos dizer que você faça apenas uma página HTML normal.
Sinta-se livre para seguir junto em seja qual for o seu editor favorito é.
Então, só temos alguma página HTML.
Nós podemos fazer! Doctype html.
Esta é também nossa página html,.
Nada de novo.
Nós fizemos isso antes.
Portanto, temos aqui o nosso HTML e podemos colocar coisas aqui dentro.
Nós podemos ter o nosso botão.
E como eu disse antes, este não está necessariamente indo para o trabalho.
Por que não este trabalho?
Por que não temos o nosso agradável botão, colorido?
>> AUDIÊNCIA: Porque nós não vinculá-lo para o projeto Bootstrap ou o arquivo?
Neel Mehta,: Sim.
Corrigir.
Porque é Bootstrap-- apenas um arquivo CSS fantasia.
É uma série de estilos que estão ligados a seus elementos.
Aqui nós dissemos que nós quer usar esses estilos.
Eu vou tamanho que até um pouco.
Temos dito que queremos usar esses estilos, mas nunca
disse que o que os estilos são.
E é isso que o seu pergunta de antes foi.
Essa é a resposta para isso.
Temos de encontrar uma maneira de obter os estilos e incluí-los em nossa página de alguma forma.
E vontade para Bootstrap nos mostrar como fazer isso.
>> Então, se você ir para o topo aqui, Introdução.
Há diferentes maneiras de baixar-lo.
Isso pode não fazer sentido necessariamente.
Bootstrap-- isso vai deixá- você pegar o próprio arquivo CSS.
E você incluiu em sua própria página.
Source Code é se você quiser hackear sobre isso por si mesmo.
Você não precisa realmente este.
Sass é uma língua que compila em CSS.
Pense nisso como um pré-processador.
Muito parecido com PHP é um pré-processador de HTML, Sass é um pré-processador para CSS.
Então, se você quiser fazê-lo Dessa forma, você pode fazer isso.
>> A maneira mais fácil é usar um CDN, ou rede de distribuição de conteúdo.
É um site que apenas serve-se uma cópia do Bootstrap
muito rápido para você incluir em sua própria página.
Então, aqui está um exemplo.
Vai dar-lhe esse elemento link.
Um elemento link informa ao navegador, tomar quaisquer arquivos são armazenados aqui
e incluí-lo em nossa página web.
E, neste caso, é o arquivo CSS Bootstrap.
Então vamos copiar a URL, ou esse texto, e nós vamos jogá-lo dentro
da nossa cabeça.
>> E eu não vou começar a página para isso, mas você pode confiar que isso funciona.
O link vai te dar o CSS.
Incluí-lo em seu página e, em seguida, você será
capaz de usar todo o Bootstrap classes que você conhece e ama.
Se você quiser mantê-lo localmente e tê-lo em seu próprio sistema de arquivos
em vez de ter que ir para a internet para agarrá-lo,
como se você quiser usar o local fora de linha,
você pode usar a opção Download.
Mas, na maior parte, usando o CDN é muito rápido, porque dessa forma,
ele é mantido atualizado para você também.
Você tem que atualizá-lo manualmente quer.
Faz sentido?
>> Então, um monte de ferramentas terá este construído por padrão. Em sua Pset7 e Pset8,
Eu acredito que é Bootstrap incluídos automaticamente.
E em CodePen, para exemplo, já é
incluído porque eu acrescentou adicionar essa definição.
Então, se você quiser brincar Com ele, você pode simplesmente ir em CodePen,
ou ir em sua ID, ou o que quer.
E você pode ser capaz de acesso Bootstrap lá,
mas não é sempre construído em, por padrão, para a web.
Faz sentido?
>> Sim.
apenas como um recap-- temos como cinco minutos do fim.
Mas, como uma repescagem, em novas páginas da web, você pode incluir Bootstrap como este.
E uma vez que você tê-lo incluído, você pode fazer todas as coisas divertidas aqui.
Você pode ir em, e você pode apenas ler o CSS, você pode adicionar alguns estilos frescos,
você pode ter componentes como os botões,
e as mesas, ea lista itens que mencionamos.
Há alguns plugins JavaScript legal, que você pode querer explorar.
Eles acrescentam alguns cool interatividade para a página web.
Como este faz um diálogo modal.
>> Portanto, há algumas coisas divertidas você pode fazer com Bootstrap.
Portanto, meu conselho para você é ir em frente e usá-lo em seus próprios projetos,
siga as instruções que apenas fiz a respeito de como obtê-lo,
e apenas ler o Bootstrap porque você vai aprender mais sobre o que fazer.
E assim temos ido mais, hoje, como usar
a documentação, o que o edifício blocos são, e como ela é conceitualmente.
Então agora o meu desafio para você é fazer um site usando Bootstrap.
Ir para os docs.
E usar as ferramentas que temos aprendido até agora para tentar analisá-los
e compreendê-los.
E usar esses estilos e ferramentas você vê que há em seu site.
E é apenas um grande, processo experimental.
>> Experimente um certo estilo.
Funciona?
Será que não é?
Tente colocar coisas juntos.
Veja o que acontece.
É muito mais uma auto- guiada, processo de descoberta.
Mas hoje, nós aprendemos a básico do básico do que é Bootstrap?
Por que isso funciona?
Como funciona?
Como é que vamos começar a usar que, em primeiro lugar?
E agora que você é ao longo do surto, você
deve ser capaz de fazê-lo bastante bem por si mesmo.
>> Então mais uma vez, todo o código que fizemos está aqui.
Então, se você quiser para obter uma escova em cima,
como, o que é uma fraude rápida folha para todos os estilos?
Você pode ir para esse exemplo aqui.
Temos alguns exemplos de estilos aqui.
Se você quiser experimentar o desafios novamente por si mesmo,
você pode experimentá-los aqui e confira as soluções.
Portanto, esta ligação será incluído nos slides, que
será enviado para você, é claro.
Mas também aqui em cima.
Você pode pausar o vídeo, se você quiser.
Toda a informação que você precisa é vai ser aqui mesmo, neste site.
Então, se alguém tiver alguma dúvida, nós podemos levá-los para os próximos dois minutos.
Caso contrário, obrigado a todos muito para ver.