π 2022-5-30
-νμ΅λ΄μ©-
Bootstrap μ€μ΅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<style>
/* section {border: 1px solid red;} */
.fakeimg{ height: 200px;
background-color: #aaa;}
</style>
</head>
<body>
<header class="bg-primary text-white text-center p-5">
<h1>My First Bootstrap 5 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</header>
<!-- navbar-expand-sm: smμμ μμ§ μ λ ¬ -->
<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
<div class="container-fluid"> <!-- width: 100%-->
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
</nav>
<section class="container mt-5">
<div class="row">
<aside class="col-sm-4">
<h2>About Me</h2>
<p class="h5">Photo of me: </p>
<div class="fakeimg">Fake Image</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Some Links</h3>
<!-- nav: κ°λ¨ν μνλ©λ΄
flex-column : νμ μΈλ‘ λ©λ΄
nav-pills : activeμ ν
λ리 λ£κΈ°
-->
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
</ul>
<!-- μ§μ λ μ€λ¨μ λ³΄λ€ ν° νλ©΄ λλΉμ μν₯μ μ€λ€ -->
<hr class="d-sm-none">
</aside>
<article class="col-sm-8">
<h2>TITLE HEADING</h2>
<!-- <h5>Title description, Dec 7, 2022</h5> -->
<p class="h5">Title description, Dec 7, 2022</p>
<div class="fakeimg">Fake Image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, reprehenderit provident! Quae magni delectus harum consectetur, fugiat impedit illo expedita, provident explicabo suscipit eius similique veniam! Facilis iusto vitae ratione.</p>
<h2>TITLE HEADING</h2>
<!-- <h5>Title description, Dec 7, 2022</h5> -->
<p class="h5">Title description, Dec 7, 2022</p>
<div class="fakeimg">Fake Image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, reprehenderit provident! Quae magni delectus harum consectetur, fugiat impedit illo expedita, provident explicabo suscipit eius similique veniam! Facilis iusto vitae ratione.</p>
</article>
</div>
</section>
<footer class="bg-dark text-white d-flex justify-content-between align-items-center p-4 mt-5">
<p>footer</p>
<div>
<i class="ms-3 bi bi-twitch"></i>
<i class="ms-3 bi bi-facebook"></i>
<i class="ms-3 bi bi-instagram"></i>
<i class="ms-3 bi bi-youtube"></i>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>κ²°κ³Ό
λ¬Έμ μ¬ν
λ무 νΈνλ€??
μ΄λ κ² νΈν΄λ λλ?? νλ‘ νΈμλλ μ λ§ λμμΈμ μμμΌλ‘ κ°κ΅¬λ λΌλ μκ°μ΄ λ λ€,,
ν΄κ²°λ°©μ
π
νμ΅μκ°
λ¬Έλ²μ΄ ν¬κ² μ΄λ ΅μ§λ μκ³ νΈνκΈ΄ μ λ§ λλ½κ² νΈνλ€
ohmanbanja