Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Solução para class Panel

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Começando a implementar o site seguindo o layout e atividade Estilizando a seção Sobre Nós

por Igor Albert Oliveira da Cruz
| 285.6k xp | 65 posts

Galera, Diante das dificuldades que venho apresentando nesta aula, passei a verificar a documentação da nova versão do Bootstrap, e nesta não encontre o componente desta aula ( Panel), após verificação na documentação encontrei o componente ( Card) desenvolvendo a mesma função.

Algumas mudança que notei no Bootstrap novo:

  Antigo      |  Novo

data-toggle | data-bs-toggle data-target | data-bs-target class: panel | class: Card

Acho que os professores da Alura devia reclicar esse curso.

Segue o script com a classe atualizada e funcionando.

<div class="card">
            <div class="card-header">
                <h3 data-bs-toggle="collapse" data-bs-target="#primeiro-paragrafo"> Desde 1935</h3>
            </div> 
            <div class="card-body">
                <p id="primeiro-paragrafo" class="collapse">Desde 1935 trazendo casas, mansões e prédios lindos para o mundo. </p>
            </div>
        </div>  

        <div class="card">
            <div class="card-header">
                <h3  data-bs-toggle='collapse'      data-bs-target="#segundo-paragrafo"> Preços acessíveis</h3>
            </div>        
            <div class="card-body">  
            <p id="segundo-paragrafo" class="collapse">Preços a partir de R$ 1000,00. </p>
            </div>  
         </div>   

         <div class="card">
            <div class="card-header">
                <h3 data-bs-toggle="collapse" data-bs-target="#terceiro-paragrafo"> Alegria em colaborar para um mundo mais bonito</h3>
            </div>
            <div class="card-body">
                <p id='terceiro-paragrafo' class="collapse">Trazendo alegria para a vida das pessoas que tem dinheiro para gastar. </p>
            </div>
        </div>
4 respostas
por Igor Albert Oliveira da Cruz
| 285.6k xp | 65 posts

Desculpa mas realizei o comentário antes de finalizar a aula, segue o script finalizado mas com a pendência. O card- group possui um comportamento diferente, com alinhamento horizontal, existe alguma maneira de aplicar um elemento pai para esse grupo de cards. Em tempo, informo que na nova documentação a referência é realizada com o código: data-bs-parent="". 


        <div class="card">
            <div class="card-header">
                <h3 class="card-title"  data-bs-toggle="collapse" data-bs-target="#primeiro-paragrafo" data-bs-parent="#paineis-sobre"> Desde 1935</h3>
            </div> 
            <div id="primeiro-paragrafo" class="collapse">
                <div class="card-body">
                    <p>Desde 1935 trazendo casas, mansões e prédios lindos para o mundo. </p>
                </div>
            </div>
        </div>  

        <div class="card" >
            <div class="card-header">
                <h3  class="card-title"  data-bs-toggle='collapse'      data-bs-target="#segundo-paragrafo" data-bs-parent="#paineis-sobre"> Preços acessíveis</h3>
            </div>        
            <div id="segundo-paragrafo" class="collapse">
                <div class="card-body">  
                    <p>Preços a partir de R$ 1000,00. </p>
                </div>  
            </div>
         </div>   

         <div class="card">
            <div class="card-header">
                <h3 class="card-title" data-bs-toggle="collapse" data-bs-target="#terceiro-paragrafo" data-bs-parent="#paineis-sobre"> Alegria em colaborar para um mundo mais bonito</h3>
            </div>
                <div id='terceiro-paragrafo' class="collapse">
                    <div class="card-body">
                        <p >Trazendo alegria para a vida das pessoas que tem dinheiro para gastar. </p>
                    </div>
            </div>
        </div>
por Jean Carlo Sbalchiero
| 761k xp | 648 posts
Desenvolvedor Web Fullstack

Boa Igor Albert Oliveira da Cruz,

Gostei da solução que você propôs, afinal o resultado é o mesmo porém o código me parece muito mais robusto.

Para que mais pessoas consigam visualizar a sua solução proposta é recomendável com que você venha estar marcando este tópico como solucionado, assim pode estar ajudando ainda mais pessoas :)

Obrigado!!

solução!
por Igor Albert Oliveira da Cruz
| 285.6k xp | 65 posts

Obrigado pelo feedback Jean Carlo!

por Jean Carlo Sbalchiero
| 761k xp | 648 posts
Desenvolvedor Web Fullstack

Boa solução!