Bootstrap – Primeiros passos

bootstrap-logoSabe aquela história de que a cada projeto WEB é necessário começar tudo do zero, escrever linhas e mais linhas de CSS, Javascript, etc para fazer provavelmente coisas similares que já foram feitas em outros projetos? Usando este framework, isso não é mais necessário!!

Bootstrap é um framework front-end que ajuda no desenvolvimento de sites e aplicações WEB. É uma coleção de vários elementos e funções para desenvolvimento WEB, como HTML, CSS e Javascript disponibilizados em uma única ferramenta.

A idéia é que ao iniciar um novo projeto você já tenha uma estrutura pronta com os elementos mais comuns que são utilizados, não precisando começar do zero e escrever várias linhas de código para fazer a mesma coisa novamente.

Outra grande característica do Bootstrap é que ele é responsivo, o que isso significa? Significa que quando você criar uma página HTML usando Bootstrap ela vai se adequar corretamente ao tamanho da tela de um celular, tablet ou computador sem que seja necessário adicionar um código específico para cada layout de tela.

Para configurar e começar a usar o Bootstrap no seu projeto, é muito simples e rápido, o primeiro passo é fazer o download dos arquivos pelo site do Bootstrap.

Ao descompactar o pacote está será a estrutura criada:

estruturaFigura 1 – Estrutura dos arquivos Bootstrap

A estrutura do Bootstsrap é muito simples de entender e de se usar, cada pasta corresponde aos tipos de arquivos que são oferecidos pelo framework.

Para começar a usar basta criar, por exemplo, uma página HTML na raiz do diretório e no código fazer a chamada para os arquivos do Bootstrap.

<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>

Listagem 1 – Adicionando Bootstrap a uma página HTML

Pronto! Com essas poucas linhas o Bootstrap está configurando na página HTML. Notem que esse trecho do código é onde apontamos os arquivos da pasta descompactada.

 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet">
Listagem 2 – Link para os arquivos Bootstrap

Para ilustrar que o uso do Bootstrap pode fazer milagres na criação de front-end e que o tempo de desenvolvimento será otimizado, segue um exemplo de uma tabela onde é usado o feito de cores alternadas nas linhas:

<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <h2>Table</h2>
  <div class="table-responsive">          
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>Nomes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Carlos</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Maria</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Pedro</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Listagem 3 – Página HTML usando Bootstrap

O resultado pode ser visto na imagem abaixo:

pagina_computador

Figura 2 – Tabela criada com CSS do Bootstrap

Todas as classes CSS que foram usadas nesse código fazem parte da biblioteca do framework, não foi preciso escrever nenhuma linha de CSS para obter esse resultado! Notem que a classe usada na tabela table-responsive já trabalha com o conceito de responsivo, portanto, essa tabela criada se adapta ao tamanho da tela em que a página for acessada. Abaixo segue uma imagem de como a página é exibida quando acessada pelo celular.

celular

Figura 3 – Exemplo que o Bootstrap é responsivo

Vimos até aqui o uso do CSS pelo framework. Agora veremos um exemplo bem simples de como fazer com que ao passar o mouse em cima de uma das linhas da tabela, ela fique selecionada com outra cor, sem precisar escrever nenhum código Javascript ou Jquery. Para fazer essa funcionalidade basta trocar o nome da classe da table de table-striped para table-hover, pronto! Em 1 segundo você tem uma funcionalidade muito usada implementada na sua página.

selecionar_linha

Figura 4 – Exemplo usando Bootstrap para deixar a linha selecionada com uma cor diferente

Agora vamos supor que precisamos colocar outra tabela ao lado da que criamos anteriormente, com o Bootstrap basta criarmos uma div com a classe row e colocarmos a nossa tabela dentro de uma div com a classe col-md-4 e a outra tabela dentro de uma div usando também a classe col-md-4, fácil assim 😉

<div class="container">
<h2>Table</h2>
</div>
<div class ="row">
<div class="col-md-4 table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Nomes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Carlos</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Maria</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Pedro</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="col-md-4">
 <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Nomes 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Renato</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lucas</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Paulo</td>
      </tr>
    </tbody>
  </table>
</div>
</div>
Listagem 4 – Código para colocar duas tabelas lado a lado

Abaixo a imagem de como ficaram as tabelas:

duas_tabelas

Figura 5 – Tabelas posicionadas lado a lado usando classes do Bootstrap

O Bootstrap é um framework com várias vantagens que devem ser levadas em consideração no momento de se iniciar um projeto. Neste post o objetivo foi mostrar de forma bem sucinta como começar a utilizá-lo. Para explorar mais a ferramenta, entender os conceitos para construir os elementos e utilizar os recursos disponíveis, vale a pena uma leitura no site oficial do Bootstrap.

Referência

http://getbootstrap.com/

 

Por MONISE COSTA

Formada em Sistemas de Informação pela PUC Campinas, MATERANA desde 2011. Apaixonada pela área de TI, Analista de Requisitos na maior parte do tempo e desenvolvedora Java/Android por lazer.

Postado em: 21 de julho de 2015

Confira outros artigos do nosso blog

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

Introdução ao Webpack 2

10 de julho de 2017

Alan Cesar Elias

Começando com Angular 2

09 de fevereiro de 2017

Otávio Felipe do Prado

Deixe seu comentário