Skip to content

Commit

Permalink
7.8 bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@KIMMZN
KIMMZN committed Jul 8, 2024
1 parent 776fe0b commit 3bcad9f
Show file tree
Hide file tree
Showing 8 changed files with 471 additions and 0 deletions.
1 change: 1 addition & 0 deletions CSS/02.link.min.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
body{background-color:#add8e6}h1{color:navy;margin-left:20px}
21 changes: 21 additions & 0 deletions bootstrap/00.template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5"></div>
</body>
</html>
58 changes: 58 additions & 0 deletions bootstrap/01.start.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<!-- container는 양사이드에 여백 있음 -->
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...
</p>
</div>
</div>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions bootstrap/02.container.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Container</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container p-3 my-3 border bg-warning">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>

<div class="container p-4 my-4 bg-danger text-white">
<h1>My First Bootstrap Page</h1>
<p>
This container has a dark background color and a white text, and some
extra padding and margins.
</p>
</div>

<div class="container p-5 my-5 bg-success text-white">
<h1>My First Bootstrap Page</h1>
<p>
This container has a blue background color and a white text, and some
extra padding and margins.
</p>
</div>

<div class="container-sm border my-4">.container-sm</div>
<div class="container-md mt-3 border my-4">.container-md</div>
<div class="container-lg mt-3 border my-4">.container-lg</div>
<div class="container-xl mt-3 border my-4">.container-xl</div>
<div class="container-xxl mt-3 border my-4">.container-xxl</div>
</body>
</html>
43 changes: 43 additions & 0 deletions bootstrap/03.grid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
<h1>Grid System</h1>
<p>
Bootstrap's grid system is built with flexbox and allows up to 12
columns across the page.
</p>
</div>

<div class="container mt-5">
<div class="row">
<div class="col p-3 bg-secondary text-white">.col</div>
<div class="col p-3 bg-success text-white">.col</div>
<div class="col p-3 bg-danger text-white">.col</div>
<div class="col p-3 bg-warning text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-warning text-white">.col</div>
</div>
<div class="row mt-5">
<div class="col-3 p-3 bg-secondary text-white">.col</div>
<div class="col-4 p-3 bg-success text-white">.col</div>
<div class="col-5 p-3 bg-danger text-white">.col</div>
</div>
<div class="row mt-5">
<div class="col-2"></div>
<div class="container p-4 bg-info text-white">.col</div>
</div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions bootstrap/04.color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
<h1>Colors</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-3">
<h2>Background Color with Contrasting Text Color</h2>
<p class="text-bg-primary">This text is important.</p>
<p class="text-bg-success">This text indicates success.</p>
<p class="text-bg-info">This text represents some information.</p>
<p class="text-bg-warning">This text represents a warning.</p>
<p class="text-bg-danger">This text represents danger.</p>
<p class="text-bg-secondary">Secondary background color.</p>
<p class="text-bg-dark">Dark grey background color.</p>
<p class="text-bg-light">Light grey background color.</p>
</div>
</body>
</html>
107 changes: 107 additions & 0 deletions bootstrap/05.1.calender.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
th {
text-align: center;
background-color: aquamarine;
width: 14.28%;
}
#holiday {
color: red;
}
#saturday {
color: rgb(47, 0, 255);
}
td,
#size {
height: 90px;
}
</style>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<!-- p-5는 패딩 mt 는 margin top -->
</div>
<div class="d-flex justify-content-between">

<div class="container mt-5">

<div class="row">
<div class="col">
<div style="text-align: left"><h3>스케쥴러</h3></div>
<div style="text-align: center"><< < 2024.07 > >></div>
<div style="text-align: right"><button>기념일 추가</button></div>
</div>


<table class="table table-bordered">
<tr class="table-success" style="height: 10px">
<th id="holiday">일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th id="saturday">토</th>
</tr>
<tr id="size">
<td id="holiday" style="opacity: 50%;">30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td id="saturday">6</td>
</tr>
<tr id="size">
<td id="holiday">7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td id="saturday">13</td>
</tr>
<tr id="size">
<td id="holiday">14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td id="saturday">20</td>
</tr>
<tr id="size">
<td id="holiday">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td id="saturday">27</td>
</tr>
<tr id="size">
<td id="holiday">28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td style="opacity: 50%;">1</td>
<td style="opacity: 50%;">2</td>
<td id="saturday" style="opacity: 50%;">3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 3bcad9f

Please sign in to comment.