Twitter bootstrap succinctly pdf

(1)

Bootstrap Twitter

Bootstrap Twitter est une collection d'outils qui facilite la création d'un site web. Ce framework est composé entre autre de code HTML, Javascript et CSS et permet donc de créer des formulaires designés très facilement ainsi que l'implémentation d'éléments dynamiques comme un carousel ou une modal.

Télécharger BOOTSTRAP Twitter

Vous pouvez télécharger le framework ici: Télécharger bootstrap twitter

Ou sur le site officiel: Bootstrap twitter

Si vous une archive (extension .zip ou .tar.gz) vous a été délivrée, dézippez la dans dans votre dossier racine de votre projet. Les dossiers css, fonts et js doivent être visibles.

(2)

Il suffit ensuite de pointer les fichiers css et js (minifés) sur vos pages:

Vous verrez votre site changer graphiquement sans avoir ajouté quoi que ce soit.

Bootstrap twitter: la grille

Accueil › Bootstrap twitter 3 › La grille

Bootstrap c'est quoi?Les boutons

Le système de grille est le coeur de BOOTSTRAP twitter.

(3)

L'idée d'un responsive design c'est de dire que pour telle taille d'écran un élément occupe X colonne(s).

Boostrap Devices

Bootstrap twitter prend en charge 4 types de format: › Très petit format < 768 pixels ( Smartphone ) › Petit format ≥ 786 px & < 992 px ( Tablette ) › Moyen format ≥ 992 px & < 1200 px ( Petit écran ) › Large format ≥ 1200 px ( Ecran standard ) Il existe un préfixe pour ces formats:

› Très petit format .col-xs- › Petit format .col-sm- › Moyen format .col-md- › Large format .col-lg-

On va prendre l'exemple d'affichage de deux éléments. Le premier de couleur orange pourrait être un élément de texte et un élément vert qui serait un menu:

(4)

(5)

(6)

Maintenant que nous avons établi la stratégie d'affichage des éléments, on peut passer au code:

Code HTML

<div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 col-lg-offset-1" style="background-color:orange;height:200px;">Texte

</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 col-lg-offset-1" style="background-color:green;height:200px;">Menu

(7)

</div> </div> </div>

Rendu

Texte Menu

Si vous changez la taille de votre navigateur, vous verrez que le rendu ci-dessus s'adaptera à la taille comme nous le voulions plus haut.

Explication du code

Nous avons construit deux blocs un orange et un vert. Ensuite nous avons indiqué pour chaque taille d'écran le nombre de colonnes à occuper avec la syntaxe col-xs-*, col-sm-*, col-md-* et col-lg-* où * est le nombre de colonnes.

Pour le bloc orange: col-xs- 12 col-sm- 9 col-md- 9 col-lg- 7

(8)

Pour le bloc orange: col-xs- 12 col-sm- 3 col-md- 3 col-lg- 2

Offset

Maintenant voyons comment nous avons géré l'espace entre les éléments pour la version LG ( Large device ). Pour consacrer un espace à une colonne il faut utiliser la propriété offset. La logique est la même que pour indiquer la largeur d'un bloc: col-xs-offset-*, col-sm-offset-*, col-md-offset-* et col-lg-offset-* où * est le nombre de colonnes.

Pour le bloc orange: col-xs-offset- 0

(9)

col-sm-offset- 0 col-md-offset- 0 col-lg-offset- 1

Pour le bloc vert: col-xs-offset- 0 col-sm-offset- 0 col-md-offset- 0 col-lg-offset- 1

Il n'est cependant pas nécessaire d'indiquer les valeurs pour tous les formats d'affichage puisque 0 est la valeur par defaut. Indiquer la valeur pour l'affichage LG est donc suffisant.

(10)

Accueil › Bootstrap twitter 3 › Les boutons

La grilleBadges et Labels

Bootstrap Twitter propose une série de boutons déjà designés. Pour créer un bouton, il faut ajouter la class "btn" à l'élément. Un bouton peut être créé à partir de l'élément a, div, button, span, etc.

Boutons BOOTSTRAP twitter

