Upload files to 'bootstrap_slide_modal_tolltip'

2 years ago · 6ec98bb281
1 changed files with 148 additions and 0 deletions
--- a/bootstrap_slide_modal_tolltip/index.html
+++ b/bootstrap_slide_modal_tolltip/index.html
@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/bootstrap.css">
+</head>
+<body>
+    <div class="container">    
+        <h1>Bootstrap JS</h1>
+
+        <div id="demo" 
+            class="carousel slide" 
+            data-bs-ride="carousel">
+            <!-- indikatátory -->
+            <div class="carousel-indicators">
+                <button type="button"
+                        class="active"
+                        data-bs-target="#demo"
+                        data-bs-slide-to="0"></button>
+
+                <button type="button"
+                        data-bs-target="#demo"
+                        data-bs-slide-to="1"></button>  
+
+                <button type="button"
+                        data-bs-target="#demo"
+                        data-bs-slide-to="2"></button>         
+            </div>
+            <!-- vnitřek -->
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="img/img1.jpg" alt=""
+                    class="d-block w-100">
+                    <div class="carousel-caption">
+                        <h5>Fotka krajiny</h5>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="img/img2.jpg" alt=""
+                    class="d-block w-100">
+                    <div class="carousel-caption">
+                        <h5>Černobílá fotka</h5>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="img/img3.jpg" alt=""
+                    class="d-block w-100">
+                    <div class="carousel-caption">
+                        <h5>Roztomilý pes</h5>
+                    </div>
+                </div>
+            </div>
+            <!-- ovládání -->
+            <button class="carousel-control-prev" 
+                    type="button"
+                    data-bs-target="#demo"
+                    data-bs-slide="prev">
+                <span class="carousel-control-prev-icon"></span>
+                <span class="visually-hidden">Předchozí</span>
+            </button>
+            <button class="carousel-control-next" 
+                    type="button"
+                    data-bs-target="#demo"
+                    data-bs-slide="next">
+                <span class="carousel-control-next-icon"></span> 
+                <span class="visually-hidden">Předchozí</span>
+            </button>
+        </div>
+
+        <hr>
+        <!-- MODAL -->
+        <!-- tlačítka pro vyvolání modalu -->
+        <button data-bs-toggle="modal" 
+                data-bs-target="#modal1"  
+                type="button" 
+                class="btn btn-primary">Modal CZ</button>
+
+        <button data-bs-toggle="modal" 
+                data-bs-target="#modal2"  
+                type="button" 
+                class="btn btn-secondary">Modal EN</button>
+
+        <!-- jednotlivé modaly -->
+        <div class="modal" id="modal1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <!-- vnitřek modalu -->
+                    <div class="modal-header">
+                        <h5 class="modal-title">AHOJ SVĚTE</h5>
+                        <button class="btn-close"
+                        data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Text</p>
+                    </div>
+                    <div class="modal-footer">
+                            <button class="btn btn-danger"
+                            data-bs-dismiss="modal">Zavřít</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="modal" id="modal2">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <!-- vnitřek modalu -->
+                    <div class="modal-header">
+                        <h5 class="modal-title">Hello world!</h5>
+                        <button class="btn-close"
+                        data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p>TEXT TEXT TEXT</p>
+                    </div>
+                    <div class="modal-footer">
+                            <button class="btn btn-danger"
+                            data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <hr>
+        <!-- ToolsTip -->
+
+        <p> <a href="#" data-bs-toggle="tooltip" 
+            data-bs-placement="top"
+            title="Lorem je generovany text pro test">Lorem ipsum</a>, 
+            dolor sit amet consectetur adipisicing elit. Neque praesentium tempora, sit ut libero dolorum consectetur iste provident aliquam sint accusantium placeat voluptate, debitis fuga ullam ipsa! Iste, nihil repudiandae!</p>
+
+    </div>
+    <script src="js/bootstrap.bundle.js"></script>
+    <script>
+        var tooltipList = [].slice
+        .call(document
+        .querySelectorAll('[data-bs-toggle="tooltip"]'));
+        var tooltips = tooltipList.map(
+            function (tooltipTriggerEl) {
+            return new bootstrap.Tooltip(tooltipTriggerEl);
+        })
+    </script>
+</body>
+</html>