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.
53 lines
5.8 KiB
53 lines
5.8 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.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container-md">
|
|
<h1 class="display-1">Bootstrap intro</h1>
|
|
<p class="display-3">WTL 3</p>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque beatae officia eius, voluptatem iure impedit animi alias ullam modi minus, possimus molestias quam omnis quae fugit ipsa ab consequatur voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, incidunt quis tenetur ratione odit accusamus perspiciatis deserunt odio maxime officia, quod cupiditate mollitia fugit quo sit ipsam hic consequatur natus.</p>
|
|
<p>Pro použiti <mark>základního layoutu</mark> je potřeba použit třídu <code>container</code> v elementu <kbd>div</kbd> </p>
|
|
|
|
<div class="row">
|
|
<div class="col border border-primary border-5 rounded mx-2 p-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ipsam quas cupiditate mollitia atque, perspiciatis iste est sequi, at id quod natus soluta incidunt voluptatem voluptates iusto, sed eveniet enim!</div>
|
|
<div class="col border border-success border-4 rounded mx-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ipsam quas cupiditate mollitia atque, perspiciatis iste est sequi, at id quod natus soluta incidunt voluptatem voluptates iusto, sed eveniet enim!</div>
|
|
<div class="col border border-danger border-3 rounded mx-2 p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ipsam quas cupiditate mollitia atque, perspiciatis iste est sequi, at id quod natus soluta incidunt voluptatem voluptates iusto, sed eveniet enim!</div>
|
|
</div>
|
|
|
|
<!-- div.row>div.col*4 -->
|
|
<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. Corrupti ducimus culpa voluptatibus eos suscipit, iure ea aut et similique reiciendis commodi quo nostrum vitae eius velit tenetur ad, quia illum!
|
|
Eum est officia minima necessitatibus esse atque vitae cumque dicta explicabo optio earum iusto obcaecati provident fugiat dolores ullam nostrum perspiciatis magnam, veritatis molestias rem quaerat incidunt tempore. Libero, nulla?</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. Corrupti ducimus culpa voluptatibus eos suscipit, iure ea aut et similique reiciendis commodi quo nostrum vitae eius velit tenetur ad, quia illum!
|
|
Eum est officia minima necessitatibus esse atque vitae cumque dicta explicabo optio earum iusto obcaecati provident fugiat dolores ullam nostrum perspiciatis magnam, veritatis molestias rem quaerat incidunt tempore. Libero, nulla?</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. Corrupti ducimus culpa voluptatibus eos suscipit, iure ea aut et similique reiciendis commodi quo nostrum vitae eius velit tenetur ad, quia illum!
|
|
Eum est officia minima necessitatibus esse atque vitae cumque dicta explicabo optio earum iusto obcaecati provident fugiat dolores ullam nostrum perspiciatis magnam, veritatis molestias rem quaerat incidunt tempore. Libero, nulla?</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. Corrupti ducimus culpa voluptatibus eos suscipit, iure ea aut et similique reiciendis commodi quo nostrum vitae eius velit tenetur ad, quia illum!
|
|
Eum est officia minima necessitatibus esse atque vitae cumque dicta explicabo optio earum iusto obcaecati provident fugiat dolores ullam nostrum perspiciatis magnam, veritatis molestias rem quaerat incidunt tempore. Libero, nulla?</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 border border-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem ipsam consequuntur enim illo accusamus mollitia eaque, cum laboriosam neque? A consequuntur libero ut adipisci, labore corporis iusto quae provident aliquid!
|
|
Corporis necessitatibus enim adipisci error deserunt eos omnis nisi assumenda sed sunt aut consectetur voluptatibus quas dignissimos quos sit, vero minima repellendus, pariatur ab? Ipsam magnam dolorum nihil culpa hic.</div>
|
|
<div class="col-6 border border-danger"><h1>HELLO</h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem ipsam consequuntur enim illo accusamus mollitia eaque, cum laboriosam neque? A consequuntur libero ut adipisci, labore corporis iusto quae provident aliquid!
|
|
Corporis necessitatibus enim adipisci error deserunt eos omnis nisi assumenda sed sunt aut consectetur voluptatibus quas dignissimos quos sit, vero minima repellendus, pariatur ab? Ipsam magnam dolorum nihil culpa hic.</div>
|
|
<div class="col-3 border border-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem ipsam consequuntur enim illo accusamus mollitia eaque, cum laboriosam neque? A consequuntur libero ut adipisci, labore corporis iusto quae provident aliquid!
|
|
Corporis necessitatibus enim adipisci error deserunt eos omnis nisi assumenda sed sunt aut consectetur voluptatibus quas dignissimos quos sit, vero minima repellendus, pariatur ab? Ipsam magnam dolorum nihil culpa hic.</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|