Sélection de la langue

Bordures

Travail en cours

Cette page porte sur le travail en cours.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utilisez pour ajouter une ou plusieurs bordures afin de concevoir des éléments afin de séparer ou y attirer l'attention sur le contenu. De plus, retirez les bordures par défaut ou taillez les coins qui semblent être dans les éléments de conception tels qu'un « puits ».

Conception et codage

Utilisation de base

¯¯¯ Bordure gauche

Utilisez pour ajouter une bordure gauche à un élément. Si elle est appliquée à des grilles, la bordure s'affiche sur le bord extérieur de la gouttière 15px.

Apparence



Bonne utilisation

Points de conformité :

  • Utilisez .brdr-lft pour ajouter une bordure gauche
  • Utilisez pour séparer le contenu
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
<div class="col-md-12 brdr-lft">...</div>

Utilisez pour ajouter une bordure droite à l'élément. Si elle est appliquée à des grilles, la bordure s'affiche sur le bord extérieur de la gouttière 15px.

Apparence



Bonne utilisation

Points de conformité :

  • Utilisez .brdr-rght pour ajouter une bordure droite
  • Utilisez pour séparer le contenu
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
<div class="col-md-12 brdr-rght">...</div>

¯¯¯ Bordure supérieure

Utilisez une bordure supérieure à un élément.

Apparence



Bonne utilisation

Points de conformité :

  • Utilisez .brdr-tp pour ajouter une bordure supérieure
  • Utilisez pour séparer le contenu
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
<div class="col-md-12 brdr-tp">...</div>

¯¯¯ Bordure inférieure

Utilisez pour ajouter une bordure inférieure à un élément.

Apparence



Bonne utilisation

Points de conformité :

  • Utilisez .brdr-bttm pour ajouter une bordure inférieure
  • Utilisez pour séparer le contenu
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
<div class="col-md-12 brdr-bttm">...</div>

Utilisation améliorée

¯¯¯ Règle horizontale <hr>

Utilisez pour appliquer une bordure à <hr> pour l'obscurcir.

Apparence

Par défaut :


Obscurci :


Bonne utilisation

Point d'observation :

  • Utilisez pour définir un changement thématique au contenu, selon l'usage approprié de <hr>
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
Code
// Défaut :
<hr>

// Raccourci :
<hr class="brdr-bttm">

Retirer un rayon de bordure

Utilisez pour retirer le rayon de bordure à partir d'une composante de conception, comme un puits.

Apparence

Défaut

Aucun rayon

Défaut
Aucun rayon
Bonne utilisation

Point d'observation :

  • Utilisez .brdr-rds-0 afin de retirer le rayon d'une bordure dans un panneau ou un puits
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
Code
// Aucun rayon dans un panneau :
<div class="brdr-rds-0 panel panel-default">
...
</div>

// Aucun rayon dans un puits:
<div class="brdr-rds-0 well">
...
</div>

Fonctions complémentaires

Des fonctions et des comportements complémentaires sont disponibles.

Principes de soutien

Selon le principe de la région commune, les objets se trouvant dans la même région délimitée (bordée) sont perçus comme regroupés.

Date de modification: