Bootstrap

O Bootstrap é um framework focado no desenvolvimento front-end responsivo mobile-first, utiliza grids que podem ser montados de maneira prática e rápida, com nomenclaturas de classes bem intuitivas.

Grids

Como disse antes, a nomenclatura dos elementos são bem intuitivas no Bootstrap 3, ficando bem fácil de montar o grid de cada tela.

Um grid de 12 colunas, que pode ser dividido conforme a necessidade, se você precisa de 4 colunas iguais basta utilizar 4 divs com a numeração 3, caso precise de 3 colunas é só utilizar 3 divs com numeração 4, lembrando que podem ser utilizadas colunas menores, e não existe a obrigação de usar um grid igualmente dividido.

As colunas são nomeadas conforme o tamanho da tela e quantas colunas das 12 elas devem ocupar nessa tela, dessa maneira: “col- tamanho de tela- número de colunas” por isso é muito prático fazer com que a mesma div se comporte de maneiras diferentes em diferentes tamanhos de telas sendo

“xs” para telas menores que 768px (smartphones)
“sm” para telas maiores ou iguais a 768px (tablets)
“md” para telas maiores ou iguais a 970px (desktops)
“lg” para telas maiores ou iguais a 1170px (desktops)

.container ou .container-fluid

Ambos servem como container para o grid sendo:
.container = container de largura fixa.
.container-fuid = container de largura cheia.

Buttons

Outro ponto interessante de se pontuar são os botões, já existe um set de botões pré-definidos, com a nomenclatura também bem intuitiva como na imagem abaixo:

Estes elementos são aplicáveis nas seguintes tags: <a>, <button> e <input>, adicionando as classes “btn” seguida da classe “btn-(tipo de botão)”.

Os botões do bootstrap quando aplicados com as nomenclaturas certas já aplicam as “margins” e “paddings” corretamente por isso em uma construção rápida se tem resultados bem satisfatórios.

Podemos ressaltar também que para um visual diferente podemos apenas reescrever as classes sem perder a linha de nomenclatura já utilizada no framework.

Imagens

Imagens Responsivas

Temos também já definida a classe .img-responsive que aplica max-width: 100%; height: auto; e display: block; para que a imagem se ajuste bem ao elemento pai. Junto com essa você pode usar .center-block para centralizar a imagem.

Image shape

Não tem muito o que dizer aqui a imagem já explica tudo, para cada formato use uma classe:

Quadrado - .img-rounded
Circulo - .img-circle
Thumbnail - .img-thumbnail

.hidden ou .visible

Classes que escondem ou mostram o elemento, conforme o tamanho da tela, da seguinte maneira:
“hidden-xs” esconde em telas menores que 768px (smartphones)
“hidden-sm” esconde em telas maiores ou iguais a 768px (tablets)
“hidden-md” esconde em telas maiores ou iguais a 970px (desktops)
“hidden-lg” esconde em telas maiores ou iguais a 1170px (desktops)

Assim também será para tornar visíveis os elementos utilizando o visible, como no hidden ele aplicará apenas para o tamanho de tela que você definir, ou seja nos outros tamanhos o elemento será escondido.
“visible-xs” torna visível em telas menores que 768px (smartphones)
“visible-sm” torna visível em telas maiores ou iguais a 768px (tablets)
“visible-md” torna visível em telas maiores ou iguais a 970px (desktops)
“visible-lg” torna visível em telas maiores ou iguais a 1170px (desktops)