Utilisez les class embarquées de Bootstrap

Le thème Bootstrap et son CSS

Si vous utilisez un thème responsive Bootstrap, sachez que plein de petites astuces de mise en pages sont embarquées. Vous trouverez la totalité des codes sur ce site :
http://getbootstrap.com/css/.

Aucune modification n'est à faire sur la personnalisation de l'apparence. Les règles CSS sont natives, embarquées.

Les alertes des thèmes responsive Bootstrap

Perso j'aime bien les alertes Bootstrap.

 

Exemple : class="alert alert-warning"

 

Exemple 2 : class="alert alert-sucess"

Le code HTML de la colonne de gauche :

 

 <p>Perso j'aime bien les alertes sur Bootstrap.</p>
<p> </p>
<p>Exemple : <span class="alert alert-warning">class="alert alert-warning"</span></p>
<p> </p>
<p>Exemple 2 : <span class="alert alert-success">class="alert alert-sucess"</span></p>

A noter : vous pouvez remplacer le span par un div au besoin.

Exemple avec des div : (et pour compléter les alertes) Ajout du "role" également :

class="alert alert-danger" role="alert"
class="alert alert-info" role="alert"

Le code HTML de la colonne de gauche :

 

<p>Exemple avec des div : (et pour compléter les alertes)Ajout du "role" également : 
</p>
<div class="alert alert-danger">class="alert alert-danger" role="alert"</div>
<div class="alert alert-info">class="alert alert-info" role="alert"</div>

Vous noterez que les div prennent toute la ligne (comme un p) alors que le span ne prend que l'élement sélectionné.

Ceci est un span

 

Ceci est un div

Les labels des thèmes responsive Bootstrap

Ajouter un label avec un thème responsive Bootstrap

C'est un label

Les labels peuvent être utilisés pour mettre en avant des éléments pour votre lecteur. Comme pour les alertes, plusieurs sont disponibles : http://getbootstrap.com/components/#labels

Code à gauche

 <span class="label label-default"> C'est un label</span>

Modifier un style de base de Bootstrap

Il est même possible de définir des balises pour les caractères gras par exemple. La balise <strong>, interprétée comme important pour les moteurs de recherche et en gras par votre navigateur internet. Il est possible d'y associer un label par exemple.

Caractères gras.

 Tout ce que vous mettrez en gras apparaitra toujours en strong pour les moteurs de recherche mais avec une présentation différente du gras habituel. Voici par exemple comment les balises gras - donc <strong> sont définies en CSS pour ce site.

Exemple avec un texte normal et un texte important signalé en le mettant en gras dans l'éditeur visuel.

strong{
border-radius: 3px;
background-color: #333333;
color: #fff;
display: inline-block;
font-size: 11.844px;
font-weight: bold;
line-height: 15px;
padding: 2px 4px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: baseline;
white-space: nowrap;
font-weight: normal;
font-size: 1.1em;
margin: 0.1em;
}

La balise pre

Voici comment j'affiche les codes sur des cadres blancs - foncés depuis cette modification - avec la balise pre.

Ce n'est pas une class Bootstrap mais ça peut être utile. Attention selon les thèmes, les textes peuvent ne pas être accessibles si vous n'utilisez que ce mode de mise en page (pas de souci avec les responsive design, mais à utiliser avec parcimonie).

Code avec la balise pre

<pre> Code avec la balise pre <br />Voici comment j'affiche les codes sur des lignes cadres blancs : avec la balise pre</pre>

Code du cadre à gauche :

<p>Voici comment j'affiche les codes sur des cadres blancs : avec la balise pre.</p>
<p>Ce n'est pas une class bootstrap mais ça peut être utile. <span class="label label-warning">Attention</span> selon les thèmes, les textes peuvent ne pas être accessibles si vous n'utilisez que ce mode de mise en page (pas de souci avec les responsive design, mais à utiliser avec parcimonie.</p>

Ajouter un commentaire