/
layout-b.html
57 lines (45 loc) · 4.24 KB
/
layout-b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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, shrink-to-fit=no">
<meta name="copyright" content="2016 Robin Parmar" />
<link href="bootstrap4a4.min.css" rel="stylesheet">
<style>body {margin:20px; background-color:#eee;} h3{margin: 20px;}</style>
<title>Bootstrap 4: layout example B</title>
<body>
<nav class="nav nav-inline">
<a class="nav-link" href="layout-a.html">A - row and columns</a>
<a class="nav-link" href="layout-b.html">B - deck</a>
<a class="nav-link" href="layout-c.html">C - card columns</a>
<a class="nav-link" href="layout-d.html">D - card columns (fix)</a>
</nav>
<h3>B - deck</h3>
<div class="card-deck-wrapper"><div class="card-deck">
<div class="card card-block">
<h4 class="card-title">CARD 1</h4>
<p class="card-text">This is an example of a Bootstrap 4 (alpha 4) layout. Very minimal supplemental markup has been added to this page. The goal is to compare different methods for laying out objects in columns. The objects in this case are cards, since those are the most flexible container types, and the ones promoted in Bootstrap 4.</p>
<p class="card-text">The major advantage of Bootstrap is the responsive layout, which reacts in intelligent fashion to different screen sizes. As designers, we can take explicit control over this, easily target different devices.</p>
<p class="card-text">Bootstrap 4 has been redesigned since Bootstrap 3. The semantics and layout decisions are not identical. Though version 4 is still in alpha, I would not like to devote time to version 3 currently, knowing that I would soon need to rethink everything.</p>
</div>
<div class="card card-block">
<h4 class="card-title">CARD 2</h4>
<p class="card-text">Phasellus pharetra odio nec dolor interdum interdum. In eget lorem ac felis sagittis imperdiet. Phasellus mattis ex at tortor efficitur, nec aliquet velit sodales. Suspendisse luctus lobortis augue, placerat condimentum elit lacinia suscipit. Ut pharetra justo eu nisi lacinia pulvinar. Nulla fermentum sapien felis, ornare vehicula nunc elementum in.</p>
</div>
<div class="card card-block">
<h4 class="card-title">CARD 3</h4>
<p class="card-text">Fusce molestie dui sapien, quis eleifend ex vehicula ac. In ac maximus nibh, ut hendrerit nisi. Duis ac ornare ipsum, sed vestibulum urna. Phasellus efficitur metus ac odio vestibulum, quis ornare erat aliquet. Duis ut feugiat leo. Vivamus massa arcu, pulvinar eu molestie et, placerat vitae orci. Etiam ornare suscipit justo id semper. Praesent semper, elit et efficitur vehicula, nibh mauris egestas metus, ut placerat leo nisi at est. Nullam in hendrerit mauris, ut tincidunt elit. In volutpat ultrices elementum. Donec eleifend diam massa. Integer porttitor venenatis ipsum, non auctor arcu consectetur sit amet. Aliquam nec volutpat augue. Duis metus diam, ultricies a orci vitae, vehicula porttitor purus. Vivamus vitae metus est. Vestibulum erat tortor, auctor a pulvinar in, iaculis eu purus.</p>
</div>
<div class="card card-block">
<h4 class="card-title">CARD 4</h4>
<p class="card-text">Fusce gravida nec nunc ultricies commodo. Donec arcu tellus, ultrices quis velit congue, commodo dignissim risus. Quisque maximus nec odio non dapibus. Sed non sem sit amet massa suscipit facilisis. Mauris rutrum elementum sodales. Vivamus euismod augue quis ante posuere, in accumsan dolor feugiat. Suspendisse nunc felis, commodo in tortor vel, venenatis porta metus. Ut venenatis porttitor dolor, at gravida turpis efficitur vel. Cras volutpat tempor dui, sed iaculis risus dignissim ac. Donec interdum dui nunc, in lacinia augue lacinia vitae. Aliquam erat volutpat. Mauris sollicitudin nibh turpis, ac varius tortor ornare id. Donec sed vulputate quam, vel finibus turpis. Praesent quam tortor, ultrices ut tortor vel, porttitor ullamcorper nunc. Suspendisse pharetra ut enim quis vehicula.</p>
</div>
</div></div>
<div>
<p>Uses: .card-deck-wrapper, .card-deck</p>
<p>Result: Equal columns filled with available content. </p>
<p>Positive: Default gutters are nicer than A.</p>
<p>Negative: Background of each card extends the entire column.</p>
</div>
</body></html>