23

Dei uma pesquisada, mas a maioria dos artigos que achei partem do pressuposto de que o leitor já tem alguma familiaridade com frameworks (o que não é meu caso), que ainda tenho só uma vaga ideia do que seja isso (é tipo um template né?).

Pelo que entendi, é um conjunto predeterminado de CSS e JavaScript, mas não existe nenhuma tela de configuração que pode ser aberta no navegador, nem nada assim né? É apenas uma reunião de modelos CSS e JavaScript?

Precisa instalar alguma coisa, ou é só descompactar a pasta no diretório do projeto e linkar com rel= "stylesheet" o arquivo bootstrap.css entre as tags head?

Já tenho um arquivo CSS em que estou colocando minhas formatações, isso é compatível com o Bootstrap? Tentei utilizar assim:

<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="_css/form2.css"/> // meu aquivo de formatação

Mas ele só zoou o layout. Tirando o meu arquivo de css (form2.css) ele ficou sem formatação nenhuma, bem basicão mesmo (mas diferente do que se retirar o link pro bootstrap, o que indica que está funcionando né?), nada perto do exemplo que vi (e que não estou achando de novo, se achar posto aqui). Meu interesse é porque estou desenvolvendo um grande formulário, e vi um desenvolvido com ele que achei muito legal, principalmente os estilos dos campos input etc.

Os campos do formulário são automaticamente modificados com o Bootstrap, ou precisarei editar todas as tags do HTML pra aplicar as formatações que quiser?

Eu estou utilizando JavaScript para algumas funções como exibir/ocultar campos do formulário. Isso é compatível com o bootstrap?

Bom, não sei se é amplo demais, ou se já pode existir uma pergunta assim por aqui (o que não achei), mas se alguém puder me ajudar a entender como funciona, e se é incompatível com outros scripts e arquivos CSS já está ótimo.

1
  • Impressionante, todas as respostas foram excelentes, e estão ajudando muito. Pra evitar poluir o tópico com muitos agradecimentos, vou estender aqui a todos os que responderam meu mais sincero agradecimento. Quando tiver acabado de implementar colocarei o sinal de resolvido na resposta que mais tiver me ajudado, ou se demorar demais pra eu acabar (provável), talvez coloque o sinal de solucionado na resposta que tiver recebido mais votos da comunidade depois de um tempinho (mas vou conferir ainda se isso é certo). Muito obrigado mesmo à todos!
    – gustavox
    Commented 24/04/2015 às 1:25

6 Respostas 6

23

Bootstrap é um framework front-end, explicando a grosso modo, ele te provê componentes front-end (css, sass, less e js) prontos pra você utilizar na sua aplicação.

O Bootstrap depende, basicamente, de 2 arquivos:

  • bootstrap.css.
  • bootstrap.js.

O bootstrap.js é baseado em jQuery, então pra ele funcionar você precisa ter o jQuery incluído no seu projeto também. Veja aqui, um exemplo do uso de um modal e de um alert simples.

Respondendo suas perguntas:

Possui alguma tela de configuração?

Por se tratar de um framework front-end (visualização) não há algo que você possa "editar"/"mudar a configuração", customizações devem ser feitas em outros arquivos que sobrescreverão os estilos padrão (você também, pode gerar seu estilo Bootstrap customizado no próprio site do Bootstrap, ou então, no Bootstrap Magic). Inclusive, você encontra diversos frameworks Bootstrap totalmente customizados, como o Flat UI, Get Sh*t Done e Bootflat.

Formulários

O Boostrap possui muitas classes css que tornam o desenvolvimento dum formulário (pequeno ou grande) muito mais rápido, por exemplo:

<form>
    <div class="form-group">
        <label class="control-label" for="textinput">Nome</label>  
        <input id="textinput" name="textinput" type="text" placeholder="Digite seu nome" class="form-control">
    </div>

    <div class="form-group">
        <button id="button1id" name="button1id" class="btn btn-success">Enviar</button>
        <button id="button2id" name="button2id" class="btn btn-danger">Cancelar</button>
    </div>
</form>

Exemplo no JSFiddle.

Neste código você pode notar algumas classes: form-group e form-control, elas são as classes, digamos que básicas de cada formulário, a form-control estiliza seu input (text, password, email, date, ...). Enfim, o Bootstrap tem MUITA COISA que vai te ajudar, você pode ver várias delas na página de exemplos do site.

Ok, mas as pessoas usam o Bootstrap só por isso?

