Fenêtre modale - [PDF] Prenez en main bootstrap site du zero pdf

Le plugin Modals permet de créer facilement une fenêtre modale.

Code : HTML

<div class="modal hide" id="infos">

<div class="modal-header"> <a class="close" data- dismiss="modal">×</a>

<h3>Plus d'informations</h3>

</div>

<div class="modal-body">

<p>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...</p>

</div> </div>

<a class="btn btn-primary" data-toggle="modal" href="#infos" >Plus d'informations</a>

Le principe est simple : on crée un <div> avec la classe modal qui se charge de configurer et positionner la fenêtre et la classe

hide dont le seul but est de la rendre invisible. On peut ensuite organiser la fenêtre avec un en-tête grâce à la classe modal- header et un corps avec modal-body. On prévoit également une action pour fermer la fenêtre (sinon elle va toujours rester

ouverte ) avec la classe close et la propriété data-dismiss="modal". Il ne reste plus ensuite qu'à créer un bouton pour ouvrir la fenêtre en faisant correspondre bouton et fenêtre avec un identifiant et en utilisant data-toggle="modal" pour que le plugin fonctionne. Au départ on n'a donc que ce bouton à l'écran :

Et quand on clique, on obtient la fenêtre modale :

On a une petite croix pour fermer la fenêtre. On peut améliorer un peu l'esthétique en créant un pied de page avec la classe modal-

footer et un bouton pour sortir : Code : HTML

<div class="modal hide" id="infos">

<div class="modal-header"> <a class="close" data- dismiss="modal">×</a>

<h3>Plus d'informations</h3>

</div>

<div class="modal-body">

<p>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...</p>

</div>

<div class="modal-footer"> <a class="btn btn-info" data- dismiss="modal">Fermer</a> </div>

</div>

<a class="btn btn-primary" data-toggle="modal" href="#infos" >Plus d'informations</a>

Il est possible également d'obtenir un effet de transition (pensez à référencer le plugin transition si vous utilisez des fichiers individuels). Il suffit d'ajouter la classe fade :

Code : HTML

<div class="modal hide fade" id="infos">

Testez !

On peut aussi depuis la version 2.1 injecter une page externe dans le corps de la fenêtre modale

Cette possibilité peut s'avérer très pratique. Voici un exemple en injectant une page d'exemple sur les tigres :

Code : HTML

<div class="modal hide fade" id="infos">

<div class="modal-header"> <a class="close" data- dismiss="modal">×</a>

<h3>Plus d'informations</h3>

</div>

<div class="modal-body">

</div>

<div class="modal-footer"> <a class="btn btn-info" data- dismiss="modal">Fermer</a> </div>

</div>

<a class="btn btn-primary" data-toggle="modal" href="tuto02_01.html"

On pointe la fenêtre modale avec data-target et la page à injecter avec href .

Onglets

Le plugin Togglable tabs permet de créer facilement des onglets. Voici un premier exemple simple :

Code : HTML

<div class="tabbable">

<ul class="nav nav-tabs">

<li class="active"><a href="#accueil" data- toggle="tab">Accueil</a></li>

<li><a href="#livres" data-toggle="tab">Livres</a></li>

<li><a href="#témoignages" data- toggle="tab">Témoignages</a></li>

</ul>

<div class="tab-content">

<div class="tab-pane active" id="accueil">Texte d'accueil</div>

<div class="tab-pane" id="livres">Tous les livres</div>

<div class="tab-pane" id="témoignages">Tous les témoignages</div>

</div> </div>

On utilise une liste et quelques classes, rien de bien compliqué. Le plugin est activé par data-toggle="tab".

Si cette apparence tabulaire ne vous convient pas vous pouvez changer pour un autre aspect avec une modification minime :

Code : HTML

<ul class="nav nav-pills">

Si ça ne vous convient encore pas (mais vous êtes difficile là ) vous pouvez empiler les liens :

Code : HTML

<ul class="nav nav-pills nav-stacked">

Vous en voulez encore plus ! Un menu déroulant pour un lien ? Là vous exagérez vraiment, mais bon il faut un peu modifier le code pour utiliser le plugin dropdown que nous avons déjà vu :

Code : HTML

<div class="tabbable">

<ul class="nav nav-tabs">

<li class="dropdown"><a href="#accueil" data- toggle="tab">Accueil</a></li>

<li class="dropdown"> <a class="dropdown-toggle"

data-toggle="dropdown"

href="#"> Livres <b class="caret"></b> </a>

<ul class="dropdown-menu">

<li><a href="#policiers" data- toggle="tab">Policiers</a></li>

<li><a href="#romans" data-toggle="tab">Romans</a></li>

<li><a href="#contes" data-toggle="tab">Contes</a></li>

</ul>

</li>

<li><a href="#témoignages" data- toggle="tab">Témoignages</a></li>

</ul>

<div class="tab-pane active" id="accueil">Texte d'accueil</div>

<div class="tab-pane" id="livres">Tous les livres</div>

<div class="tab-pane" id="témoignages">Tous les témoignages</div>

<div class="tab-pane" id="policiers">Tous les livres policiers</div>

<div class="tab-pane" id="romans">Tous les romans</div>

<div class="tab-pane" id="contes">Tous les contes</div>

</div> </div>

Bon, ça ne vous va encore pas et vous préféreriez les liens empilés à gauche ? Encadrez le code d'un <div> avec ces classes :

Code : HTML

<div class="tabbable tabs-left">

...

</div>

La version 2.1 permet d'aller plus loin dans l'organisation des onglets comme par exemple les placer au-dessous du contenu avec la classe tabs-below :

Code : HTML

<div class="tabbable tabs-below">

<div class="tab-content">

