Utilisation de Bootstrap

Maintenant que nous avons un site qui commence à être opérationnel, il va falloir que nous nous occupions du design de celui-ci pour le rendre plus agréable à voir pour vos futurs utilisateurs grâce à Bootstrap.

Bootstrap est le framework le plus populaire au monde pour créer des sites réactifs et adaptatifs sur différentes plateformes (TVs, ordinateurs, tablettes et smartphones).

Page index.php

Copiez et collez la balise <link> dans votre balise <head>.

<head>
    ....
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    ....
</head>

Ensuite copiez et collez les 3 balises <script> juste avant la fermeture de la balise <body>

<body>
    ....
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

Maintenant on va enfin attaquer les choses sérieuses en ajoutant une barre de navigation (menu) à votre accueil.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="index.php">Accueil</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <?php
                if(!isset($_SESSION['id'])){
                    // ... 
                }else{
                ?>
                    <li class="nav-item">
                        <a class="nav-link" href="profil.php">Mon profil</a>
                    </li>
                <?php
                } 
            ?>
        </ul>
        <ul class="navbar-nav ml-md-auto">
            <?php
                if(!isset($_SESSION['id'])){
                ?>
                    <li class="nav-item">
                        <a class="nav-link" href="inscription.php">Inscription</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="connexion.php">Connexion</a>
                    </li>
                <?php
                }else{
                ?>
                    <li class="nav-item">
                        <a class="nav-link" href="deconnexion.php">Déconnexion</a>
                    </li>
                <?php
                } 
            ?>
        </ul>
    </div>
</nav>

Ensuite, on va réagencer le reste de la page.

<div class="container">
    <div class="row">   
        <div class="col-0 col-sm-0 col-md-2 col-lg-3"></div>
        <div class="col-12 col-sm-12 col-md-8 col-lg-6">
            <h1>Mon site à moi</h1>
            <div>
                <?php
                    if(!isset($_SESSION['id'])){
                    ?>
                        <a href="motdepasse.php">Mot de passe oublié</a>
                    <?php
                    }
                ?>
            </div>
            <div>
                <?php
                    if(isset($_SESSION['id'])){
                        echo 'ID : ' . $_SESSION['id'] . ', Nom : ' . $_SESSION['nom'] . ", prénom : " . 
                            $_SESSION['prenom'] . ", mail : " . $_SESSION['mail'];
                    } 
                ?>
            </div>
        </div>
    </div>
</div>

À partir de maintenant vous savez comment utiliser Bootstrap et l'utiliser. Vous pouvez donc appliquer la même méthode sur le reste de vos pages et appliquer d'autres styles en parcourant le site de Bootstrap. 🙃🍕