bootstrap 5를 이용한 다양한 레이아웃 정리

bootstrap 5를 이용한 다양한 레이아웃 정리 updated_at: 2024-07-31 15:42

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>

See the Pen venobox sample1 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

<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>

See the Pen boostrap5 - layout by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

<body>
    // 컨텐츠의 상단 nav
    <nav></nav>
    // 메인 콘텐츠
    <div id="content-wrapper">
        // 사이드 바
        <div id="side-bar"></div>
        <div id="content">
            <main></main>
            <footer></footer>
        </div>
    </div>
<body>

See the Pen boostrap5 - layout by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

container 내부의 아이템

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    .........
  </div>
</div>

평점을 남겨주세요
평점 : 5.0
총 투표수 : 1

질문 및 답글