Nesta série de tutoriais, você vai aprender uma forma eficaz de implementar telas de CRUD com o Bootstrap 3.
Ao final desta série, teremos criado quatro telas que funcionam a partir desta tela de listagem:
Para criar este CRUD, vamos precisar implementar as seguintes telas nos próximos posts:
- Parte 1 – template e estrutura inicial;
- Parte 2 – telas de cadastro e de edição (equivalente ao Create e Update);
- Parte 3 – tela de visualização (equivalente ao Read);
- Parte 4 – popup de exclusão (equivalente ao Delete);
- Parte 5 – página de listagem; (que permite acessar as telas de CRUD)
Mas, antes de fazer as telas de CRUD, precisamos criar uma página boilerplate – a template.html – para servir de modelo para as outras páginas e evitar que tenhamos que reescrever aqueles códigos básicos.
Vou assumir que você já sabe instalar o Bootstrap e que já fez o download.
Caso não tenha feito, veja o tutorial Bootstrap 3: Como Começar.
Passo 1: Crie o Layout Básico
Para começar, crie um arquivo com nome template.html na pasta do seu projeto. Depois insira a marcação a seguir:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CRUD com Bootstrap 3</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Esta marcação cria apenas um boilerplate para o nosso projeto. Você deve ajustar os endereços dos CSS’s e Javascripts conforme estiverem colocados nas suas pastas. Lembre-se de adicionar o jQuery, também.
A sua estrutura de pastas deve estar, mais ou menos, assim:
crud-bootstrap/ ├── css/ ├── js/ ├── fonts/ └── template.html
As pastas css, fonts e js contêm os arquivos do Bootstrap, e alguns outros que podemos criar depois. As páginas do CRUD vão ficar na pasta principal, e serão criadas a partir do arquivo template.html.
Passo 2: Adicione um Navbar ao layout
Um Navbar é uma barra de navegação, ou de menus, do Bootstrap.
É um dos componentes mais úteis do Bootstrap e, normalmente, vai aparecer em todos os projetos que você criar.
Sendo assim, logo abaixo da tag <body> adicione um navbar, para servir de menu principal da tela, como no código a seguir:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web Dev Academy</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Início</a></li>
<li><a href="#">Opções</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</div>
</div>
</nav>
Este é apenas um menu de exemplo, e não vai ter funções no nosso CRUD, a princípio.
Passo 3: Adicione o Container Principal
Para finalizar este template, adicione uma div principal, com a classe .containter-fluid. Coloque, também, um header apenas para ocupar o espaço vazio.
Este código deve ficar abaixo do navbar:
<div id="main" class="container-fluid"> <h3 class="page-header">Template Inicial</h3> </div>
Nos próximos tutoriais, todos os itens e componentes ficarão dentro deste container – a div #main – substituindo o h3. Por isso, colocamos ele no template.
Ao final, você deve ter uma tela como esta:
É neste espaço em branco que iremos colocar os itens de CRUD das outras telas.
Este template já é responsivo. E, se você quiser, pode adicionar outros itens, como um rodapé, ou mais itens de menu .
Salve o arquivo template.html e, a partir dele, vamos criar as próximas telas.
Próximos Passos…
No próximo tutorial, você vai usar justamente esse template para criar as outras telas, como a de cadastro e de visualização, e colocar os formulários necessários.
É importante que você já tenha uma noção do Grid System do Bootstrap, daqui pra frente.