This repository has been archived by the owner on Nov 15, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
typography.html
285 lines (271 loc) · 26.6 KB
/
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap 4 Basic template</title>
<meta name="description" content="Bootstrap 4 element styles and classes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css?v=20181227">
<link rel="stylesheet" href="css/main.css?v=20181227">
</head>
<body>
<main class="content-wrap">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="./">BS4 Basic template</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4-navbar-collapse" aria-controls="bs4-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs4-navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layout</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a class="nav-link" href="media-object.html">Media object</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Content</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a class="nav-link" href="typography.html">Typography</a></li>
<li class="dropdown-item"><a class="nav-link" href="code.html">Code</a></li>
<li class="dropdown-item"><a class="nav-link" href="images.html">Images</a></li>
<li class="dropdown-item"><a class="nav-link" href="tables.html">Tables</a></li>
<li class="dropdown-item"><a class="nav-link" href="figures.html">Figures</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Components</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a class="nav-link" href="alerts.html">Alerts</a></li>
<li class="dropdown-item"><a class="nav-link" href="badge.html">Badge</a></li>
<li class="dropdown-item"><a class="nav-link" href="breadcrumb.html">Breadcrumb</a></li>
<li class="dropdown-item"><a class="nav-link" href="buttons.html">Buttons</a></li>
<li class="dropdown-item"><a class="nav-link" href="button-group.html">Button group</a></li>
<li class="dropdown-item"><a class="nav-link" href="card.html">Card</a></li>
<li class="dropdown-item"><a class="nav-link" href="carousel.html">Carousel</a></li>
<li class="dropdown-item"><a class="nav-link" href="collapse.html">Collapse</a></li>
<li class="dropdown-item"><a class="nav-link" href="dropdowns.html">Dropdowns</a></li>
<li class="dropdown-item"><a class="nav-link" href="forms.html">Forms</a></li>
<li class="dropdown-item"><a class="nav-link" href="input-group.html">Input group</a></li>
<li class="dropdown-item"><a class="nav-link" href="jumbotron.html">Jumbotron</a></li>
<li class="dropdown-item"><a class="nav-link" href="list-group.html">List group</a></li>
<li class="dropdown-item"><a class="nav-link" href="modal.html">Modal</a></li>
<li class="dropdown-item"><a class="nav-link" href="navs.html">Navs</a></li>
<li class="dropdown-item"><a class="nav-link" href="navbar.html">Navbar</a></li>
<li class="dropdown-item"><a class="nav-link" href="pagination.html">Pagination</a></li>
<li class="dropdown-item"><a class="nav-link" href="popovers.html">Popovers</a></li>
<li class="dropdown-item"><a class="nav-link" href="progress.html">Progress</a></li>
<li class="dropdown-item"><a class="nav-link" href="tooltips.html">Tooltips</a></li>
<li class="dropdown-item"><a class="nav-link" href="utilities.html">Utilities</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="credits.html">Credits</a></li>
</ul>
</div>
</div>
</nav>
<!--end navbar header-->
<div class="container">
<div class="row">
<article class="col-12">
<header class="mb-3 mt-4">
<h1 class="my-0">Typography</h1>
<hr class="mb-0 mt-3">
</header>
<h2>Headings</h2>
<div class="example-block">
<h1>h1 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h1>
<h2>h2 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h2>
<h3>h3 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h3>
<h4>h4 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h4>
<h5>h5 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h5>
<h6>h6 หัวข้อ Heading <small class="text-muted">ข้อความย่อย Secondary text</small></h6>
</div>
<h3>Headings by class</h3>
<div class="example-block">
<p class="h1">h1 หัวข้อ Heading</p>
<p class="h2">h2 หัวข้อ Heading</p>
<p class="h3">h3 หัวข้อ Heading</p>
<p class="h4">h4 หัวข้อ Heading</p>
<p class="h5">h5 หัวข้อ Heading</p>
<p class="h6">h6 หัวข้อ Heading</p>
</div>
<h3>Display headings</h3>
<div class="example-block">
<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>
</div>
<h2>Paragraphs</h2>
<div class="example-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor vel massa at venenatis. Cras nibh quam, euismod eu hendrerit ac, euismod sed eros. Nullam tincidunt velit et enim adipiscing, ac dapibus metus condimentum. Vestibulum non justo eget diam feugiat laoreet id vel lacus. Aliquam eget mattis lectus. Integer suscipit aliquam iaculis. Nullam sollicitudin lacus nec consequat congue. Quisque dapibus facilisis eros eu vehicula. Donec rutrum sagittis nulla eget ultrices. Aliquam tempor sed elit dictum aliquam. </p>
<p>Donec commodo magna quis sapien fermentum, nec bibendum nisi hendrerit. Ut a risus sed dui aliquet accumsan. Aenean at lacus id eros porta commodo. Duis a nunc orci. Nulla auctor semper nunc. Donec ullamcorper metus quis ante fringilla pharetra. Suspendisse potenti. Integer gravida viverra sodales. Integer et vehicula dui. Aenean mattis, risus nec dapibus iaculis, odio tortor ornare dolor, at cursus urna justo eu nunc. Quisque egestas sagittis purus malesuada commodo. Integer nec gravida nibh, sit amet fringilla elit. Praesent faucibus ante vel luctus consequat. Suspendisse commodo mauris id metus luctus, quis viverra ipsum posuere. </p>
<p>สไลด์โดนัทละติน ธรรมาเมี่ยงคำซิมโฟนีเวณิกาไตรมาส ป๋าไตรมาสพาสเจอร์ไรส์ธรรมา พีเรียดเยนเย้วตุ๋ยฮัมราชานุญาต ติงต๊องลิมูซีนเดชานุภาพ จ๊าบมาร์จิน มาร์จินแตงโมไกด์คาวบอยแฟ้บ แตงโมแดนเซอร์ไฮกุคอปเตอร์ ซาดิสม์ไฮกุโก๊ะกัมมันตะคอนเซ็ปต์คาแร็คเตอร์ วิภัชภาคเป่ายิ้งฉุบออสซี่ดั๊มพ์ แตงโม แครกเกอร์เซ็กส์ดาวน์ เต๊ะ เดอะแจ๊สป่าไม้ดิสเครดิตพาร์ทเนอร์ วาไรตี้ดีพาร์ทเมนต์ เก๋ากี้หลวงปู่ราชานุญาตแคทวอล์คสวีท </p>
<p>วันเวย์สเตเดียมรันเวย์มหภาคดาวน์หมวย แชมพูคูลเลอร์ พุทธศตวรรษ ละตินช็อปคอมพ์เก๋ากี้ แพทเทิร์นวอล์กจูเนียร์ภคันทลาพาธแลนด์ ผลไม้ นรีแพทย์อิเหนา อาว์ สตาร์เก๊ะปิกอัพนอร์ทธรรมาติว สป็อต แอโรบิคคาเฟ่มอบตัวเมคอัพ ง่าวบราสหัชญาณลาตินมายองเนสเรซิน พาวเวอร์โหงวโทรโข่งวอลซ์ดยุคซิมโฟนี ทำงานมั้งเป่ายิงฉุบพรีเมียม อัลตรากรุ๊ป หลวงปู่เบนโล </p>
<p><a href=".?743">Link color</a> | <a href=".">Visited link color</a></p>
</div>
<h3>Lead</h3>
<div class="example-block">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor vel massa at venenatis. Cras nibh quam, euismod eu hendrerit ac, euismod sed eros. Nullam tincidunt velit et enim adipiscing, ac dapibus metus condimentum.</p>
<p class="lead">วันเวย์สเตเดียมรันเวย์มหภาคดาวน์หมวย แชมพูคูลเลอร์ พุทธศตวรรษ ละตินช็อปคอมพ์เก๋ากี้ แพทเทิร์นวอล์กจูเนียร์ภคันทลาพาธแลนด์ ผลไม้ นรีแพทย์อิเหนา อาว์ สตาร์เก๊ะปิกอัพนอร์ทธรรมาติว สป็อต แอโรบิคคาเฟ่มอบตัวเมคอัพ ง่าวบราสหัชญาณลาตินมายองเนสเรซิน พาวเวอร์โหงวโทรโข่งวอลซ์ดยุคซิมโฟนี ทำงานมั้งเป่ายิงฉุบพรีเมียม อัลตรากรุ๊ป หลวงปู่เบนโล </p>
</div>
<h2>Inline text elements</h2>
<div class="example-block">
<p><mark>Interdum (mark)</mark> et <small>malesuada (small)</small> fames ac <strong>ante</strong> ipsum primis in <em>faucibus</em>. Curabitur a <del>nunc sit amet (del)</del> <s>purus ornare (s)</s> adipiscing <ins>at eu orci (ins)</ins>. Vestibulum <u>id nunc in (u)</u> leo blandit commodo hendrerit non leo. Nulla tristique ipsum convallis, ultrices erat sit amet, porta diam. Ut non massa gravida, gravida eros vel, pretium diam.</p>
<p><mark>ไตรมาส (mark)</mark> <small>ฟรุตซังเต (small)</small> บอมบ์ซามูไรเทอร์โบรีเสิร์ช <strong>ไวกิ้ง</strong> แครอทสถาปัตย์วอล์ก<em>อยุติธรรม</em> มาร์จินซื่อบื้อเมี่ยงคำ<del>ไฟลท์เรตเดี้ยง (del)</del> <s>อุรังคธาตุโทร (s)</s> ไดเอ็ตเซ็กซ์ <ins>แจ็กพอต (ins)</ins> แช่แข็ง<u>แฟกซ์แม่ค้า (u)</u> เห่ย อิเหนาลิสต์ซิมเยอร์บีร่าไมค์ แคนูไฮเทคโหลนปัจเจกชนบลูเบอร์รี่ กัมมันตะราเมนนู้ดไวกิ้งติงต๊องโบตั๋น</p>
</div>
<h2>Abbriviations</h2>
<div class="example-block">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr></p>
<p><abbr class="initialism" title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
</div>
<h2>Address</h2>
<div class="example-block">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>บ. ทวิตเตอร์ อิงค์</strong><br>
795 ฟอลซัมเอวนิว, สูท 600<br>
ซานฟรานซิสโก, แคลิฟอร์เนีย 94107<br>
<abbr title="โทร">P:</abbr> (123) 456-7890
</address>
</div>
<h2>Blockquotes</h2>
<div class="example-block">
<blockquote>
<p>This is blockquote without class and paragraph in the quote also without class.</p>
</blockquote>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote">
<p class="mb-0">สไลด์โดนัทละติน ธรรมาเมี่ยงคำซิมโฟนีเวณิกาไตรมาส ป๋าไตรมาสพาสเจอร์ไรส์ธรรมา</p>
<footer class="blockquote-footer">ฟินิกซ์แครอทเทรดด็อกเตอร์โนติส <cite title="Source Title">เกมส์ฮิบรู</cite></footer>
</blockquote>
</div>
<h2>Lists</h2>
<h3>Unordered list</h3>
<div class="example-block">
<ul>
<li>สป็อตโฟล์คแฟกซ์เปเปอร์</li>
<li>แทกติครอยัลตี้ออโต้ง่าวแทกติคสติ๊กเกอร์</li>
<li>รุสโซเซรามิกหยวนคาร์ไฮเทค ทำงานสหัชญาณ</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ul>
</div>
<h3>Ordered list</h3>
<div class="example-block">
<ol>
<li>สป็อตโฟล์คแฟกซ์เปเปอร์</li>
<li>แทกติครอยัลตี้ออโต้ง่าวแทกติคสติ๊กเกอร์</li>
<li>รุสโซเซรามิกหยวนคาร์ไฮเทค ทำงานสหัชญาณ</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ol>
</div>
<h3>Unstyled list</h3>
<div class="example-block">
<ul class="list-unstyled">
<li>สป็อตโฟล์คแฟกซ์เปเปอร์</li>
<li>แทกติครอยัลตี้ออโต้ง่าวแทกติคสติ๊กเกอร์</li>
<li>รุสโซเซรามิกหยวนคาร์ไฮเทค ทำงานสหัชญาณ</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ul>
</div>
<h3>Inline list</h3>
<div class="example-block">
<ul class="list-inline">
<li class="list-inline-item">สป็อตโฟล์คแฟกซ์เปเปอร์</li>
<li class="list-inline-item">แทกติครอยัลตี้ออโต้ง่าวแทกติคสติ๊กเกอร์</li>
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
</ul>
</div>
<h3>Description list</h3>
<h4>Basic description list</h4>
<div class="example-block">
<dl>
<dt>แทคติคซิ้มสป็อต เจลรีโมต</dt>
<dd>แทคติคซิ้มสป็อต เจลรีโมต เอนทรานซ์ โชห่วย สตรอว์เบอร์รีโมเดลวีเจแบคโฮเอนทรานซ์</dd>
<dt>พาวเวอร์จ๊อกกี้กรุ๊ปผลักดันเลกเชอร์</dt>
<dd>พาวเวอร์จ๊อกกี้กรุ๊ปผลักดันเลกเชอร์ อีแต๋นอุปัทวเหตุ ซาฟารีสะเด่าเอ๋เดี้ยง</dd>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<h4>Horizontal description list</h4>
<div class="example-block">
<dl class="row">
<dt class="col-sm-3">แทคติคซิ้มสป็อต</dt>
<dd class="col-sm-9">แทคติคซิ้มสป็อต เจลรีโมต เอนทรานซ์ โชห่วย สตรอว์เบอร์รีโมเดลวีเจแบคโฮเอนทรานซ์</dd>
<dt class="col-sm-3">พาวเวอร์จ๊อกกี้กรุ๊ปผลักดันเลกเชอร์</dt>
<dd class="col-sm-9">พาวเวอร์จ๊อกกี้กรุ๊ปผลักดันเลกเชอร์ อีแต๋นอุปัทวเหตุ ซาฟารีสะเด่าเอ๋เดี้ยง</dd>
<dd class="col-sm-9 offset-sm-3">(offset-sm-3 at this line) ไฮเวย์แมชีน คอนเซปต์ จ๊าบซื่อบื้ออิมพีเรียลโบว์ วืดโปรเจ็กเตอร์แพนด้าทัวริสต์.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
<dt class="col-sm-4">กินแหนง พยักเพยิดวิศิษฐ์</dt>
<dd class="col-sm-8">ปะหังเฮนรี่นครศรีธรรมราชแย้มสรวลแพลน ประจวบคีรีขันธ์เต๊ะจุมพฎไหร่เบงกาลี ยาเวห์ไต้หวันออโรรา.</dd>
</dl>
</dd>
<dt class="col-sm-3">หูกระต่ายว่างเว้นเปียงยาง</dt>
<dd class="col-sm-9">อัปเกรดสุริยจักรวาล นวลลออ วิญญาน ไพรเมตเนชั่นแนลชัยนาทปรากฎ เหลือขอนวลลออชลบุรี.</dd>
</dl>
</div>
</article>
</div>
</div>
</main>
<footer class="footer-wrap">
<div class="container">
<div class="col-12">
<p>© <a href="https://github.com/Rundiz/bootstrap4-basic-template" target="rundiz_bs4_bt">rundiz - Bootstrap 4 Basic template</a>.</p>
</div>
</div>
</footer>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js?v=20181227"></script>
<script src="js/main.js?v=20181227"></script>
</body>
</html>