1 changed files with 148 additions and 0 deletions
@ -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> |
||||
Loading…
Reference in new issue