Skip to content

Commit e94e260

Browse files
author
pok9
committed
update
1 parent 8198c24 commit e94e260

File tree

4 files changed

+96
-0
lines changed

4 files changed

+96
-0
lines changed

‎CSS#16-Bulma Columns/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Hello Bulma!</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
8+
</head>
9+
10+
<body>
11+
<section class="section">
12+
<div class="columns is-multiline is-variable is-1">
13+
<div class="column is-4">
14+
<div class="box has-background-primary">ไข่ย้อย 1</div>
15+
</div>
16+
<div class="column is-4">
17+
<div class="box has-background-primary">ไข่ย้อย 2</div>
18+
</div>
19+
<div class="column is-4">
20+
<div class="box has-background-primary">ไข่ย้อย 3</div>
21+
</div>
22+
<div class="column is-4">
23+
<div class="box has-background-primary">ไข่ย้อย 4</div>
24+
</div>
25+
26+
</div>
27+
</section>
28+
</body>
29+
30+
</html>

‎CSS#17-Bulma Responsive/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Hello Bulma!</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
8+
</head>
9+
10+
<body>
11+
<section class="section">
12+
<h2 class="title is-size-6-mobile is-size-2-tablet">เบจิต้า</h2>
13+
<div class="columns is-mobile is-multiline is-variable is-1">
14+
15+
<div class="column is-6-mobile is-4-tablet is-3-desktop ">
16+
<div class="box has-background-primary">ไข่ย้อย 1</div>
17+
</div>
18+
<div class="column is-6-mobile is-4-tablet is-3-desktop">
19+
<div class="box has-background-primary">ไข่ย้อย 2</div>
20+
</div>
21+
<div class="column is-6-mobile is-4-tablet is-3-desktop">
22+
<div class="box has-background-primary">ไข่ย้อย 3</div>
23+
</div>
24+
<div class="column is-6-mobile is-4-tablet is-3-desktop">
25+
<div class="box has-background-primary">ไข่ย้อย 4</div>
26+
</div>
27+
28+
</div>
29+
</section>
30+
</body>
31+
32+
</html>

‎CSS#18-Bootstrap/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
9+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
10+
11+
<title>Hello, world!</title>
12+
</head>
13+
14+
<body>
15+
<div class="jumbotron jumbotron-fluid text-info bg-dark">
16+
<div class="container">
17+
<h1 class="display-4">Fluid jumbotron</h1>
18+
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
19+
</div>
20+
</div>
21+
<div class="container my-5">
22+
<h1 class="h5">ต่อนยอน 1</h1>
23+
<h5 class="h1">ต่อนยอน 2</h5>
24+
<p class="lead">ต่อนยอนต่ะต่อนยอน</p>
25+
<img src="rabbit.jpg" class="img-fluid" alt="...">
26+
</div>
27+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
28+
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
29+
crossorigin="anonymous"></script>
30+
31+
32+
</body>
33+
34+
</html>

‎CSS#18-Bootstrap/rabbit.jpg

365 KB
Loading

0 commit comments

Comments
 (0)