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 | -->
|
---|