Adapter les principales fonctions de Bootstrap pour votre forum

[Jules]

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 :

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