Bem-vindo novamente nesta unidade, vou apresentar uma nova ferramenta chamada Bootstrap e estou na página
inicial do bootstrap, obtenha o bootcom pontoado.
E eu só quero levar alguns minutos neste vídeo de introdução para explicar o que é o bootstrap e por que
o estamos usando.
E então também para mostrar alguns exemplos de sites que usam o bootstrap.
Então, vamos começar apenas pela leitura oficial do bootstrap.
Bootstrap é o mais popular TMLC SS no framework javascript para o desenvolvimento de primeiros
projetos móveis sensíveis na Web.
Vamos acabar com isso um pouco.
O Bootstrap é extremamente popular.
Na verdade, é o repositório mais destacado e bifurcado no hub, o que, basicamente, significa que ele tem a
maioria das pessoas que o utilizam, a maioria das pessoas favorece adicioná-lo para obter ajuda e tudo isso bootstrap é,
na verdade, um único arquivo de sucesso e um único arquivo de javascript .
Agora, há muitos C S S e muitos javascript nesses arquivos, mas são apenas dois arquivos
e podemos incluí-los em nossa própria aplicação.
que são sensíveis e nos ajudam a fazê-los rapidamente sem ter que escrever uma tonelada de nosso próprio código.
Basicamente, nós levamos o código de outra pessoa e, da Bootstrap, adicionamos a nossa própria aplicação e nos ajuda
a criar sites de boa aparência
Existem dois motivos principais que eu estou mostrando a você neste curso.
O primeiro é que é muito popular.
Muitos lugares usam isso.
Muitas empresas, muitos desenvolvedores usam isso e vale a pena conhecer.
Mas o segundo é que isso nos ajudará a fazer bons sites da Web bastante rápido neste curso.
conter o bootstrap e podemos fazer as coisas em 10 15 minutos e ficamos muito bons.
Então, quando estamos aprendendo de volta e coisas quando nos concentramos em Node e expressamos e Mongo e mangustão
e joelho profundo e toda essa complexa volta e lógica ainda podemos fazer algo que parece ser bom sem ter
que dedicar uma hora ou duas horas Vídeo para desenhar algo que possamos
A próxima coisa que vou fazer é dar-lhe um rápido passeio pelas docas, mas o bootstrap tem uma
boa documentação boa documentação de bons exemplos e eles realmente usam bootstrap neste site, o que faz sentido.
Então, vamos começar clicando em C Ss e isso é mencionado bootstrap é apenas um único arquivo
CSSA um único arquivo javascript dentro desse arquivo CSSA.
Há um monte de coisas que nós obtemos gratuitamente.
Então, vamos dar uma olhada nos botões.
Então, se queremos fazer um botão e temos bootstrapped incluído em nosso aplicativo, podemos adicionar
esta classe à classe é, na verdade, Beati e PTEN padrão e nós obtemos esses botões.
Podemos fazer cores diferentes.
Vamos dar uma olhada nos formulários.
Nós recebemos boas entradas aqui.
E também é importante notar que tudo é receptivo no site para que você possa ver as
coisas que respondem à largura da tela.
Também temos diferentes tipos de formas.
Você pode combinar as diferentes peças.
Então, eles estão usando um botão com um formulário.
Então, é como as peças do Lego bootstrap e muitas maneiras é ter sido de peças do
Lego que você pode juntar e adicionar ao seu site conforme entender.
Nós iremos sobre a maioria desses componentes.
A maioria dessas grandes peças, uma vez que começamos a trabalhar com ela e escrevemos o código bootstrap.
os componentes contêm alguns dos maiores pedaços de bootstrap que podemos usar e que inclui coisas como barras de navegação.
Então, por enquanto, vamos seguir em frente e quando mostrar a próxima aba, que é um componente,
E este é provavelmente um dos aspectos mais populares do bootstrap que muitos e muitos sites usam como você
pode ver com um pouco de código.
Parece muito, mas asseguro-lhe que é muito menos do que seria se estivéssemos escrevendo um bar NAV
a partir do zero.
E isso vem com forma de drop downs e existem vários tipos de barras de cores diferentes, algumas que
são fixadas no topo da página, algumas que se deslocam.
o Jumbotron, que é uma maneira de exibir algum conteúdo nas barras de progresso do seu site.
Existem outros componentes, como
E todos eles trazem bootstrap.
Então, você pode estar se perguntando agora se o bootstrap chegar a todas essas peças e eles já estão com
estilo, o que cada site que usa o bootstrap parecia o mesmo.
E a resposta é sim e não.
Depende de como o site usa bootstrap.
empresa ou um projeto que usa bootstrap bem dificulta dizer que eles realmente estão usando o bootstrap
porque usam esses componentes principais e então você pode entrar e escrever seus próprios estilos no topo.
Eu argumentaria que uma
Altere as cores altere as fontes altere alguns dos efeitos de deslocamento.
Você não precisa usar exatamente as mesmas cores e tudo o que vem com o bootstrap, mas
isso não significa que haja algo intrinsecamente ruim no uso dos estilos Bootstrap incorporados.
E nós definitivamente estaremos fazendo as duas coisas.
Então, quando estamos fazendo um site e um foco não está realmente no front-end, queremos apenas
fazer algo que seja apresentável rapidamente.
Basicamente, o protótipo front-end usará o bootstrap e não modificaremos muitas peças.
Mas então, se estamos trabalhando em algo um pouco maior, algo que não
queremos parecer, usamos o bootstrap sem mudar nada, então entraremos e adicionaremos alguns de nossos próprios estilos, basicamente, adicione
um casaco de tinta spray em cima do bootstrap.
A próxima coisa que eu quero fazer é mostrar-lhe alguns dos sites que são construídos com bootstrap e
Buddh trip realmente tem um site oficial onde eles mostram alguns desses sites.
Se você clicar na Expo eu já abrir.
Você pode ver que eles mostram bonito e inspirador usa um bootstrap para que possamos abrir alguns
destes para abri-los e novas guias.
E estes são apenas os mais recentes.
Há centenas neste site.
Você pode ver toneladas e toneladas deles e você pode manter a rolagem e rolagem e então podemos ir para alguns
mais velhos e há muitos sites diferentes que estão usando isso.
E eles realmente não parecem todos iguais.
Sim, talvez muitos deles tenham uma barra de navegação.
Talvez muitos deles tenham esse layout de imagem grande em tela cheia, mas isso é mais uma tendência de
design do que algo que o arrastou para ser puramente responsável.
Então, vamos dar uma olhada em alguns desses.
Este é Tim criativo, que é uma empresa que faz modelos de site na realidade.
E você pode ver que temos essa boa grade de imagens.
É muito receptivo.
Se eu encolher isso, pegamos nosso pequeno bar de navegação aqui.
Então, este é um componente de bootstrap da maneira que tudo está definido nesta grade.
O Bootstrap é parcialmente responsável por isso, mas você também pode ver que eles não estão usando
os botões padrão Bootstrap incorporados.
Eles mudaram.
As coisas parecem diferentes.
Então, eu acho que esse é um ótimo uso do bootstrap, que é um site realmente agradável.
Ele funciona bem e ele usa o bootstrap, mas não depende do bootstrap 100%.
Vejamos um ou dois mais.
Então este é chamado Indicus ou índices algo assim.
Aparentemente eles projetam e criam produtos digitais que as pessoas gostam de usar.
Então, vamos rolar para baixo aqui.
Dê uma olhada no que temos.
Então, há algum conteúdo que provavelmente foi construído com o sistema de grade de inicialização que
ajuda a organizar e lay out lay out como eu mencionei anteriormente é notoriamente difícil em Pearcey SS.
Está ficando melhor, mas o bootstrap é realmente muito útil para nos ajudar a resolver as coisas na nossa aplicação.
pequeno rodapé, há um bar de navegação aqui, então é muito divertido ir ao bootstrap Expo levar algum tempo para explorar
alguns dos projetos que costumavam inicializar e ver como eles o usam e todas as diferentes maneiras
pelas quais as empresas estão modificando Ele adiciona em suas próprias fontes suas próprias cores e realmente descobre quais
são os principais componentes que muitos e muitos sites estão usando e por que decidir usar o bootstrap.
E temos um
E na minha opinião, realmente se resume ao sistema de grade que estaremos dedicando um vídeo
nesta unidade às barras de navegação e a capacidade de resposta de tudo.
ESTÁ BEM.
Então, para encerrar, vou mostrar-lhe um site simples que faremos.
Esta é a nossa inicialização chamada petting pesada.
Isso ajuda você a encontrar sua alma gemela felina perfeita e usa bootstrap.
Você pode ver que temos um bar de navegação aqui, assim como nós assinamos os botões Morgan.
Nós recebemos esses pequenos ícones, então temos nosso texto aqui e a pequena linha de tag e, em seguida, o nosso botão.
E então, enquanto eu redimensiono as coisas, tudo é sensível, você pode ver as coisas estão se movendo em torno de mudar.
E, o mais importante, conseguimos esse pequeno hambúrguer e temos uma barra de navegação amigável para dispositivos móveis.
Então, no final desta unidade, estaremos trabalhando na criação dessa página de destino de inicialização falsa que
combina pessoas e animais de estimação em relacionamentos românticos