From 3bcad9f1cf502e7372ca9ec7a5d68ae1e287f827 Mon Sep 17 00:00:00 2001 From: "[sion" Date: Mon, 8 Jul 2024 17:22:55 +0900 Subject: [PATCH] 7.8 bootstrap --- CSS/02.link.min.css | 1 + bootstrap/00.template.html | 21 +++++ bootstrap/01.start.html | 58 +++++++++++++ bootstrap/02.container.html | 46 ++++++++++ bootstrap/03.grid.html | 43 +++++++++ bootstrap/04.color.html | 32 +++++++ bootstrap/05.1.calender.html | 107 +++++++++++++++++++++++ bootstrap/05.table.html | 163 +++++++++++++++++++++++++++++++++++ 8 files changed, 471 insertions(+) create mode 100644 CSS/02.link.min.css create mode 100644 bootstrap/00.template.html create mode 100644 bootstrap/01.start.html create mode 100644 bootstrap/02.container.html create mode 100644 bootstrap/03.grid.html create mode 100644 bootstrap/04.color.html create mode 100644 bootstrap/05.1.calender.html create mode 100644 bootstrap/05.table.html diff --git a/CSS/02.link.min.css b/CSS/02.link.min.css new file mode 100644 index 0000000..f0a2364 --- /dev/null +++ b/CSS/02.link.min.css @@ -0,0 +1 @@ +body{background-color:#add8e6}h1{color:navy;margin-left:20px} \ No newline at end of file diff --git a/bootstrap/00.template.html b/bootstrap/00.template.html new file mode 100644 index 0000000..32d360c --- /dev/null +++ b/bootstrap/00.template.html @@ -0,0 +1,21 @@ + + + + Bootstrap 5 Example + + + + + + +
+ +

My First Bootstrap Page

+

Resize this responsive page to see the effect!

+
+
+ + diff --git a/bootstrap/01.start.html b/bootstrap/01.start.html new file mode 100644 index 0000000..4d3480a --- /dev/null +++ b/bootstrap/01.start.html @@ -0,0 +1,58 @@ + + + + Bootstrap 5 Example + + + + + + +
+ +

My First Bootstrap Page

+

Resize this responsive page to see the effect!

+
+ + +
+
+
+

Column 1

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris... +

+
+
+

Column 2

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris... +

+
+
+

Column 3

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris... +

+
+
+

Column 4

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris... +

+
+
+
+ + diff --git a/bootstrap/02.container.html b/bootstrap/02.container.html new file mode 100644 index 0000000..a85ecf7 --- /dev/null +++ b/bootstrap/02.container.html @@ -0,0 +1,46 @@ + + + + Container + + + + + + +
+ +

My First Bootstrap Page

+

Resize this responsive page to see the effect!

+
+
+

My First Bootstrap Page

+

This container has a border and some extra padding and margins.

+
+ +
+

My First Bootstrap Page

+

+ This container has a dark background color and a white text, and some + extra padding and margins. +

+
+ +
+

My First Bootstrap Page

+

+ This container has a blue background color and a white text, and some + extra padding and margins. +

+
+ +
.container-sm
+
.container-md
+
.container-lg
+
.container-xl
+
.container-xxl
+ + diff --git a/bootstrap/03.grid.html b/bootstrap/03.grid.html new file mode 100644 index 0000000..9fdd318 --- /dev/null +++ b/bootstrap/03.grid.html @@ -0,0 +1,43 @@ + + + + Bootstrap 5 Example + + + + + + +
+ +

Grid System

+

+ Bootstrap's grid system is built with flexbox and allows up to 12 + columns across the page. +

+
+ +
+
+
.col
+
.col
+
.col
+
.col
+
.col
+
.col
+
+
+
.col
+
.col
+
.col
+
+
+
+
.col
+
+
+ + diff --git a/bootstrap/04.color.html b/bootstrap/04.color.html new file mode 100644 index 0000000..650f707 --- /dev/null +++ b/bootstrap/04.color.html @@ -0,0 +1,32 @@ + + + + Bootstrap 5 Example + + + + + + +
+ +

Colors

+

Resize this responsive page to see the effect!

+
+ +
+

Background Color with Contrasting Text Color

+

This text is important.

+

This text indicates success.

+

This text represents some information.

+

This text represents a warning.

+

This text represents danger.

+

Secondary background color.

+

Dark grey background color.

+

Light grey background color.

+
+ + diff --git a/bootstrap/05.1.calender.html b/bootstrap/05.1.calender.html new file mode 100644 index 0000000..8cb0909 --- /dev/null +++ b/bootstrap/05.1.calender.html @@ -0,0 +1,107 @@ + + + + Bootstrap 5 Example + + + + + + + +
+ +
+
+ +
+ +
+
+

스케쥴러

+
<< < 2024.07 > >>
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
일월화수목금토
30123456
78910111213
14151617181920
21222324252627
28293031123
+
+
+
+ + + diff --git a/bootstrap/05.table.html b/bootstrap/05.table.html new file mode 100644 index 0000000..a02d44d --- /dev/null +++ b/bootstrap/05.table.html @@ -0,0 +1,163 @@ + + + + Bootstrap 5 Table + + + + + + + +
+ +

Table

+

Resize this responsive page to see the effect!

+
+
+
+
+

Basic Table

+

+ The .table class adds basic styling (light padding and horizontal + dividers) to a table: +

+ + + + + + + + + + + + + + + + + + + + + + + + + +
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
+
+ +
+

Striped Rows

+

The .table-striped class adds zebra-stripes to a table:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
+
+
+
+
+

Bordered Table

+

+ The .table-bordered class adds borders on all sides of the table and + the cells: +

+ + + + + + + + + + + + + + + + + + + + + + + + + +
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
+
+
+

Hover Rows

+

+ The .table-hover class enables a hover state (grey background on + mouse over) on table rows: +

+ + + + + + + + + + + + + + + + + + + + + + + + + +
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
+
+
+
+ +