<!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>
 O Bootstrap é um framework HTML, CSS e JS para o desenvolvimento de componentes de interface e leiautes responsivos e eficientes para sites. Uma das funcionalidades mais utilizadas e importantes do Bootstrap é o seu sistema de grid, que é essencial para criar layouts responsivos de maneira simples e rápida.
 
 
 O sistema de grade do Bootstrap é fundamentalmente baseado em um layout de 12 colunas, o que permite que os desenvolvedores organizem visualmente o conteúdo de suas páginas de maneira flexível e responsiva. Essa estrutura facilita a responsividade do site, permitindo que ele se ajuste a diferentes tamanhos de tela sem perder a estética ou funcionalidade.
 
 
 A estrutura de grade do Bootstrap funciona com contêineres, linhas e colunas. O uso de 12 colunas permite uma variedade de combinações que podem dividir o espaço da página de várias forma, mantendo a consistência e a harmonia visual. Por exemplo, você pode ter três colunas de igual largura usando três colunas, cada uma usando quatro espaços de coluna, visualmente representado como:
 
 
 <math xmlns="http://www.w3.org/1998/Math/MathML">
 <mo>{</mo>
 <mi>col</mi>
 <mo>-</mo>
 <mi>md</mi>
 <mo>-</mo>
 <mn>4</mn>
 <mo>}</mo>
 <mo>{</mo>
 <mi>col</mi>
 <mo>-</mo>
 <mi>md</mi>
 <mo>-</mo>
 <mn>4</mn>
 <mo>}</mo>
 <mo>{</mo>
 <mi>col</mi>
 <mo>-</mo>
 <mi>md</mi>
 <mo>-</mo>
 <mn>4</mn>
 <mo>}</mo>
 </math>
 
 
 Analisando a questão em questão que afirma que "O sistema de grades do Bootstrap baseia-se em um leiaute de 12 colunas", percebemos que esta afirmação está correta. O sistema de grid do Bootstrap realmente se baseia em um leiaute dividido em 12 colunas, o que permite uma vasta gama de possibilidades de layout ao ajustar o conteúdo dentro destas colunas usando classes de grid específicas.
 

 Portanto, ao julgar a veracidade do item que afirma que o sistema de grades do Bootstrap é baseado em um layout de 12 colunas, constata-se que a informação é verdadeira, assegurando que a fundação do sistema de grid do Bootstrap suporta essa estrutura, fundamental para o design responsivo e flexível dos sites modernos.
 
 
 Portanto, a alternativa correta é C.
 

</body>
</html>

O sistema de grades do Bootstrap baseia-se em um leiaute de 12 colunas.

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


<!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>
 Bootstrap é um framework popular usado para desenvolver respostas rápidas e eficientes em interfaces da web. Concentrando-se na questão em análise, o Analista deseja que o container utilize toda a largura da tela. Para atingir esse objetivo no Bootstrap 4, a classe adequada precisa ser aplicada à tag <code><div></code>.
 
 
 As diversas classes fornecidas pelo Bootstrap permitem diferentes comportamentos de layout dos containers. Analisaremos cada alternativa fornecida para identificar qual corretamente atende ao requisito de ocupar toda a largura da tela:
 
 
 <ul>
 <li>A) container:
 Esta classe cria um container com uma largura máxima fixa em cada intervalo de resposta. Não é adequada para a funcionalidade de usar toda a largura da tela, pois possui margens fixas dependendo do tamanho da tela.
 </li>
 
 <li>B) max-width:
 Não é uma classe do Bootstrap, mas uma propriedade CSS comum que controla a largura máxima de um elemento. Portanto, não é a escolha correta para lidar com a largura total do container usando Bootstrap.
 </li>
 
 <li>C) stretch:
 Esta não é uma classe válida no contexto do Bootstrap para controlar a largura de containers. Portanto, também está incorreta.
 </li>
 
 <li>D) container-fluid:
 Corretamente, esta classe traz exatamente a funcionalidade solicitada: ela faz com que o <code><div></code> ocupar toda a largura da tela, ajustando-se a qualquer ponto de interrupção da viewport.
 </li>
 
 <li>E) full-width:
 Embora intuitivamente possa parecer correta, não é uma classe existente no Bootstrap. Consequentemente, essa alternativa está incorreta.
 </li>
 
 </ul>
 
 
 Ao examinar cada alternativa em relação ao que é oferecido pelo Bootstrap 4, fica evidente que a única opção que permite que o container use toda a largura da tela é a classe "container-fluid". Ela assegura que o container se ajuste à largura da viewport, não havendo restrição de largura máxima como ocorre com a classe "container".
 
 
 Portanto, a alternativa correta, que permite que o container ocupe toda a largura da tela usando Bootstrap 4, é de fato a opção D.
 

</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>
 Para entender a questão, é necessário conhecer o funcionamento do framework Bootstrap, especificamente sobre a funcionalidade de collapse, que permite mostrar e esconder conteúdos com uma animação de transição. O Bootstrap usa atributos data-* para controlar o comportamento de componentes interativos.
 

 Na estrutura do HTML fornecida, o programador deseja que o clicar no botão cause a aparição e desaparição do texto dentro do elemento com id <code>"a1"</code>. Para configurar essa funcionalidade usando Bootstrap, é importante utilizar o atributo <code>data-toggle</code>.
 

 Analisaremos então as alternativas citadas, explicando o papel de cada uma dentro do contexto da questão:
 

 <ul>
 <li>A) data-toggle="alternate":
 Essa alternativa é incorreta, pois "alternate" não é um valor reconhecido pelo Bootstrap para o atributo <code>data-toggle</code> nas funcionalidades de mostrar e esconder conteúdos.
 </li>
 

 <li>B) data-alternate="show-hide":
 Também incorreta. O Bootstrap não utiliza o atributo <code>data-alternate</code>, e "show-hide" não é um valor válido para gerenciar tais ações no contexto das funcionalidades padrão do Bootstrap.
 </li>
 

 <li>C) data-toggle="collapse":
 Esta é a alternativa correta. O atributo <code>data-toggle="collapse"</code> é especificamente usado no Bootstrap para controlar a visibilidade de conteúdos, fazendo-os colapsar (esconder) ou expandir (mostrar). É o método adequado para conseguir o comportamento desejado na questão.
 </li>
 

 <li>D) data-alternate="true":
 Incorreta, pois como mencionado anteriormente, não há atributo <code>data-alternate</code> reconhecido pelo Bootstrap, e o valor "true" não teria o efeito desejado.
 </li>
 

 <li>E) data-toggle="show-hide":
 Incorreta, pois apesar de <code>data-toggle</code> ser um atributo legítimo no Bootstrap, "show-hide" não é um valor válido para esse atributo, que não reconhece tal comando para alternar a visibilidade de elementos.
 </li>
 
 </ul>
 

 Conforme analisado, o atributo <code>data-toggle</code> com valor <code>"collapse"</code> é instrumental para permitir que um elemento HTML seja mostrado ou escondido em resposta a ações do usuário, como cliques em um botão, utilizando as funcionalidades do Bootstrap. Assim, o mecanismo de collapse é fundamental para alternar a visibilidade de um conteúdo, da forma descrita no enunciado.
 

 Portanto, a alternativa correta é C.
 

</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>
 Focaremos na análise do uso de classes em Bootstrap 4 que é um framework CSS que facilita o desenho de páginas responsivas.
 
 
 O Bootstrap 4 incorpora o flexbox para lidar com layouts de maneira mais eficaz e moderna, em comparação com o modelo anterior baseado em float. No Bootstrap, certas classes são usadas para aplicar o modelo de caixa flexível de forma rápida e eficiente.
 
 
 As classes no Bootstrap 4 são projetadas para simplificar a criação de layouts responsivos, sendo a classe d-flex uma das principais classes usadas para indicar um contêiner como flexbox.
 

 Analisemos cada alternativa para entender o motivo pelo qual cada uma está correta ou incorreta:
 
 <ul>
 <li>A) flex-grow:
 Incorreto. Esta classe não existe no Bootstrap, embora o termo flex-grow seja uma propriedade do CSS utilizada para determinar proporcionalmente o quanto um item flexível pode crescer em relação aos outros itens quando o espaço de distribuição permite. No Bootstrap, isso seria cotrolado em classes específicas, não pela flex-grow diretamente como classe.
 </li>
 
 <li>B) bg-flex:
 Incorreto. Não existe essa classe no Bootstrap. O prefixo bg- é tipicamente usado para classes que definem cores de fundo, como bg-primary ou bg-danger.
 </li>
 
 <li>C) d-flex:
 Correto. A classe d-flex converte o contêiner em que é aplicada em um contêiner flexbox, afetando todos os elementos filhos diretamente, fazendo com que se tornem flex items automaticamente.
 </li>
 
 <li>D) flex-fill:
 Incorreto. Esta classe é usada em um item flexível dentro de um contêiner flex para fazer esse item se expandir e ocupar todo o espaço disponível, não para criar um contêiner flex.
 </li>
 
 <li>E) flex-stretch:
 Incorreto. Não existe essa classe no Bootstrap. A capacidade de um item flexível para esticar para preencher o espaço disponível é controlada por outras propriedades e classes CSS, não diretamente por uma classe chamada flex-stretch.
 </li>
 
 </ul>
 
 
 Portanto, a alternativa correta é C.
 

</body>
</html>

20% / 80% em dispositivos de tela grande.

20% / 40% / 30% / 10% em todos os tipos de dispositivos.

60% / 40% em dispositivos de tela média.

25% / 75% em dispositivos de tela pequena.

33% / 66% em dispositivos de tela extragrande.

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