Comprendre comment Protostar utilise les classes .span de Bootstrap

Dans le index.php et la feuille de style template.css livrés avec le template Protostar pour Joomla 3.2, Il existe plusieurs appellations pour les classes .span. Ces classes sont ce qui est derrière le design responsive du template Protostar.

La mise en page Bootstrap est organisée en 12 colonnes, .span1 utilise une colonne, . Span2 utilise deux colonnes, .span 3 utilise trois colonnes et ainsi de suite. Il y a 12 classes .span avec .span12 sur la pleine largeur. Le fichier de template désigne aussi de la même façon un certain pourcentage pour l'espace de la gouttière (espace entre les colonnes).

Le Fichier index.php de protostar

Dans le fichier index.php de Protostar, le framework .span est mis en place pour l'ensemble du site. Au début de la section <? php? > vous verrez le code suivant :

if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

La variable PHP $span est utilisée pour la position <main id="content"> arrivant plus tard dans la partie <body> de la page. Ce code cherche à voir si les colonnes de droite et / ou gauche ou ont quelque chose qui leur est attribué pour cette page Web, et ajuste la classe .span du contenu (content) en conséquence.

Quand vous entrez dans la partie < body > de index.php, vous ne verrez que trois endroits où les éléments ont assigné une classe .span

<div>
<div id="sidebar">
<main id="content" role="main">
<div id="aside">

C'est là que vous apercevez que id="content" est assigné de $span qui est déterminée dans la section <?php />.

Fichier template.css de Protostar

Pour les mises en page statiques, sur grands écrans, le <div>contenant qui englobe tout le contenu est affecté d'une classe="container" qui est réglé sur une largeur de 940px avec un autre appel paramètré sur max-width: 960px. L'élément <header> est réglé pour être aussi large que le conteneur. L'élément <div class="row-fluid"> contient les colonnes de gauche et de droite ainsi que la zone de contenu. Le div row-fluid est réglé pour être aussi large que le conteneur. Donc, chacune des colonnes et la zone de contenu, #aside, #content et #sidebar, sont contrôlées par leur classe .span qui est fixée à un pourcentage de row-fluid. L'élément <footer> est de nouveau aussi large que son conteneur.

Pour les mises en page fluides, le conteneur est assigné d'une classe="container-fluid"et ne reçoit pas une largeur spécifique. Il prend l'écran entier, sauf un padding de 20px. Les éléments <header>, <div> et <footer> sont aussi larges que le div contenant. Les éléments #aside, #content et #sidebar sont un pourcentage de row-fluid, donc ils deviennent plus larges ou plus étroits au fur et à mesure que la fenêtre du navigateur devient plus large ou plus étroite.

Le fichier template.css a des styles multiples pour les classes .span. Dès le départ, vous avez cet appel :

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}

Cela fait que tout ce qui a la désignation .span, .span1, .span 2, etc. flottera à gauche.

Le fichier template.css est extrêmement long, donc nous ne parcourerons pas chaque largeur pour chaque classe de .span.

En résumé, le template.css décompose chaque classe .span en pourcentage.

.row-fluid .span3 {
width: 23.404255317%;
}
.row-fluid .span6 {
width: 48.936170208%;
}
.row-fluid .span9 {
width: 74.468085099%;
}
.row-fluid .span12 {
width: 99.99999999%;
}

Style personnalisé avec Protostar

Si vous souhaitez ajouter des classes .span aux éléments tels que les modules, vous pouvez ajouter cette classe dans la zone texte « suffixe de classe de module » dans le gestionnaire de modules. C'est très important que vous placiez un espace avant le mot span. Vous devriez saisir quelque chose comme " span2" (Ne mettez pas de guillemets).

Vous pouvez utiliser ce style si vous vouliez 4 colonnes dans le <footer>, chaque module peut être dot' d'une classe .span3. Ils flotteraient automatiquement à gauche, et auraient une largeur d'à peu près le ¼ de l'élément conteneur <footer>.

Si vous vouliez deux modules côte à côte dans la colonne #aside, vous feriez mieux d'attribuer votre propre nom de classe, et en stylisant alors cette classe dans quelque chose comme 48 %, puisque .span3 ne peut pas être facilement divisible par 2.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels