Pour la mise en page, le template protostar donne le choix entre statique ou fluide dans le gestionnaire de template sous l'onglet Options.
La mise en page statique réduit le div conteneur et les colonnes dans une série d'étapes, conçues pour être utilisé sur les moniteurs, les tablettes et les téléphones.
Le style de cette mises en page est dans une feuille de style nommée template.css dans le dossier css sous le dossier protostar dans les templates.
L'option de disposition statique aura une div conteneante extérieure nommée container avec une propriété max-width: 960px. Cela permet de garder le contenu du site à 960px large pour les grands écrans et sur la vue paysage sur des tablettes. Les divs #sidebar, #content et #aside correspondent à un pourcentage de la div conteneur .row-fluid qui a une largeur de 100% et cela remplira la div contenant.
A mesure que la taille de l'écran diminue (en réduisant lke navigateur ou en étant sur des vues portraits sur tablettes), la largeur du conteneur passe à la taille de 724px. Les colonnes #sidebar, #content et #aside sont réduits en conséquence puisque leurs largeurs sont un pourcentage du conteneur extérieur.
Si l'écran diminue encore plus (en réduisant la largeur de navigateur ou sur les téléphones), la largeur du conteneur est réglé sur automatique - qui fait essentiellement le conteneur se réduire de largeur puisque l'écran réduit de largeur. Si vous avez un menu horizontal en position-1, qui est placé dans la div #navigation, le menu s'empilera verticalement et chaque élément de menu aura la largeur de l'écran entier. Les colonnes à l'intérieur seront également toutes réglées sur auto, prenant la totalité de la largeur du conteneur et s'empilant verticalement. La mise en page par défaut pour Protostar placera #sidebar en haut, #content au milieu et #aside en dessous.
Moniteurs & Tablettes Paysage: .container {width: 960px;} et .row-fluid {width: 100%}
Voila comment sont paramétrés les styles au début de template.css avant tout appel de @ media.
.row-fluid .span3 {width: 23.4043%} Cela régira la largeur de votre colonne #sidebar et #aside.
.row-fluid .span6 {width: 48.9362%} Cela régira la largeur de votre #content
Tablettes mode Portrait: .container {width: 724px;} et .row-fluid {width:100%}
@media (min-width: 768px) and (max-width: 979px) { }
C'est pour les écrans plus étroits. Vous maintiendrez toujours vos colonnes, mais ils sont un pourcentage du div contenant .row-fluid., ainsi, parce que le .container est plus étroit, les colonnes le seront aussi.
.row-fluid .span3 {width: 23.4043%} Cela régira la largeur de votre colonne #sidebar et #aside.
.row-fluid .span6 {width: 48.9362%} Cela régira la largeur de votre #content
Si vous avez quelque chose dans ces colonnes qui nécessite une largeur fixe, telles que des annonces, vous aurez besoin de remplacer ces paramètres avec votre feuille de style personnalisée. Cela peut représenter un sacré défi.
Vous pouvez remplacer ces pourcentages avec votre feuille de style personnalisée si vous voulez des colonnes latérales plus larges. Gardez à l'esprit que, pour remplacer les paramètres pour ces paramètres plus étroits vous devez placer les substitutions dans un groupe @media spécifique pour cette étape de largeur.
Téléphones mode Paysage: .container {width: auto;}, .row-fluid {width:100%} and .row-fluid [class*="span"] {width:100%}
@media (max-width: 767px) {}
À cette largeur, les divs #sidebar, #aside et #content s'alignent verticalement.