07-11-2014, 19:28
Bonjour à tous et à toutes,
Aujourd'hui je vous propose une adaptation des principales fonctions (CSS) de Bootstrap pour vos forums MyBB.
Avant de commencer à adapter les fonctions de Bootstrap, vous devez l'ajouter à votre site, pour que ça ressemble à quelque chose à la finale...
Allez dans votre template "headerinclude" et ajoutez-y le css de bootstrap, je vous conseil le lien CDN :
Avec ceci dans votre template, vous aurez tout ce qu'il faut pour continuer. Si vous voulez l'installer d'une autre manière, vous pouvez toujours visiter le "Getting started".
Nous commençons !
Première chose que nous allons ajouter, les boutons de bootstrap.
Expression régulière : \[b_style=(.*?)\](.*?)\[/b_style\]
Remplacement : <button type="button" class="btn btn-$1">$2</button>
Utilisation : [b_style=style du bouton]texte dans le bouton[/b_style]
Pour le rendu et les styles disponibles : http://getbootstrap.com/css/#buttons
Ensuite, nous attaquons les labels de bootstrap.
Expression régulière : \[label=(.*?)\](.*?)\[/label\]
Remplacement : <span class="label label-$1">$2</span>
Utilisation : [label=style du label]texte dans le label[/label]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#labels
Nous continuons avec les badges.
Expression régulière : \[badge\](.*?)\[/badge\]
Remplacement : <span class="badge">$1</span>
Utilisation : [badge]texte dans le badge[/badge]
Pour le rendu (un seul style disponible) : http://getbootstrap.com/components/#badges
Voilà le MyCode pour intégrer les panels :
Expression régulière : \[panel_(.*?)=(.*?)\](.*?)\[/panel\]
Remplacement : <div class="panel panel-$1">
<div class="panel-heading">
<h3 class="panel-title">$2</h3>
</div>
<div class="panel-body">
$3
</div>
</div>
Utilisation : [panel_style du panel=titre du panel]contenu du panel[/panel]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#panels
Nous poursuivons avec les alerts.
Expression régulière : \[alert=(.*?)\](.*?)\[/alert\]
Remplacement : <div class="alert alert-$1" role="alert">$2</div>
Utilisation : [alert=style de l'alert]texte dans l'alert[/alert]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#alerts
Maintenant nous passons aux progressbar.
Expression régulière : \[progress=(.*?)\](.*?)\[/progress]
Remplacement : <div class="progress">
<div class="progress-bar progress-bar-$1" role="progressbar" aria-valuenow="$2" aria-valuemin="0" aria-valuemax="100" style="width: $2%">
<span class="sr-only">Avancé : $2 %</span>
</div>
</div>
Utilisation : [progress=style de la barre]% (ex : 40), sans écrire le %[/progress]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#progress
Aujourd'hui je vous propose une adaptation des principales fonctions (CSS) de Bootstrap pour vos forums MyBB.
Avant de commencer à adapter les fonctions de Bootstrap, vous devez l'ajouter à votre site, pour que ça ressemble à quelque chose à la finale...
Allez dans votre template "headerinclude" et ajoutez-y le css de bootstrap, je vous conseil le lien CDN :
Code :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
Avec ceci dans votre template, vous aurez tout ce qu'il faut pour continuer. Si vous voulez l'installer d'une autre manière, vous pouvez toujours visiter le "Getting started".
Nous commençons !
Première chose que nous allons ajouter, les boutons de bootstrap.
Expression régulière : \[b_style=(.*?)\](.*?)\[/b_style\]
Remplacement : <button type="button" class="btn btn-$1">$2</button>
Utilisation : [b_style=style du bouton]texte dans le bouton[/b_style]
Pour le rendu et les styles disponibles : http://getbootstrap.com/css/#buttons
Ensuite, nous attaquons les labels de bootstrap.
Expression régulière : \[label=(.*?)\](.*?)\[/label\]
Remplacement : <span class="label label-$1">$2</span>
Utilisation : [label=style du label]texte dans le label[/label]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#labels
Nous continuons avec les badges.
Expression régulière : \[badge\](.*?)\[/badge\]
Remplacement : <span class="badge">$1</span>
Utilisation : [badge]texte dans le badge[/badge]
Pour le rendu (un seul style disponible) : http://getbootstrap.com/components/#badges
Voilà le MyCode pour intégrer les panels :
Expression régulière : \[panel_(.*?)=(.*?)\](.*?)\[/panel\]
Remplacement : <div class="panel panel-$1">
<div class="panel-heading">
<h3 class="panel-title">$2</h3>
</div>
<div class="panel-body">
$3
</div>
</div>
Utilisation : [panel_style du panel=titre du panel]contenu du panel[/panel]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#panels
Nous poursuivons avec les alerts.
Expression régulière : \[alert=(.*?)\](.*?)\[/alert\]
Remplacement : <div class="alert alert-$1" role="alert">$2</div>
Utilisation : [alert=style de l'alert]texte dans l'alert[/alert]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#alerts
Maintenant nous passons aux progressbar.
Expression régulière : \[progress=(.*?)\](.*?)\[/progress]
Remplacement : <div class="progress">
<div class="progress-bar progress-bar-$1" role="progressbar" aria-valuenow="$2" aria-valuemin="0" aria-valuemax="100" style="width: $2%">
<span class="sr-only">Avancé : $2 %</span>
</div>
</div>
Utilisation : [progress=style de la barre]% (ex : 40), sans écrire le %[/progress]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#progress