NÃO! Eu costumo dizer que pra qualquer coisa que você precise fazer já existe um plugin ou biblioteca Bootstrap customizada que faz, duvida? Dá uma olhada nessa lista de recursos já prontos. E não é só isso:

  1. Bootstrap é fácil de se começar a usar.
  2. Um ótimo sistema de grids.
  3. A já citada nas suas dúvidas, estilização de componentes HTML (botões, tipografia, formulários, ícones, tabelas, etc).
  4. MUITOS componentes.
  5. Já contém alguns plugins javascript (modal, dropdown, popover, etc).
  6. Possui uma comunidade gigantesca.

Desculpa, me empolguei :).

1
  • Todas as respostas desta pergunta me ajudaram bastante, e o formulário está ficando outra coisa, mas coloquei o resolvido na sua porque além de ter falado sobre especificamente sobre formulários, foi quem mais me empolgou a mudar umas muitas e muitas de linhas de tables por divs. :-)
    – gustavox
    Commented 2/05/2015 às 4:36
13

...é tipo um template né?

É um pouco mais do que isso. É um template que te força a trabalhar num determinado nível de disciplina, de forma a exibir seu site em praticamente qualquer dispositivo com qualquer tamanho de tela.

Pelo que entendi, é um conjunto predeterminado de CSS e javascript, mas não existe nenhuma tela de configuração que pode ser aberta no navegador, nem nada assim né? É apenas uma reunião de modelos CSS e Javascript?

Pode ser definido assim, como "um conjunto predeterminado de CSS e JavaScript", mas que possui normas para uso. A configuração é feita utilizando um pré-processador chamado LESS.

Precisa instalar alguma coisa, ou é só descompactar a pasta no diretório do projeto e linkar com rel= "stylesheet" o arquivo bootstrap.css entre as tags head?

Não é apenas isso. O roteiro de instalação recomenda você usar uma ferramenta de pacotes que realiza essa configuração pra você. É possível fazer manualmente, mas envolve não apenas CSS como JavaScript e alguns arquivos auxiliares.

Os campos do formulário são automaticamente modificados com o bootstrap, ou precisarei editar todas as tags do HTML pra aplicar as formatações que quiser?

Não diria todos, mas diria que uma boa parte deles. Não é preciso editar tudo. É importante aprender como ele funciona pra depois partir pra customizações.

Eu estou utilizando javascript para algumas funções como exibir/ocultar campos do formulário. Isso é compatível com o bootstrap?

Sim.

1
  • 3
    Resposta escrita de maneira simples, mas completa e com certeza de fácil entendimento para quem está começando, só posso dizer, ótimo trabalho!
    – Syzoth
    Commented 19/05/2015 às 3:33
12

Bom, vamos por partes.

É apenas uma reunião de modelos CSS e Javascript?

Sim e não. Conforme descrição do site, o Bootstrap é voltado para prover a base para aplicações com design responsivo, mobile first. Ou seja, se você utilizar seus componentes e sistema de grids corretamente (aplicando as classes do Bootstrap e seguindo a estrutura de markup correta) sua aplicação estará pronta para funcionar em uma grande variedade de devices e navegadores (com telas dos mais diferentes tamanhos, nas mais diferentes resoluções). Além disso, como bem mencionado pelo colega Eduardo Silva, existe todo um ecossistema sendo construído em torno do Bootstrap (Temas, Templates, ferramentas para desenvolvedores, extensões de UI, plugins, etc).

Precisa instalar alguma coisa, ou é só descompactar a pasta no diretório do projeto e linkar com rel= "stylesheet" o arquivo bootstrap.css entre as tags head?

