Utilisation de Bootstrap

Par Clouder le 28 Feb 2018 0 +99

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

Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !