Primeiros passos com o Bootstrap

Segundo o site oficial, Bootstrap é o framework HTML, CSS e JS mais popular que existe para desenvolvimento de websites responsivos.

Quando aprendi a fazer sites, o negócio era criar tabelas dentros de tabelas. E dentro dessas tabelas, mais tabelas! Era tudo muito intuitivo e natural.

Mas por que usar tabelas não é um bom negócio? Segundo Fábio Ortiz

Por que CSS é melhor do que tabelas para layout:

  • Suas páginas carregarão mais rápido, pois o CSS fica guardado no cache. Em sites com tabelas, os estilos ficam no meio do código;
  • Você economizará dinheiro na hospedagem, pois com elas você faz algo melhor e menor;
  • A manutenção é mais fácil, pois você não precisa editar o HTML, basta editar o CSS que você pode mudar completamente o design. Com tabelas, você precisaria mudar todos os arquivos;
  • Sua posição nos sites de busca irá melhorar. Em sites com CSS você pode identificar o que é importante e destacar as palavras-chave (usando as tags strong e as de cabeçalho com HTML);
  • Seu site se tornará acessível em diversos navegadores. Podendo ser melhor visualizado em celulares e outros aparelhos

Mas qual seria uma boa alternativa ao uso de tabelas? Um framework Css.

Por que você deveria usar um framework?

  • Acelera o tempo de desenvolvimento do site
  • Torna o site consistente em diversos navegadores
  • Você terá um design limpo e simétrico
  • Encoraja bons hábitos de web design

Saiba mais…

Agora vamos ao que interessa. Como desenvolver um site responsivo com Bootstrap que abrirá até no Internet Explorer 8 em resolução de tela 1024×768?

Baixe o framework no site oficial.

Extraia os arquivos na pasta que irá usar para guardar sua página, por exemplo, “C:\wamp\www\bootstrap”.

Crie o index.html nessa pasta com o código:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Primeiros passos com Bootstrap</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!--[if lt IE 9]>
			<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
	</body>
</html>

Esse código irá carregar a folha de estilos do bootstrap e os scripts para fazer a página exibir do mesmo modo no Explorer 8. Basicamente esse será o esqueleto de todos os projetos que você fizer com o bootstrap.

Vamos adicionar mais código?

Adicione isto na tag body:

<main class="container-fluid">
	<header class="jumbotron text-center">
		<h1>Teste bootstrap</h1>
	</header>
	<section class="row">
		<div class="col-sm-2">
			<h3>Menu</h3>
			<ul>
				<li><a href="#">Opção 1</a></li>
				<li><a href="#">Opção 2</a></li>
				<li><a href="#">Opção 3</a></li>
				<li><a href="#">Opção 4</a></li>
				<li><a href="#">Opção 5</a></li>
			</ul>
		</div>
		<div class="col-sm-10">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in orci in mauris pharetra porttitor id in nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sit amet lacinia urna, vitae tempus quam. Nunc vulputate arcu vitae laoreet varius. Nunc sed nunc lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis augue eros, porttitor eu odio vel, congue egestas augue. Vivamus massa leo, vestibulum vitae iaculis id, faucibus porttitor est. Sed lobortis, mauris sit amet ultrices pretium, nunc odio finibus nibh, eget rutrum lacus lacus ac mauris. Nullam nec nisi non magna congue malesuada. Mauris nec porta quam, tincidunt tristique justo. Pellentesque scelerisque est lacus, eu eleifend nibh placerat vel. Donec ex mauris, venenatis et blandit a, semper vel nisl. Vestibulum posuere pulvinar dolor, a efficitur urna suscipit facilisis.</p>

			<p>Mauris lectus lacus, fermentum id eleifend quis, malesuada quis odio. Nullam sagittis nisl sit amet volutpat pretium. Phasellus interdum nulla sed feugiat pulvinar. Vestibulum viverra fringilla eros eu tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque at pharetra orci. Pellentesque in scelerisque nisi. </p>
		</div>
	</section>
	<footer class="bg-primary text-center">
		&copy; 2015 - (Seu nome aqui.)
	</footer>
</main>

A classe jumbotron no header faz com que o texto fique enorme e com um fundo cinza. A classe text-center no mesmo header faz com que o texto fique alinhado no centro.

Depois, na section colocamos a classe row, que faz com que ela se comporte com uma linha numa tabela. Os divs dentro dessa section terão as classes col-sm-N onde N é o número de colunas que irá ocupar.

A grade do Bootstrap e outras frameworks, consiste em 12 colunas. 12 é o máximo que pode ocupar. Se você criar uma div com classe col-sm-6 e dentro dela duas divs também com classe col-sm-6, as duas divs que você criou por último ocuparão 50% da página e 50% da div mãe cada uma.

Vamos adicionar mais três colunas dentro do div do texto:

<div class="row">
	<div class="col-sm-4">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc enim nunc, condimentum vel tellus et, accumsan tempor sem. Morbi enim nunc, tempor eget luctus eu, semper in risus. Sed dignissim, ligula ac pulvinar rhoncus, odio ante rutrum sapien, quis finibus tortor arcu et dolor. Pellentesque iaculis dui congue, tempus massa at, vulputate felis. Suspendisse sed lectus pulvinar elit imperdiet commodo eget ut ante. Sed tincidunt magna et ultrices pretium. Quisque cursus tempus tellus, nec elementum nibh tincidunt a. Nunc eget nibh diam. Nullam vitae nisl mauris. In quis lacus a odio finibus blandit. Nam at feugiat metus. Donec egestas, purus ac tincidunt tincidunt, metus nisi ultricies tellus, eget maximus diam felis eget elit. Quisque fermentum semper lacus, at mattis ligula ultricies nec.</p>
	</div>
	<div class="col-sm-4">
		<img class="img-responsive" src="img/3x3.jpg" />
	</div>
	<div class="col-sm-4">
		<p>Donec fermentum tortor non finibus feugiat. Mauris placerat, nulla posuere interdum pulvinar, eros urna sagittis nisi, id varius leo nibh vitae libero. Quisque sit amet urna id purus dapibus dignissim. Nullam fermentum euismod ex placerat dictum. Vivamus efficitur, nunc elementum venenatis faucibus, nibh lacus finibus magna, et interdum odio enim eu nisl. Phasellus commodo rutrum tortor id convallis. Sed eu luctus purus. Donec venenatis tellus sed orci cursus, et consectetur enim tincidunt. Sed quis mattis elit, vel porttitor ipsum. Integer sodales bibendum ultrices. Curabitur fermentum velit eget viverra sollicitudin.</p>
	</div>
</div>

Criamos uma nova div dentro da div do texto, com a classe row, daí criamos três divs com classe col-sm-4, duas com texto e uma com uma imagem com classe img-responsive. Essa classe da imagem faz com que a imagem diminua conforme o tamanho da tela.

Veja o exemplo completo.

Por hoje é só, dúvidas e sugestões, poste nos comentários!