DéfautPrimary SuccessInfoWarning Danger

<button class="btn btn-default">Défaut</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-info">Info</button>

<button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button>

Largeur boutons

Il existe différentes tailles de bouton: xs, sm et lg.

Défautbouton xsbouton sm bouton lg

<button class="btn btn-primary">Défaut</button>

<button class="btn btn-primary btn-xs">bouton xs</button> <button class="btn btn-primary btn-sm">bouton sm</button> <button class="btn btn-primary btn-lg">bouton lg</button>

Bouton Block

(11)

Pour créer un bouton qui s'affiche en block:

Bouton BlockBouton Block

Bouton actif

DéfautActif

<button class="btn btn-primary">Défaut</button> <button class="btn btn-primary active">Actif</button>

Bouton désactivé

DéfautDésactivé

<button class="btn btn-primary">Défaut</button>

<button class="btn btn-primary disabled">Désactivé</button>

Regrouper des boutons

GaucheMilieuDroite <div class="btn-group">

<button type="button" class="btn btn-default">Gauche</button> <button type="button" class="btn btn-default">Milieu</button> <button type="button" class="btn btn-default">Droite</button> </div>

Il est possible de changer la taille des boutons de ce groupement à l'aide des class xs, btn-group-sm et btn-group-lg :

(12)

GaucheMilieuDroite

Regrouper des boutons verticalement

HautMilieuBas

<button type="button" class="btn btn-default">Haut</button> <button type="button" class="btn btn-default">Milieu</button> <button type="button" class="btn btn-default">Bas</button> </div>

(13)

Boutons multi choix

Action

<div class="btn-group"> <button type="button"

class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu"> <li><a href="#">Nouveau</a></li> <li><a href="#">Editer</a></li> <li class="divider"></li> <li><a href="#">Supprimer</a></li> </ul> </div>

Il est également possible de changer la taille de ce select grâce aux classes btn-xs, btn-sm et btn-lg: Action

Action

<div class="btn-group"> <button type="button"

class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu"> <li><a href="#">Nouveau</a></li> <li><a href="#">Editer</a></li> <li class="divider"></li>

(14)

<li><a href="#">Supprimer</a></li> </ul>

</div>

Boutons multi choix 2

ActionToggle Dropdown

<button type="button" class="btn btn-danger">Action</button>

<span class="sr-only">Toggle Dropdown</span> </button>

<ul class="dropdown-menu" role="menu"> <li><a href="#">Nouveau</a></li> <li><a href="#">Editer</a></li> <li class="divider"></li> <li><a href="#">Supprimer</a></li> </ul> </div>

Bootstrap Twitter: badges et labels

Accueil › Bootstrap twitter 3 › Badges et Labels

(15)

Les badges

Messages 451

<a href="#"> Messages

Les labels

DefaultPrimarySuccessInfoWarningDanger

<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span>

<span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>

Bootstrap Twitter: les images

(16)

Badges et LabelsLes alertes

Glyphicon

Les glyphicons sont des images que propose la librairie BOOTSTRAP Twitter. Son fonctionnement est le

suivant: ajoutez à un élément la classe glyphicon et la classe glyphicon-* où * est le nom de l'image ( voir liste ci-dessous )

Exemple:

<iclass="glyphicon glyphicon-adjust"></i>

Résultat:

Taille des images

Vous pouvez gérer la taille de cette image comme s'il s'agissait d'une police d'écriture ( font ).

Exemple:

<i class="glyphicon glyphicon-adjust" style="font-size:80px;"></i> Résultat:

Liste des glyphicons de Bootstrap Twitter

.glyphicon-adjust.glyphicon-align-center.glyphicon-align-justify.glyphicon-align-left.glyphicon-align-right.glyphicon-arrow-down.glyphicon-arrow-left.glyphicon-arrow-

(17)