Existem várias maneiras de utilizar o Bootstrap (veja o Getting started guide). Você pode fazer o que está sugerindo ou até mesmo consumí-lo diretamente de uma CDN, e.g:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Para a parte de JavaScript você também tem uma biblioteca (note que essa biblioteca depende do jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Já tenho um arquivo CSS em que estou colocando minhas formatações, isso é compatível com o bootsptrap?

É compatível, mas você deve tomar cuidado com seus estilos. Por exemplo, chumbar tamanhos pode tirar a flexibilidade de determinados componentes.

Os campos do formulário são automaticamente modificados com o bootstrap, ou precisarei editar todas as tags do HTML pra aplicar as formatações que quiser?

Você deve aplicar as classes. O site do Bootstrap tem um showcase com exemplos de todos os componentes.

Eu estou utilizando javascript para algumas funções como exibir/ocultar campos do formulário. Isso é compatível com o bootstrap?

Sim, JavaScript, jQuery, etc. Tudo é permitido. Valem, porém, as mesmas restrições do que para CSS. Esconder determinado componente ou mudar suas propriedades dinamicamente pode eventualmente bagunçar o layout sob determinadas condições. É sempre bom testar o resultado contra todas as combinações de devices e navegadores que sua aplicação deve suportar.

9

O bootstrap é uma coleção de arquivos js, css/less/sass entre outros, que tem como objetivo te dar um ponto de partida pro seu layout.

Não é um template, a ideia do bootstrap não é adicionar um visual único ao seu projeto, mas evitar que você tenha o trabalho de criar coisas que quase todo site precisa.

Um bom exemplo são as funcionalidades para auxiliar no desenvolvimento de um site responsivo, eu explico elas nessa resposta.

A maior parte das funcionalidades do bootstrap esta nas classes pré definidas, a ideia é você utilizar elas.

Para personalizar o bootstrap, existem diversos modos. O método mais simples é esse que você esta usando, incluir o css minificado e ter um arquivo css seu com seus estilos específicos. O método que eu prefiro é clonar o repositório do bootstrap e editar os arquivos Less, Less é uma linguagem que pré processa CSS, é bem parecido com css só que te deixa fazer mais coisas, por exemplo definir funções(se chamam de mixins no Less).

Eu pessoalmente não utilizo a parte javascript pois prefiro fazer essa parte eu mesmo e separado.

Pense no bootsrap como uma caixa de ferramentas, você pode pegar só as ferramentas que precisa, mas sempre vai ter de estudar um pouquinho pra entender como elas funcionam.

Quanto às outras perguntas:

Caso você utilize apenas o CSS compilado, não precisa instalar nada.

Para adicionar o estilo do bootstrap, você tem de usar as classes predefinidas dele, no caso de inputs, selects,textareas, etc a classe é .form-control .

Eu acho pouco provável que suas funções javascript pessoais deem conflito com as do bootstrap, mas é possível que aconteça.

8

O Bootstrap é, como qualquer framework de front-end, uma biblioteca que minimiza o trabalho de codificação na criação de páginas, com elementos estilizados e melhorados, assim como componentes reutilizáveis (ícones, alertas, navegação). É muito útil, pois começar do zero significa escrever muito código trivial, porém extenso e trabalhoso. Além disso, como o Bootstrap foi criado por uma empresa grande como o Twitter e é opensource, seus componentes, tanto na parte de programação quanto design serão muito superiores ao que qualquer um seria capaz de escrever sozinho.

Sugiro também dar uma olhada em outros frameworks, já que você vai começar agora: Semantic UI e Foundation.

A documentação do Bootstrap é muito completa e tem tudo o que você precisa pra implementá-lo. A coisa mais importante pra um desenvolvedor é saber se virar sozinho, e ter uma documentação completa como essa é uma benção.


Precisa instalar alguma coisa?

Existem várias formas de começar a usar o Bootstrap: referenciando os arquivos locais pré-compilados após baixá-los, compilando o código-fonte em Sass ou Less, usando o gerenciador de pacotes Bower ou npm... Essas formas estão todas descritas em Getting Started.

No entanto, a maneira mais fácil de fazê-lo é simplesmente referenciar os arquivos hospedados numa CDN, assim:

<!-- Última versão do CSS compilado e minificado -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Última versão do JavaScript compilado e minificado -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap é compatível com meu CSS antigo?

Você precisará fazer mesmo algumas adaptações, pois o framework pré-define estilos para muitas tags. O trabalho necessário pra isso vai depender muito se os seus seletores conflitam com os dele. Pra alguém que está começando agora, sugiro reestruturá-lo com o poderoso Grid system. Suas estruturas de layout anteriores (sejam feitas usando <table> ou flexbox) parecerão amadoras perto do que ele é capaz de fazer.

Nessa fase de transição, sugiro usar extensivamente o Web Inspector do seu navegador pra entender e resolver os conflitos do seu CSS com o Bootstrap.

Bootstrap é compatível com meu Javascript antigo?

Acredito que você não vá ter problemas com isso.

Os campos de formulário são automaticamente modificados?

Não. É necessário definir as classes de acordo com o layout de formulário desejado. A documentação cobre esse e qualquer outro assunto de maneira extensiva e precisa.

6

Pergunta 1: O Bootstrap é um framework de CSS que utiliza HTML5, CSS3 e JavaScript. O que deve estar acontecendo com o seu formulário é a sobreposição de CSS. Utilize o Bootstrap.css como CSS principal e se precisar de customizar algo que já não esteja no Bootstrap vc faz no seu (form2.css). Veja se o seu CSS tem formatação para inputs, tire e deixe esta formatação para o Bootstrap.

Pergunta 2: Sem problemas pode usar Javascript para qq coisa.

Você pode dar uma olha no Bootstrap da Globo.com.

Dica: use o obejct inspector (tecla [F12]) do seu browser para ver como o tag Bootstrap foi construído.

Globo.com http://globocom.github.io/bootstrap/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .