Através do site do Twitter Bootstrap (http://twitter.github.io/bootstrap/) é possível configurar todos os componentes do layout, os plugins de Jquery e as variáveis do layout para que se posso ter um layout mais personalizado. Se mesmo assim, ainda não for suficiente existem alguns sites (por exemplo bootswatch e wrapbootstrap) onde podem obter modelos já devidamente configurados.
Uma das grandes vantagens desta ferramenta é que permite criar Responsive Web Design.
O que é Responsive Web Design
Responsive Web Design é a capacidade de apresentar, nos diversos dispositivos, a informação de forma acessível e confortável. Sendo assim, o layout do website vai-se adaptar à resolução do aparelho e apresenta a informação da forma mais adequada.
Como utilizar o Twitter Bootstrap
Primeiro, tem de se fazer download do Twitter Bootstrap, através do website do projeto http://twitter.github.io/bootstrap/. Depois de descompactar, pode-se ver uma estrutura de ficheiros que será algo como:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-responsive.css
│ ├── bootstrap-responsive.min
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
Estes ficheiros são a forma mais básica do Twitter Bootstrap, estando preparados para serem colocados em qualquer projeto.
De seguida, será necessário incluir as referencias ao ficheiro css e js no ficheiro de html. Por exemplo,
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Exemplo Twitter Bootstrap </title>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<h1>Twitter Bootstrap</h1>
<div class="container-fluid">
<div class="row-fluid show-grid">
<div class="span12">Sistema de grelha com o máximo de 12 colunas.</div>
</div>
<div class="row-fluid show-grid">
<div class="span3">Coluna com dimensão 3</div>
<div class="span9">Coluna com dimensão 9</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
O resultado final será algo como:
Ao redimensionar a janela do navegador, pode-se verificar que o design responde à largura da janela, sendo assim um Responsive Web Design.
Toda a documentação acerca desta ferramente encontra-se no website do projeto Twitter Bootstrap.
O código fonte para download encontra-se neste link.
Sem comentários:
Enviar um comentário