![[css] BootStrap 5관련 정리](/title-images/473.jpg)
[css] BootStrap 5관련 정리
BootStrap 5관련 정리
참조 https://getbootstrap.com/docs/5.0/examples/
Template
참조 https://startbootstrap.com
Navbar
https://getbootstrap.com/docs/5.1/components/navbar/
NavBar는 상단 네비게이션 (Top GNB) 등에 사용하면 좋은 기능이다.
다양한 구조
구조는 편안하게.. 아래는 약간의 샘플들을 정리하여 대표적인 구도를 적용
<body>
// 상단 GNB
<nav></nav>
// Body
<div class="container"></div>
<body>
<body>
// 상단 GNB
<nav></nav>
<header><header>
<section>
<div class="container"></div>
</section>
<body>
sideBar가 있을 경우
<body>
<div class="d-flex">
// 사이드 바
<div id="side-bar"></div>
// 메인 콘텐츠
<div id="content-wrapper">
// 컨텐츠의 상단 nav
<nav></nav>
<div class="container-fluid"></div>
</div>
</div>
<body>
<body>
// 컨텐츠의 상단 nav
<nav></nav>
// 메인 콘텐츠
<div id="content-wrapper">
// 사이드 바
<div id="side-bar"></div>
<div id="content">
<main></main>
<footer></footer>
</div>
</div>
<body>
container 내부의 아이템
<div class="container">
<div class="row">
<div class="col">
Column
</div>
.........
</div>
</div>