-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1_Typography.html
72 lines (62 loc) · 3.47 KB
/
1_Typography.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- ทำให้ p เป็น h1-h6 -->
<p class="h1">Heading</p>
<p class="h2">Heading</p>
<p class="h3">Heading</p>
<p class="h4">Heading</p>
<p class="h5">Heading</p>
<p class="h6">Heading</p>
<!-- Display Heading -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
<!-- lead -->
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, blanditiis et quos nisi nostrum reiciendis earum? Consectetur ab accusamus ratione eligendi explicabo possimus perspiciatis laboriosam laudantium blanditiis eum non dolore asperiores
atque, quisquam delectus enim, aperiam deleniti dolorem ipsum? Quas suscipit vitae aliquam nulla voluptas inventore natus laudantium vel. Minima quas nemo soluta, in qui vel commodi quam vero impedit quisquam aliquid nulla ipsum nisi officiis
laudantium dicta quaerat repellendus nostrum quos error nihil architecto voluptas modi nesciunt. Quod natus optio possimus id perferendis? Error omnis consequuntur sed saepe blanditiis impedit quam libero fugit, accusantium sequi adipisci
recusandae qui eius?
</p>
<!-- กำหนดความหนาของข้อความ -->
<p class="fw-bold">Bold</p>
<p class="fw-bolder">Bolder</p>
<p class="fw-normal">Normal</p>
<p class="fw-light">Light</p>
<p class="fw-lighter">Lighter</p>
<p class="fst-italic">Italic</p>
<!-- กำหนดรูปแบบข้อความ -->
<p class="text-uppercase">Hello World</p>
<p class="text-lowercase">Hello World</p>
<p class="text-capitalize">hello world</p>
<!-- กำหนดขนาดข้อความ -->
<p class="fs-1">Hello World</p>
<p class="fs-2">Hello World</p>
<p class="fs-3">Hello World</p>
<p class="fs-4">Hello World</p>
<p class="fs-5">Hello World</p>
<p class="fs-6">Hello World</p>
<!-- Blockquote -->
<p class="blockquote">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dolorum temporibus laudantium, voluptates atque ad neque nesciunt, animi aut minus architecto illo fugiat dignissimos, maiores nam rem corrupti numquam sed.</p>
<!-- List -->
<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
<li class="list-inline-item">Item 4</li>
<li class="list-inline-item">Item 5</li>
</ul>
</div>
</body>
</html>