{"id":17318,"date":"2019-11-22T12:27:53","date_gmt":"2019-11-22T14:27:53","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=17318"},"modified":"2025-03-21T18:40:02","modified_gmt":"2025-03-21T21:40:02","slug":"o-que-e-bootstrap","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-bootstrap","title":{"rendered":"Desvendando o Bootstrap: o que \u00e9 e como usar?"},"content":{"rendered":"<p>Voc&ecirc; &eacute; um desenvolvedor<em> front-end <\/em>e est&aacute; cansado de escrever sempre as mesmas sintaxes CSS? Essa &eacute; a sua deixa para come&ccedil;ar a usar o <strong>Bootstrap<\/strong>! Neste artigo, vamos cobrir os benef&iacute;cios de usar esse framework para web e como fazer para incorpor&aacute;-lo no seu projeto corretamente.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/BR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar Gloss&aacute;rio Completo de Desenvolvimento Web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-tutorial-em-video\">Tutorial em V&iacute;deo<\/h2><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Bootstrap ? (Guia para Iniciantes) ? 2024 - Hostinger Brasil\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/jsTJL6Da5wc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><h2 class=\"wp-block-heading\" id=\"h-o-que-e-bootstrap\"><strong>O Que &eacute; Bootstrap?<\/strong><\/h2><p>&Eacute; bem prov&aacute;vel que voc&ecirc; esteja familiarizado com a funcionalidade dos frameworks.&nbsp;<\/p><p>O conjunto de sintaxes de tarefas espec&iacute;ficas que eles t&ecirc;m permite que os desenvolvedores construam sites muito mais rapidamente porque n&atilde;o &eacute; preciso se preocupar com comandos b&aacute;sicos e fun&ccedil;&otilde;es adicionais.&nbsp;<\/p><p>Mesmo assim, existia uma falta de consist&ecirc;ncia devido ao uso demasiado de bibliotecas, o que acabou exigindo uma mudan&ccedil;a r&iacute;gida. O Bootstrap apareceu como a resposta para essa quest&atilde;o.&nbsp;&nbsp;&nbsp;<\/p><p>O framework <em>front-end <\/em>e de c&oacute;digo-aberto foi inicialmente criado por Mark Otto e Jacob Thornton para o desenvolvimento web mais r&aacute;pido e pr&aacute;tico.&nbsp;<\/p><p>Ele cont&eacute;m todos os tipos de templates baseados em HTML e CSS para v&aacute;rias fun&ccedil;&otilde;es e componentes. Por exemplo, navega&ccedil;&atilde;o, sistema de grades, carross&eacute;is de imagens e bot&otilde;es. A lista n&atilde;o &eacute; exaustiva.&nbsp;<\/p><p>Ainda que os Bootstraps realmente poupem o tempo que os desenvolvedores gastam para gerenciar seus templates, o objetivo principal dele &eacute; criar sites responsivos.&nbsp;<\/p><p>Ele permite que a interface do usu&aacute;rio de um site seja otimizado para qualquer tamanho de tela, desde os dispositivos m&oacute;veis at&eacute; as telas mais robustas de computadores potentes.<\/p><p>Por conta disso, os desenvolvedores n&atilde;o precisam se preocupar em fazer muitas vers&otilde;es de um mesmo site para todos os tipos e tamanhos de telas dispon&iacute;veis. Isso tamb&eacute;m n&atilde;o faz com que a audi&ecirc;ncia fique limitada.<\/p><p>Pela sua popularidade, mais comunidades sobre o Bootstrap t&ecirc;m surgido. Estes locais s&atilde;o &oacute;timos para desenvolvedores e designers trocarem experi&#7869;ncia, conhecimento e discutir as &uacute;ltimas atualiza&ccedil;&otilde;es para as fun&ccedil;&otilde;es dispon&iacute;veis.&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-os-3-arquivos-primarios-do-bootstrap\"><strong>Os 3 Arquivos Prim&aacute;rios do Bootstrap<\/strong><\/h2><p>Como o <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a> consiste em uma cole&ccedil;&atilde;o de sintaxes que desempenham fun&ccedil;&otilde;es espec&iacute;ficas, ele s&oacute; faz sentido quando&nbsp; o framework tem diferentes tipos de arquivos consigo.&nbsp;<\/p><p>Abaixo est&atilde;o os 3 tipos de arquivos prim&aacute;rios que gerenciam a interface de usu&aacute;rio e a funcionalidade de um site.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-bootstrap-css\"><strong>Bootstrap.css<\/strong><\/h3><p><strong>Bootstrap.css<\/strong> &eacute; um framework CSS que organiza e gerencia o layout de um site. Enquanto o HTML gerencia o conte&uacute;do e a estrutura de uma p&aacute;gina na web, o CSS lida com o layout dela. Por essa raz&atilde;o, ambas as estruturas precisam coexistir para desempenhar uma a&ccedil;&atilde;o particular.<\/p><p>Por conta das suas fun&ccedil;&otilde;es, o CSS permite criar um visual uniforme em quantas p&aacute;ginas e do jeito que voc&ecirc; quiser. Diga adeus &agrave;s horas de edi&ccedil;&atilde;o manual s&oacute; para mudar a largura de uma borda numa linha.<\/p><p>Com CSS, tudo o que voc&ecirc; precisa fazer &eacute; referenciar as p&aacute;ginas web no arquivo CSS. Qualquer altera&ccedil;&atilde;o necess&aacute;ria pode ser feita nesse mesmo arquivo sozinho.<\/p><p>As fun&ccedil;&otilde;es do CSS n&atilde;o s&atilde;o limitadas a estilo de texto. Eles tamb&eacute;m podem ser usados para outros aspectos de uma p&aacute;gina, como a disposi&ccedil;&atilde;o dos elementos e de imagens e tamb&eacute;m tabelas.&nbsp;<\/p><p>Como o CSS tem muitas declara&ccedil;&otilde;es e seletores, memorizar todos eles pode levar algum tempo. Sabemos que voc&ecirc; est&aacute; sedento para come&ccedil;ar; ent&atilde;o, fique com essa listagem de <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/codigos-css-prontos-guia-pdf\">c&oacute;digos CSS prontos<\/a> para encurtar o processo de aprendizado.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-bootstrap-js\"><strong>Bootstrap.js<\/strong><\/h3><p>O arquivo <strong>Bootstrap.js<\/strong> &eacute; a parte central do Bootstrap. Ele consiste em arquivos JavaScript, respons&aacute;veis pela interatividade de um site.<\/p><p>Para poupar tempo em sempre terem que escrever sintaxes de JavaScript, os desenvolvedores tendem a usar jQuery. Essa &eacute; uma plataforma de c&oacute;digo-aberto popular que permite adicionar v&aacute;rias funcionalidades em um site.&nbsp;<\/p><p>Abaixo temos alguns exemplos do que o jQuery pode fazer:<\/p><ul class=\"wp-block-list\">\n<li>Executar fun&ccedil;&otilde;es Ajax, como remover dados de outros locais e de forma din&acirc;mica;<\/li>\n\n\n\n<li>Criar widgets usando uma cole&ccedil;&atilde;o de plugins JavaScript;<\/li>\n\n\n\n<li>Criar anima&ccedil;&otilde;es personalizadas usando propriedades do CSS;<\/li>\n\n\n\n<li>Adicionar dinamismo e interatividade aos conte&uacute;dos de um site.<\/li>\n<\/ul><p>Mesmo que um Bootstrap com propriedades CSS e elementos HTML funcione bem, ele precisa do jQuery para criar um design responsivo. Caso contr&aacute;rio, voc&ecirc; vai poder usar apenas as partes est&aacute;ticas e inativas do CSS.<\/p><p>Precisa de mais informa&ccedil;&atilde;o? Acesse este <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-jquery\/\">artigo<\/a> e aprenda mais sobre jQuery!<\/p><h3 class=\"wp-block-heading\" id=\"h-glyphicons-nbsp\"><strong>Glyphicons&nbsp;<\/strong><\/h3><p>&Iacute;cones s&atilde;o uma parte integral do front-end de um site. Eles s&atilde;o frequentemente associados com certos tipos de a&ccedil;&otilde;es e dados dispon&iacute;veis na interface do usu&aacute;rio. E o Bootstrap usa os <strong>Glyphicons<\/strong> para preencher essa necessidade.&nbsp;<\/p><p>O Bootstrap j&aacute; tem v&aacute;rios s&iacute;mbolos Glyphicons gratuitos j&aacute; desbloqueados para usar desde o come&ccedil;o. A vers&atilde;o gratuita dele tem um visual padr&atilde;o, mas d&aacute; conta do recado para as fun&ccedil;&otilde;es mais essenciais.&nbsp;<\/p><p>Se voc&ecirc; quer encontrar &iacute;cones mais estilosos, o <a href=\"https:\/\/www.glyphicons.com\/\" target=\"_blank\" rel=\"noopener\">Glyphicons<\/a> vende v&aacute;rios conjuntos de &iacute;cones premium que, com certeza, v&atilde;o fazer com que sites de nichos mais espec&iacute;ficos tenham um visual deslumbrante.&nbsp;<\/p><p>Se quiser, tamb&eacute;m &eacute; poss&iacute;vel fazer download de &iacute;cones baseados em temas espec&iacute;ficos. E sem gastar nada. Eles est&atilde;o dispon&iacute;veis em sites como <a href=\"https:\/\/www.flaticon.com\/packs\/ultimate-glyphicons\" target=\"_blank\" rel=\"noopener\">Flaticon<\/a>, <a href=\"https:\/\/glyphsearch.com\/\" target=\"_blank\" rel=\"noopener\">GlyphSearch<\/a> e <a href=\"https:\/\/icons8.com\/icons\/set\/glyph\" target=\"_blank\" rel=\"noopener\">Icons8<\/a>.&nbsp;&nbsp;<\/p><p>Alguns desses &iacute;cones podem ser afetados pelo CSS para que tenha designs diferentes, enquanto outros podem permanecer dna forma padr&atilde;o. O mais indicado &eacute; usar aqueles que mais se encaixam com a proposta e as necessidades do seu site.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-como-usar-o-bootstrap\"><strong>Como Usar o Bootstrap?<\/strong><\/h2><p>Para ter um entendimento melhor de como usar Bootstrap, d&ecirc; uma olhada no exemplo abaixo.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\" \/&gt;\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/&gt; \n&lt;title&gt;Bootstrap 101 Template&lt;\/title&gt;\n&lt;link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Hello, world!&lt;\/h1&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Agora, vamos destrinchar cada trecho apresentado no c&oacute;digo acima.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">meta charset=\"utf-8\"<\/pre><p>Mostra o conjunto de caracteres usado para escrever o site.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">meta http-equiv=\"X-UA-Compatible\"<\/pre><p>Determina a vers&atilde;o do Internet Explorer que deve renderizar a p&aacute;gina. Usando a vers&atilde;o Edge do navegador, ele fica configurado para usar o modo mais elevado dispon&iacute;vel.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">meta name=\"viewport\"<\/pre><p>Garante que a p&aacute;gina tem a propor&ccedil;&atilde;o de 1:1 em qualquer tamanho de visualiza&ccedil;&atilde;o.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\"<\/pre><p>&Eacute; a parte onde adicionamos o CSS do Bootstrap.&nbsp;&nbsp;<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"<\/pre><p>Carrega o jQuery pelo CDN do Google. &Eacute; melhor carreg&aacute;-lo de um CDN via HTTP, pois os arquivos podem ficar armazenados em cache por um ano.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">src=\"js\/bootstrap.min.js<\/pre><p>Adiciona o JavaScript do Bootstrap. Essa sintaxe deve ser sempre abaixo da sintaxe do jQuery para funcionar corretamente. E o processo de adi&ccedil;&atilde;o pode ser feito pela URL do <a href=\"https:\/\/www.google.com.br\/\" target=\"_blank\" rel=\"noopener\">Google<\/a> ou por download manual.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>O Bootstrap &eacute; um framework gratuito que tem ganhado cada vez mais popularidade entre os desenvolvedores front-end. <\/p><p>Ele pode ser usado facilmente e poupa muito tempo dos desenvolvedores em n&atilde;o ter mais que escrever manualmente as sintaxes todas as vezes que forem programar.<\/p><p>O framework tamb&eacute;m &eacute; muito flex&iacute;vel e pode acomodar quase todas as necessidade do desenvolvimento web front-end. As suas melhores habilidades incluem, mas n&atilde;o se limitam, a fun&ccedil;&otilde;es que permitem que p&aacute;ginas na internet funcionem em telas de qualquer tamanho.&nbsp;<\/p><p>Se voc&ecirc; &eacute; um desenvolvedor front-end, essa &eacute; a hora perfeita para come&ccedil;ar a usar Bootstrap!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc&ecirc; &eacute; um desenvolvedor front-end e est&aacute; cansado de escrever sempre as mesmas sintaxes CSS? Essa &eacute; a sua deixa para come&ccedil;ar a usar o Bootstrap! Neste artigo, vamos cobrir os benef&iacute;cios de usar esse framework para web e como fazer para incorpor&aacute;-lo no seu projeto corretamente. Tutorial em V&iacute;deo O Que &eacute; Bootstrap? &Eacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/o-que-e-bootstrap\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":92,"featured_media":17334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"%title%","rank_math_description":"Que tal usar um framework para agilizar o processo de desenvolvimento web? Aprenda o que \u00e9 Bootstrap e como usar a ferramenta!","rank_math_focus_keyword":"o que \u00e9 bootstrap","footnotes":""},"categories":[5602],"tags":[6972,4812,6025,6201],"class_list":["post-17318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glossario","tag-bootstrap","tag-css","tag-framework","tag-jquery"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-bootstrap","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-bootstrap","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=17318"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17318\/revisions"}],"predecessor-version":[{"id":49157,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17318\/revisions\/49157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/17334"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=17318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=17318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=17318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}