| 1 | <!DOCTYPE HTML>
|
|---|
| 2 | <html>
|
|---|
| 3 |
|
|---|
| 4 | <head>
|
|---|
| 5 | <meta charset="utf-8">
|
|---|
| 6 | <link href="css/bootstrap.css" rel="stylesheet">
|
|---|
| 7 | <style type="text/css">
|
|---|
| 8 | body { padding-top: 60px; }
|
|---|
| 9 | a:active, a:focus { outline:none; }
|
|---|
| 10 | </style>
|
|---|
| 11 | </head>
|
|---|
| 12 |
|
|---|
| 13 | <body>
|
|---|
| 14 | <div class="container">
|
|---|
| 15 | <div class="panel panel-default col-lg-6">
|
|---|
| 16 | <h4> Les plugins de Bootstrap</h4>
|
|---|
| 17 | <div class="panel-heading">
|
|---|
| 18 | <a href="#item1" data-toggle="collapse"> Accordéon </a>
|
|---|
| 19 | </div>
|
|---|
| 20 | <div id="item1" class="panel-collapse collapse in">
|
|---|
| 21 | <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
|
|---|
| 22 | </div>
|
|---|
| 23 | <div class="panel-heading">
|
|---|
| 24 | <a href="#item2" data-toggle="collapse"> Fenêtre modale </a>
|
|---|
| 25 | </div>
|
|---|
| 26 | <div id="item2" class="panel-collapse collapse">
|
|---|
| 27 | <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
|
|---|
| 28 | </div>
|
|---|
| 29 | <div class="panel-heading">
|
|---|
| 30 | <a href="#item3" data-toggle="collapse"> Carousel </a>
|
|---|
| 31 | </div>
|
|---|
| 32 | <div id="item3" class="panel-collapse collapse">
|
|---|
| 33 | <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise
|
|---|
| 34 | en forme esthétique </div>
|
|---|
| 35 | </div>
|
|---|
| 36 | <br>
|
|---|
| 37 | </div>
|
|---|
| 38 | </div>
|
|---|
| 39 | <script src="js/jquery.min.js"></script>
|
|---|
| 40 | <script src="js/bootstrap.js"></script>
|
|---|
| 41 | </body>
|
|---|
| 42 | </html>
|
|---|
| 43 |
|
|---|
| 44 | <!--
|
|---|
| 45 | <body>
|
|---|
| 46 | <a href="#item" data-toggle="collapse">Changer</a>
|
|---|
| 47 | <div id="item" class="collapse">
|
|---|
| 48 | Contenu
|
|---|
| 49 | </div>
|
|---|
| 50 |
|
|---|
| 51 | <script src="js/jquery.min.js"></script>
|
|---|
| 52 | <script src="js/bootstrap.min.js"></script>
|
|---|
| 53 | </body>
|
|---|
| 54 | </html>
|
|---|
| 55 | -->
|
|---|
| 56 | <!--
|
|---|
| 57 | <a>Changer</a>
|
|---|
| 58 |
|
|---|
| 59 | <div id="item" class="collapse">
|
|---|
| 60 |
|
|---|
| 61 | Contenu
|
|---|
| 62 |
|
|---|
| 63 | </div>
|
|---|
| 64 |
|
|---|
| 65 | <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
|---|
| 66 | <script src="js/jquery.js"></script>
|
|---|
| 67 |
|
|---|
| 68 | <script src="js/bootstrap.min.js"></script>
|
|---|
| 69 |
|
|---|
| 70 | <script>
|
|---|
| 71 |
|
|---|
| 72 | $(function() {
|
|---|
| 73 |
|
|---|
| 74 | $('a').click(function() {
|
|---|
| 75 |
|
|---|
| 76 | $('#item').collapse('toggle');
|
|---|
| 77 |
|
|---|
| 78 | });
|
|---|
| 79 |
|
|---|
| 80 | });
|
|---|
| 81 |
|
|---|
| 82 | </script>
|
|---|
| 83 | -->
|
|---|
