Entendendo Bootstrap

Entendendo Bootstrap

4 de dezembro de 2017 0 Por Ramos de Souza Janones
Do Zero ao Profissional com PHP. Mais de 2.300 alunos recomenda.Powered by Rock Convert

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.

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

Perguntas frequentes:

…é 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.

 

LEIA TAMBÉM:  Bootstrap - O que são grids CSS

Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

– Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

Powered by Rock Convert
Powered by Rock Convert
Kotlin - Bibliotecas para o dia a diaPowered by Rock Convert

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)