<\/a><\/p>\n O Bootstrap nada mais \u00e9 que um framework Front End utilizados por milhares de desenvolvedores web<\/a> pelo mundo. A partir dele, muitas etapas do desenvolvimentos web se tornam mais r\u00e1pidas e din\u00e2micas, pois j\u00e1 trazem consigo diversos elementos prontos e estilizados.<\/p>\n Ele \u00e9 uma ferramenta gratuita para desenvolvimento HTML<\/a>, CSS<\/a> e JS. Portanto, \u00e9 uma ferramenta de c\u00f3digo fonte aberto para todos. Contudo, hoje em dia, \u00e9 o framework Front End mais conhecido e mais utilizado pelo mundo. Como uma tentativa de resolver uma incompatibilidade dentro da pr\u00f3pria equipe, os engenheiros Jacob Thorton e Mark Otto, criaram em 2010 o que \u00e9 hoje o Bootstrap.<\/p>\n O objetivo inicial era otimizar o desenvolvimento atrav\u00e9s da ado\u00e7\u00e3o de uma estrutura \u00fanica, reduzindo assim, inconsist\u00eancias entre as diversas formas de codificar que variavam de cada profissional. E a tentativa deu t\u00e3o certo que eles perceberam o grande potencial da ferramenta, lan\u00e7ando-a no GitHub como um software livre.<\/p>\n Sendo lan\u00e7ado no GitHub no segundo semestre de 2011, o framework logo ganhou fama, sendo uma das ferramentais mais populares no GitHub j\u00e1 no come\u00e7o de 2012.<\/p>\n O Bootstrap oferece uma enorme variedade de Plugins e temas compat\u00edveis com outros frameworks. Al\u00e9m disto, possui integra\u00e7\u00e3o com qualquer linguagem de programa\u00e7\u00e3o. Tamb\u00e9m \u00e9 um software de c\u00f3digo aberto, gratuito. Em pouco tempo ap\u00f3s o seu lan\u00e7amento j\u00e1 recebeu a contribui\u00e7\u00e3o de in\u00fameros desenvolvedores de todo o planeta. Desta forma, tornando-o o software livre mais ativo do mundo. Conforme explicado anteriormente, o Bootstrap \u00e9 hoje um dos frameworks\/Front End mais utilizados pelo mundo inteiro. Portanto, sua import\u00e2ncia para a cria\u00e7\u00e3o de websites \u00e9 de enorme refer\u00eancia.<\/p>\n Seus padr\u00f5es seguem os princ\u00edpios de usabilidade e as tend\u00eancias de design para interfaces. Al\u00e9m disso, sua padroniza\u00e7\u00e3o permite que os sites tenham um visual atraente, ou seja, uma forma de criar p\u00e1ginas<\/a> esteticamente agrad\u00e1veis. Para utilizar fa\u00e7a o download do Bootstrap no site oficial<\/a>\u00a0da ferramenta. Adicione os arquivos \u201cbootstrap.min.css\u201d e \u201cbootstrap.min.js\u201d nas pastas correspondentes a eles dentro do seu site. Depois, \u00e9 s\u00f3 chamar o CSS e o JS dentro da tag<\/a> <head><\/strong> do HTML.<\/a> \u00c9 importante lembrar que este framework acessa a biblioteca jQuery para ativar o comportamento de seus plugins. Portanto, lembre-se de inseri-lo em sua p\u00e1gina para que tudo funcione perfeitamente.<\/p>\n Outra forma, \u00e9 chamando atrav\u00e9s de um artigo externo, conforme o pr\u00f3prio exemplo do Bootstrap:<\/p>\n Dessa forma, temos o template inicial conforme o c\u00f3digo abaixo:<\/p>\n <\/a><\/p>\n Com o Bootstrap \u00e9 poss\u00edvel realizar a cria\u00e7\u00e3o de interfaces gr\u00e1ficas para sua p\u00e1gina na web de forma r\u00e1pida e f\u00e1cil. Portanto, \u00e9 poss\u00edvel fazer diversas coisas. Voc\u00ea pode estar estudando a variedade de op\u00e7\u00f5es atrav\u00e9s da documenta\u00e7\u00e3o<\/a> do Bootstrap. Vamos citar aqui alguma das principais ferramentas utilizadas para o desenvolvimento com este framework.<\/p>\n Inicialmente, temos que utilizar a meta tag<\/a> para ativar o responsivo em nossa p\u00e1gina. Basta incluir no Head do nosso documento a seguinte linha de c\u00f3digo:<\/p>\n Com isso podemos utilizar facilmente o sistema de cont\u00eainer<\/a> e grid<\/a> do Bootstrap para poder realizar a cria\u00e7\u00e3o de interfaces gr\u00e1ficas responsivas. Como por exemplo no c\u00f3digo abaixo:<\/p>\n Com isso, obtemos uma p\u00e1gina com 3 colunas de propor\u00e7\u00f5es id\u00eanticas. Por\u00e9m, gra\u00e7as a classe col-sm, ao chegar no tamanho de 576px (tamanho do valor SM), ela realiza uma quebra de linhas automaticamente. Inicialmente teremos algo como na imagem abaixo:<\/p>\n Ao chegarmos a uma tela com valor de 576px ou menor, \u00e9 realizado a quebra de linha e obtemos ent\u00e3o algo como na imagem abaixo:<\/p>\n Com o Bootstrap, podemos estar criando tabelas Bootstrap<\/a> com padr\u00f5es pr\u00e9 definidos de uma forma r\u00e1pida e simples. Vejamos o exemplo abaixo:<\/p>\n Dessa forma, teremos como resultado algo como na imagem abaixo:<\/p>\n Voc\u00ea pode estar aprendendo mais sobre tabelas em nosso artigo sobre tabelas<\/a> Bootstrap. Com a leitura desse artigo voc\u00ea ser\u00e1 capaz de criar qualquer tabela<\/a> com esse framework.<\/p>\n Use as classes .figure<\/strong>, .figure-img<\/strong> e .figure-caption<\/strong> para conseguir alguns estilos bases para os elementos HTML5<\/a> <figure><\/strong> e <figcaption><\/strong>. Imagens na tag<\/a> <figure><\/strong> n\u00e3o possuem tamanhos expl\u00edcitos, por isso, tenha certeza de colocar a classe .img-fluid<\/strong> no elemento <img><\/strong><\/a>, para fazer com que ela seja responsiva.<\/p>\n Vejamos um simples exemplo abaixo:<\/p>\n Com isso teremos como resultado algo como na imagem abaixo:<\/p>\n Com o framework \u00e9 poss\u00edvel estar criando um modal<\/a>. Um modal \u00e9 basicamente uma janela que abre sobre o conte\u00fado da p\u00e1gina sem se desfazer dele. Como na imagem abaixo:<\/p>\n Voc\u00ea pode estar lendo mais a respeito e aprendendo a criar o seu pr\u00f3prio modal bootstrap em nosso artigo sobre<\/a>.<\/p>\n Os bot\u00f5es Bootstrap<\/a> s\u00e3o bot\u00f5es personalizados, com suporte a tamanhos, estilos e muito mais. Portanto, s\u00e3o utilizados dentro de formul\u00e1rios,<\/a> di\u00e1logos ou outras coisas.<\/p>\n O Bootstrap possui v\u00e1rios estilos de bot\u00f5es pr\u00e9-definidos para diversos prop\u00f3sitos, al\u00e9m de outros recursos extras para mais controle.<\/p>\n Vejamos o exemplo abaixo:<\/p>\n Dessa forma temos diversos tipos de bot\u00f5es como na imagem abaixo:<\/p>\n Voc\u00ea pode estar lendo mais sobre em nosso artigo sobre bot\u00f5es<\/a> Bootstrap, onde explicamos detalhadamente. Com a leitura deste, temos a certeza que voc\u00ea conseguir\u00e1 criar e utilizar bot\u00f5es a vontade em suas p\u00e1ginas com o Bootstrap.<\/p>\n Al\u00e9m de tudo que citamos, \u00e9 poss\u00edvel fazer muito mais. O Bootstrap \u00e9 um framework bem completo e extremamente poderoso. Com ele voc\u00ea \u00e9 capaz de criar p\u00e1ginas modernas completas. Portanto recomendamos a leitura da documenta\u00e7\u00e3o<\/a> para o aprendizado assim como ver alguns exemplos que est\u00e3o disponibilizados<\/a>.<\/p>\n Agora, vamos ver mais a fundo as caracter\u00edsticas que fazem este framework valer a pena. Entre elas:<\/p>\n Talvez uma das caracter\u00edsticas mais interessantes deste framework \u00e9 o fato dele possuir uma extensa biblioteca de componentes, como \u00edcones, caixas de texto, pain\u00e9is e cores em links.<\/p>\n Assim como \u00e9 objetivo de todo framework, ele permite que menos c\u00f3digo possa ser escrito, j\u00e1 que ele entrega uma s\u00e9rie de formata\u00e7\u00f5es visuais prontas. A \u00fanica necessidade do desenvolvedor \u00e9 saber qual a classe ele deve chamar.<\/p>\n Se voc\u00ea j\u00e1 \u00e9 desenvolvedor, deve saber como este recurso pode ser \u00fatil na sua vida. Menos c\u00f3digo digitado significa\u00a0uma excelente forma de ganhar tempo.<\/p>\n No site oficial do Bootstrap, voc\u00ea encontra uma documenta\u00e7\u00e3o bem completa do framework. Por ter uma documenta\u00e7\u00e3o sempre atualizada e de f\u00e1cil acesso, tirar d\u00favidas da ferramenta \u00e9 extremamente f\u00e1cil.<\/p>\n N\u00e3o apenas d\u00favidas, mas uma documenta\u00e7\u00e3o atualizada permite que as melhores pr\u00e1ticas de programa\u00e7\u00e3o com o framework sejam conhecidas. Isto aumenta a chance de novos projetos serem feitos com qualidade visual e t\u00e9cnica, o que \u00e9 \u00f3timo para o valor final do produto.<\/p>\n O Bootstrap traz consigo um sistema de layout 100% responsivo, o que facilita muito a vida do desenvolvedor. Utilizando apenas o Bootstrap \u00e9 capaz de manter a p\u00e1gina completamente responsiva. E isso tudo com poucas linhas de c\u00f3digo. Apesar de tantas qualidades, o uso do Bootstrap, assim como de qualquer ferramenta, tamb\u00e9m tem suas desvantagens.<\/p>\n A principal desvantagem seu uso \u00e9 o excesso de padroniza\u00e7\u00e3o. Por ser muito utilizado mundo afora, \u00e9 poss\u00edvel perceber v\u00e1rios sites que seguem um mesmo padr\u00e3o, como se fossem praticamente c\u00f3pias um dos outros. Isso torna ruim do ponto de vista de inova\u00e7\u00e3o. Por\u00e9m, ainda assim, n\u00e3o \u00e9 um fator decisivo que comprometa o uso ou desuso do framework.<\/p>\nO que \u00e9 o Bootstrap<\/h2>\n
\n<\/a><\/p>\nComo surgiu o Bootstrap<\/h2>\n
\n<\/a><\/p>\nA import\u00e2ncia do Bootstrap<\/h2>\n
\n<\/a><\/p>\nComo usar o Bootstrap<\/h2>\n
CSS<\/h4>\n
<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" integrity=\"sha384-MCw98\/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\">\n\n<\/pre>\n
JavaScript<\/h4>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js\" integrity=\"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK\/l8WvCWPIPm49\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\" integrity=\"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW\/JmZQ5stwEULTy\" crossorigin=\"anonymous\"><\/script><\/pre>\n
Template inicial<\/h4>\n
<!DOCTYPE html>\n<html lang=\"pt-br\">\n <head>\n <!-- Meta tags Obrigat\u00f3rias -->\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n\n <!-- Bootstrap CSS -->\n <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" integrity=\"sha384-MCw98\/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\">\n\n <title>Ol\u00e1, mundo!<\/title>\n <\/head>\n <body>\n <h1>Ol\u00e1, mundo!<\/h1>\n\n <!-- JavaScript (Opcional) -->\n <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->\n <script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js\" integrity=\"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK\/l8WvCWPIPm49\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\" integrity=\"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW\/JmZQ5stwEULTy\" crossorigin=\"anonymous\"><\/script>\n <\/body>\n<\/html><\/pre>\n
O que eu posso fazer<\/h2>\n
1. Utilizar layout de Grid responsivo<\/h4>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n<\/pre>\n
<div class=\"container\">\n <div class=\"row\">\n <div class=\"col-sm\">\n Uma de tr\u00eas colunas\n <\/div>\n <div class=\"col-sm\">\n Uma de tr\u00eas colunas\n <\/div>\n <div class=\"col-sm\">\n Uma de tr\u00eas colunas\n <\/div>\n <\/div>\n<\/div><\/pre>\n
![\"Exemplo](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/exemplo01.jpg\")
<\/p>\n![\"Exemplo](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/exemplo02.jpg\")
<\/p>\n2. Criar tabelas<\/h4>\n
<table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">#<\/th>\n <th scope=\"col\">Nome<\/th>\n <th scope=\"col\">Sobrenome<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <th scope=\"row\">1<\/th>\n <td>Jo\u00e3o<\/td>\n <td>Ant\u00f4nio<\/td>\n <\/tr>\n <tr>\n <th scope=\"row\">2<\/th>\n <td>Andr\u00e9<\/td>\n <td>Lu\u00eds<\/td>\n <\/tr>\n <tr>\n <th scope=\"row\">3<\/th>\n <td>Bruno<\/td>\n <td>Junior<\/td>\n <\/tr>\n <\/tbody>\n<\/table><\/pre>\n
![\"Tabela](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/exemplo03.jpg\")
<\/p>\n3. Criar figuras com estilos bases<\/h4>\n
<figure class=\"figure\">\n <img src=\"...\/400x300\" class=\"figure-img img-fluid rounded\" alt=\"figura generica de 400x300\">\n <figcaption class=\"figure-caption text-right\">Uma legenda para a imagem acima.<\/figcaption>\n<\/figure><\/pre>\n
![\"Figura](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/exemplo04-300x240.jpg\")
<\/p>\n4. Criar um modal Bootstrap<\/h4>\n
![\"Modal](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/exemplo05.jpg\")
<\/p>\n5. Bot\u00f5es<\/h5>\n
<button type=\"button\" class=\"btn btn-primary\">Primary<\/button> \n<button type=\"button\" class=\"btn btn-secondary\">Secondary<\/button> \n<button type=\"button\" class=\"btn btn-success\">Success<\/button> \n<button type=\"button\" class=\"btn btn-danger\">Danger<\/button> \n<button type=\"button\" class=\"btn btn-warning\">Warning<\/button> \n<button type=\"button\" class=\"btn btn-info\">Info<\/button> \n<button type=\"button\" class=\"btn btn-light\">Light<\/button> \n<button type=\"button\" class=\"btn btn-dark\">Dark<\/button> \n<button type=\"button\" class=\"btn btn-link\">Link<\/button><\/pre>\n
![\"Bot\u00f5es](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/Sem-t\u00edtulo-1.jpg\")
<\/p>\n6. E muito mais<\/h4>\n
<\/a>Caracter\u00edsticas e Vantagens do Bootstrap<\/h2>\n
\n
Biblioteca de componentes<\/h4>\n
Reuso de c\u00f3digo<\/h4>\n
Documenta\u00e7\u00e3o e Comunidade<\/h4>\n
Responsividade<\/h4>\n
\n<\/a><\/p>\nDesvantagens de usar o Bootstrap<\/h2>\n