Bem-vindo novamente nesta lição Eu vou mostrar-lhe como instalar o bootstrap em seus próprios aplicativos.
E então, uma vez que você fez isso, vou mostrar-lhe alguns dos princípios básicos importantes do uso do tom.
Então eu estou no get bootstrapped dot com apenas na página inicial e há um link aqui download bootstrap.
E não é realmente um link de download direto porque temos duas opções principais sobre como usar o bootstrap.
Podemos baixar os arquivos e vou fazer isso para começar.
Então podemos levar esses arquivos e adicioná-los ao nosso aplicativo antes de avançarmos.
Eu tenho uma equipe de pesquisa simples, vou arquivar que eu estou chamando de coisas básicas h DML m l.
E eu vou apenas adicionar um título e vamos adicionar apenas alguns elementos diferentes do bootstrap.
Depois de instalá-lo, não faremos nada abrangente, só o usaremos como um campo de
jogos para alguns dos componentes básicos do bootstrap.
OK, então comecemos por adicionar apenas um simples básico de bootstrap H-1 e
salvar.
E então vamos abrir isso no navegador.
Apenas mantenha isso por agora.
Agora, para instalar o bootstrap.
Eu baixei isso.
Então, se eu abrir esse arquivo que você poderia ver dentro daqui, existem alguns componentes diferentes.
Há um diretório C S S e dentro do diretório CCS há bastantes arquivos,
mas realmente há apenas um arquivo importante que é bootstrapped CSSA.
E este é realmente o mesmo arquivo aqui bootstrapped up minutos.
SS, exceto que a luta de minutos foi encolhida para ocupar menos espaço.
Portanto, esses dois são os arquivos importantes para realmente usar o bootstrap.
E este é um tema de bootstrap, todos esses três são usados ​​para ajudar a adicionar um tema personalizado ao bootstrap,
de modo que não importa tanto.
Tudo o que precisamos é o bootstrap Dotsie avaliar.
E começamos abrindo apenas para que você possa ver o que estamos trabalhando.
Este é o arquivo re-avaliado do bootstraps principal.
São apenas muitas aulas.
Se você olhar para cada linha de CSSA quase é um ponto de declaração de classe, simplesmente.
E então, o que podemos fazer é usar essas classes em vez de nossas aplicações.
Então, se quisermos ter um botão com texto branco e um fundo vermelho, vamos aplicar o perigo do botão
de ponto.
E é isso que isso está fazendo aqui.
Mas o perigo tem texto branco um fundo vermelho e uma borda avermelhada.
Então, vamos em frente e inclua isso em nosso aplicativo como qualquer outro arquivo CSSA.
Então, o que eu vou fazer é simplesmente arrastá-lo aqui para o mesmo diretório onde eu tenho minha equipe de estudo
básica e eu também poderia fazer o bootstrapped up minutos reavaliar no lugar deste.
Realmente não importa.
Tecnicamente, este carrega um pouco mais rápido, porque se eu abri-lo, você pode ver que é como uma linha gigante que todos
os espaços em branco foram removidos.
Então é mais fácil de carregar, mas vou usar essa versão mais longa apenas para que você possa ver
exatamente com o que estamos trabalhando.
Agora vamos entrar no nosso arquivo atual aqui vou fechar isso e vamos incluir o
bootstrapped CSX.
Assim, assim como qualquer outra folha de estilo, precisamos de uma etiqueta vinculada e o Tref é bootstrap dot C Ss
e, se salvarmos e estamos frescos, nossa página aqui notará uma pequena diferença.
Assista a fonte neste H-1.
Isso muda.
Agora temos o bootstrap instalado ou, pelo menos, o C Ss que acompanha o bootstrap e é tudo o que
precisamos por enquanto.
Nós não estaremos trabalhando com o javascript ainda não há outra opção
para instalar o bootstrap que eles realmente lhe dão no site Get bootstrap aqui.
Bootstrap CDN, podemos pegar este link aqui e adicioná-lo ao nosso código.
E é um link para uma versão hospedada desses mesmos arquivos.
Então, se abrimos isso no navegador e colemos isso, você pode ver que ele tem o conteúdo
do arquivo minimizado e ele está hospedado neste u r l para que possamos ter apenas um link para você e eu posso substituir isso.
Outro link.
Marque e cole que você é Ellen e eu vou comentar isso.
Por enquanto e volte e atualize.
E nada muda.
A única diferença é que, no primeiro caso, tivemos o arquivo baixado no
nosso computador que estava ligando e, no segundo caso, estamos vinculando um arquivo externo hospedado on-line.
Agora vamos aos documentos do bootstrap e comece a brincar ou a alguns desses componentes.
e vamos clicar em C Ss e só vou apontar algumas das peças mais importantes que usaremos.
Então, volte para obter bootstrap
Então, vamos começar simples com botões.
Se quisermos usar um botão, tudo o que temos a fazer é usar uma classe batida seguida de um tipo de botão que
esteja entre o padrão, o que nos dará um botão branco, mas também é a informação de acesso BAMNA primária da
VTAM.
Aviso de perigo e ligação e todos eles são estilo de forma ligeiramente diferente.
E é claro que podemos mudar essas cores por conta própria, mas vamos usar apenas
o construído uma vez para começar e ele também pode ver aqui.
Não precisamos usar apenas um elemento de botão, podemos usar uma marca de âncora com um botão ou uma entrada.
Então vamos tentar isso.
Olá, H-1.
Vamos apenas adicionar uma etiqueta de botão e essas tags de botão apenas digam clic em mim e apenas atualize a
página agora e dê uma olhada nisso.
Esse é um botão bastante feio.
Mas se nós vamos adicionar essa classe PTEN e, em seguida, entre vamos fazer sucesso e salvar, agora temos esse
incrível botão verde.
Então, é muito fácil conseguir alguns estilos básicos.
E vamos voltar e vou lhe mostrar algumas outras coisas sobre botões que são tamanhos diferentes que
podemos usar também e é muito fácil.
Nós só precisamos adicionar em qualquer botão grande e pequeno ou botão extra pequeno, então ele é testado após o sucesso do botão
e não precisa ir atrás dele.
Não importa a ordem das aulas, mas vou fazer isso depois da DTN e vamos fazer extra pequeno e
atualizar sua página.
Aqui vamos nós.
Eu vou mover isso agora e vamos adicionar mais alguns botões, mas esse será uma marca de âncora
e isso será em uma etiqueta ou teremos H. F. é igual a barra diagonal de barra diagonal que
lê todos os dias, obtenha boot com ponto com e, em seguida, o texto apenas diga documentos de inicialização.
Então, faça isso um pouco maior e, em seguida, adicionei na classe na classe precisa igualar
PTEN e vamos fazer entre as informações de Desch e faremos o grande PTEN dash Elgie e atualizaremos.
Agora temos dois botões.
Um é um elemento de botão real.
Outro tem uma marca de âncora e, se eu clicar nisso, você pode vê-lo como uma marca de âncora.
Então, já no primeiro minuto de usar o bootstrap, conseguimos obter botões decentes.
Teria tomado 10 a 15 linhas de CSSA por conta própria para replicar.
Voltemos agora.
Faça novamente esta tela cheia e eu vou mostrar algumas outras coisas sobre os botões.
Então temos tamanhos.
Também temos estados diferentes em que podemos fazer um botão aparecer como se estivesse ativo e,
para isso, apenas adicionamos a classe ativa.
que isso apareça bem no lançamento da tela que este parece estar ativo.
Então, se tentarmos isso agora, vamos adicionar um botão A, então vou duplicar o nosso pequeno botão miniatura, clique em Me três vezes e
no último no meio da classe ativo e atualizado e você pode ver com sorte
Vamos voltar e também podemos desativar um botão adicionando esse atributo.
Desabilitado é desativado.
Vamos voltar e vamos desativar a última atualização.
E agora este botão está desativado.
Nós conseguimos esse pequeno ícone agradável.
Não tem um efeito hover onde muda de cor mais.
É claramente um botão desativado.
Grande ultima coisa que vou mostrar para que possamos mudar as cores novamente, então a noite de perigo do botão nos
dá essa laranja avermelhada e você pode ver todas as cores aqui.
E é claro que você poderia mudar esses por substituir os estilos para que você pudesse fazer algo assim ao invés
de fazer outra folha de estilo.
Eu vou fazer isso aqui por enquanto.
Então, vamos fazer uma linha e também gostar de beleza e perigo.
assim que você pode entrar e substituir os estilos para que você não precise Use o que o bootstrap dá para você fora da caixa.
Podemos mudar a cor para ser laranja e agora pode ser para pôr em perigo a laranja do Texas e,
se eu realmente queria mudar o fundo, eu poderia fazer o fundo é laranja e é
E a maioria dos lugares não.
OK, então são botões e é tudo o que vou fazer neste vídeo.
Eu só queria dar-lhe um gosto muito rápido de como o bootstrap funciona.
Este padrão de adição de classes a elementos existentes e aquelas classes está definido naquele bootstrap que o
arquivo CSSA no próximo vídeo, eu vou destacar algumas das outras peças importantes
que acompanham o bootstrap incluindo formulários e insumos.