-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1_Typography.html
99 lines (95 loc) · 4.96 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
97
98
99
<!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>
<h1>Heading</h1>
<!-- lead -->
<div class="container">
<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. Dicta ipsa dolorum,
veritatis eligendi aperiam commodi iusto animi facere illum sapiente repudiandae ad libero molestias doloremque similique consectetur harum impedit dolore esse magnam deserunt perspiciatis dolor? Quo aperiam dolore odio vel cumque perspiciatis, animi consequatur repellat, rem maiores dolores necessitatibus mollitia.
</p>
</div>
<!-- กำหนดความหนาของข้อความ -->
<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>normal</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>normal</p>
<!-- กำหนดรูปแบบข้อความ -->
<p class="text-uppercase">Hello World</p>
<p class="text-lowercase">hello world</p>
<p class="text-capitalize">Hello World</p>
<p>Hello world</p>
<!-- Blockquote -->
<div class="container">
<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>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus nemo natus ducimus vel voluptatem aspernatur pariatur facilis quod eveniet, tenetur ratione explicabo non eos sequi reprehenderit voluptate modi nostrum dolorem voluptates sunt fugiat consequuntur saepe. Omnis iusto iure amet quos odio quam, exercitationem totam quae qui maxime nisi placeat vitae.
</p>
</div>
<!-- List -->
<div class="container">
<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>
</div>
</body>
</html>