Présentation d’un site développé avec Bootstrap


Accueil > Projets > Présentation d’un site développé avec Bootstrap

Par Baroncelli B., Costa B., Soggia C. en novembre 2020

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Présentation Bootsrap

Dans cet article est fait une descrition de notre site, de son commencement à l’abouti.

Tout d’abord pour commencer notre site, connaissant notre projet, la présentation de Bootsrap, nous avons décidé de choisir un Template de base que l’on modifierait à notre goût et surtout avec le contenu attendu. Ce template est un template Bootsrap, rien de mieux qu’utiliser ce support pour le présenter.

Une fois cela fait on a apporter de nombreuses modifications tout en gardant un squelette semblable à celui du template utilisé.

En commençant par changer le titre :

  1.   <title>Agency - Start Bootstrap Theme</title>

vers :

  1. <title>Projet 1 - Présentation Bootstrap </title>

Il existait une barre de navigation à laquelle nous avons modifié ces contenants :

  1.                 <div class="collapse navbar-collapse" id="navbarResponsive">
  2.                     <ul class="navbar-nav text-uppercase ml-auto">
  3.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
  4.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
  5.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
  6.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
  7.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
  8.                     </ul>
  9.                 </div>

Télécharger

vers :

  1.   </button>
  2.                 <div class="collapse navbar-collapse" id="navbarResponsive">
  3.                     <ul class="navbar-nav text-uppercase ml-auto">
  4.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">Présentation</a></li>
  5.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Avantages</a></li>
  6.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Exemples</a></li>
  7.                         <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
  8.                     </ul>
  9.                 </div>

Télécharger

Quelques autres détails ont été modififié. Une partie très importante, la section Service qui a disparu est devenu Présentation et son contenue est aussi changé :

  1.   <h2 class="section-heading text-uppercase">Services</h2>
  2.                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  3.                 </div>
  4.                 <div class="row text-center">
  5.                     <div class="col-md-4">
  6.                         <span class="fa-stack fa-4x">
  7.                             <i class="fas fa-circle fa-stack-2x text-primary"></i>
  8.                             <i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
  9.                         </span>
  10.                         <h4 class="my-3">E-Commerce</h4>
  11.                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  12.                     </div>
  13.                     <div class="col-md-4">
  14.                         <span class="fa-stack fa-4x">
  15.                             <i class="fas fa-circle fa-stack-2x text-primary"></i>
  16.                             <i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
  17.                         </span>
  18.                         <h4 class="my-3">Responsive Design</h4>
  19.                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  20.                     </div>
  21. ...

Télécharger

vers :

  1.   <section class="page-section" id="about">
  2.             <main role="main" class="container">
  3.                 <div class="text-center">
  4.                     <h2 class="section-heading text-uppercase">Présentation</h2>
  5.                     <h3 class="section-subheading text-muted">Qu'est-ce que Bootstrap ?</h3>
  6.                 </div>
  7.                     <div class="col-md-9 blog-main">
  8.                         <div class="blog-post">
  9.                             <h4>Bien plus qu'une simple librairie</h4>
  10.                             <hr/>
  11.                             <p>Bootstrap est un framework CSS...

Télécharger

Néanmoins l’ancienne partie service n’a pas été évincée du script mais décalée et changer, entre autre les logos que l’on a pu changer car nous en avons trouvé de nouveaux sur un site

  1.   <div class="col-md-4">
  2.                         <span class="fa-stack fa-4x">
  3.                             <i class="fas fa-circle fa-stack-2x text-primary"></i>
  4.                             <i class="fas fa-clock fa-stack-1x fa-inverse"></i>
  5.                         </span>
  6.                         <h4 class="my-3">Le Gain De Temps</h4>
  7.                         <p class="text-muted">Un gain de temps de développement qui peut être conséquent grâce a sa simplicité d'utilisation et ses nombreux raccourcis.</p>
  8.                     </div>
  9.                     <div class="col-md-4">
  10.                         <span class="fa-stack fa-4x">
  11.                             <i class="fas fa-circle fa-stack-2x text-primary"></i>
  12.                             <i class="fas fa-database fa-stack-1x fa-inverse"></i>
  13.                         </span>
  14.                         <h4 class="my-3">La Base De Donnée</h4>
  15.                         <p class="text-muted">Une certaine robustesse dans l’architecture globale du code et une énorme base de donnée contenant tout ce qui faut pour faire de Bootstrap une librarie CSS complète.</p>
  16.                     </div>
  17.                     <div class="col-md-4">
  18.                         <span class="fa-stack fa-4x">
  19.                             <i class="fas fa-circle fa-stack-2x text-primary"></i>
  20.                             <i class="fas fa-dollar-sign fa-stack-1x fa-inverse"></i>
  21.                         </span>
  22.                         <h4 class="my-3">Accessible à Tous</h4>
  23.                         <p class="text-muted">En plus d'être un framework appartenant à une grande société (Twitter), Bootstrap est Open Source et donc accessible a tout le monde.</p>
  24.                     </div>
  25.                 </div>

