skrabanek
/
bootstrap-intro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added grid system

master
Jakub Škrabánek 3 years ago
parent
98ece3675d
commit
f897636d15
1 changed files with 87 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      responsive.html

87
responsive.html
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body class="d-flex flex-column min-vh-100">
<!-- navigační lištu -->
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<span class="fs-4">Nazev Aplikace</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
</ul>
</header>
</div>
<!-- HLAVNÍ ČÁST KÓDU -->
<main class="container">
<h1 class="display-1">Responzivní web</h1>
<!-- základní zobrazení -->
<div class="row">
<div class="col-lg-6 col-md-12 bg-info">
<h4>Nadpis 1</h4>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero cumque sapiente nulla unde quis quae facilis, blanditiis reiciendis rem illo debitis quo alias enim deserunt quos impedit, quod, eligendi soluta.</div>
<div class="col-lg-6 col-md-12 bg-warning">
<h4>Nadpis 2</h4>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero cumque sapiente nulla unde quis quae facilis, blanditiis reiciendis rem illo debitis quo alias enim deserunt quos impedit, quod, eligendi soluta.</div>
</div>
<hr>
<!-- Ukazka responzibility pro ruzna zarizení, XL,LG,MD,SM -->
<div class="row">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"><h4>Nadpis</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil possimus maiores eaque totam impedit vero quod quam voluptate tempora fugit minima fuga labore cum similique excepturi ducimus, ullam qui.</div>
</div>
<hr>
<!-- Ukázka ruzně velkého obsahu -->
<div class="row">
<div class="col-xl-6 col-sm-12"> <b>Lorem ipsum</b> dolor sit amet consectetur adipisicing elit. Enim adipisci inventore modi nulla corrupti ex reprehenderit, accusantium ab voluptatum molestias atque exercitationem maiores molestiae mollitia asperiores rerum quod harum dicta.</div>
<div class="col-xl-3 col-sm-6"> <b>Lorem ipsum</b> dolor sit amet consectetur adipisicing elit. Repudiandae, similique quos quasi at accusantium rem deleniti dolor, nostrum laudantium ut officiis sit repellat fugiat aliquam nobis unde. Consequatur, nam eveniet?</div>
<div class="col-xl-3 col-sm-6"> <b>Lorem ipsum</b> dolor sit amet consectetur adipisicing elit. Fugit laudantium itaque praesentium officiis, quae optio voluptatem tenetur omnis delectus expedita. Molestiae fuga quibusdam incidunt doloremque aperiam consequatur ea impedit mollitia?</div>
</div>
<hr>
<!-- Ukazka vycentrovaneho obsahu -->
<div class="row justify-content-center">
<div class="col-lg-2 " >1/3</div>
<div class="col-md-auto">Lorem ipsum</div>
<div class="col-lg-2">3/3</div>
</div>
<hr>
<!-- Ukazka offsetu -->
<div class="row">
<div class="col-md-4"><b> Lorem ipsum</b> dolor sit amet consectetur adipisicing elit. Sed cumque nesciunt distinctio ratione cupiditate, quae, neque eius aperiam ex totam animi nihil dolorum, labore illo tempora dolorem? Voluptatibus, libero animi!</div>
<div class="col-md-4 offset-md-4"> <b>Lorem, ipsum</b> dolor sit amet consectetur adipisicing elit. Esse, vel consequatur illo, perferendis architecto, inventore aliquam fuga adipisci error odit harum. Amet eveniet veniam obcaecati quos cum, beatae fugiat velit.</div>
</div>
</main>
<!-- Footer - zakončení stránky -->
<footer class="footer mt-auto">
<ul class="nav justify-content-center border-bottom py-2 mb-3">
<li class="nav-item"><a href="#" class="nav-link text-muted">HOME</a></li>
<li class="nav-item"><a href="#" class="nav-link text-muted">Link1</a></li>
<li class="nav-item"><a href="#" class="nav-link text-muted">Link2</a></li>
</ul>
<p class="text-center text-muted">Škrabánek 2022</p>
</footer>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save