right.glyphicon-arrow-up.glyphicon-asterisk.glyphicon-backward.glyphicon-ban-circle.glyphicon-barcode.glyphicon-bell.glyphicon-bold.glyphicon-book.glyphicon- bookmark.glyphicon-briefcase.glyphicon-bullhorn.glyphicon-calendar.glyphicon-camera.glyphicon-certificate.glyphicon-check.glyphicon-chevron-down.glyphicon-chevron- left.glyphicon-chevron-right.glyphicon-chevron-up.glyphicon-circle-arrow-down.glyphicon-circle-arrow-left.glyphicon-circle-arrow-right.glyphicon-circle-arrow- up.glyphicon-cloud.glyphicon-cloud-download.glyphicon-cloud-upload.glyphicon-cog.glyphicon-collapse-down.glyphicon-collapse-up.glyphicon-comment.glyphicon- compressed.glyphicon-copyright-mark.glyphicon-credit-card.glyphicon-cutlery.glyphicon-dashboard.glyphicon-download.glyphicon-download-alt.glyphicon- earphone.glyphicon-edit.glyphicon-eject.glyphicon-envelope.glyphicon-euro.glyphicon-exclamation-sign.glyphicon-expand.glyphicon-export.glyphicon-eye- close.glyphicon-eye-open.glyphicon-facetime-video.glyphicon-fast-backward.glyphicon-fast-forward.glyphicon-file.glyphicon-film.glyphicon-filter.glyphicon-fire.glyphicon- flag.glyphicon-flash.glyphicon-floppy-disk.glyphicon-floppy-open.glyphicon-floppy-remove.glyphicon-floppy-save.glyphicon-floppy-saved.glyphicon-folder-close.glyphicon- folder-open.glyphicon-font.glyphicon-forward.glyphicon-fullscreen.glyphicon-gbp.glyphicon-gift.glyphicon-glass.glyphicon-globe.glyphicon-hand-down.glyphicon-hand- left.glyphicon-hand-right.glyphicon-hand-up.glyphicon-hd-video.glyphicon-hdd.glyphicon-header.glyphicon-headphones.glyphicon-heart.glyphicon-heart- empty.glyphicon-home.glyphicon-import.glyphicon-inbox.glyphicon-indent-left.glyphicon-indent-right.glyphicon-info-sign.glyphicon-italic.glyphicon-leaf.glyphicon- link.glyphicon-list.glyphicon-list-alt.glyphicon-lock.glyphicon-log-in.glyphicon-log-out.glyphicon-magnet.glyphicon-map-marker.glyphicon-minus.glyphicon-minus- sign.glyphicon-move.glyphicon-music.glyphicon-new-window.glyphicon-off.glyphicon-ok.glyphicon-ok-circle.glyphicon-ok-sign.glyphicon-open.glyphicon- paperclip.glyphicon-pause.glyphicon-pencil.glyphicon-phone.glyphicon-phone-alt.glyphicon-picture.glyphicon-plane.glyphicon-play.glyphicon-play-circle.glyphicon- plus.glyphicon-plus-sign.glyphicon-print.glyphicon-pushpin.glyphicon-qrcode.glyphicon-question-sign.glyphicon-random.glyphicon-record.glyphicon-refresh.glyphicon- registration-mark.glyphicon-remove.glyphicon-remove-circle.glyphicon-remove-sign.glyphicon-repeat.glyphicon-resize-full.glyphicon-resize-horizontal.glyphicon-resize- small.glyphicon-resize-vertical.glyphicon-retweet.glyphicon-road.glyphicon-save.glyphicon-saved.glyphicon-screenshot.glyphicon-sd-video.glyphicon-search.glyphicon- send.glyphicon-share.glyphicon-share-alt.glyphicon-shopping-cart.glyphicon-signal.glyphicon-sort.glyphicon-sort-by-alphabet.glyphicon-sort-by-alphabet-alt.glyphicon- sort-by-attributes.glyphicon-sort-by-attributes-alt.glyphicon-sort-by-order.glyphicon-sort-by-order-alt.glyphicon-sound-5-1.glyphicon-sound-6-1.glyphicon-sound-7- 1.glyphicon-sound-dolby.glyphicon-sound-stereo.glyphicon-star.glyphicon-star-empty.glyphicon-stats.glyphicon-step-backward.glyphicon-step-forward.glyphicon- stop.glyphicon-subtitles.glyphicon-tag.glyphicon-tags.glyphicon-tasks.glyphicon-text-height.glyphicon-text-width.glyphicon-th.glyphicon-th-large.glyphicon-th- list.glyphicon-thumbs-down.glyphicon-thumbs-up.glyphicon-time.glyphicon-tint.glyphicon-tower.glyphicon-transfer.glyphicon-trash.glyphicon-tree-conifer.glyphicon-tree- deciduous.glyphicon-unchecked.glyphicon-upload.glyphicon-usd.glyphicon-user.glyphicon-volume-down.glyphicon-volume-off.glyphicon-volume-up.glyphicon-warning-sign.glyphicon-wrench.glyphicon-zoom-in.glyphicon-zoom-out

