<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <style>
 body {
 font-size: 16px;
 line-height: 1.5;
 }
 .blue {
 color: blue;
 }
 math {
 font-size: 16px;
 }
 </style>
</head>
<body>
 Esta questão aborda o uso do Bootstrap, uma das bibliotecas mais populares para desenvolvimento front-end, especialmente em aplicações web responsivas. O snippet de código fornecido apresenta uma estrutura básica de uma página HTML que utiliza classes do Bootstrap para criar um botão que alterna a visualização de um contêiner de informações ao clicar.
 
 
 No código apresentado, temos:
 
 
 <pre>
 <button type="button" class="btn btn-info" data-toggle=" I " 
 data-target="#container">Mais informações</button> 
 </pre>
 
 
 A funcionalidade de alternância (toggle) da Bootstrap depende do correto preenchimento do atributo data-toggle no botão. Vamos analisar o que cada uma das alternativas propõe:
 
 
 <ul>
 <li>A) collapse:
 A escolha correta, pois collapse é uma classe do Bootstrap que manipula a exibição de elementos, permitindo que sejam mostrados ou ocultados com um efeito de deslizamento. Quando aplicamos o valor collapse a data-toggle, o Bootstrap entende que o botão deve mostrar ou ocultar o elemento referenciado pelo data-target.
 </li>
 
 <li>B) toggle:
 Incorreto. Embora o termo toggle sugira alternância, no contexto do Bootstrap, este valor não é reconhecido como um comando válido para data-toggle. O termo mais apropriado e específico para colapsar ou expandir elementos em Bootstrap é collapse.
 </li>
 
 <li>C) alternate:
 Incorreto. O termo alternate não possui reconhecimento na biblioteca Bootstrap para manipulação de componentes. Bootstrap emprega termos específicos e padronizados como collapse para a funcionalidade que se deseja implementar.
 </li>
 
 <li>D) show-hide:
 Incorreto. Apesar de descritivo, show-hide não é um valor válido para data-toggle em Bootstrap. Para mostrar ou ocultar elementos, deve-se utilizar collapse, que já possui uma implementação adequada na biblioteca.
 </li>
 
 <li>E) modal-show:
 Incorreto. Embora esta terminologia esteja relacionada aos modais do Bootstrap, não é aplicável no contexto de alternância de visibilidade entre elemento. O modal é um componente diferente e modal-show não é um comando utilizado para colapso.
 </li>
 
 </ul>
 

 Para visualizar melhor a lógica implementada, consideremos o seguinte:
 
 
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mn>1</mn>
 <mo>+</mo>
 <mn>1</mn>
 <mo>=</mo>
 <mn>2</mn>
 <mo>→</mo>
 <mi>A</mi>
 <mo>(</mo>
 <mi>collapse</mi>
 <mo>)</mo>
 </math>
 
 
 Deste modo, data-toggle="collapse" realmente ativa o efeito desejado de aparecer e desaparecer o conteúdo contido dentro da div com id "container". O atributo data-target aponta para o elemento que queremos manipular, no caso, o div que contém o texto. Os conceitos de interação de usuário (UX) são frequentemente melhorados pelo uso de componentes interativos como os disponibilizados pelo Bootstrap.
 
 
 Por isso, a alternativa correta é A.
 
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <style>
 body {
 font-size: 16px;
 line-height: 1.5;
 }
 .blue {
 color: blue;
 }
 math {
 font-size: 16px;
 }
 </style>
</head>
<body>
 A questão aborda o uso do plugin modal do Bootstrap, uma ferramenta muito utilizada para criar caixas de diálogo que aparecem sobre a página corrente, conhecidas como modais. A funcionalidade dos modais no Bootstrap é frequentemente empregada para alertas, formulários e confirmações, entre outras interfaces de interação com o usuário sem necessidade de redirecionar a página.
 
 
 Para ativar o modal, utilizam-se atributos específicos em elementos como botões ou links. O atributo data-toggle com valor <code>"modal"</code> é utilizado para declarar que o comportamento esperado é abrir uma janela modal. Já o atributo que estamos investigando nesta questão é especificado para indicar qual modal deve ser aberto quando o evento for disparado. 
 
 
 Examinando as alternativas dadas:
 
 <ul>
 <li>A) data-toggle:
 É incorreto por descrever um atributo utilizado para ativar um modal, mas não especifica qual modal deve ser aberto.
 </li>
 
 <li>B) data-target:
 Correto. Esse é o atributo usado para indicar o identificador do modal que deve ser exibido ao ativar o controlador, como um botão ou link. Ele faz uma ligação direta ao id do elemento div que define o modal.
 </li>
 
 <li>C) modal-window:
 Incorreto porque não é um atributo reconhecido pelo Bootstrap para ativar ou targetizar um modal.
 </li>
 
 <li>D) modal-trigger:
 Incorreto por não ser um atributo padrão do Bootstrap. O atributo correto para disparar o modal seria data-toggle.
 </li>
 
 <li>E) modal-target:
 Incorreto pois não é um atributo padrão reconhecido por Bootstrap para referenciar um modal especificamente.
 </li>
 
 </ul>
 
 Portanto, ao considerar a funcionalidade e o papel essencial de cada atributo no contexto do Bootstrap e modais, fica evidente que o atributo data-target é essencial para direcionar qual modal deve ser aberto ao clicar em um elemento específico, correspondendo à resposta para a questão.
 
 
 Portanto, a alternativa correta é B.
 

</body>
</html>

Acerca de Bootstrap e Javascript, julgue os próximos itens.


Utilizando-se o Bootstrap, a expressão a seguir insere o
ícone <img alt='Imagem questão' src='https://d28sq8dmsjgyhi.cloudfront.net/5a9ffff2f92ea11a99f77806/imgs_cb_tjsis/88.png'/> no leiaute. 
&lt;span class="glyphicon-search"&gt;&lt;/span&gt;

Questões de Tecnologia da Informação - Bootstrap