15 Dúvidas Comuns que Você pode Ter Sobre o Bootstrap

Quando se está começando com uma ferramenta nova, é muito comum termos dúvidas sobre se ela vai servir para o que precisamos fazer.

Neste post, eu reuni as principais dúvidas que as pessoas tem (e que você pode ter) sobre o Bootstrap.

bootstrap-tutorial

Veja se alguma delas você tinha, ou ainda tem…


O Bootstrap é mesmo um framework?

Sim. O Bootstrap é um framework de Front-end.

Alguns autores também definem como framework de CSS. O Bootstrap traz vários códigos prontos e um ótimo modelo de desenvolvimento para criarmos sites e aplicações.


Quais Foram as Mudanças nas Classes do Bootstrap 3?

A principal mudança foi a nomenclatura das colunas, que na versão 2 usava o prefixo “span” e na versão 3 usa o prefixo “col” junto com o tipo de tela desejado (col-xs-*, col-sm-*, col-md-*, col-lg-*).


No HTML o Container Deve Englobar o Site Todo?

De preferência sim. O Container vai ajustar o site ao tamanho da tela, então os elementos devem estar dentro dele para que você mantenha o site responsivo.

Pode acontecer de você precisar ter vários containers, um abaixo do outro, e cada um com seus componentes (por exemplo, em landing pages com Bootstrap).

Não há problema nenhum nisso.


Como que eu Faço o Alinhamento dos Elementos HTML no Bootstrap?

Você pode usar as classes center-block, pull-left, pull-right na maioria dos componentes.

Elas trabalham com floats e margins para posicionar.

Para textos existem as classes: text-left, text-center, text-right, text-justify e text-nowrap.


Posso Criar um Sistema Web (ou Web Application) com o Bootstrap?

Pode.

Na verdade, a melhor utilização do Bootstrap é em sistemas web.

Ele agiliza a maior parte do trabalho de criação de UI, e mantém um padrão de usabilidade muito bom.

Assim, seus usuários não precisam aprender coisas novas para usar o sistema.

E ajuda muito a diminuir bugs, também.


Como eu Posso Criar um CMS com o Bootstrap?

O Bootstrap atua no front-end.

Um CMS precisa de um back-end para funcionar, então você precisará usar uma linguagem server-side para fazer o CMS.

E, depois, você pode colocar o Bootstrap para fazer as telas da área administrativa, por exemplo.

O tutorial de CRUD com Bootstrap ensina a fazer uma área administrativa simples, mas você precisará saber trabalhar com bancos de dados fazer seu CMS funcionar.


Como Faço para Remover a Margem Lateral no Bootstrap?

O componente que define a margem lateral é o container.

Então você tem duas opções:

  1. ou você usa o container-fluid, que ocupa toda a tela disponível;
  2. ou você sobrescreve o CSS do container, em um arquivo personalizado.

Eu recomendo a primeira abordagem.

Evite ao máximo modificar o CSS do Bootstrap.


É certo fazer um site usando só a classe row sem colunas? E assim se adapta em todas as resoluções?

Sim, pode ser feito. Mas, você pode perder alguns espaçamentos e ter alguns problemas de posicionamento.

Para se adaptar em todas as resoluções você deve usar a classe container, numa div superior

Landing pages, por exemplo, podem ser feitas só com o container e rows, sem colunas.


Tem Como Mudar o Número de Colunas do Grid system?

Sim.

O grid padrão do Bootstrap tem 12 colunas. Para mudar esse número (para 15, por exemplo) você precisará criar uma “build” personalizada no site do Bootstrap.

Nas configurações da personalização você tem como definir o número de colunas do Grid System, antes de gerar sua “build” customizada.

Mas, você precisará calcular alguns números de margem para que esta nova quantidade de colunas se posicionem corretamente.


O que fazer se sobrar colunas no grid?

Você pode afastá-las (usando as classes push e pull), você pode mudar os tamanhos para completar doze, ou você pode deixar assim mesmo que não vai atrapalhar os outros componentes.

