You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
4.0 KiB
64 lines
4.0 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 class="display-1">Hello, world with Bootstrap!</h1>
|
|
<p class="display-5">WTL-3</p>
|
|
<p>
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem voluptates sed voluptatum alias explicabo id dicta, aliquam tempore qui est ipsum nisi consectetur ipsa fugiat culpa animi! Excepturi, quod error.
|
|
Ut, voluptate dolore dignissimos aliquid illo accusantium corporis totam repudiandae deleniti debitis fugit repellendus modi reprehenderit veniam, eligendi, nostrum tempore cum tempora nesciunt suscipit similique unde! Quo optio ratione laudantium!
|
|
</p>
|
|
<p>Pro použití <mark>základního layoutu</mark> je potřeba použít třídu <code>container</code> v elementu <kbd>div</kbd></p>
|
|
|
|
<div class="row">
|
|
<div class="col border border-danger border-5 rounded mx-2 p-2">
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit aspernatur eveniet tempora dolorem ea magni suscipit! Tempore amet consequuntur consectetur assumenda mollitia ipsum ut, optio necessitatibus quibusdam totam. Alias, dolores!
|
|
</div>
|
|
<div class="col border border-success border-4 rounded mx-5">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dicta quod aliquid quas a explicabo sit cum aperiam repudiandae? Ipsam odit nisi modi dolores quae cumque voluptatem illum reprehenderit dolor.
|
|
</div>
|
|
<div class="col border border-primary border-3 rounded mx-2 p4">
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus inventore deleniti adipisci aliquid accusantium cum iure facere, dicta, impedit culpa commodi vero officia maiores ipsum error modi excepturi? Quasi, numquam?
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h1>12 column grid system</h1>
|
|
<div class="row">
|
|
<div class="col-2 border">TEST TEST</div>
|
|
<div class="col-7 border">TEST TEST TEST TEST</div>
|
|
<div class="col-3 border">TEST</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="border border-primary border-3 rounded m-2">
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste vitae praesentium provident neque fugit nam commodi! Facere eos error tenetur hic? Possimus veniam reprehenderit iste obcaecati animi temporibus neque tempora?
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="border border-primary border-3 rounded m-2">
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, doloremque? Rerum doloribus consequuntur sunt sit quisquam dolorum. Laudantium nisi explicabo quae, similique culpa magnam fuga neque obcaecati nam consectetur quo.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="border border-primary border-3 rounded m-2">
|
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea eligendi molestiae fugiat doloremque temporibus repellendus aliquam alias ex asperiores reiciendis nisi accusamus necessitatibus laborum dolorum modi magni, corrupti fuga odio?
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="border border-primary border-3 rounded m-2">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quam sed omnis totam aliquam. Quo corporis, distinctio magni sed alias, numquam veniam laborum, quos architecto repellat optio dicta temporibus aut?
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="js/bootstrap.js"></script>
|
|
</body>
|
|
</html>
|