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

7948 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
159 vues
Inline CSS : l'ajout de styles directement dans les balises HTML
Inline CSS : L'ajout de styles directement dans les balises HTMLL'Inline CSS est une méthode de stylisation où les styles sont appliqués directement à un élément HTML via l'attribut style. Cela...
CSS
2 006 vues
Modifier ses informations en PHP
Dans cette nouvelle vidéo nous allons apprendre à modifier vos informations !Lors de l’inscription il se peut que vous ayez fait une erreur. C'est pour cela que cette page sera importante pour...
Créer son site de rencontres
1 820 vues
Charger automatiquement les messages
Après avoir amélioré l'envoi de nos messages nous allons également améliorer le système de recharge automatique pour l’affichage de nouveau message.
Créer son site de rencontres
3 921 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
2 787 vues
Afficher ses utilisateurs en PHP
Maintenant que nous avons créé notre formulaire d’inscription et de connexion nous allons afficher tous nos utilisateurs du site afin de visiter par la suite les autres profils du site.
Créer son site de rencontres
13 495 vues
Première page (index.php)
Pour commencer à développer notre site nous avons besoin de créer une nouvelle page que l'on appellera index.php. Cette page fera office de page d'accueil car lorsque vous allez...
Créer son site
1 463 vues
Configurer l'environnement de développement
Configuration de l'environnement de développement pour SASS1. Création d'une structure de projet :Avant de commencer à coder en SASS, il est important d'avoir une structure de projet organisée....
Sass
3 609 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
Publicité
Cette pub permet au site de vivre ...