réseaux sociaux
Web

Bootstrap

Sources :


/* petits écrans (tablettes, 768px et plus) */
@media (min-width: @screen-sm-min) { … }

/* Moyens écrans (ordinateurs, 992px et plus) */
@media (min-width: @screen-md-min) { … }

/* Large écrans (large écran, 1200px et plus) */
@media (min-width: @screen-lg-min) { … }

auto 750px 970px  1170px
.col-xs- .col-sm- .col-md- .col-lg-

font-size par défaut est de 14px, avec une line-height (hauteur de ligne) de 1.428.

Appliqué dans le body et tous les paragraphes.


<div class=”container-fluid”> = Pour que le container fasse toute la largeur

<mark></mark> = Met en valeur un texte

<del></del> = Raye le texte (texte supprimé)

<s></s> = Texte rayé

<ins></ins> = Insérer du texte souligné

<u></u> = Texte souligné

<small></small> = mettre un texte en plus petit

<strong></strong> = mettre un texte en gras

<em></em> = mettre un texte en italique

<abbr title=””></abbr> = signaler une abbréviation  avec sa signification

<dl>
 <dt>…</dt>
 <dd>…</dd>
</dl>

= description horizontale

<code></code> = insérer du code

<pre></pre> = insérer plusieurs lignes de code

<kbd></kbd> = insère des commandes clavier


Dans le class=”” du HTML


TEXTE

.small = Pour mettre un texte plus petits que d’origine

.lead = faire ressortir du texte

.small = mettre un texte plus petit

.text-left = mettre le texte à gauche

.text-center = centrer le texte

.text-right = aligner le texte à droite

.text-justify = texte justifié

.text-nowrap = texte sans alignement

.text-lowercase = casse du texte en minuscule sans majuscules

.text-uppercase = casse du texte en majuscule

.text-capitalize = casse du texte avec une majuscule en début de phrase

.initialism = pour une taille de police légèrement plus petite

.blockquote-reverse = un citation avec un contenu aligné à droite

.list-unstyled = retirer les points aux listes

.list-inline = aligner des blocs

.dl-horizontal = description horizontale

.text-overflow = pour garder le texte dans une même colonne

.pre-scrollable = insérer plusieurs lignes de codes


TABLEAU

.table = faire un tableau

.table-striped = grise les lignes d’un tableau

.table-bordered = mettre des bordures au tableau

.table-hover = surligne la ligne sur laquelle la souris passe

.table-condensed  = Condense le tableau

.active = applique une couleur pour une row ou une cellule

.success = indique une action positive

.info = indique une information neutre

.warning = Indique un danger pour attirer ton attention (action négative)

.table-responsive = met un tableau en responsive


FORMULAIRE

.form-group = indique un formulaire

.form-control = dans un input pour qu’il prenne 100% de la largeur

.form-inline = mettre sur une ligne le formulaire

.input-group-addon = intègre une case avec une img dans un input

.btn-primary / .btn-default  = style de bouton

.form-horizontal = aligne chaque div d’un formulaire

.disabled = rendre in-cliquable une zone

.radio / .checkbox = créer un bouton radio ou cheackbox

.radio-inline / .checkbox-inline = aligner des boutons cheackbox et radio

.multiple = avoir une liste select

.form-control-static = faire d’un texte le même style qu’un input text

.sr-only = masquer le label

:focus = box-shadow = applique une ombre à un input text

.help-block = pour créer un bloc de texte d’aide

.has-warning = met le texte en warning

.has-error = met le texte en erreur

.has-success = met le texte en success

.has-feedback =

.input-lg = large input

.input-sm = petit input

.btn-lg / .btn-sm / .btn-xs = largeur du btn

.btn-block = créer un bloc de boutons

.active = afficher le bouton comme activé


IMAGES

.center-block = centre des éléments

.img-responsive = met en responsive une image

img-rounded = image carrée dont les bords sont arrondis

img-circle = image ronde

img-thumbnail = image carrée avec cadre blanc


COULEURS TEXTE

text-muted = bleu foncé

text-primary = bleu clair

text-success = vert

text-info = bleu

text-warning = orange

text-danger = rouge


COULEUR BACKGROUND

bg-primary = bleu clair

bg-success = vert

bg-info = bleu

bg-warning = orange

bg-danger = rouge


DIVERS

.close = img fermer une fenêtre

caret = img développer


POSITION

.navbar-left = mettre la navbar à gauche

.navbar-right = mettre la navbar à droite

pull-left = met les éléments (sauf navbar) à gauche

pull-right = met les éléments (sauf navbar) à droite

.clearfix = effacer les effets de style


VISIBILITÉ

.show = montrer un élément

.hidden = rendre incliquable un élément

.invisible = masquer un elmt

.sr-only =

.sr-only-focusable =


Dans le CSS :

pointer-events: none = le curseur indique que tu ne peux rien faire à cet endroit

 

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.