Criando Telas de CRUD com Bootstrap 3 – Parte I

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:

crud-com-bootstrap

Para criar este CRUD, vamos precisar implementar as seguintes telas nos próximos posts:

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:

crud-com-bootstrap-template


É 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.

  • Helder Pontes

    Amigo,

    Já existe a Parte IV do Criando Telas CRUD com Bootstrap?

    Sou iniciante e estou adorando seus posts.

    Abçs,

    Helder

    • Obrigado, Helder.

      A parte quatro (e a cinco) tá quase pronta. Tive uns probleminhas de tempo para atualizar.

      Mas, devo colocar ainda esta semana.

      Abs!
      Ruan

      • Bom dia meu mestre Ruan,

        Estou tendo problemas na utilização de textarea nesta aplicação.Vc teria um exemplo?

        Helder Potes

  • Helder Pontes

    Bom dia meu Mestre Ruan Carvalho,

    Estou tendo dificuldades em usar textarea nesta aplicação. É possivel? vc teria este exemplo?

    Abçs,

    Helder Pontes

    • Beleza, Helder!

      O exemplo mais simples pra um textarea seria assim:

      <div class=”form-group”>
      <label>Texto </label>
      <textarea class=”form-control” rows=”3″></textarea>
      </div>

      Serve? Daí é só colocar nos formulários.

      Abs!

  • Souza

    Gostei do tutorial mais não teria como não repetir o Layout básico em cada tela?

    • Esses tutoriais são apenas sobre o HTML e CSS com o Bootstrap, por isso é preciso repetir o básico.

      Quando você for usar isso com um backend (ou um framework) aí que não vai ser necessário repetir o layout básico.

      Você vai ter um template geral (conhecido como masterpage ou template engine) e cada tela terá apenas os componentes necessários sem o template básico.

      OK?

  • Muito legal seu post. Mas tenho uma dúvida:
    Percebi que as DIV’s e CLASS’s da template.HTML já vêm com nomes pré-definidos nas tags. Eu sou obrigado a usar estes nomes ou tem como eu usar uns nomes mais amigáveis pra facilitar minha vida?

    • Sim, Bruce. Você tem que usar exatamente esses nomes de classes.

      Eles são pré-definidos pelo Bootstrap.

      Já os ID’s, você pode escolher e colocar como quiser.

  • Julio

    Ruan estou tendo um problema no Passo3 você poderia explicar como deveria ficar o código todo? Não sei se estou colocando o

    Template Inicial

    no local certo!

    • Vou criar um repositorio no GitHub com todo o código.

  • Amigo, tudo bom?
    Estou tendo problemas com essa parte do código:

    Template Inicial

    O “h3 template inicial” aparece em baixo da nav bar. O que fazer?

    • Tiago

      Utilize na criação da barra de navegação que seu problema sera resolvido.

    • Geison

      Seguindo exatamente o codigo mostrado, estou com o mesmo problema, a frase “Template Inicial” fica embaixo e no meio da navbar

      • Geison

        Resolvido. Falta o arquivo style.css na pasta css.

        • Jessé

          Como vc conseguiu resolver esse problema? onde conseguiu o style.css?

          • É só criar o arquivo na pasta /css, e colocar um padding-top de 50px, no body.

    • vanderhacher

      coloque o hr em cima do h3 que resolve

      Template Inicial

  • Boa noite procurei muitas horas na internet por um sistema assim, gostaria muito e aprender fazer tenho algumas duvidas na construção podem me ajuda?

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