Exercice sur grille Bootstrap

Solution 1

<!doctype html>
<html lang="fr">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Bootstrap docs css -->
    <link rel="stylesheet" media="all" href="../css/bootstrap.docs.css">

    <title>Exercice Bootstrap</title>
</head>

<body>
    <div class="bd-example-row">
        <div class="bd-example">
            <header class="container">
                <div class="row">
                    <div class="col-2">
                        <p><img src="../images/greta.jpg" alt="logo du Greta" title="logo du Greta" width="120" /></p>
                    </div>
                    <div class="col-10">
                        <h1>h1 : Titre de la page</h1>
                    </div>
                </div>
            </header>

            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <nav>
                            <h2>Menu</h2>
                            <ul>
                                <li><a href="#">Lien 1</a></li>
                                <li><a href="#">Lien 2</a></li>
                                <li><a href="#">Lien 3</a></li>
                                <li><a href="#">Lien 4</a></li>
                                <li><a href="#">Lien 5</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-md-8">
                        <section>
                            <h2>h2 : Titre de la section 1</h2>
                            <article>
                                <h3>h3 : Titre de l'article</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                                    mattis congue. Integer convallis ligula dapibus nisl tempor faucibus. Sed nisi
                                    ipsum, sollicitudin sed nibh eu, lacinia euismod dui. Pellentesque habitant morbi
                                    tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id
                                    tortor aliquam, posuere erat eu, rhoncus arcu. Etiam eget lorem ultricies nisi
                                    maximus auctor. Aenean tristique augue rhoncus sodales molestie. Cras felis risus,
                                    iaculis sit amet commodo eu, iaculis ac erat. Aliquam interdum nulla nisl, congue
                                    finibus metus scelerisque eu. Sed vel vestibulum lectus, hendrerit interdum mi. </p>
                            </article>
                        </section>
                        <section>
                            <h2>h2 : Titre de la section 2</h2>
                            <article>
                                <h3>h3 : Titre de l'article</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                                    mattis congue. Integer convallis ligula dapibus nisl tempor faucibus. Sed nisi
                                    ipsum, sollicitudin sed nibh eu, lacinia euismod dui. Pellentesque habitant morbi
                                    tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id
                                    tortor aliquam, posuere erat eu, rhoncus arcu. Etiam eget lorem ultricies nisi
                                    maximus auctor. Aenean tristique augue rhoncus sodales molestie. Cras felis risus,
                                    iaculis sit amet commodo eu, iaculis ac erat. Aliquam interdum nulla nisl, congue
                                    finibus metus scelerisque eu. Sed vel vestibulum lectus, hendrerit interdum mi. </p>
                            </article>
                        </section>
                    </div>
                </div>
            </div>
            <footer class="container">
                <div class="row">
                    <div class="col">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                            mattis congue.</p>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</body>

</html>

Solution 2

<!doctype html>
<html lang="fr">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



    <title>Exercice Bootstrap</title>
</head>

<body class="container">
    <header class="row">
        <div class="col-2">
            <p><img src="../images/greta.jpg" alt="logo du Greta" title="logo du Greta" width="120" /></p>
        </div>
        <div class="col-10">
            <h1>h1 : Titre de la page</h1>
        </div>
        </div>
    </header>
    <div class="row">
        <div class="col-md-4">
            <nav>
                <h2>Menu</h2>
                <ul>
                    <li><a href="#">Lien 1</a></li>
                    <li><a href="#">Lien 2</a></li>
                    <li><a href="#">Lien 3</a></li>
                    <li><a href="#">Lien 4</a></li>
                    <li><a href="#">Lien 5</a></li>
                </ul>
            </nav>
        </div>
        <div class="col-md-8">
            <section>
                <h2>h2 : Titre de la section 1</h2>
                <article>
                    <h3>h3 : Titre de l'article</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                        mattis congue. Integer convallis ligula dapibus nisl tempor faucibus. Sed nisi
                        ipsum, sollicitudin sed nibh eu, lacinia euismod dui. Pellentesque habitant morbi
                        tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id
                        tortor aliquam, posuere erat eu, rhoncus arcu. Etiam eget lorem ultricies nisi
                        maximus auctor. Aenean tristique augue rhoncus sodales molestie. Cras felis risus,
                        iaculis sit amet commodo eu, iaculis ac erat. Aliquam interdum nulla nisl, congue
                        finibus metus scelerisque eu. Sed vel vestibulum lectus, hendrerit interdum mi. </p>
                </article>
            </section>
            <section>
                <h2>h2 : Titre de la section 2</h2>
                <article>
                    <h3>h3 : Titre de l'article</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                        mattis congue. Integer convallis ligula dapibus nisl tempor faucibus. Sed nisi
                        ipsum, sollicitudin sed nibh eu, lacinia euismod dui. Pellentesque habitant morbi
                        tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id
                        tortor aliquam, posuere erat eu, rhoncus arcu. Etiam eget lorem ultricies nisi
                        maximus auctor. Aenean tristique augue rhoncus sodales molestie. Cras felis risus,
                        iaculis sit amet commodo eu, iaculis ac erat. Aliquam interdum nulla nisl, congue
                        finibus metus scelerisque eu. Sed vel vestibulum lectus, hendrerit interdum mi. </p>
                </article>
            </section>
        </div>
    </div>
    <footer class="row">
        <div class="col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus at
                mattis congue.</p>
        </div>
    </footer>
</body>

</html>

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.