-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1_Typography.html
96 lines (85 loc) · 4.62 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" 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>
<h6>Heading</h6>
<!-- 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>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="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>
<!-- กำหนดรูปแบบข้อความ -->
<p class="text-uppercase">Hello World</p>
<p class="text-lowercase">Hello World</p>
<p class="text-capitalize">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-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<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>