BOOTSTRAP

Iae pessoal hoje vamos ver um pouco do framework chamado BOOTSTRAP. Para iniciar primeiramente vamos saber o que é cada um.

O que é um framework?

• Um framework normalmente é um conjunto de bibliotecas que trabalham para conseguir executar uma operação maior.

O que seria o bootstrap?

• O bootstrap é um framework desenvolvido pelo twitter que tem como foco minimizar o trabalho na parte de front-end para os desenvolvedores à criar um site de característica responsiva (se adapta a qualquer aparelho) e que utiliza de tecnologias como css e javascrit.

Para que a gente utilize o bootstrap primeiramente precisaremos baixar ele, ele não é muito grande, consiste em pouquíssimos arquivos.

Para fazer o download dele clique aqui.

Nesse link você será direcionado para o site do bootstrap.

Clique em download e você será direcionado a essa página.

Baixe os arquivos clicando em Download Bootstrap. Você irá baixar os arquivos, eles irão vim compactados, o que você deve fazer é descompacta-los apenas.

Após descompactados você deverá entrar na pasta que surgiu, lá você deverá encontrar três pastas (CSS, FONTS, JS) nessas pastas se encontram os arquivos necessários para sua página web.

Para fazer teste com o bootstrap crie um arquivo (index.html) e contrua algo lá, qualquer coisa. Após colocar o que deseja lá, abra esse arquivo com o browser.

Observe como ficou sua página, após observado link ela com os arquivos "bootstrap.css" e o arquivo "bootstrap.js", eles ficam nas respactivas pastas CSS e JS. 

Caso tenha dúvida de como fazer o link, clique aqui. 

Exemplo:

Página sem BOOTSTRAP:

Com BOOTSTRAP: 

Nessa momento a sua página já se encontra como responsiva se adaptando a qualquer dispositivo.

Uma coisa que o BOOTSTRAP oferece são aplicações já prontas, como um menu, header, textfields, botões e etc.

Nessa mesma página vamos acrescentar um menu, o necessário para você adicionar um com o BOOTSTRAP é apenas ir na página onde você fez o download e ir em COMPONENTS.

Para ir direto para lá, clique aqui.

Nessa página você irá encontrar um menu do lado direito, lá você deverá clicar em NAVBAR.

 

Clicando lá, você será direcionado a parte sobre NAVBAR, nesse ponto você deverá encontrar isso aqui:

Para adicionar esse menu na sua página, é necessário apenas copiar e colar o arquivo "index.html", como ele está linkado com o BOOTSTRAP, você não deverá ter problemas.

Sua página ficará com ele mais ou menos assim:

Com isso seu menu esta pronto, basta apenas retirar o que não será necessário para você e acrescentar suas próprias funcionalidades. 

Tudo se baseá apenas com em ID e CLASS. Para entender melhor basta estudar mais a fundo o BOOTSTRAP.

Mudando o CLASS do menu (navbar) você irá ter esse menu de outra cor, apenas trocando:

<nav class="navbar navbar-default">

POR:

<nav class="navbar navbar-inverse">

Seu menu deverá ficar dessa forma:

Você pode ir adicionando muita coisa em sua página utilizando o BOOTSTRAP, eles também oferecem TEMPLATES de páginas para você ir praticando, terem uma base de como seguir.

Vlw Galera por hoje é isso, até a próxima.