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. 🙃🍕

8259 vues
Modifié le 04 mars 2019
Publicité Sitedudev
Cette pub permet au site de vivre ...
Vidéo associée
Publicité Sitedudev
Cette pub permet au site de vivre ...
Télécharger le code source
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
13 482 vues
Notre base de données
Avant d'entamer le développement de notre futur site il nous faut une base de données afin de pouvoir ajouter, modifier ou de supprimer des informations.Étapes...
Créer son site
332 vues
Paramètres de fonction
Les paramètres de fonction en PHP permettent de passer des valeurs à une fonction pour qu'elle puisse effectuer des opérations sur ces valeurs. Voici un cours facile à comprendre sur les...
PHP
3 931 vues
Afficher son article
Afficher son articleNous allons créer une nouvelle page que l'on nommera voir_article.php. Cette page affichera tous les articles qui constituerons notre blog.Nous allons modifier notre...
Créer son site
1 427 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
1 989 vues
Voir son profil en PHP
Maintenant que vous savez comment voir le profil d'un membre du site nous allons apprendre à concevoir notre profil !
Créer son site de rencontres
389 vues
Utilisation des éléments <input>, <textarea>, <select> et <button>
Utilisation des éléments <input>, <textarea>, <select> et <button>Dans un formulaire HTML, différents éléments sont utilisés pour collecter des données de...
HTML
329 vues
Utilisation des éléments de division <div> et <span> pour structurer le contenu
Utilisation des éléments de division <div> et <span> pour structurer le contenuLes balises <div> et <span> sont des éléments de division utilisés pour structurer et...
HTML
2 681 vues
Se connecter en PHP
Nous allons dans cette vidéo créer un formulaire PHP afin de nous connecter à notre site web.Pour cela nous allons utiliser la combinaison mail + mot de passe afin de nous connecter.Nous allons...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...