Amélioration du code

a marqué ce sujet comme résolu.

Bonjour,

j'ai codé le template de mon portfolio sous Bootstrap. Il s'agit de mon premier design sous Bootstrap et je me permet de vous demandez des pistes d'améliorations pour que celui-ci soit optimal à 100%.

Jusque maintenant, la structure est faite et s'adapte parfaitement sur mobile et pc.

Lien de test: http://www.eeckhout.me/asset/file/bootstrap/index.html

Code HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
 <div class="container">
   <h1>Alexandre Eeckhout </h1>
   
   <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
 </div>
</header>
<nav>
       <div class="container"> 

               <div class="row"> <!-- création d'une ligne -->
                    <div class="link col-md-4"> 
                      <p><!-- 8 colonnes pour la zone principale -->
                         Bloc 1
                      </p>
                    </div>
                    <div class="link col-md-4"> 
                      <p><!-- 8 colonnes pour la zone principale -->
                         Bloc 2
                      </p>
                    </div> 
                    <div class="link col-md-4"> 
                      <p><!-- 8 colonnes pour la zone principale -->
                         Bloc 3
                      </p>
                    </div> 
              </div> 
         </div> 
      </nav>
      <div class="clear"></div>
      <section class="container">
          <div class="row">
        <div class="link col-md-12"> 
          <h2>cOUCOu</h2>
          <p>In consectetur quam nec erat condimentum, at tristique elit mattis. Etiam sit amet placerat ipsum. Pellentesque at pharetra orci. Curabitur porttitor hendrerit ante. Morbi in consectetur eros. Suspendisse ac turpis ante. Praesent ornare diam magna, ac mattis mauris pellentesque vel.</p>
            </div>
        </div>
      </section>
      <footer class="container"> 
      <p>Copyright</p>
      </footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

Code CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@charset "utf-8";
nav .link:nth-child(1) {
  background-color: rgb(79,197,247);
  border-bottom: 4px solid rgb(77, 179, 222);
  ;
}
nav .link:nth-child(2) {
  background-color: rgb(251,177,82);
  border-bottom: 4px solid rgb(221, 150, 57);
  ;
}
nav .link:nth-child(3)  {
  background-color: #dc5f2e;
  border-bottom: 4px solid #c85527;
}
.container {
  width: 1000px;
}
body nav {
  width: 100%;
  height: 105px;
  background-color: rgb(229, 77, 102);
  border-bottom: 4px solid rgb( 220, 53, 80);
}
nav .link  {
  height: 105px;
}
header {
  background-color: rgb(57,66,99);
}
body {
  background-color: #20243d;
  color: white;
}
section {
  background-color: white;
  color: rgb(140,140,140);
}
footer {
  background-color: rgb(229, 77, 102);
  color: white;
  height: 40px;
  line-height: 40px;
  border-top: 4px solid rgb(211, 59, 84);
}
.clear {
  clear: both;
}


@media (max-width:999px){
nav .link {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
body nav {
  height: 150px;
}
.container {
  width: 100%;
}

}

Merci d'avance pour votre aide :) PS: Je ne sais pas mettre le code en secret pour ne pas surcharger la page :-/

+0 -0

Tu n'arriveras pas à avoir un code optimal en utilisant Bootstrap. C'est un framework très utile en tant que tel lorsque tu n'as rien d'autre sous la main, mais perso je déconseille très fortement de l'utiliser comme base afin de le surcharger.

Pour parler poliment, les sélecteurs de Bootstrap sont absolument dégueulasses (ils ont une spécificité de dingue), et donc hyper galères à surcharger parce que tu te retrouves avec plein de side-effects non voulus et quasi impossibles à démêler.

Si tu veux un code optimal, n'utilise pas Bootstrap.

+0 -0

Salut !

PS: Je ne sais pas mettre le code en secret pour ne pas surcharger la page :-/

Lucas5190

Sélectionne ce que tu souhaites mettre en secret (l'entier des lignes, bloc par bloc), et va cliquer sur le bouton l'icône bleue information que tu trouves en haut à droite de l'éditeur, puis sur l'icône cadenas

+0 -0

Pour apporter plus de précisions à ce que dit Antho, Bootstrap est fait pour deux choses :

  • Du prototype, soit du code qui ne passera pas en production
  • Réutiliser ses class via LESS (ou équivalent) pour ne garder que ce qui est vraiment utile, avec ses propres class, id et styles.

Donc le meilleur conseil pour améliorer ton code est de ne pas utiliser Bootstrap, tout simplement.

D'autant plus que BootStrap ne met aucune priorité sur l'accessibilité, les performances ou la maintenabilité. Avec des dimensions et breakpoints définis en pixels en prime, c'est loin de suivre les bonnes pratiques1 pour faire du responsive.

  1. Je précise quand même que BootStrap fait l'impasse sur certaines BP pour des raisons de compatibilité et de simplicité : le framework n'est pas spécifique, il doit donc rester généraliste et fonctionnel dans un maximum de cas. ↩

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte