Publicado em

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.

24 comentários sobre “Criando Telas de CRUD com Bootstrap 3 – Parte I

  1. Amigo,

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

    Sou iniciante e estou adorando seus posts.

    Abçs,

    Helder

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

      1. Bom dia meu mestre Ruan,

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

        Helder Potes

  2. Bom dia meu Mestre Ruan Carvalho,

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

    Abçs,

    Helder Pontes

    1. 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!

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

    1. 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?

  4. 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?

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

  5. 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!

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

  6. 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?

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

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

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

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

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

    3. coloque o hr em cima do h3 que resolve

      Template Inicial

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *