{"id":15184,"date":"2023-12-28T12:03:36","date_gmt":"2023-12-28T15:03:36","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15184"},"modified":"2023-12-28T12:07:00","modified_gmt":"2023-12-28T15:07:00","slug":"bootstrap-criar-tabs-e-guias-passo-a-passo","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15184","title":{"rendered":"Bootstrap: Criar Tabs e Guias – Passo a Passo"},"content":{"rendered":"\n

Nesse post iremos ver como criar tabs e guias<\/strong> de navega\u00e7\u00e3o em nosso site usando Bootstrap e fornecer uma experi\u00eancia de navega\u00e7\u00e3o din\u00e2mica.<\/p>\n\n\n\n

Tabs e guias s\u00e3o elementos de navega\u00e7\u00e3o que permitem aos usu\u00e1rios alternar entre diferentes se\u00e7\u00f5es de conte\u00fado sem sair da p\u00e1gina principal. Eles organizam o conte\u00fado de forma acess\u00edvel e intuitiva. Temos diversos exemplos de programas que usam tabs (guias ou abas) atualmente. Nem precisa ser um site; por exemplo, os programas do pacote Office da Microsoft usam tabs. Atualmente, acho que todos os navegadores de internet tamb\u00e9m usam guias.<\/p>\n\n\n\n

“guias<\/strong>“, “tabs<\/strong>” e “abas<\/strong>” s\u00e3o termos que geralmente se referem ao mesmo elemento em um site ou programs, usado para alternar entre diferentes se\u00e7\u00f5es de conte\u00fado.<\/p>\n\n\n\n

Veja tamb\u00e9m: Lista de \u00cdcones Gratuitos do Bootstrap<\/a><\/p>\n\n\n\n

Usaremos bootstrap por disponibilizar uma cria\u00e7\u00e3o, produ\u00e7\u00e3o, de forma muito mais r\u00e1pida se comparado ao uso puro de CSS. Sim, Bootstrap \u00e9 uma ferramenta popular de front-end que ajuda a criar sites e aplicativos com um design responsivo e moderno. Ele fornece um conjunto de estilos predefinidos, componentes e utilit\u00e1rios que facilitam a cria\u00e7\u00e3o de interfaces bonitas e funcionais. Veja: O que \u00e9 Bootstrap e como adicion\u00e1-lo no HTML<\/a><\/p>\n\n\n\n

Incluindo os links CDNs<\/h2>\n\n\n\n

Antes de tudo, para usar Bootstrap, devemos baixar as bibliotecas ou ent\u00e3o, simplesmente, colocar links de servidores que trar\u00e3o para nosso pc essas bibliotecas. Esses servidores s\u00e3o chamados de CDNs e vamos usar esse modo.<\/p>\n\n\n\n

Entre as tags <head><\/head> insira as seguintes linhas link<\/strong> e script<\/strong>:<\/p>\n\n\n\n

<<\/font>head<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n  <\/font><<\/font>title<\/font>><\/font>Exemplo de Mensagem com Bootstrap<\/font><\/<\/font>title<\/font>><\/font>\n\n   <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n   <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n   <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n<\/pre>\n\n\n\n
<\/p>\n\n\n\n
A Classes .nav, .nav-item e .nav-link<\/h2>\n\n\n\n
Para cria\u00e7\u00e3o das guias usamos a classe “.nav<\/strong>” e abaixo dela podemos usar listas HTML (<ul><li>…) com classes .nav-item <\/strong>e nav-link<\/strong> nos links.<\/p>\n\n\n\n
Podemos usar tamb\u00e9m o atributo aria-current=”page”<\/strong> para indicar a p\u00e1gina atual, em que p\u00e1gina estamos no momento. Isso \u00e9 \u00fatil para pessoas com alguma defici\u00eancia, para acessibilidade.<\/p>\n\n\n\n
GUIAS SIMPLES USANDO LISTA HTML<\/strong><\/p>\n\n\n\n
<<\/font>ul<\/font> <\/font>class<\/font>=<\/font>"nav"<\/font>><\/font>\n      <<\/font>li<\/font> <\/font>class<\/font>=<\/font>"nav-item"<\/font>><\/font>\n         <<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>class<\/font>=<\/font>"nav-link active"<\/font> <\/font>aria-current<\/font>=<\/font>"compras"<\/font>><\/font>Compras<\/u><\/font><\/<\/font>a<\/font>><\/font>\n      <\/<\/font>li<\/font>><\/font>\n      <<\/font>li<\/font> <\/font>class<\/font>=<\/font>"nav-item"<\/font>><\/font>\n         <<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>class<\/font>=<\/font>"nav-link"<\/font>><\/font>Mercadorias<\/u><\/font><\/<\/font>a<\/font>><\/font>\n      <\/<\/font>li<\/font>><\/font>\n      <<\/font>li<\/font> <\/font>class<\/font>=<\/font>"nav-item"<\/font>><\/font>\n         <<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>class<\/font>=<\/font>"nav-link"<\/font>><\/font>Estoque<\/u><\/font><\/<\/font>a<\/font>><\/font>\n      <\/<\/font>li<\/font>><\/font>\n      <<\/font>li<\/font> <\/font>class<\/font>=<\/font>"nav-item"<\/font>><\/font>\n         <<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>class<\/font>=<\/font>"nav-link"<\/font>><\/font>Cota\u00e7\u00f5es<\/u><\/font><\/<\/font>a<\/font>><\/font>\n      <\/<\/font>li<\/font>><\/font>\n<\/<\/font>ul<\/font>><\/font>\n<\/pre>\n\n\n\n
Podemos usar <ol> no lugar de <ul>. <\/p>\n\n\n\n
Veja que usamos active<\/strong> para mostrar em qual aba est\u00e1 ativa no momento.<\/p>\n\n\n\n
GUIAS SIMPLES USANDO CLASSES BOOTSTRAP<\/strong><\/p>\n\n\n\n
Nesse exemplo, usaremos o atributo disable <\/strong> para desabilitar o link. Poder\u00edamos t\u00ea-lo usado acima tamb\u00e9m.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Olha como est\u00e1 ficando. A primeira linha da foto foi quando usamos listas e o segundo quando usamos apenas classes bootstrap. Veja que cota\u00e7\u00f5es est\u00e1 desabilitado.<\/p>\n\n\n
\n
\"Bootstrap:
Exemplos de guias simples, usando bootstrap<\/figcaption><\/figure><\/div>\n\n\n
Alinhamento das guias<\/h2>\n\n\n\n
Por padr\u00e3o, as navs s\u00e3o alinhadas \u00e0 esquerda, mas voc\u00ea pode facilmente alter\u00e1-las para centralizar ou alinhar \u00e0 direita. <\/p>\n\n\n\n