<div class="tab-pane active" id="accueil">Texte d'accueil</div>

<div class="tab-pane" id="livres">Tous les livres</div>

<div class="tab-pane" id="témoignages">Tous les témoignages</div>

</div>

<ul class="nav nav-tabs">

<li class="active"><a href="#accueil" data- toggle="tab">Accueil</a></li>

<li><a href="#livres" data-toggle="tab">Livres</a></li>

<li><a href="#témoignages" data- toggle="tab">Témoignages</a></li>

</ul> </div>

Ou encore à droite avec la classe tabs-right :

Code : HTML

<div class="tabbable tabs-right">

Carousel

Le plugin Carousel permet de créer facilement un carousel.

La mise en place nécessite l'utilisation de quelques classes. Voici la structure de base HTML :

Code : HTML

<div class="carousel slide">

<div class="carousel-inner">

<div class="item active"> ... </div>

<div class="item"> ... </div>

</div> </div>

Voici un premier exemple simple :

Code : HTML

<div class="span9">

<div class="carousel slide">

<div class="carousel-inner">

<div class="item active"> <img alt=""

src="images/img47.png"/>

<div class="carousel-caption">

<p>Une présentation</p>

</div>

<div class="item"> <img alt="" src="images/img48.png"/>

<div class="carousel-caption">

<p>Un autre présentation</p>

</div>

<div class="item"> <img alt="" src="images/img49.png"/>

<div class="carousel-caption">

</div>

</div> </div>

Pour chaque item on place une balise <img> pour référencer une image, on associe une légende avec une balise <div> avec la classe carousel-caption. On utilise la classe active pour désigner l'image qui doit apparaître en premier. On a utilisé une classe

span9 pour positionner le carousel. On a dimensionné les 3 images aux mêmes côtes.

La version 2.1 impose l'utilisation de la classe "slide" pour obtenir un effet de glissement

Il nous faut aussi initialiser le carousel avec jQuery :

Code : JavaScript

$(function (){

$('.carousel').carousel(); });

Voici le résultat :

On peut ajouter des boutons pour faire défiler manuellement ?

Il suffit de compléter le code avec ça :

Code : HTML

<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">

<div class="item active"> <img alt="" src="images/img47.png"/>

<div class="carousel-caption">

<p>Une présentation</p>

<div class="item"> <img alt="" src="images/img48.png"/>

<div class="carousel-caption">

<p>Un autre présentation</p>

</div>

<div class="item"> <img alt="" src="images/img49.png"/>

<div class="carousel-caption">

<p>Et encore une autre !</p>

</div>

<a class="carousel-control left" data-slide="prev"

href="#myCarousel">‹</a>

<a class="carousel-control right" data-slide="next"

href="#myCarousel">›</a> </div> </div>

On a identifié le carousel avec un l'id myCarousel. On a créé deux liens qui pointent sur le carousel en spécifiant la bonne classe et le bon data-slide :

On peut améliorer la présentation en ajoutant du style :

Code : CSS body { background-color:#ddd; } .carousel-inner { border-radius: 5px 5px 5px 5px; border: 5px solid white;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }

Mais on peut aussi détourner une classe de Bootstrap pour obtenir un effet sympathique sans ajouter de style :

Code : HTML

<div class="carousel-inner thumbnail">

Le carousel comporte quelques options, par exemple le délai de défilement :

Code : JavaScript

$('.carousel').carousel({ interval: 2000

Testez !

Pour terminer un petit TP. On veut obtenir ce résultat (comme depuis le début un petit clic sur l'image pour ouvrir l'exemple ):

Un défilement avec un délai de 2 secondes, un bouton pour arrêter le défilement et un autre pour le lancer, et en prime une étiquette qui nous indique l'état. Essayez de le faire en vous référant à la documentation pour les fonctions à utiliser.

Secret (cliquez pour afficher)

Code : HTML

<body>

<div class="container"> <br/>

<div class="row">

<div class="span9">

<div id="myCarousel" class="carousel">

<div class="carousel-inner thumbnail">

<div class="item active"> <img alt=""

src="images/img47.png"/>

<div class="carousel-caption">

<p>Une présentation</p>

</div>

<div class="item"> <img alt="" src="images/img48.png"/>

<div class="carousel-caption">

<p>Un autre présentation</p>

</div>

<div class="item"> <img alt="" src="images/img49.png"/>

<div class="carousel-caption">

<p>Et encore une autre !</p>

</div>

<a class="carousel-control left" data-slide="prev"

href="#myCarousel">‹</a> <a class="carousel-control right" data- slide="next" href="#myCarousel">›</a> </div>

</div>

<div class="span3 btn-group">

<button id="pause" class="btn btn-warning pull-right"

>Pause</button>

<button id="reprise" class="btn btn-info pull-right"

>Reprise</button>

</div>

<span class="label label-info">Mode cycle</span> </div> </body>

</body>

<script src="../js/jquery.js"></script>

<script src="../bootstrap/js/bootstrap-carousel.js"></script> <script src="../bootstrap/js/bootstrap-transition.js"></script> <script>

$(function (){

$('.carousel').carousel({ interval: 2000

});

$("#pause").click(function() { $('.carousel').carousel('pause');

$('.label').text('Mode pause').removeClass("label- info").addClass("label-warning");

});

$("#reprise").click(function() { $('.carousel').carousel('cycle');

$('.label').text('Mode cycle').removeClass("label- warning").addClass("label-info");

}); });

</script>

Je ne commente encore pas le code jQuery utilisé qui ne fait pas l'objet de ce cours.

Dans le document [PDF] Prenez en main bootstrap site du zero pdf | Cours Bootstrap (Page 81-92)