2
respostas

Nao funcionou no iphone nem no tablet

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <!--Configuração do ViewPort-->
        <meta name=viewport content="width=device-width, initical-scale=1">
        <!--Folha de estilos personalizada-->
        <!--<link rel="stylesheet" href="/css/estilos.css">-->
        <!--Instalação Jquery-->
        <script type="text/javascript" src="./jquery/3.2.1/jquery-3.2.1.min.js"></script>
        <!--Instalação Bootstrap-->
        <script type="text/javascript" src="./bootstrap/js/bootstrap.js"></script>
        <script type="text/javascript" src="./bootstrap/js/bootstrap.bundle.js"></script>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

    </head>
    <body>
        <div class="container">

            <h2>Sobre Nós</h2>
            <img class="img-fluid" src="img/empresa.jpg" alt="">

            <div class="panel-group" id="panel-sobre">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" data-toggle ="collapse" data-target="#primeiro-paragrafo" data-parent="#panel-sobre">Missao</h3>
                    </div>
                    <div id="panel-body">
                        <div id="primeiro-paragrafo"> 
                        <p>texto teste</p>
                        </div>            
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3  class="card-title" data-toggle ="collapse" data-target="#segundo-paragrafo" data-parent="#panel-sobre" >Visão</h3>
                    </div>
                    <div id="card-body">
                        <div id="segundo-paragrafo">
                            <p>texto teste</p>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" data-toggle ="collapse" data-target="#terceiro-paragrafo" data-parent="#panel-sobre">Valores</h3>
                    </div>
                    <div id="card-body">
                        <div id="terceiro-paragrafo">
                            <p>texto teste</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
2 respostas

Bom dia, Sérgio. O que exatamente não funcionou? Ele não apresentou layout? O bootstrap não carregou? Ele apresentou algum erro?

Oi Sergio, tudo certo?

Joguei seu codigo nesse Jsbin, mas linkando um Bootstrap externo. Aparentemente tudo ok.

O que exatamente não está funcionando? Esses cards foram criados em aula?

Na versão do Bootstrap usada no curso, há um componente chamado panel, talvez seja isso que voce precisa. Voce pode ver a documentacao do panel aqui.

Espero ter ajudado e bons estudos,

Abcs!