[Bootstrap] Less et responsive design
Bonjour à tous.
Je découvre actuellement le framework Bootstrap, et je trouve ça pas mal du tout.
Je suis tombé sur cet article :
Qui explique grosso modo qu'il ne faut pas utiliser directement les classes bootstrap dans le code .html
Ok, banco me suis-je dit, à faire les choses, autant les faire propre.
Du coup, je me retrouve avec un fichier .less qui ressemble à ça :
Code:
1
2
3
4
5
6
7
8
| .ev_row {
.makeRow();
}
#ev_header_inner {
.makeColumn(5, 4);
height: 50px;
margin-top: 5px;
} |
(c'est juste un extrait mais c'est suffisant pour comprendre mon soucis)
Ensuite dans mon code .html j'ai des trucs du style :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div id="ev_container">
<div class="ev_row">
<header id="ev_header">
<div id="ev_header_inner">
<span class="ev_ac_title">My title</span> <span class="ev_ac_title">
621</span> <span class="ev_ac_title_no_border">book</span>
</div>
<div id="ev_header_toolbar">
<button class="ev_button ev_button_off"></button>
<button class="ev_button ev_button_brightness"></button>
<button class="ev_button ev_button_refresh"></button>
</div>
</header>
</div>
</div> |
Donc dans mon code .html je n'ai plus aucune traces de classes bootstrap. Ok, victoire.
Ce qui m'a plu également dans bootstrap c'est le concept de responsive design déjà tout prêt (chouette truc !).
Donc là, je décide de resizer ma fenêtre de navigateur, et rien ne se passe...
J'ai bien mis dans mon html ceci :
Code:
1
2
| <link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
mais rien ne se passe... Et là, je pense avoir compris : étant donné que je n'utilise plus "directement" les classes bootstrap, forcément le "retaillage" des éléments ne peut plus se faire ...
Donc j'en suis là, à me demander :
- Si je veux avoir un "responsive design" sur mon appli, dois-je obligatoirement utiliser directement les classes bootstrap? Ou y-a-t-il une autre alternative qui m'échappe?
Merci de m'avoir lu, et merci pour vos (je l'espère ^^) multiples réponses pertinentes :)
