Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Images avec Bootstrap

Dans ce tutoriel, je vous propose de découvrir les classes permettant d'agir sur les images dans Bootstrap.

Images responsives

Pour rendre les images responsives, il suffit d'ajouter la classe .img-responsive, elle aura pour effet d'adapter les imgages à l'élement parent en utilisant ces propriétés CSS : max-width: 100%;, height: auto; and display: block;

Dans Internet Explorer 8-10, les imgaes SVG a qui ont a appliqué la classe .img-responsive sont disproportionnées. Pour corrigé ce bug, il fait ajouter width: 100% \9; à cette classe.

Les arrondis ne sont pas interprétés dans IE8

<img src="images/photo01.jpg" alt="Bootstrap" class="img-responsive">

Des images avec différentes formes

Pour modifier la forme des images, il suffit d'appliquer les classes : .img-circle, .img-rounded, .img-thumbnail.
<img src="images/photo01.jpg" alt="Bootstrap" class="img-circle">
<img src="images/photo01.jpg" alt="Bootstrap" class="img-rounded">
<img src="images/photo01.jpg" alt="Bootstrap" class="img-thumbnail">

Exemple

Bootstrap Bootstrap Bootstrap

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |