{"id":4260,"date":"2019-08-27T19:23:22","date_gmt":"2019-08-27T19:23:22","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=4260"},"modified":"2024-01-09T07:06:49","modified_gmt":"2024-01-09T10:06:49","slug":"botao-bootstrap","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/","title":{"rendered":"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site"},"content":{"rendered":"<p>O Bot\u00e3o Bootstrap \u00e9 um elemento muito utilizado nas p\u00e1ginas feitas em Bootstrap. Contudo, antes disso \u00e9 necess\u00e1rio saber <a href=\"https:\/\/getbootstrap.com.br\/\">como utilizar e instalar<\/a> o Bootstrap.\u00a0 Voc\u00ea pode estar utilizando o template inicial recomendado pelo pr\u00f3prio site do Bootstrap:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n  &lt;head&gt;\n    &lt;!-- Meta tags Obrigat\u00f3rias --&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" integrity=\"sha384-MCw98\/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\"&gt;\n\n    &lt;title&gt;Ol\u00e1, mundo!&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Ol\u00e1, mundo!&lt;\/h1&gt;\n\n    &lt;!-- JavaScript (Opcional) --&gt;\n    &lt;!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS --&gt;\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;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\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\" integrity=\"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW\/JmZQ5stwEULTy\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Enfim, tendo instalado o Bootstrap, podemos ent\u00e3o prosseguir para os assuntos sobre o bot\u00e3o Bootstrap. Neste artigo veremos:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top01\">O que \u00e9 um Bot\u00e3o Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top02\">Bot\u00e3o do boostrap B\u00e1sico<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top03\">Bot\u00f5es Outline<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top04\">Tamanhos do Bot\u00e3o Bootstrap<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top05\">Estado Ativo e Desativo<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top06\">CheckBox e Radios<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#top07\">Bot\u00e3o DropDown<\/a><\/li>\n<\/ul>\n<p><a name=\"top01\"><\/a><\/p>\n<h2>O que \u00e9 um Bot\u00e3o Bootstrap<\/h2>\n<p>Os bot\u00f5es Bootstrap s\u00e3o bot\u00f5es personalizados, com suporte a tamanhos, <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos<\/a> e muito mais. Portanto, s\u00e3o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener\">utilizados dentro de formul\u00e1rios,<\/a> di\u00e1logos ou outras coisas.<\/p>\n<p>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<h3>A classe .btn<\/h3>\n<p>A classe <strong>.btn<\/strong> \u00e9 a classe que define um bot\u00e3o no Bootstrap. Originalmente, criado para ser utilizado junto ao elemento <strong>&lt;button&gt;<\/strong>. Por\u00e9m, \u00e9 poss\u00edvel utilizar com outros elementos, como <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\">os links &lt;a&gt;<\/a> e os <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\">inputs &lt;input&gt;<\/a>.<\/p>\n<p>Quando usando classes de bot\u00e3o em elementos link <strong>&lt;a&gt;<\/strong> que funcionam como gatilhos in-page (igual aos conte\u00fados colaps\u00e1veis), estas \u00e2ncoras devem receber o atributo <strong>role=&#8221;button&#8221;<\/strong> para indicar seu prop\u00f3sito a tecnologias assistivas, como navegadores.<br \/>\n<a name=\"top02\"><\/a><\/p>\n<h2>Bot\u00e3o do Boostrap B\u00e1sico<\/h2>\n<p>Vamos verificar o c\u00f3digo abaixo contendo exemplos simples de bot\u00f5es do Bootstrap:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;button type=\"button\" class=\"btn btn-primary\"&gt;Primary&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-secondary\"&gt;Secondary&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-success\"&gt;Success&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-danger\"&gt;Danger&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-warning\"&gt;Warning&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-info\"&gt;Info&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-light\"&gt;Light&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-dark\"&gt;Dark&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-link\"&gt;Link&lt;\/button&gt;\n<\/pre>\n<p>Com isso, obtemos ent\u00e3o o resultado dos bot\u00f5es abaixo:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-4264 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/Sem-t\u00edtulo.jpg\" alt=\"Bot\u00f5es Bootstrap\" width=\"873\" height=\"93\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/Sem-t\u00edtulo.jpg 873w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/Sem-t\u00edtulo-300x32.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/Sem-t\u00edtulo-768x82.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/Sem-t\u00edtulo-1x1.jpg 1w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><\/p>\n<p>Observe tamb\u00e9m, que al\u00e9m da classe .btn, foi utilizado uma segunda classe, que \u00e9 a classe que define o estilo e cor do bot\u00e3o Bootstrap.<\/p>\n<p>As cores s\u00e3o definidas baseados em padr\u00f5es de tecnologia assistida. Por\u00e9m, podemos usar quaisquer uma delas para qualquer objetivo.<\/p>\n<p>Vamos ver\u00a0 agora o exemplo abaixo usando o bot\u00e3o Bootstrap dentro da tag link e das tags inputs:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;a class=\"btn btn-primary\" href=\"#\" role=\"button\"&gt;Link&lt;\/a&gt;\n&lt;button class=\"btn btn-primary\" type=\"submit\"&gt;Bot\u00e3o&lt;\/button&gt;\n&lt;input class=\"btn btn-primary\" type=\"button\" value=\"Input\"&gt;\n&lt;input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\"&gt;\n&lt;input class=\"btn btn-primary\" type=\"reset\" value=\"Reset\"&gt;<\/pre>\n<p>O resultado do exemplo acima ser\u00e1 ent\u00e3o:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4266 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg\" alt=\"\" width=\"437\" height=\"70\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg 437w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2-300x48.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2-1x1.jpg 1w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/><br \/>\n<a name=\"top03\"><\/a><\/p>\n<h2>Bot\u00f5es Outline<\/h2>\n<p>Caso queira utilizar o bota\u00e7\u00e3o s\u00f3 que sem uma cor de fundo, \u00e9 poss\u00edvel ent\u00e3o utilizar as classes originais acrescentando <strong>.btn-outline-<\/strong>&#8230;<\/p>\n<p>. Segue o exemplo conforme o c\u00f3digo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;button type=\"button\" class=\"btn btn-outline-primary\"&gt;Primary&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-secondary\"&gt;Secondary&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-success\"&gt;Success&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-danger\"&gt;Danger&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-warning\"&gt;Warning&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-info\"&gt;Info&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-light\"&gt;Light&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-outline-dark\"&gt;Dark&lt;\/button&gt;<\/pre>\n<p>Desta forma, temos ent\u00e3o o seguinte resultado:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4267 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/03-2.jpg\" alt=\"\" width=\"801\" height=\"76\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/03-2.jpg 801w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/03-2-300x28.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/03-2-768x73.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/03-2-1x1.jpg 1w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><br \/>\n<a name=\"top04\"><\/a><\/p>\n<h2>Tamanhos do Bot\u00e3o Bootstrap<\/h2>\n<p>O Bot\u00e3o Bootstrap tamb\u00e9m permite a estiliza\u00e7\u00e3o do seu tamanho, podendo ser um tamanho maior ou menor que o original.<\/p>\n<p>Para os bot\u00f5es ficarem maiores, \u00e9 necess\u00e1rio utilizar a classe <strong>btn.lg<\/strong>, j\u00e1 para os bot\u00f5es menores, utiliza-se a classe <strong>btn-sm<\/strong>.<\/p>\n<p>Vejamos ent\u00e3o os exemplos abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;button type=\"button\" class=\"btn btn-primary btn-lg\"&gt;Bot\u00e3o grande&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-primary\"&gt;Bot\u00e3o normal&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-primary btn-sm\"&gt;Bot\u00e3o pequeno&lt;\/button&gt;\n<\/pre>\n<p>Dessa forma, observe abaixo os diferentes tamanhos para o bot\u00e3o Bootstrap:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4268 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/04-1.jpg\" alt=\"\" width=\"510\" height=\"96\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/04-1.jpg 510w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/04-1-300x56.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/04-1-1x1.jpg 1w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>Podemos ainda criar um bot\u00e3o que ocupe um bloco inteiro do tamanho do elemento pai, os <strong>btn-block:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div style=\"width: 500px;\"&gt;\n    &lt;button type=\"button\" class=\"btn btn-primary btn-lg btn-block\"&gt;Bot\u00e3o block-level&lt;\/button&gt;\n&lt;\/div&gt;<\/pre>\n<p>Observe que no exemplo anterior, delimitamos uma largura de 500px para a div pai. Portanto, dessa forma, nosso bot\u00e3o ter\u00e1 o mesmo comprimento conforme a imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4269 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/05-1.jpg\" alt=\"Bot\u00e3o Bootstrap fulllsize\" width=\"634\" height=\"90\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/05-1.jpg 634w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/05-1-300x43.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/05-1-1x1.jpg 1w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><br \/>\n<a name=\"top05\"><\/a><\/p>\n<h2>Estado Ativo e Desativo<\/h2>\n<p>Os bot\u00f5es tamb\u00e9m podem receber um estado de ativado ou de desativado.<\/p>\n<p>Quando ativados, ou seja, pressionado, significa que eles est\u00e3o ativados. No caso do elemento <strong>&lt;button&gt;<\/strong>, n\u00e3o \u00e9 necess\u00e1rio usar essa classe, pois, a mesma j\u00e1 possui uma pseudo-classe que realiza essa opera\u00e7\u00e3o. J\u00e1 para outros elementos, voc\u00ea pode for\u00e7ar essa apar\u00eancia incluindo a classe <strong>.active<\/strong> ou o atributo <strong>aria-pressed=&#8221;true&#8221;<\/strong>.<\/p>\n<p>Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;a href=\"#\" class=\"btn btn-primary btn-lg active\" role=\"button\" aria-pressed=\"true\"&gt;Link prim\u00e1rio&lt;\/a&gt;\n&lt;a href=\"#\" class=\"btn btn-secondary btn-lg active\" role=\"button\" aria-pressed=\"true\"&gt;Link&lt;\/a&gt;<\/pre>\n<p>O resultado ser\u00e1 conforme a imagem posterior:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4271 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/06-1.jpg\" alt=\"\" width=\"287\" height=\"82\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/06-1.jpg 287w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/06-1-1x1.jpg 1w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><\/p>\n<p>J\u00e1 para desativar um bot\u00e3o utilize o atributo <strong>disabled<\/strong> em qualquer elemento<strong> &lt;button&gt;<\/strong>. O Elemento <strong>&lt;a&gt;<\/strong> n\u00e3o suporta este atributo, portanto, \u00e9 necess\u00e1rio utilizar a c.asse <strong>disabled.\u00a0<\/strong>Dessa forma, vejamos o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;button type=\"button\" class=\"btn btn-lg btn-primary\" disabled&gt;Bot\u00e3o prim\u00e1rio&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn btn-secondary btn-lg\" disabled&gt;Bot\u00e3o&lt;\/button&gt;\n&lt;br&gt;&lt;br&gt;\n&lt;a href=\"#\" class=\"btn btn-primary btn-lg disabled\" tabindex=\"-1\" role=\"button\" aria-disabled=\"true\"&gt;Link prim\u00e1rio&lt;\/a&gt;\n&lt;a href=\"#\" class=\"btn btn-secondary btn-lg disabled\" tabindex=\"-1\" role=\"button\" aria-disabled=\"true\"&gt;Link&lt;\/a&gt;\n<\/pre>\n<p>Portanto, teremos ent\u00e3o o seguinte resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4272 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/07-1.jpg\" alt=\"\" width=\"334\" height=\"170\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/07-1.jpg 334w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/07-1-300x153.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/07-1-1x1.jpg 1w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><br \/>\n<a name=\"top06\"><\/a><\/p>\n<h2>CheckBox e Radios<\/h2>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel utilizar um bot\u00e3o Bootstrap para checkbox e para radios. Vejamos o exemplo abaixo para checkbox:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"btn-group-toggle\" data-toggle=\"buttons\"&gt;\n  &lt;label class=\"btn btn-secondary active\"&gt;\n    &lt;input type=\"checkbox\" checked autocomplete=\"off\"&gt; Checado\n  &lt;\/label&gt;\n&lt;\/div&gt;<\/pre>\n<p>Dessa forma, observe ent\u00e3o que a classe btn foi colocada dentro do <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/labels-html\/\">label<\/a>, e n\u00e3o no input.<\/p>\n<p>Com isso, temos o resultado como na imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4274 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/08-1.jpg\" alt=\"checkbox Botao Bootstrap\" width=\"123\" height=\"81\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/08-1.jpg 123w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/08-1-1x1.jpg 1w\" sizes=\"(max-width: 123px) 100vw, 123px\" \/><\/p>\n<p>Vejamos ent\u00e3o para o caso de um grupo de inputs do tipo radio:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"btn-group btn-group-toggle\" data-toggle=\"buttons\"&gt;\n  &lt;label class=\"btn btn-secondary active\"&gt;\n    &lt;input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked&gt; Ativo\n  &lt;\/label&gt;\n  &lt;label class=\"btn btn-secondary\"&gt;\n    &lt;input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\"&gt; Radio\n  &lt;\/label&gt;\n  &lt;label class=\"btn btn-secondary\"&gt;\n    &lt;input type=\"radio\" name=\"options\" id=\"option3\" autocomplete=\"off\"&gt; Radio\n  &lt;\/label&gt;\n&lt;\/div&gt;<\/pre>\n<p>Com isso, teremos ent\u00e3o o exemplo da imagem a seguir:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4275 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/09.jpg\" alt=\"\" width=\"246\" height=\"62\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/09.jpg 246w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/09-1x1.jpg 1w\" sizes=\"(max-width: 246px) 100vw, 246px\" \/><br \/>\n<a name=\"top07\"><\/a><\/p>\n<h2>Bot\u00e3o DropDown<\/h2>\n<p>Voc\u00ea tamb\u00e9m pode estar criando bot\u00f5es do tipo dropdown no boostrap.<\/p>\n<p>Vejamos o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"dropdown\"&gt;\n  &lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"&gt;\n    Bot\u00e3o dropdown\n  &lt;\/button&gt;\n  &lt;div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"&gt;\n    &lt;a class=\"dropdown-item\" href=\"#\"&gt;Alguma a\u00e7\u00e3o&lt;\/a&gt;\n    &lt;a class=\"dropdown-item\" href=\"#\"&gt;Outra a\u00e7\u00e3o&lt;\/a&gt;\n    &lt;a class=\"dropdown-item\" href=\"#\"&gt;Alguma coisa aqui&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p>Dessa forma, o resultado ser\u00e1 como nas imagens abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4276 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/10.-jpg.jpg\" alt=\"Botao boostrap dropdown\" width=\"213\" height=\"71\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/10.-jpg.jpg 213w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/10.-jpg-1x1.jpg 1w\" sizes=\"(max-width: 213px) 100vw, 213px\" \/><\/p>\n<p>Posteriormente, quando selecionado, aparece a lista dropdown:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4277 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/11.-jpg.jpg\" alt=\"Botao boostrap dropdown\" width=\"263\" height=\"220\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/11.-jpg.jpg 263w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/11.-jpg-1x1.jpg 1w\" sizes=\"(max-width: 263px) 100vw, 263px\" \/><\/p>\n<p>Voc\u00ea pode estar explorando mais sobre os dropdowns, na <a href=\"https:\/\/getbootstrap.com.br\/docs\/4.1\/components\/dropdowns\/\">documenta\u00e7\u00e3o oficial<\/a> do Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Bot\u00e3o Bootstrap \u00e9 um elemento muito utilizado nas p\u00e1ginas feitas em Bootstrap. Contudo, antes disso \u00e9 necess\u00e1rio saber como utilizar e instalar o Bootstrap.\u00a0 Voc\u00ea pode estar utilizando o template inicial recomendado pelo pr\u00f3prio site do Bootstrap: &lt;!DOCTYPE html&gt; &lt;html lang=&#8221;pt-br&#8221;&gt; &lt;head&gt; &lt;!&#8211; Meta tags Obrigat\u00f3rias &#8211;&gt; &lt;meta charset=&#8221;utf-8&#8243;&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, shrink-to-fit=no&#8221;&gt; [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-4260","post","type-post","status-publish","format-standard","hentry","category-criar-sites","category-desenvolvedores","category-tutoriais"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost<\/title>\n<meta name=\"description\" content=\"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost\" \/>\n<meta property=\"og:description\" content=\"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-27T19:23:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:06:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/\",\"name\":\"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg\",\"datePublished\":\"2019-08-27T19:23:22+00:00\",\"dateModified\":\"2024-01-09T10:06:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg\",\"width\":437,\"height\":70},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost","description":"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/","og_locale":"pt_BR","og_type":"article","og_title":"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost","og_description":"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-08-27T19:23:22+00:00","article_modified_time":"2024-01-09T10:06:49+00:00","og_image":[{"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg","type":"","width":"","height":""}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/","name":"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg","datePublished":"2019-08-27T19:23:22+00:00","dateModified":"2024-01-09T10:06:49+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"Bot\u00e3o Bootstrap. Tudo Que voc\u00ea precisar\u00e1 para dominar essa tecnologia e incluir boto\u00e7\u00f5es em suas paginas feitas com bootstrap.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/02-2.jpg","width":437,"height":70},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/botao-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Bot\u00e3o Bootstrap: Exemplos e modelos de bot\u00e3o para seu site"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4260"}],"version-history":[{"count":19,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4260\/revisions"}],"predecessor-version":[{"id":13068,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4260\/revisions\/13068"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}