Responsive-design

Sans Bootstrap Twitter ni Bootstrap EPFL

Pour les templates mémento, j'ai rencontré le problème suivant :

- le calendrier de la colonne de droite doit se positionner en haut pour les mobiles

- le reste de la colonne de droite (sous le calendrier) doit se positionner en bas

Comment faire ?

http://www.vanseodesign.com/web-design/rearranging-boxes/ 

http://www.smashingmagazine.com/2013/04/25/maintain-hierarchy-content-choreography/

Bootstrap Twitter :

Les défauts :

http://www.disko.fr/reflexions/technique/bootstrap/

Défauts et solutions :

http://blog.lesieur.name/bootstrap-est-une-regression-pour-un-developpement-front-end-de-qualite/
 
http://blog.lesieur.name/utilisation-optimisee-de-framework-css-comme-bootstrap-avec-less/

 

Afficher ou non un div selon la taille de l'écran

L'exemple ci-dessous montre que le header ne sera affiché que pour les plus 3 plus grandes tailles d'écrans. Et dans ces 3 cas le logo ne prendra que 3 colonnes.

<div id="header">
   <div class="container">
      <div class="row visible-lg-block visible-md-block visible-sm-block">
         <div class="col-lg-3 col-md-3 col-sm-3">
            <img id="logo" src="{% static "img/logo.png" %}" title="Club d'échecs de Pontarlier" alt="Club d'échecs de Pontarlier">
         </div>
      </div>
   </div>
</div>
 
Cette page donne davantage d'explications
 
 

Bootstrap 3 et les medias queries 

 

/* Large desktops and laptops */
@media (min-width: 1200px) {
 
}
 
/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
 
}
 
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
 
}
 
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
 
}
 
/* Landscape phones and smaller */
@media (max-width: 480px) {
 
}
 
 
Cette page donne davantage d'explications