(18)

Bootstrap Twitter: les alertes

Accueil › Bootstrap twitter 3 › Les alertes

Images / GlyphiconResponsive tables

Vous pouvez créer des alertes avec BOOTSTRAP Twitter grâce à la classe alert.

Exemple:

Félicitation! Votre compte a bien été enregistré Pour info: Votre nom est Olivier ENGEL

Attention! Votre compte existe déjà

Erreur! Votre compte a été refusé

<b>Félicitation!</b> Votre compte a bien été enregistré </div>

<b>Pour info:</b> Votre nom est Olivier ENGEL </div>

<b>Attention!</b> Votre compte existe déjà </div>

(19)

<b>Erreur!</b> Votre compte a été refusé </div>

Bouton "fermer"

Félicitation! Votre compte a bien été enregistré×

<b>Félicitation!</b> Votre compte a bien été enregistré

Responsive design tableau

Accueil › Bootstrap twitter 3 › Responsive tables

Les alertesTooltip

Pour les petits supports - comme les smartphones et les tablettes -, les tableaux deviennent souvent illisibles. Il existe quelques astuces pour pouvoir les consulter de manière productive même sur les plus petits formats.

Responsive design par defaut des <table>

La manière par défaut de BOOTSTRAP Twitter est d'encadrer un tableau par une div avec la classe "table-responsive"

(20)

Pour centrer le tableau et lui définir une taille minimale et maximale : <style> div#list_de_trucs{ margin:10px auto; width:100%; min-width:400px; max-width:700px; } div#list_de_trucs table{ margin:0px; width:100%; } </style>

... </table> </div>

(21)

Le résultat sera le suivant sur un petit format :

(22)

Le responsive table un peu plus poussé

Il est possible de transformer le tableau entièrement et de lui donner un autre sens de lecture, grâce au CSS : <style>

(23)

.responsive-table-line td:before { content: attr(data-title); } .responsive-table-line table, .responsive-table-line thead, .responsive-table-line tbody, .responsive-table-line th, .responsive-table-line td, .responsive-table-line tr { display: block; } .responsive-table-line thead tr { display:none; } .responsive-table-line td { position: relative;

border: 0px solid transparent; padding-left: 50% !important; white-space: normal; text-align:right; } .responsive-table-line td:before { position: absolute; top: 0px; left: 0px; width: 45%; padding-right: 15px; height:100%; white-space: nowrap;

text-overflow: ellipsis !important; overflow:hidden !important; text-align:left;

(24)

background-color:#f8f8f8; padding:2px;

} }

</style>

<thead> <tr> <th>Droit</th> <th>Valeur alphanumérique</th> <th>Valeur octale</th> <th>Valeur binaire</th> </tr> </thead> <tbody> <tr>

<td data-title="Droit">Aucun droit</td>

<tr>

<td data-title="Droit">Exécution</td>

<tr>

(25)

<tr>

<td data-title="Droit">Ecriture et exécution</td> <td data-title="Valeur alphanumérique">-wx</td> <td data-title="Valeur octale">3</td>

<tr>

<td data-title="Droit">Lecture seulement</td> <td data-title="Valeur alphanumérique">r--</td> <td data-title="Valeur octale">4</td>

<tr>

<td data-title="Droit">Lecture et exécution</td> <td data-title="Valeur alphanumérique">r-x</td> <td data-title="Valeur octale">5</td>