Télécharger

Ensuite c’est la partie portfolio qui a été modifié pour voir naître notre partie Exemples qui présente des templates Bootsrap provenant de ce site

  1.   <div class="portfolio-caption">
  2.                                 <div class="portfolio-caption-heading">Threads</div>
  3.                                 <div class="portfolio-caption-subheading text-muted">Illustration</div>
  4.                             </div>
  5.                         </div>
  6.                     </div>
  7.                     <div class="col-lg-4 col-sm-6 mb-4">
  8.                         <div class="portfolio-item">
  9.                             <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
  10.                                 <div class="portfolio-hover">
  11.                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
  12.                                 </div>
  13.                                 <img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="" />
  14.                             </a>
  15.                             <div class="portfolio-caption">
  16.                                 <div class="portfolio-caption-heading">Explore</div>
  17.                                 <div class="portfolio-caption-subheading text-muted">Graphic Design</div>
  18.                             </div>

Télécharger

vers :

  1. <div class="col-lg-4 col-sm-6 mb-4">
  2.                         <div class="portfolio-item">
  3.                             <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
  4.                                 <div class="portfolio-hover">
  5.                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
  6.                                 </div>
  7.                                 <img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt="" />
  8.                             </a>
  9.                             <div class="portfolio-caption">
  10.                                 <div class="portfolio-caption-heading">Threads</div>
  11.                                 <div class="portfolio-caption-subheading text-muted">Illustration</div>
  12.                             </div>
  13.                         </div>
  14.                     </div>
  15.                     <div class="col-lg-4 col-sm-6 mb-4">
  16.                         <div class="portfolio-item">
  17.                             <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
  18.                                 <div class="portfolio-hover">
  19.                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
  20.                                 </div>
  21.                                 <img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="" />
  22.                             </a>
  23.                             <div class="portfolio-caption">
  24.                                 <div class="portfolio-caption-heading">Explore</div>
  25.                                 <div class="portfolio-caption-subheading text-muted">Graphic Design</div>
  26.                             </div>
  27.                         </div>
  28.                     </div>

Télécharger

Et enfin, une partie qui nous présente, préexistente à laquelle nous avons décidé de changer les photos et rajouté des hyperliens vers des moyens de contact :

  1. <div class="team-member">
  2.                             <img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
  3.                             <h4>Kay Garland</h4>
  4.                             <p class="text-muted">Lead Designer</p>
  5.                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
  6.                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
  7.                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
  8.                         </div>
  9.                     </div>
  10.                     <div class="col-lg-4">
  11.                         <div class="team-member">
  12.                             <img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
  13.                             <h4>Larry Parker</h4>
  14.                             <p class="text-muted">Lead Marketer</p>

Télécharger

vers :

  1. <div class="team-member">
  2.                             <img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
  3.                             <h4>Benjamin Costa</h4>
  4.                             <p class="text-muted">Lead Developer</p>
  5.                             <a class="btn btn-dark btn-social mx-2" href="https://www.instagram.com/benjamin_costa_/"><i class="fab fa-instagram"></i></a>
  6.                             <a class="btn btn-dark btn-social mx-2" href="mailto:benjamin_costa@outlook.fr"><i class="fas fa-envelope"></i></a>
  7.                         </div>
  8.                     </div>
  9.                     <div class="col-lg-4">
  10.                         <div class="team-member">
  11.                             <img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
  12.                             <h4>Clément Soggia</h4>
  13.                             <p class="text-muted">Lead Designer</p>

Télécharger

Avec ceci notre propre Copyright et les modifications furent comme nous le désirions

Ce projet a été réalisé par Costa Benjamin, Soggia Clément et Baroncelli Baptiste

Mots-clés