Mas se sobrar, foi um erro no projeto de UI.

O ideal é que não sobre nenhuma. 🙂


Como deixar o Topo Full Width e o Conteúdo Normal no Bootstrap?

Basta você usar uma combinação de dois containers (ou seja, duas divs).

O primeiro container (div) será o topo e terá a classe “container-fluid”. O segundo container será o conteúdo e terá a classe “container”.


Como Usar o Grid do Bootstrap?

Bom, você precisará entender bem as principais classes e conceitos do Grid System para usá-lo.

O tutorial de Layouts e Grid System aqui da Academy ensina tudo isso.


Posso usar o Bootstrap com o PHP?

Pode.

O Bootstrap fará a UI do front-end e você pode combinar os outputs do PHP (echo, print, etc…) com os componentes do Bootstrap.

Fica ótimo para sistemas web, e facilita muito o desenvolvimento. Você pode usar um framework PHP MVC, também.


É possível Mudar o Visual do Bootstrap?

Sim.

Para isso você precisará criar uma “build” personalizada no site do Bootstrap. E entender um pouco sobre variáveis CSS e LESS.

É possível ter todo o visual modificado, e deixar com uma cara exclusiva. Não edite diretamente os arquivos CSS. Projete o visual e crie uma build personalizada, depois vá ajustando até chegar no ideal.


Posso fazer temas para WordPress (ou Joomla, ou Drupal) com o Bootstrap?

Pode. Basta criar a marcação das páginas com o Bootstrap e combinar com os scripts desses CMS.

Eu, particularmente, não recomendo… porque o WP, por exemplo, já tem alguns padrões para temas e o Bootstrap pode virar uma camada a mais.

Mas, se você fizer bem feito, seguindo os padrões e com atenção, dá pra fazer temas bem interessantes com essa dupla.


Qual a Sua Dúvida?

O que você precisa saber sobre o Bootstrap? Tem algum problema específico? Você precisa saber se o Bootstrap serve?

Escreva aqui nos comentários e a gente tenta responder. Quem sabe, sua dúvida também é a de outra pessoa.

Até a próxima!

24 comentários em “15 Dúvidas Comuns que Você pode Ter Sobre o Bootstrap

Adicione o seu

  1. Ótimas respostas, bem legal. Aprendi Boostrap aqui nesse site 😀
    Tenho uma duvida sobre as imagens, não acho um tutorial aqui ou mesmo nada no site da boostrap. Faz um post sobre todos os coponentes das imagens?

  2. Muito boa as dicas! Só acho que ficou confuso no seguinte ítem:
    —————————————–
    Como deixar o Topo Full Width e o Conteúdo Normal no Bootstrap?
    Basta você usar uma combinação de dois containers (ou seja, duas divs).
    O primeiro container (div) será o topo e terá a classe “container-fluid”. O segundo container será o conteúdo e terá a classe “container-fluid”.
    —————————————–
    Não seria no segundo container, seria o conteúdo e terá a classe “container”???

    Pequeno detalhe que não desmerece a qualidade do artigo! Good Job!

  3. bom dia,

    preciso que minha tela utiliza toda a extensão do monitor, porem ao mesmo tempo preciso colocar um fundo com uma imagem, certo?

    O componente que define a margem lateral é o container.

    se utilizar o container-fluid, que ocupa toda a tela disponível;

    seria possível, sem ter que eliminar o fundo da tela?

  4. Ruan, boa noite.
    Veja se pode me ajudar. tenho um escript que me retorna dados via AJAX. o valor retornado, em caso de sucesso eu atribuo a um campo hidden(campo1). Na validação, eu coloco:

    Esta regra de validação não val1da, só valida de eu colocar um “value=’123456” (por exemplo no campo1) e não deixar o ajax alterar o valor do campo.

    Obrigado.

  5. Eu estou tendo mta dor de cabeça com background-img full no bootstrap. Oq vc recomenda para trabalhar com imagens 1920×1080 ?

    Obs.: O meu hotsite tem rodapé e uma div que deve ficar a 800px da margem esquerda. Mas qndo eu reduzo a tela a div faz um float para a esquerda e a img de background sobe para o topo da página.

  6. Bom dia!

    Gostaria de tirar uma dúvida, como eu posso deixar por exemplo uma linha com duas colunas, sendo uma com 30% e a outra com 70% ?
    Existe essa possibilidade?

    Aguardo retorno
    Obrigado

    1. Se tiver que ser exatamente 30% e 70%, você vai precisar fazer uma build personalizada do Bootstrap, com um grid de 10 colunas:

      1. Vá no site do Bootstrap: http://getbootstrap.com/customize/#grid-system
      2. Coloque a variável @grid-columns como 10.
      3. Clique em Compile and Download e gere a build.

      Com isso, você vai ter um novo grid com máximo de 10 colunas (ao invés das 12 padrão)
      Cada coluna vai ter largura de 10%.

      Daí, para usar as colunas de 30% e 70% :

      <div class="row">
      <div class="col-md-3">30%</div>
      <div class="col-md-7">70%</div>
      </div>

      No Bootstrap padrão, não é possível, por que o grid tem 12 colunas. O que chegaria mais perto seria 33% e 66%. (.col-md-4 e .col-md-8)

      Abs.
      Ruan

  7. Boa tarde.
    estou com uma dúvida pois estou tendo meu primeiro contato com o Booststrap agora. Como faço o efeito de rolagem em links de sessão para sites one-page? Existe no Bootstrap classes prontas pra isso?

    1. Se for a rolagem animada (com efeito de descida/subida), o Bootstrap não tem isso por padrão.

      Você pode usar jQuery para criar esse efeito, ou usar o fullPage.js que já tem várias funcionalidades pra one-page layouts.

  8. Olá! Minha dúvida é referente a direitos autorais.
    Eu baixei o tema shop home-page do bootstrap para criar um site somente de exposição de produtos de artesanato, só que antes de colocar na internet eu procurei saber sobre direitos autorais, afim de não me complicar com isso, então pesquisei e vi falando que estava tudo na licença, mas ela é meio confusa kk
    Ai eu gostaria de saber se eu teria que fazer algo importante antes de publicar na internet, para não violar alguma lei de direitos autorais ou quaisquer lei.

  9. Olá Ruan!

    Parabéns pelo teu trabalho. Encontrei o teu blog quando procurava exatamente dicas sobre bootstrap. Baixei o livro, mas ainda não pude olhar. Recebi teu email convidando para ler este post e realmente valeu a leitura. Continue com o ótimo trabalho!

  10. Na parte sobre “Topo Full Width e o Conteúdo Normal”, foi comentado de usar 2 Containers, sendo:
    – container-fluid
    – container

    Minha dúvida é a seguinte, posso usar um “container” dentro de outro, mesmo sendo um “container” dentro de um “container-fluid” ?

    Ou como como boa prática, não devemos utilizar desse modo ?

    Além disso, no inicio, foi comentado sobre um “container” para englobar o site todo, que também me deixa na dúvida anterior.

    Eu vi um exemplo bem prático na internet, onde para cada sessão da página, a pessoa utilizou um “container”, por exemplo, um para formulário comum de dados, outro para fotos, etc.

    1. Sim, pode ter .container dentro de .container-fluid, sem problemas. Claro que ele deve ter uma função útil, e não apenas estar lá.
      Não faria sentido ter .container dentro de .container, porque o resultado não serviria para nada.

      Você pode usar o container para criar seções de uma página, por exemplo, com a tag section. As páginas do tipo One Page Layout, e os hotsites também, podem usar o container como divisão de cada parte horizontal da página.

  11. Boa tarde, quando declaro a biblioteca css do bootstrap a maioria do conteúdo da minha página deixa de usar meu arquivo css para utilizar o do bootstrap o que desconfigura toda a página, o que pode ser?

Deixe um comentário

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

Acima ↑