Tweet
Quelques trucs que j ai compris sur bootstrap. Pour ceux qui ne sont pas informaticien, ou qui ont peu de compétences en matière de css.
La plupart des utilisateurs rajouteront, modifieront ou supprimerons des propriétés css (existantes ou non), ce qui autorise deja un fort degré de personnalisation.
Bootstrap est de plus en plus utilisé, mais il est très peu personnalisé, ce qui fait que les templates ont un peu tendance a se ressembler.
Peu de template intègre complètement bootstrap au niveau css. Je l ais remarqué en cherchant à exploiter certains points de la doc officielle. Donc j ai du rajouter ce dont j'avais besoin au fur et a mesure.
Ce ne sont que des observations, ce post n as pas pour vocation a devenir une copie de la doc officielle de bootstrap.D'ou les aspects tels que la typographie, que je n ais pas abordé.
Si une erreur s est glissée, merci de me la signaler afin que j'edites ce post.
sous Joomla 3.0, les fichiers système css de bootstrap se trouvent dans le dossier /media/jui/css.
EDIT:Le fichier contenant les propriétés bootstrap, dans le template protostar est le fichier css/template.css
Il yas les fichiers.min.css et les fichiers css.
Les fichiers.min.css sont des fichiers dont le contenu est identique au fichiers css "standard", mais dont l'affichage est sur une seule ligne et ou touts les caractères inutiles ont été supprimés, ce qui les rends très dur à lire. Si vous devez effectuer des modifications, modifiez le fichier css correspondant et ensuite minifiez le avec un site tel que celui ci: http://www.minifycss.com/css-compressor/, et ensuite remplacez le fichier .min.css.
Pour la typographie, suivez ce lien :http://twitter.github.com/bootstrap/base-css.html C'est la doc officielle. Memes les non anglophones peuvent la comprendre, car pour chaque propriété, il y ass un exemple.
Pour ma part, c est mon document de référence. Ces typographies peuvent directement être utilisées dans vos articles , a condition d'utiliser l'editeur codemirror ou non wysiwyg.
Au niveau du positionnement:
si on met une balise <jdoc:include> dans un conteneur <div="row"> , il est possible de positionner plusieurs modules de manière horizontale. Pour cela, il faut ajouter " spann" (n étant le nombre de "colonnes" que le module doit occuper) comme suffixe de module et bootstrap s'occupe tout seul du positionnement. Le premier module dans l'ordre d'affichage est à gauche. Et cela permet d'ajuster la largeur de chaque module indépendament.
Cela simplifies la creation des template, car on as besoin d'une seule position par rangée, alors qu'avant, si on voulais 3 colonnes, il fallait 3 positions differentes.
La classe offset:
Cette classe permet de décaler le module en laissant un espace vide.
Si on souhaite un module de 4 colonnes de large a gauche et un autre module de 4 colonnes completement à droite, il suffit d ajouter les suffixes de classe de module suivant:
1er module:" span4", et pour le second " span4 offset4".
Les classes .visible-desktop , .visible-tablet, .visible_phone, .hidden-desktop, .hidden-tablet, .hidden-phone:
Ces classes correspondent à des intervalles de résolution. Ce sont aussi des suffixes de classe de module.
Elles servent à afficher ou cacher des modules en fonction de la résolution de l'écran du visiteur.
Elles sont utiles pour simplifier la mise en page pour les ecrans de faible résolution (smartphone).
desktop signifies une résolution > à 1024px
tablet signifies une résolution entre 768px et 1024
mobile signifies une résolution inférieure a 768px
.visible-desktop signfies que le module serat visible uniquement si la resolution de l'ecran du visiteur as une résolution > à 1024px. Le module n'apparaitras pas si la resolution est inférieure à 1024px
.hidden-desktop signifies que le module serat invisible si la résolution est > à 1024px et visible pour les mobiles et tablets.
Les boutons s'appliquent principalement aux liens, les labels et badges aux balises <span>.
Les sélécteurs css standard sont des balises sémantiques qui correspondent à des actions. Il n y as aucun sélécteur qui est la pour la présentation.
J'ai eu besoin de creer une classe social, pour indiquer que les liens pointent vers des réseaux sociaux.
Dans le fichier bootstrap.min.css, j ai ajouté les lignes ci dessous dans le fichier bootstrap.css pour les boutons:
.btn-social:hover,
.btn-social:active,
.btn-social.active,
.btn-social.disabled,
.btn-social[disabled] {
color: #C461BB;
background-color: #C461BB;
*background-color: #C461BB;
}
.btn-social:active,
.btn-social.active {
background-color: #EF15DB \9;
}
Dans mon article ou ma surcharge, je m'en sert comme ceci <a class="btn btn-social" href="#">mon texte</a>
Pour agrandir, ou rétrecir la taille d'un bouton, il faut utiliser les classes suivante: btn-mini, btn-small ou btn-large.
Pour empiler les boutons les uns sur les autres, il faut utiliser la classe btn-block.
pour mettre une balise ou un sélécteur completement à droite, il faut utiliser la classe pull-right.
Pour les labels , les bages, le principe est le meme. Vous pouvez creer vos propres schemas de couleurs.
un autre exemple de personnalisation:
Vous pouvez creer uniquement un label, ou un badge.
La classe ci dessous correspond aux labels suivi d'un lien
.label-blue[href],
.badge-blue[href] {
background-color: #7ABCC4;
}
.label-blue,
.badge-blue {
background-color: #15D7EF;
}
Pur utiliser cette classe ,j'entre ceci dans mon article ou ma surcharge <span class="label label-blue"> mon texte </span> .
Dans les fichiers css vous pouvez voir des lignes comme celles ci:
Traduction en francais du selecteur css:
.nav .active a > [class^="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe qui ne contient pas icon-.
.nav .active a > [class*="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe dont le nom contient icon- suivi de nimporte quelle suite de caractéres, autrement dit toutes les icones.
Je ferais un autre sujet sur la personnalisation des icones .
en esperant que cela soit utile.
La plupart des utilisateurs rajouteront, modifieront ou supprimerons des propriétés css (existantes ou non), ce qui autorise deja un fort degré de personnalisation.
Bootstrap est de plus en plus utilisé, mais il est très peu personnalisé, ce qui fait que les templates ont un peu tendance a se ressembler.
Peu de template intègre complètement bootstrap au niveau css. Je l ais remarqué en cherchant à exploiter certains points de la doc officielle. Donc j ai du rajouter ce dont j'avais besoin au fur et a mesure.
Ce ne sont que des observations, ce post n as pas pour vocation a devenir une copie de la doc officielle de bootstrap.D'ou les aspects tels que la typographie, que je n ais pas abordé.
Si une erreur s est glissée, merci de me la signaler afin que j'edites ce post.
sous Joomla 3.0, les fichiers système css de bootstrap se trouvent dans le dossier /media/jui/css.
EDIT:Le fichier contenant les propriétés bootstrap, dans le template protostar est le fichier css/template.css
Il yas les fichiers.min.css et les fichiers css.
Les fichiers.min.css sont des fichiers dont le contenu est identique au fichiers css "standard", mais dont l'affichage est sur une seule ligne et ou touts les caractères inutiles ont été supprimés, ce qui les rends très dur à lire. Si vous devez effectuer des modifications, modifiez le fichier css correspondant et ensuite minifiez le avec un site tel que celui ci: http://www.minifycss.com/css-compressor/, et ensuite remplacez le fichier .min.css.
Pour la typographie, suivez ce lien :http://twitter.github.com/bootstrap/base-css.html C'est la doc officielle. Memes les non anglophones peuvent la comprendre, car pour chaque propriété, il y ass un exemple.
Pour ma part, c est mon document de référence. Ces typographies peuvent directement être utilisées dans vos articles , a condition d'utiliser l'editeur codemirror ou non wysiwyg.
Au niveau du positionnement:
si on met une balise <jdoc:include> dans un conteneur <div="row"> , il est possible de positionner plusieurs modules de manière horizontale. Pour cela, il faut ajouter " spann" (n étant le nombre de "colonnes" que le module doit occuper) comme suffixe de module et bootstrap s'occupe tout seul du positionnement. Le premier module dans l'ordre d'affichage est à gauche. Et cela permet d'ajuster la largeur de chaque module indépendament.
Cela simplifies la creation des template, car on as besoin d'une seule position par rangée, alors qu'avant, si on voulais 3 colonnes, il fallait 3 positions differentes.
La classe offset:
Cette classe permet de décaler le module en laissant un espace vide.
Si on souhaite un module de 4 colonnes de large a gauche et un autre module de 4 colonnes completement à droite, il suffit d ajouter les suffixes de classe de module suivant:
1er module:" span4", et pour le second " span4 offset4".
Les classes .visible-desktop , .visible-tablet, .visible_phone, .hidden-desktop, .hidden-tablet, .hidden-phone:
Ces classes correspondent à des intervalles de résolution. Ce sont aussi des suffixes de classe de module.
Elles servent à afficher ou cacher des modules en fonction de la résolution de l'écran du visiteur.
Elles sont utiles pour simplifier la mise en page pour les ecrans de faible résolution (smartphone).
desktop signifies une résolution > à 1024px
tablet signifies une résolution entre 768px et 1024
mobile signifies une résolution inférieure a 768px
.visible-desktop signfies que le module serat visible uniquement si la resolution de l'ecran du visiteur as une résolution > à 1024px. Le module n'apparaitras pas si la resolution est inférieure à 1024px
.hidden-desktop signifies que le module serat invisible si la résolution est > à 1024px et visible pour les mobiles et tablets.
Les boutons s'appliquent principalement aux liens, les labels et badges aux balises <span>.
Les sélécteurs css standard sont des balises sémantiques qui correspondent à des actions. Il n y as aucun sélécteur qui est la pour la présentation.
J'ai eu besoin de creer une classe social, pour indiquer que les liens pointent vers des réseaux sociaux.
Dans le fichier bootstrap.min.css, j ai ajouté les lignes ci dessous dans le fichier bootstrap.css pour les boutons:
.btn-social:hover,
.btn-social:active,
.btn-social.active,
.btn-social.disabled,
.btn-social[disabled] {
color: #C461BB;
background-color: #C461BB;
*background-color: #C461BB;
}
.btn-social:active,
.btn-social.active {
background-color: #EF15DB \9;
}
Dans mon article ou ma surcharge, je m'en sert comme ceci <a class="btn btn-social" href="#">mon texte</a>
Pour agrandir, ou rétrecir la taille d'un bouton, il faut utiliser les classes suivante: btn-mini, btn-small ou btn-large.
Pour empiler les boutons les uns sur les autres, il faut utiliser la classe btn-block.
pour mettre une balise ou un sélécteur completement à droite, il faut utiliser la classe pull-right.
Pour les labels , les bages, le principe est le meme. Vous pouvez creer vos propres schemas de couleurs.
un autre exemple de personnalisation:
Vous pouvez creer uniquement un label, ou un badge.
La classe ci dessous correspond aux labels suivi d'un lien
.label-blue[href],
.badge-blue[href] {
background-color: #7ABCC4;
}
.label-blue,
.badge-blue {
background-color: #15D7EF;
}
Pur utiliser cette classe ,j'entre ceci dans mon article ou ma surcharge <span class="label label-blue"> mon texte </span> .
Dans les fichiers css vous pouvez voir des lignes comme celles ci:
Traduction en francais du selecteur css:
.nav .active a > [class^="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe qui ne contient pas icon-.
.nav .active a > [class*="icon-"] correspond aux classe nav, qui contiennent la classe active, qui contient un lien a enfant de nimporte quelle classe dont le nom contient icon- suivi de nimporte quelle suite de caractéres, autrement dit toutes les icones.
Je ferais un autre sujet sur la personnalisation des icones .
en esperant que cela soit utile.
Commentaire