<tr>

<td data-title="Droit">Lecture et écriture</td> <td data-title="Valeur alphanumérique">rw-</td> <td data-title="Valeur octale">6</td>

<tr>

(26)

</tbody> </table> </div>

En format large le tableau ressemblera à cela :

(27)

(28)

(29)

Bootstrap Twitter: tooltip

Accueil › Bootstrap twitter 3 › Tooltip

Responsive tablesCarousel

Vous pouvez créer des infos bulles assez rapidement avec BOOTSTRAP twitter.

Exemple:

Ceci est un texte bla bla bla bla et ce qui suit est une tooltip ( petite bulle info qui s'affiche au-dessus du lien ) : Tooltip

<a href="#"

class="link tooltip-link" data-toggle="tooltip"

data-original-title="Une URL est une adresse web"> Tooltip

</a>

Comme vous pouvez le constater vous devez renseigner l'attribut data-toggle et data-original-title pour ajouter cette information dynamique. Il vous faudra également ajouter ce code Javascript:

(30)

Bootstrap Twitter: Carousel

Accueil › Bootstrap twitter 3 › Carousel

TooltipFenêtre dynamique

Le carousel de BOOTSTRAP twitter

1.

2.

3.

(31)

Page 2 de présentation

Code HTML

(32)

<div class="carousel-caption">Page 1 de présentation</div> </div>

<div class="item">

<div class="item">

</div>

</a>

</a> </div>

(33)

Bootstrap Twitter Modal / Fenêtre

dynamique

Accueil › Bootstrap twitter 3 › Fenêtre dynamique

CarouselBootstrap wrap / Bootswatch

Modal BOOTSTRAP twitter

Exemple:

(34)

Lancer la modal

Code

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Lancer la modal

</button>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body"> Exemple de modal </div>

</div> </div> </div>

Bootstrap Wrap et Bootswatch

(35)

Fenêtre dynamiqueFont Awesome

Bootstrap Twitter est un framework CSS, une technologie récente et très utilisée il existe donc une multitudes de projets qui gravitent autour. Je vais vous en présenter quelques uns qui vous seront très utiles!

Wrap Bootstrap

Les possibilités de design avec BOOTSTRAP twitter sont infini. Si vous avez besoin de supports pour vos inspirations ou si vous voulez acheter un thème pour votre site pour quelques euros, je vous conseille ce site : Bootstrap Wrap

Bootswatch

Un autre site dans le même genre propose des thèmes gratuit : Bootswatch

Bootsnipp

Bootsnipp est un site qui vous propose des éléments de code designé. Exemple: menu, espace login, fiche présentation utilisateur, demande de carte de crédit, etc. Très efficace comme site: Bootsnipp

(36)

Bootstrap Font Awesome

Accueil › Bootstrap twitter 3 › Font Awesome

Bootstrap wrap / BootswatchjQuery c'est quoi?

Il existe une extension à BOOTSTRAP Twitter qui permet d'ajouter d'autres glyphicons.

Font Awesome

Font awseome propose d'intégrer à votre blibliothèque plus de 369 icones.

(37)

Icones dynamiques

Avec Font awesome vous pouvez rendre vos icones dynamiques:

Exemple:

Code:

Rotation et inversion des icones

Pour inverser une icone ou executer une rotation utilisez la classe fa-rotate-* et fa-flip-* : normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal icon-flip-vertical Code:

<i class="fa fa-thumbs-o-up"></i>  normal<br>

<i class="fa fa-thumbs-o-up fa-rotate-90"></i>  fa-rotate-90<br> <i class="fa fa-thumbs-o-up fa-rotate-180"></i>  fa-rotate-180<br> <i class="fa fa-thumbs-o-up fa-rotate-270"></i>  fa-rotate-270<br>

(38)

<i class="fa fa-thumbs-o-up fa-flip-vertical"></i>  icon-flip-vertical

Encadrement icones

Il est possible d'ajouter divers encadrements aux icones:

Exemple:

Code:

<br>

<br>

<br>

(39)