Glossário do Bootstrap
Para fazer o download do bootstrap, copie o arquivo “bootstrap.min.css” para dentro da pasta “css” e o arquivo “bootstrap.min.js” para dentro da pasta “js”.
Copie também todos os arquivos que estão dentro da pasta “fonts” do bootsrap para a pasta “fonts” que você criou.
<nav class=”navbar navbar-default”>: Essa tag possui 2 classes: navbar: identifica a criação do menu, portanto é classe pai desse elemento e extremamente necessária e insubstituível. navbar-defaul:: aplica estilo à navbar. Essa classe pode ser alterada pela classe “navbar-inverse” conforme sua necessidade. A “navbar-inverse” apresenta um sistema de cores inversas a “navbar-default”.
<button class=”navbar-toggle”>: toggle (alternar)Esse elemento é o botão que aparece para que o menu possa ser visualizado, se o site for apresentado em resoluções menores.
<a class=”navbar-brand”>: O navbar-brand é o lugar onde o Logotipo deve ficar. Nessa classe existem configurações css que definem a visualização da logo nos dispositivos móveis. A tag <h1> pode ser inserida dentro desse elemento informando aos mecanismos de busca que o nome do site, na página index.html é o elemento mais importante, sendo necessárias algumas configurações css para modificar o estilo do h1.
<div class=”collapse navbar-collapse” > Aqui começa o menu. Tudo que estiver dentro desse elemento vai ser renderizado dentro do contexto do menu. Ao reduzir a tela do computador, ele compacta os elementos internos e esconde, sendo possível visualizar somente ao clicar no botão
<ul class=”nav navbar-nav”>: Aqui as 2 classes são necessárias pois iniciam a lista de links do menu superior.
<li class=”active”>: Informa o item de menu que está selecionado. A classe “active” mostra qual página está sendo visualizada.
<form class=”navbar-form navbar-left”>: Formulário de pesquisa. navbar-form: indica um formulário adaptado para a navbar; navbar-left: acrescenta um “float:left” ao elemento. Pode-se utilizar a classe “navbar-right” para aplicar um “float:right”.
<div class=”container”>: Elemento padrão do bootstrap sendo uma das classes mais utilizadas e importantes do framework. Ao usá-la cria-se um container com largura específica e que se adapta em relação a resolução do navegador. Essa classe limita a largura do site, e sua falta pode acarretar problemas no layout. Sempre que for criada uma nova área englobando as colunas, deve-se invocar essa classe. Lembrete: A classe “container” é chamada somente uma vez por área.
<div class=”row”>: Esse elemento também é padrão do bootstrap - bastante importante e está sempre junto com o “container”. A título de esclarecimento o “container” cria um quadrado imaginário em volta dos elementos e o “row”, que fica sempre dentro do “container”, divide esse “quadrado” em linhas.
Customizar Significado: personalização ou adaptação. Para modificar cores por exemplo: Crie um arquivo css procure as classes e ids dos componentes para estilizar e subscreva nesse arquivo o css desejado. Para alterar o padrão do nav-bar, pegar a classe: .navbar e proceder as modificações desejadas. Exemplo: .navbar{ background-color: #181818; } As classes e suas configurações podem ser encontradas no firebug do chrome ou firefox assim pega-se exatamente o css que o bootstrap criou para aquele elemento e modifica-se.
.sr-only Os leitores de tela terão problemas com suas formas, se não for incluido um rótulo para cada entrada. Para estas formas in-line, pode-se ocultar os rótulos usando o .sr-única classe. É importante ou pode ser removido? Funciona muito bem sem. É importante, não removê-lo. Deve-se sempre considerar os leitores de tela para fins de acessibilidade. O uso dessa classe vai esconder o elemento de qualquer maneira, por isso não deve aparecer uma diferença visual.
default (padrão). Exemplo: Ao criar um menu com bootstrap, ele por default, cria uma faixa preta em toda área do menu. Isso é padrão do framework. Para alterar essa cor:
Row As rows (linhas), no Bootstrap, definem as divisões horizontais do layout e devem ficar dentro do container, podendo ser aplicadas a qualquer tag que defina a estrutura, como o header e o footer. Exemplo: div com a classe .row
<div class"container"> <div class="row" > ... </div> </div >Lembrete: O layout pode ter quantas rows forem necessárias. E também é permitido colocar row dentro de row.
Columns As columns (colunas), no Bootstrap, definem as divisões verticais das rows (linhas) do layout. Estas colunas Columns) devem estar sempre dentro das rows, e são elas que definem os espaços na row para a colocação de itens visuais ou conteúdos que foram estipulados para o layout. Resumindo: no no Bootstrap, existem as linhas (rows) e as colunas (columns) para definir um layout. É, como uma tabela normal, só que usando divs com classes. Abaixo coluna (column) com os prefixos pré-definidos pelo Bootstrap:
<div class"container"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> </div>Neste exemplo, temos uma linha (.row) com duas colunas (.col-md-6). O número seis, no final de cada classe, define o tamanho que a coluna ocupa na linha. Assim, neste exemplo, teríamos a linha (row) dividida exatamente no meio por duas colunas, já que usamos o número seis. Os prefixos de colunas servem para indicar em quais tipos de tela a coluna vai se manter posicionada como no design principal. Os prefixos têm o seguinte padrão:Os asteriscos podem ser substituídos por um dos tamanhos da coluna que vai de (de 1 a 12). É bastante comum o uso do prefixo .col-md-* para os sites e web apps, já que mantém o formato principal em computadores e nos principais tablets. Nos celulares o conteúdo fica em uma única coluna (vertical), ou seja, “um embaixo do outro". Observe o funcionamento nesta imagem.
Para Celulares Para Tablets Para Desktops Para Telas Grandes .col-xs-* .col-sm-* .col-md-* .col-lg-*
Thumbnail Thumbnail ou miniatura é uma imagem reduzida de algum tipo de conteúdo - normalmente imagem (foto ou vídeo), mas pode ser de uma página de um texto, capa de revista/livro, etc.
Jumbotron Grande caixa para chamar atenção extra a alguns conteúdos ou informações especiais. Um componente de peso leve e flexível que pode, opcionalmente, estender toda a janela de exibição para mostrar o conteúdo chave do site. A jumbotron é exibida como uma caixa cinza com cantos arredondados. Ela também aumenta o tamanho da fonte do texto dentro dele. Use uma <div> elemento com classe .jumbotron para criar um telão. O exemplo a seguir coloca o título e o primeiro parágrafo dentro de um telão:
My first Bootstrap website!
This page will grow as we add more and more components from Bootstrap... (Esta página vai crescer à medida que acrescentamos mais e mais componentes de Bootstrap ...)
This is a paragraph.
This is another paragraph.
This is a paragraph.
Obs.: Todos os elementos podem ser customizados.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.